angular-button-loader/fesm2015/angular-button-loader.js

Angular directive to display loading spinner on button and disable the button while performing async calls. It supports Angular 4+.

import { Subject } from 'rxjs';
import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2, NgModule } from '@angular/core';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AngularButtonLoaderService {
    constructor() {
        this.load = new Subject();
    }
    /**
     * @return {?}
     */
    displayLoader() {
        this.load.next(true);
    }
    /**
     * @return {?}
     */
    hideLoader() {
        this.load.next(false);
    }
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AngularButtonLoaderDirective {
    /**
     * @param {?} loaderService
     * @param {?} elementRef
     * @param {?} renderer
     */
    constructor(loaderService, elementRef, renderer) {
        this.loaderService = loaderService;
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.disableProperty = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onClick(event) {
        /** @type {?} */
        const span = this.elementRef.nativeElement.querySelector('span');
        this.subscription = this.loaderService.load.subscribe((/**
         * @param {?} flag
         * @return {?}
         */
        (flag) => {
            this.disableProperty = flag;
            if (flag) {
                this.renderer.addClass(span, 'loader');
                if (this.loaderColor) {
                    this.renderer.setStyle(span, 'border-color', this.loaderColor);
                }
                else {
                    this.renderer.setStyle(span, 'border-color', '#0288d1');
                }
                this.renderer.addClass(this.elementRef.nativeElement, 'loader-btn');
            }
            else {
                this.renderer.removeAttribute(span, 'class');
                this.subscription.unsubscribe();
            }
        }));
    }
    /**
     * @return {?}
     */
    ngOnInit() { }
}
AngularButtonLoaderDirective.decorators = [
    { type: Directive, args: [{
                selector: '[buttonLoader]',
            },] }
];
/** @nocollapse */
AngularButtonLoaderDirective.ctorParameters = () => [
    { type: AngularButtonLoaderService },
    { type: ElementRef },
    { type: Renderer2 }
];
AngularButtonLoaderDirective.propDecorators = {
    disableProperty: [{ type: HostBinding, args: ['disabled',] }],
    loaderColor: [{ type: Input }],
    onClick: [{ type: HostListener, args: ['click',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AngularButtonLoaderModule {
    /**
     * @return {?}
     */
    static forRoot() {
        return {
            ngModule: AngularButtonLoaderModule,
            providers: [AngularButtonLoaderService]
        };
    }
}
AngularButtonLoaderModule.decorators = [
    { type: NgModule, args: [{
                declarations: [AngularButtonLoaderDirective],
                imports: [],
                exports: [AngularButtonLoaderDirective],
                providers: []
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { AngularButtonLoaderService, AngularButtonLoaderModule, AngularButtonLoaderDirective as ɵa };

//# sourceMappingURL=angular-button-loader.js.map