ngx-promise-buttons 1.0.1 → 1.0.2

package/projects/ngx-promise-buttons/src/promise-btn.directive.ts

@@ -1,247 +0,0 @@
-import {AfterContentInit, Directive, ElementRef, HostListener, Inject, Input, OnDestroy, Optional} from '@angular/core';
-import {Observable, Subscription} from 'rxjs';
-import {DEFAULT_CFG} from './default-promise-btn-config';
-import {PromiseBtnConfig} from './promise-btn-config';
-import {USER_CFG} from "./provider";
-
-@Directive({
-    selector: '[promiseBtn]',
-})
-
-export class PromiseBtnDirective implements OnDestroy, AfterContentInit {
-  cfg: PromiseBtnConfig;
-  // the timeout used for min duration display
-  minDurationTimeout: number;
-  // boolean to determine minDurationTimeout state
-  isMinDurationTimeoutDone: boolean;
-  // boolean to determine if promise was resolved
-  isPromiseDone: boolean;
-  // the promise button button element
-  btnEl: HTMLElement;
-  // the promise itself or a function expression
-  // NOTE: we need the type any here as we might deal with custom promises like bluebird
-  promise: any;
-
-  // this is added to fix the overriding of the disabled state by the loading indicator button.
-  @Input('disabled')
-  set isDisabledFromTheOutsideSetter(v: boolean) {
-    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.
-  }
-
-  isDisabledFromTheOutside: boolean;
-
-  private _fakePromiseResolve: (value: void) => void;
-
-  constructor(el: ElementRef,
-              @Optional() @Inject(USER_CFG) cfg?: PromiseBtnConfig) {
-    // provide configuration
-    this.cfg = Object.assign({}, DEFAULT_CFG, cfg);
-
-    // save element
-    this.btnEl = el.nativeElement;
-  }
-
-  @Input()
-  set promiseBtn(passedValue: any) {
-    const isObservable: boolean = passedValue instanceof Observable;
-    const isSubscription: boolean = passedValue instanceof Subscription;
-    const isBoolean: boolean = typeof passedValue === 'boolean';
-    const isPromise: boolean = 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: Subscription = 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: boolean): Promise<any> {
-    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: HTMLElement) {
-    // handle promises passed via promiseBtn attribute
-    this.appendSpinnerTpl(btnEl);
-  }
-
-  /**
-   * Checks if all required parameters are there and inits the promise handler
-   */
-  checkAndInitPromiseHandler(btnEl: HTMLElement) {
-    // check if element and promise is set
-    if (btnEl && this.promise) {
-      this.initPromiseHandler(btnEl);
-    }
-  }
-
-  /**
-   * Helper FN to add class
-   */
-  addLoadingClass(el: any) {
-    if (typeof this.cfg.btnLoadingClass === 'string') {
-      el.classList.add(this.cfg.btnLoadingClass);
-    }
-  }
-
-  /**
-   * Helper FN to remove classes
-   */
-  removeLoadingClass(el: any) {
-    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: HTMLElement) {
-    this.addLoadingClass(btnEl);
-    this.disableBtn(btnEl);
-  }
-
-  /**
-   * Handles everything to be triggered when loading is finished
-   */
-  cancelLoadingStateIfPromiseAndMinDurationDone(btnEl: HTMLElement) {
-    if ((!this.cfg.minDuration || this.isMinDurationTimeoutDone) && this.isPromiseDone) {
-      this.removeLoadingClass(btnEl);
-      this.enableBtn(btnEl);
-    }
-  }
-
-  disableBtn(btnEl: HTMLElement) {
-    if (this.cfg.disableBtn) {
-      btnEl.setAttribute('disabled', 'disabled');
-    }
-  }
-
-  enableBtn(btnEl: HTMLElement) {
-    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: HTMLElement) {
-    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: HTMLElement) {
-    // TODO add some kind of compilation later on
-    btnEl.insertAdjacentHTML('beforeend', this.cfg.spinnerTpl as string);
-  }
-
-  /**
-   * Limit loading state to show only for the currently clicked button.
-   * Executed only if this.cfg.handleCurrentBtnOnly is set
-   */
-  @HostListener('click')
-  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);
-  }
-}

package/projects/ngx-promise-buttons/src/provider.ts

@@ -1,14 +0,0 @@
-import { InjectionToken, EnvironmentProviders, makeEnvironmentProviders, Optional, SkipSelf, inject } from '@angular/core';
-import { PromiseBtnConfig } from './promise-btn-config';
-
-export const USER_CFG = new InjectionToken<PromiseBtnConfig>('Promise Button Config');
-
-export const DEFAULT_CONFIG: PromiseBtnConfig = {
-  // default values
-};
-
-export function provideNgxPromiseButtons(config: PromiseBtnConfig = DEFAULT_CONFIG): EnvironmentProviders {
-  return makeEnvironmentProviders([
-    { provide: USER_CFG, useValue: { ...DEFAULT_CONFIG, ...config } }
-  ]);
-}

package/projects/ngx-promise-buttons/src/test.ts

@@ -1,16 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/dist/async-test.js';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-
-import {getTestBed} from '@angular/core/testing';
-import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

package/projects/ngx-promise-buttons/src/user-cfg.ts

@@ -1,3 +0,0 @@
-import {InjectionToken} from '@angular/core';
-
-export const userCfg = new InjectionToken('cfg');

package/projects/ngx-promise-buttons/tsconfig.lib.json

@@ -1,27 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "annotateForClosureCompiler": false,
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true,
-    "enableIvy": true,
-    "allowEmptyCodegenFiles": true,
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/projects/ngx-promise-buttons/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "allowEmptyCodegenFiles": true,
-    "compilationMode": "partial"
-  }
-}

package/projects/ngx-promise-buttons/tsconfig.spec.json

@@ -1,17 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

package/projects/ngx-promise-buttons/tslint.json

@@ -1,25 +0,0 @@
-{
-  "extends": "../ngx-promise-buttons-demo/tslint.json",
-  "rules": {
-    "directive-selector": [
-      false,
-      "attribute",
-      "lib",
-      "camelCase"
-    ],
-    "component-selector": [
-      false,
-      "element",
-      "lib",
-      "kebab-case"
-    ],
-    "variable-name": [
-      true,
-      "allow-pascal-case",
-      "allow-snake-case",
-      "ban-keywords",
-      "check-format",
-      "allow-leading-underscore"
-    ]
-  }
-}

package/projects/ngx-promise-buttons/yarn.lock

@@ -1,9 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@ctrl/tinycolor@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-2.6.0.tgz#c269def5ed1f871913f299a475c01bdb39119eee"
-  integrity sha512-bvkszNAcbmR2zrjjkaHbTVbEj07Id44HsBWf57mugPcvJNIPaWLqxWV/GUJVJuXXayqFP2X09cZRqKrCy/v10Q==
-

package/projects/ngx-promise-buttons-demo/e2e/protractor.conf.js

@@ -1,30 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  beforeLaunch: function() {
-    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
-    });
-  },
-  onPrepare() {
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

package/projects/ngx-promise-buttons-demo/e2e/tsconfig.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}

package/projects/ngx-promise-buttons-demo/karma.conf.js

@@ -1,56 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '../..',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: false,
-    browsers: ['ChromeHeadless'],
-    singleRun: true,
-    customLaunchers: {
-      'ChromeHeadless': {
-        base: 'Chrome',
-        flags: [
-          // We must disable the Chrome sandbox when running Chrome inside Docker
-          // (Chrome's sandbox needs more permissions than Docker allows by default)
-          '--headless',
-          '--no-sandbox',
-          '--disable-gpu',
-          '--no-default-browser-check',
-          '--no-first-run',
-          '--disable-default-apps',
-          '--disable-popup-blocking',
-          '--disable-translate',
-          '--disable-background-timer-throttling',
-          '--disable-renderer-backgrounding',
-          '--disable-device-discovery-notifications',
-          // Without a remote debugging port, Google Chrome exits immediately.
-          '--remote-debugging-port=9222',
-          '--disable-web-security',
-        ],
-        debug: true
-      }
-    },
-    browserNoActivityTimeout: 120000,
-  });
-};

package/projects/ngx-promise-buttons-demo/src/app/app.component.css

@@ -1,6 +0,0 @@
-h2 {
-  margin-top: 16px;
-}
-h3 {
-  margin-top: 16px;
-}

package/projects/ngx-promise-buttons-demo/src/app/app.component.html

@@ -1,109 +0,0 @@
-<button class="btn btn-raised"
-        (click)="success($event)"
-        [promiseBtn]="successPromise">Success after delay
-</button>
-<button class="btn btn-raised"
-        (click)="error()"
-        [promiseBtn]="errorPromise">Error after delay
-</button>
-<br>
-<br>
-<button class="btn btn-raised"
-        (click)="endless()"
-        [promiseBtn]="endlessPromise">Never resolving promise
-</button>
-<button class="btn btn-raised"
-        [promiseBtn]="endlessInitialPromise">Loading initially and forever
-</button>
-
-<h3>Same promise buttons</h3>
-<button class="btn btn-raised"
-        (click)="success($event)"
-        [promiseBtn]="successPromise">We
-</button>
-<button class="btn btn-raised"
-        (click)="success($event)"
-        [promiseBtn]="successPromise">share
-</button>
-
-<h3>Chained promise buttons</h3>
-<button class="btn btn-raised"
-        (click)="chain()"
-        [promiseBtn]="chainedPromises">Load promise chain {{ promiseIndex }}
-</button>
-
-
-<h3>Inside a form</h3>
-<form (submit)="submit()"
-      novalidate>
-  <button class="btn btn-raised"
-          type="submit"
-          [promiseBtn]="submitPromise">Submit
-  </button>
-</form>
-
-<div>
-  <h2>Observable</h2>
-
-  <button class="btn btn-raised"
-          (click)="initSuccessObservable()"
-          [promiseBtn]="successObservable">Success after delay
-  </button>
-  <button class="btn btn-raised"
-          (click)="initErrorObservable()"
-          [promiseBtn]="errorObservable">Error after delay
-  </button>
-  <br>
-  <br>
-  <button class="btn btn-raised"
-          (click)="initEndlessObservable()"
-          [promiseBtn]="endlessObservable">Never resolving Observable
-  </button>
-  <button class="btn btn-raised"
-          [promiseBtn]="endlessInitialObservable">Loading initially and forever
-  </button>
-
-  <h3>Same observable buttons</h3>
-  <button class="btn btn-raised"
-          (click)="initSuccessObservable()"
-          [promiseBtn]="successObservable">We
-  </button>
-  <button class="btn btn-raised"
-          (click)="initSuccessObservable()"
-          [promiseBtn]="successObservable">share
-  </button>
-
-  <h3>Chained observable button</h3>
-  <button class="btn btn-raised"
-          (click)="initChainedObservable()"
-          [promiseBtn]="chainedObservable">Observable chain {{ chainedObservableValue }}
-  </button>
-</div>
-
-<div>
-  <h2>Simple Boolean</h2>
-  <button class="btn btn-raised"
-          (click)="myBool=!myBool">Toggle loading ({{myBool}})
-  </button>
-
-  <button class="btn btn-raised"
-          [promiseBtn]="myBool">My Boolean Btn {{myBool}}
-  </button>
-</div>
-
-
-<div>
-  <h2>Dynamic [disabled] </h2>
-
-  <button class="btn btn-raised"
-          (click)="isOutsideDisabled=!isOutsideDisabled">Toggle disabled via [disabled]={{isOutsideDisabled}}
-  </button>
-
-  <button class="btn btn-raised"
-          (click)="myBoolWithCustomDisabled=!myBoolWithCustomDisabled">Toggle promise button
-  </button>
-
-  <button class="btn btn-raised"
-          [disabled]="isOutsideDisabled"
-          [promiseBtn]="myBoolWithCustomDisabled">This is the button</button>
-</div>

package/projects/ngx-promise-buttons-demo/src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import {async, TestBed} from '@angular/core/testing';
-import {AppComponent} from './app.component';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-
-// @Directive({
-//   selector: '[promiseBtn]'
-// })
-// class MockPromiseBtnDirective {
-//   @Input('promiseBtn') promise: Promise<any>;
-// }
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-        // MockPromiseBtnDirective
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-});
-