ngx-suspense
Version:
This library is an experimetnal implementation of React Suspense for Angular.
61 lines • 6.27 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from "@angular/core";
import { trigger, transition, style, animate } from "@angular/animations";
import { NgxSuspenseService } from "./ngx-suspense.service";
var NgxSuspenseComponent = /** @class */ (function () {
function NgxSuspenseComponent(loadingService) {
this.loadingService = loadingService;
this.ariaLabel = "Loading...";
this.isVisible = false;
}
NgxSuspenseComponent.prototype.ngOnInit = function () {
this.service = this.getService();
this.loading$ = this.service.loading$;
};
NgxSuspenseComponent.prototype.getService = function () {
return this.bind || this.loadingService;
};
NgxSuspenseComponent.prototype.show = function () {
this.service.show();
this.isVisible = true;
};
NgxSuspenseComponent.prototype.hide = function () {
this.service.hide();
this.isVisible = false;
};
NgxSuspenseComponent.ctorParameters = function () { return [
{ type: NgxSuspenseService }
]; };
__decorate([
Input()
], NgxSuspenseComponent.prototype, "fallback", void 0);
__decorate([
Input()
], NgxSuspenseComponent.prototype, "ariaLabel", void 0);
__decorate([
Input()
], NgxSuspenseComponent.prototype, "bind", void 0);
__decorate([
Input()
], NgxSuspenseComponent.prototype, "isVisible", void 0);
NgxSuspenseComponent = __decorate([
Component({
selector: "Suspense",
template: "<ng-template #content>\n <!-- animation doesn't work with ng-template, ng-content or ng-container, have to add extra div for workaround-->\n <div [@fadeIn]>\n <ng-content></ng-content>\n </div>\n</ng-template>\n\n<div\n *ngIf=\"(loading$ | async) || isVisible; else content\"\n role=\"alert\"\n aria-busy=\"true\"\n aria-hidden=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container *ngTemplateOutlet=\"fallback\"></ng-container>\n</div>\n",
animations: [
trigger("fadeIn", [
transition(":enter", [
style({ opacity: 0 }),
animate("300ms ease-in", style({
opacity: 1,
})),
]),
]),
],
styles: ["\n :host {\n display: block;\n }\n "]
})
], NgxSuspenseComponent);
return NgxSuspenseComponent;
}());
export { NgxSuspenseComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXN1c3BlbnNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1zdXNwZW5zZS8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtc3VzcGVuc2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUEyQjVEO0lBU0UsOEJBQW9CLGNBQWtDO1FBQWxDLG1CQUFjLEdBQWQsY0FBYyxDQUFvQjtRQVA3QyxjQUFTLEdBQVcsWUFBWSxDQUFDO1FBRWpDLGNBQVMsR0FBWSxLQUFLLENBQUM7SUFLcUIsQ0FBQztJQUUxRCx1Q0FBUSxHQUFSO1FBQ0UsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztJQUN4QyxDQUFDO0lBRUQseUNBQVUsR0FBVjtRQUNFLE9BQU8sSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzFDLENBQUM7SUFFRCxtQ0FBSSxHQUFKO1FBQ0UsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUN4QixDQUFDO0lBRUQsbUNBQUksR0FBSjtRQUNFLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQzs7Z0JBbkJtQyxrQkFBa0I7O0lBUjdDO1FBQVIsS0FBSyxFQUFFOzBEQUE0QjtJQUMzQjtRQUFSLEtBQUssRUFBRTsyREFBa0M7SUFDakM7UUFBUixLQUFLLEVBQUU7c0RBQTBCO0lBQ3pCO1FBQVIsS0FBSyxFQUFFOzJEQUE0QjtJQUp6QixvQkFBb0I7UUF4QmhDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxVQUFVO1lBQ3BCLHVkQUE0QztZQVE1QyxVQUFVLEVBQUU7Z0JBQ1YsT0FBTyxDQUFDLFFBQVEsRUFBRTtvQkFDaEIsVUFBVSxDQUFDLFFBQVEsRUFBRTt3QkFDbkIsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDO3dCQUNyQixPQUFPLENBQ0wsZUFBZSxFQUNmLEtBQUssQ0FBQzs0QkFDSixPQUFPLEVBQUUsQ0FBQzt5QkFDWCxDQUFDLENBQ0g7cUJBQ0YsQ0FBQztpQkFDSCxDQUFDO2FBQ0g7cUJBbEJDLHlEQUlDO1NBZUosQ0FBQztPQUNXLG9CQUFvQixDQTZCaEM7SUFBRCwyQkFBQztDQUFBLEFBN0JELElBNkJDO1NBN0JZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgdHJpZ2dlciwgdHJhbnNpdGlvbiwgc3R5bGUsIGFuaW1hdGUgfSBmcm9tIFwiQGFuZ3VsYXIvYW5pbWF0aW9uc1wiO1xuaW1wb3J0IHsgTmd4U3VzcGVuc2VTZXJ2aWNlIH0gZnJvbSBcIi4vbmd4LXN1c3BlbnNlLnNlcnZpY2VcIjtcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tIFwicnhqc1wiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiU3VzcGVuc2VcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9uZ3gtc3VzcGVuc2UuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgOmhvc3Qge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcihcImZhZGVJblwiLCBbXG4gICAgICB0cmFuc2l0aW9uKFwiOmVudGVyXCIsIFtcbiAgICAgICAgc3R5bGUoeyBvcGFjaXR5OiAwIH0pLFxuICAgICAgICBhbmltYXRlKFxuICAgICAgICAgIFwiMzAwbXMgZWFzZS1pblwiLFxuICAgICAgICAgIHN0eWxlKHtcbiAgICAgICAgICAgIG9wYWNpdHk6IDEsXG4gICAgICAgICAgfSlcbiAgICAgICAgKSxcbiAgICAgIF0pLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTdXNwZW5zZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGZhbGxiYWNrOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBASW5wdXQoKSBhcmlhTGFiZWw6IHN0cmluZyA9IFwiTG9hZGluZy4uLlwiO1xuICBASW5wdXQoKSBiaW5kOiBOZ3hTdXNwZW5zZVNlcnZpY2U7XG4gIEBJbnB1dCgpIGlzVmlzaWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIGxvYWRpbmckOiBPYnNlcnZhYmxlPGJvb2xlYW4+O1xuICBzZXJ2aWNlOiBOZ3hTdXNwZW5zZVNlcnZpY2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBsb2FkaW5nU2VydmljZTogTmd4U3VzcGVuc2VTZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2VydmljZSA9IHRoaXMuZ2V0U2VydmljZSgpO1xuICAgIHRoaXMubG9hZGluZyQgPSB0aGlzLnNlcnZpY2UubG9hZGluZyQ7XG4gIH1cblxuICBnZXRTZXJ2aWNlKCkge1xuICAgIHJldHVybiB0aGlzLmJpbmQgfHwgdGhpcy5sb2FkaW5nU2VydmljZTtcbiAgfVxuXG4gIHNob3coKSB7XG4gICAgdGhpcy5zZXJ2aWNlLnNob3coKTtcbiAgICB0aGlzLmlzVmlzaWJsZSA9IHRydWU7XG4gIH1cblxuICBoaWRlKCkge1xuICAgIHRoaXMuc2VydmljZS5oaWRlKCk7XG4gICAgdGhpcy5pc1Zpc2libGUgPSBmYWxzZTtcbiAgfVxufVxuIl19