angular-button-loader
Version:
Angular directive to display loading spinner on button and disable the button while performing async calls. It supports Angular 4+.
92 lines • 6.82 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';
export 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',] }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1idXR0b24tbG9hZGVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItYnV0dG9uLWxvYWRlci8iLCJzb3VyY2VzIjpbImxpYi9hbmd1bGFyLWJ1dHRvbi1sb2FkZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXBILE9BQU8sRUFBQywwQkFBMEIsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBTzNFLE1BQU0sT0FBTyw0QkFBNEI7Ozs7OztJQTJCdkMsWUFBb0IsYUFBeUMsRUFBVSxVQUEyQixFQUM5RSxRQUFtQjtRQURuQixrQkFBYSxHQUFiLGFBQWEsQ0FBNEI7UUFBVSxlQUFVLEdBQVYsVUFBVSxDQUFpQjtRQUM5RSxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBM0JkLG9CQUFlLEdBQUcsS0FBSyxDQUFDO0lBMkJQLENBQUM7Ozs7O0lBdkJwQixPQUFPLENBQUMsS0FBWTs7Y0FDbkMsSUFBSSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUM7UUFDaEUsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxTQUFTOzs7O1FBQ25ELENBQUMsSUFBYSxFQUFFLEVBQUU7WUFDaEIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7WUFDNUIsSUFBSSxJQUFJLEVBQUU7Z0JBQ1IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDO2dCQUN2QyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7b0JBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxjQUFjLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2lCQUNoRTtxQkFBTTtvQkFDTCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsY0FBYyxFQUFFLFNBQVMsQ0FBQyxDQUFDO2lCQUN6RDtnQkFDRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxZQUFZLENBQUMsQ0FBQzthQUVyRTtpQkFBTTtnQkFDTCxJQUFJLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLENBQUM7Z0JBQzdDLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7YUFDakM7UUFDSCxDQUFDLEVBQ0YsQ0FBQztJQUNKLENBQUM7Ozs7SUFLRCxRQUFRLEtBQUksQ0FBQzs7O1lBbENkLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO2FBQzNCOzs7O1lBTE8sMEJBQTBCO1lBRmYsVUFBVTtZQUF1RCxTQUFTOzs7OEJBVTFGLFdBQVcsU0FBQyxVQUFVOzBCQUV0QixLQUFLO3NCQUVMLFlBQVksU0FBQyxPQUFPOzs7O0lBSnJCLHVEQUFpRDs7SUFDakQsb0RBQTJCOztJQUMzQixtREFBNkI7Ozs7O0lBd0JqQixxREFBaUQ7Ozs7O0lBQUUsa0RBQW1DOzs7OztJQUN0RixnREFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBSZW5kZXJlcjJ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtTdWJzY3JpcHRpb259IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtBbmd1bGFyQnV0dG9uTG9hZGVyU2VydmljZX0gZnJvbSAnLi9hbmd1bGFyLWJ1dHRvbi1sb2FkZXIuc2VydmljZSc7XG5pbXBvcnQge0V2ZW50fSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbYnV0dG9uTG9hZGVyXScsXG59KVxuXG5leHBvcnQgY2xhc3MgQW5ndWxhckJ1dHRvbkxvYWRlckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBIb3N0QmluZGluZygnZGlzYWJsZWQnKSBkaXNhYmxlUHJvcGVydHkgPSBmYWxzZTtcbiAgc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG4gIEBJbnB1dCgpIGxvYWRlckNvbG9yOiBzdHJpbmc7XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKSBvbkNsaWNrKGV2ZW50OiBFdmVudCkge1xuICAgIGNvbnN0IHNwYW4gPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCdzcGFuJyk7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24gPSB0aGlzLmxvYWRlclNlcnZpY2UubG9hZC5zdWJzY3JpYmUoXG4gICAgICAoZmxhZzogYm9vbGVhbikgPT4ge1xuICAgICAgICB0aGlzLmRpc2FibGVQcm9wZXJ0eSA9IGZsYWc7XG4gICAgICAgIGlmIChmbGFnKSB7XG4gICAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyhzcGFuLCAnbG9hZGVyJyk7XG4gICAgICAgICAgaWYgKHRoaXMubG9hZGVyQ29sb3IpIHtcbiAgICAgICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoc3BhbiwgJ2JvcmRlci1jb2xvcicsIHRoaXMubG9hZGVyQ29sb3IpO1xuICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHNwYW4sICdib3JkZXItY29sb3InLCAnIzAyODhkMScpO1xuICAgICAgICAgIH1cbiAgICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnbG9hZGVyLWJ0bicpO1xuXG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVBdHRyaWJ1dGUoc3BhbiwgJ2NsYXNzJyk7XG4gICAgICAgICAgdGhpcy5zdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICk7XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGxvYWRlclNlcnZpY2U6IEFuZ3VsYXJCdXR0b25Mb2FkZXJTZXJ2aWNlLCBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8YW55PixcbiAgICAgICAgICAgICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxuXG4gIG5nT25Jbml0KCkge31cbn1cbiJdfQ==