ngx-suspense
Version:
This library is an experimetnal implementation of React Suspense for Angular.
64 lines • 5.87 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";
let NgxSuspenseComponent = class NgxSuspenseComponent {
constructor(loadingService) {
this.loadingService = loadingService;
this.ariaLabel = "Loading...";
this.isVisible = false;
}
ngOnInit() {
this.service = this.getService();
this.loading$ = this.service.loading$;
}
getService() {
return this.bind || this.loadingService;
}
show() {
this.service.show();
this.isVisible = true;
}
hide() {
this.service.hide();
this.isVisible = false;
}
};
NgxSuspenseComponent.ctorParameters = () => [
{ 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: [`
:host {
display: block;
}
`]
})
], NgxSuspenseComponent);
export { NgxSuspenseComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXN1c3BlbnNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1zdXNwZW5zZS8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtc3VzcGVuc2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUEyQjVELElBQWEsb0JBQW9CLEdBQWpDLE1BQWEsb0JBQW9CO0lBUy9CLFlBQW9CLGNBQWtDO1FBQWxDLG1CQUFjLEdBQWQsY0FBYyxDQUFvQjtRQVA3QyxjQUFTLEdBQVcsWUFBWSxDQUFDO1FBRWpDLGNBQVMsR0FBWSxLQUFLLENBQUM7SUFLcUIsQ0FBQztJQUUxRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztJQUN4QyxDQUFDO0lBRUQsVUFBVTtRQUNSLE9BQU8sSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzFDLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFBSTtRQUNGLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQztDQUNGLENBQUE7O1lBcEJxQyxrQkFBa0I7O0FBUjdDO0lBQVIsS0FBSyxFQUFFO3NEQUE0QjtBQUMzQjtJQUFSLEtBQUssRUFBRTt1REFBa0M7QUFDakM7SUFBUixLQUFLLEVBQUU7a0RBQTBCO0FBQ3pCO0lBQVIsS0FBSyxFQUFFO3VEQUE0QjtBQUp6QixvQkFBb0I7SUF4QmhDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxVQUFVO1FBQ3BCLHVkQUE0QztRQVE1QyxVQUFVLEVBQUU7WUFDVixPQUFPLENBQUMsUUFBUSxFQUFFO2dCQUNoQixVQUFVLENBQUMsUUFBUSxFQUFFO29CQUNuQixLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUM7b0JBQ3JCLE9BQU8sQ0FDTCxlQUFlLEVBQ2YsS0FBSyxDQUFDO3dCQUNKLE9BQU8sRUFBRSxDQUFDO3FCQUNYLENBQUMsQ0FDSDtpQkFDRixDQUFDO2FBQ0gsQ0FBQztTQUNIO2lCQWxCQzs7OztLQUlDO0tBZUosQ0FBQztHQUNXLG9CQUFvQixDQTZCaEM7U0E3Qlksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyB0cmlnZ2VyLCB0cmFuc2l0aW9uLCBzdHlsZSwgYW5pbWF0ZSB9IGZyb20gXCJAYW5ndWxhci9hbmltYXRpb25zXCI7XG5pbXBvcnQgeyBOZ3hTdXNwZW5zZVNlcnZpY2UgfSBmcm9tIFwiLi9uZ3gtc3VzcGVuc2Uuc2VydmljZVwiO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gXCJyeGpzXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJTdXNwZW5zZVwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL25neC1zdXNwZW5zZS5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICA6aG9zdCB7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgfVxuICAgIGAsXG4gIF0sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKFwiZmFkZUluXCIsIFtcbiAgICAgIHRyYW5zaXRpb24oXCI6ZW50ZXJcIiwgW1xuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAgfSksXG4gICAgICAgIGFuaW1hdGUoXG4gICAgICAgICAgXCIzMDBtcyBlYXNlLWluXCIsXG4gICAgICAgICAgc3R5bGUoe1xuICAgICAgICAgICAgb3BhY2l0eTogMSxcbiAgICAgICAgICB9KVxuICAgICAgICApLFxuICAgICAgXSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE5neFN1c3BlbnNlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgZmFsbGJhY2s6IFRlbXBsYXRlUmVmPGFueT47XG4gIEBJbnB1dCgpIGFyaWFMYWJlbDogc3RyaW5nID0gXCJMb2FkaW5nLi4uXCI7XG4gIEBJbnB1dCgpIGJpbmQ6IE5neFN1c3BlbnNlU2VydmljZTtcbiAgQElucHV0KCkgaXNWaXNpYmxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgbG9hZGluZyQ6IE9ic2VydmFibGU8Ym9vbGVhbj47XG4gIHNlcnZpY2U6IE5neFN1c3BlbnNlU2VydmljZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGxvYWRpbmdTZXJ2aWNlOiBOZ3hTdXNwZW5zZVNlcnZpY2UpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXJ2aWNlID0gdGhpcy5nZXRTZXJ2aWNlKCk7XG4gICAgdGhpcy5sb2FkaW5nJCA9IHRoaXMuc2VydmljZS5sb2FkaW5nJDtcbiAgfVxuXG4gIGdldFNlcnZpY2UoKSB7XG4gICAgcmV0dXJuIHRoaXMuYmluZCB8fCB0aGlzLmxvYWRpbmdTZXJ2aWNlO1xuICB9XG5cbiAgc2hvdygpIHtcbiAgICB0aGlzLnNlcnZpY2Uuc2hvdygpO1xuICAgIHRoaXMuaXNWaXNpYmxlID0gdHJ1ZTtcbiAgfVxuXG4gIGhpZGUoKSB7XG4gICAgdGhpcy5zZXJ2aWNlLmhpZGUoKTtcbiAgICB0aGlzLmlzVmlzaWJsZSA9IGZhbHNlO1xuICB9XG59XG4iXX0=