angular-button-loader
Version:
Angular directive to display loading spinner on button and disable the button while performing async calls. It supports Angular 4+.
97 lines • 7.23 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
import { AngularButtonLoaderService } from './angular-button-loader.service';
var AngularButtonLoaderDirective = /** @class */ (function () {
function AngularButtonLoaderDirective(loaderService, elementRef, renderer) {
this.loaderService = loaderService;
this.elementRef = elementRef;
this.renderer = renderer;
this.disableProperty = false;
}
/**
* @param {?} event
* @return {?}
*/
AngularButtonLoaderDirective.prototype.onClick = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
/** @type {?} */
var span = this.elementRef.nativeElement.querySelector('span');
this.subscription = this.loaderService.load.subscribe((/**
* @param {?} flag
* @return {?}
*/
function (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 {?}
*/
AngularButtonLoaderDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
AngularButtonLoaderDirective.decorators = [
{ type: Directive, args: [{
selector: '[buttonLoader]',
},] }
];
/** @nocollapse */
AngularButtonLoaderDirective.ctorParameters = function () { return [
{ type: AngularButtonLoaderService },
{ type: ElementRef },
{ type: Renderer2 }
]; };
AngularButtonLoaderDirective.propDecorators = {
disableProperty: [{ type: HostBinding, args: ['disabled',] }],
loaderColor: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click',] }]
};
return AngularButtonLoaderDirective;
}());
export { AngularButtonLoaderDirective };
if (false) {
/** @type {?} */
AngularButtonLoaderDirective.prototype.disableProperty;
/** @type {?} */
AngularButtonLoaderDirective.prototype.subscription;
/** @type {?} */
AngularButtonLoaderDirective.prototype.loaderColor;
/**
* @type {?}
* @private
*/
AngularButtonLoaderDirective.prototype.loaderService;
/**
* @type {?}
* @private
*/
AngularButtonLoaderDirective.prototype.elementRef;
/**
* @type {?}
* @private
*/
AngularButtonLoaderDirective.prototype.renderer;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1idXR0b24tbG9hZGVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItYnV0dG9uLWxvYWRlci8iLCJzb3VyY2VzIjpbImxpYi9hbmd1bGFyLWJ1dHRvbi1sb2FkZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXBILE9BQU8sRUFBQywwQkFBMEIsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBRzNFO0lBK0JFLHNDQUFvQixhQUF5QyxFQUFVLFVBQTJCLEVBQzlFLFFBQW1CO1FBRG5CLGtCQUFhLEdBQWIsYUFBYSxDQUE0QjtRQUFVLGVBQVUsR0FBVixVQUFVLENBQWlCO1FBQzlFLGFBQVEsR0FBUixRQUFRLENBQVc7UUEzQmQsb0JBQWUsR0FBRyxLQUFLLENBQUM7SUEyQlAsQ0FBQzs7Ozs7SUF2QnBCLDhDQUFPOzs7O0lBQTlCLFVBQStCLEtBQVk7UUFBM0MsaUJBb0JDOztZQW5CTyxJQUFJLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQztRQUNoRSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFNBQVM7Ozs7UUFDbkQsVUFBQyxJQUFhO1lBQ1osS0FBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7WUFDNUIsSUFBSSxJQUFJLEVBQUU7Z0JBQ1IsS0FBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDO2dCQUN2QyxJQUFJLEtBQUksQ0FBQyxXQUFXLEVBQUU7b0JBQ3BCLEtBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxjQUFjLEVBQUUsS0FBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2lCQUNoRTtxQkFBTTtvQkFDTCxLQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsY0FBYyxFQUFFLFNBQVMsQ0FBQyxDQUFDO2lCQUN6RDtnQkFDRCxLQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxLQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxZQUFZLENBQUMsQ0FBQzthQUVyRTtpQkFBTTtnQkFDTCxLQUFJLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLENBQUM7Z0JBQzdDLEtBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7YUFDakM7UUFDSCxDQUFDLEVBQ0YsQ0FBQztJQUNKLENBQUM7Ozs7SUFLRCwrQ0FBUTs7O0lBQVIsY0FBWSxDQUFDOztnQkFsQ2QsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7aUJBQzNCOzs7O2dCQUxPLDBCQUEwQjtnQkFGZixVQUFVO2dCQUF1RCxTQUFTOzs7a0NBVTFGLFdBQVcsU0FBQyxVQUFVOzhCQUV0QixLQUFLOzBCQUVMLFlBQVksU0FBQyxPQUFPOztJQTBCdkIsbUNBQUM7Q0FBQSxBQW5DRCxJQW1DQztTQS9CWSw0QkFBNEI7OztJQUN2Qyx1REFBaUQ7O0lBQ2pELG9EQUEyQjs7SUFDM0IsbURBQTZCOzs7OztJQXdCakIscURBQWlEOzs7OztJQUFFLGtEQUFtQzs7Ozs7SUFDdEYsZ0RBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgUmVuZGVyZXIyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7U3Vic2NyaXB0aW9ufSBmcm9tICdyeGpzJztcbmltcG9ydCB7QW5ndWxhckJ1dHRvbkxvYWRlclNlcnZpY2V9IGZyb20gJy4vYW5ndWxhci1idXR0b24tbG9hZGVyLnNlcnZpY2UnO1xuaW1wb3J0IHtFdmVudH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2J1dHRvbkxvYWRlcl0nLFxufSlcblxuZXhwb3J0IGNsYXNzIEFuZ3VsYXJCdXR0b25Mb2FkZXJEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQge1xuICBASG9zdEJpbmRpbmcoJ2Rpc2FibGVkJykgZGlzYWJsZVByb3BlcnR5ID0gZmFsc2U7XG4gIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuICBASW5wdXQoKSBsb2FkZXJDb2xvcjogc3RyaW5nO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJykgb25DbGljayhldmVudDogRXZlbnQpIHtcbiAgICBjb25zdCBzcGFuID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3Rvcignc3BhbicpO1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5sb2FkZXJTZXJ2aWNlLmxvYWQuc3Vic2NyaWJlKFxuICAgICAgKGZsYWc6IGJvb2xlYW4pID0+IHtcbiAgICAgICAgdGhpcy5kaXNhYmxlUHJvcGVydHkgPSBmbGFnO1xuICAgICAgICBpZiAoZmxhZykge1xuICAgICAgICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3Moc3BhbiwgJ2xvYWRlcicpO1xuICAgICAgICAgIGlmICh0aGlzLmxvYWRlckNvbG9yKSB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHNwYW4sICdib3JkZXItY29sb3InLCB0aGlzLmxvYWRlckNvbG9yKTtcbiAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShzcGFuLCAnYm9yZGVyLWNvbG9yJywgJyMwMjg4ZDEnKTtcbiAgICAgICAgICB9XG4gICAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2xvYWRlci1idG4nKTtcblxuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQXR0cmlidXRlKHNwYW4sICdjbGFzcycpO1xuICAgICAgICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICApO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBsb2FkZXJTZXJ2aWNlOiBBbmd1bGFyQnV0dG9uTG9hZGVyU2VydmljZSwgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPGFueT4sXG4gICAgICAgICAgICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge31cblxuICBuZ09uSW5pdCgpIHt9XG59XG4iXX0=