UNPKG

ngx-suspense

Version:

This library is an experimetnal implementation of React Suspense for Angular.

16 lines (14 loc) 10.8 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/animations"),require("@angular/platform-browser/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-suspense",["exports","@angular/core","rxjs","rxjs/operators","@angular/animations","@angular/platform-browser/animations","@angular/common"],e):e((t=t||self)["ngx-suspense"]={},t.ng.core,t.rxjs,t.rxjs.operators,t.ng.animations,t.ng.platformBrowser.animations,t.ng.common)}(this,(function(t,e,n,r,i,o,s){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */var a=function(){return(a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function u(t,e,n,r){var i,o=arguments.length,s=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,r);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(s=(o<3?i(s):o>3?i(e,n,s):i(e,n))||s);return o>3&&s&&Object.defineProperty(e,n,s),s}function l(t,e){return function(n,r){e(n,r,t)}}function p(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function c(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,i,o=n.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(r=o.next()).done;)s.push(r.value)}catch(t){i={error:t}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return s}function f(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(c(arguments[e]));return t}var h={busyMinDurationMs:0,busyDelayMs:0},b=new e.InjectionToken("LOADING_CONFIG_TOKEN"),d=function(){function t(t){void 0===t&&(t=h),this.userConfig=t,this.loadingSubject=new n.BehaviorSubject(!1),this.loading$=this.loadingSubject.asObservable(),this.taskStartSubject=new n.Subject,this.taskStart$=this.taskStartSubject.asObservable(),this.taskEndSubject=new n.Subject,this.taskEnd$=this.taskEndSubject.asObservable()}return t.prototype.ngOnDestroy=function(){this.sub&&"function"==typeof this.sub.unsubscribe&&this.sub.unsubscribe()},Object.defineProperty(t.prototype,"busyTimer",{set:function(t){var e=t.busyDelayMs,n=t.busyMinDurationMs;"number"==typeof e&&(this.userConfig.busyDelayMs=e),"number"==typeof n&&(this.userConfig.busyMinDurationMs=n)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"config",{get:function(){return this.userConfig},enumerable:!0,configurable:!0}),t.prototype.show=function(){this.loadingSubject.next(!0)},t.prototype.hide=function(){this.loadingSubject.next(!1)},t.prototype.controller=function(){var t=this;this.busyMinDurationTimer=n.timer(this.config.busyMinDurationMs+this.config.busyDelayMs),this.busyDelayTimer=n.timer(this.config.busyDelayMs);var e=this.taskStart$.pipe(r.switchMap((function(){return t.busyDelayTimer}))).pipe(r.takeUntil(this.taskEnd$)),i=this.taskEnd$.pipe(r.mapTo(1)),o=e.pipe(r.mapTo(-1)),s=this.busyMinDurationTimer.pipe(r.mapTo(-1)),a=n.combineLatest([i.pipe(r.startWith(null)),o.pipe(r.startWith(null))]).pipe(r.skip(1)),u=a.pipe(r.filter((function(t){var e=c(t,2),n=e[0],r=e[1];return 1===n&&null===r}))).pipe(r.mapTo(!1)),l=a.pipe(r.filter((function(t){var e=c(t,2),n=e[0],r=e[1];return null===n&&-1===r}))).pipe(r.mapTo(!0)).pipe(r.tap((function(){t.show()}))),p=n.combineLatest([i.pipe(r.startWith(null)),s.pipe(r.startWith(null))]).pipe(r.skip(1)),f=p.pipe(r.filter((function(t){var e=c(t,2),n=e[0],r=e[1];return 1===n&&null===r}))),h=p.pipe(r.filter((function(t){var e=c(t,2),n=e[0],r=e[1];return 1===n&&-1===r}))),b=n.merge(u,n.combineLatest([f,s]),h).pipe(r.tap((function(){t.hide()})));return l.pipe(r.takeUntil(b))},t.prototype.showLoadingStatus=function(){var t=this;return this.sub&&"function"==typeof this.sub.unsubscribe&&this.sub.unsubscribe(),this.sub=this.controller().subscribe(),function(e){return new n.Observable((function(i){var o=e.pipe(r.tap((function(){t.taskEndSubject.next()}))),s=n.of(null).pipe(r.tap((function(){t.taskStartSubject.next()})),r.concatMap((function(){return o})),r.shareReplay(1)).subscribe(i);return function(){s.unsubscribe()}}))}},t.prototype.showingFor=function(t){var e=this;this.sub&&"function"==typeof this.sub.unsubscribe&&this.sub.unsubscribe(),this.sub=this.controller().subscribe();var i=t.pipe(r.tap((function(){e.taskEndSubject.next()})));return n.of(null).pipe(r.tap((function(){e.taskStartSubject.next()})),r.concatMap((function(){return i})),r.shareReplay(1))},t.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[b]}]}]},t=u([e.Injectable(),l(0,e.Optional()),l(0,e.Inject(b))],t)}(),y=function(){function t(t){this.loadingService=t,this.ariaLabel="Loading...",this.isVisible=!1}return t.prototype.ngOnInit=function(){this.service=this.getService(),this.loading$=this.service.loading$},t.prototype.getService=function(){return this.bind||this.loadingService},t.prototype.show=function(){this.service.show(),this.isVisible=!0},t.prototype.hide=function(){this.service.hide(),this.isVisible=!1},t.ctorParameters=function(){return[{type:d}]},u([e.Input()],t.prototype,"fallback",void 0),u([e.Input()],t.prototype,"ariaLabel",void 0),u([e.Input()],t.prototype,"bind",void 0),u([e.Input()],t.prototype,"isVisible",void 0),t=u([e.Component({selector:"Suspense",template:'<ng-template #content>\n \x3c!-- animation doesn\'t work with ng-template, ng-content or ng-container, have to add extra div for workaround--\x3e\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:[i.trigger("fadeIn",[i.transition(":enter",[i.style({opacity:0}),i.animate("300ms ease-in",i.style({opacity:1}))])])],styles:["\n :host {\n display: block;\n }\n "]})],t)}(),g=function(){function t(){this.revealOrder="*",this.subs=[],this.allBroadcasters=[],this.allListeners=[],this.hasParentControlSubject=new n.BehaviorSubject(void 0),this.parentControl$=this.hasParentControlSubject.asObservable()}var i;return i=t,t.prototype.ngOnInit=function(){this.parentControl$.pipe(r.tap((function(t){console.log("release",t)}))).subscribe()},t.prototype.ngAfterContentInit=function(){var t=this;this.allBroadcasters=this.skeletons.map((function(t){return t.loading$})),this.allListeners=this.skeletons.map((function(e){return t.hideSkeletonListener(e)})),this.revealOrderOperator(this.revealOrder)},t.prototype.ngOnChanges=function(t){t.revealOrder&&this.revealOrderOperator(t.revealOrder.currentValue)},t.prototype.ngOnDestroy=function(){this.subs.length&&(this.subs.forEach((function(t){return t.unsubscribe()})),this.subs.length=0)},t.prototype.reload=function(t){this.revealOrderOperator(t||this.revealOrder)},t.prototype.show=function(){},t.prototype.hide=function(){},t.prototype.revealOrderOperator=function(t){if(0!==this.allBroadcasters.length&&0!==this.allListeners.length)switch(this.subs.length&&(this.subs.forEach((function(t){return t.unsubscribe()})),this.subs.length=0),t){case"together":var e=this.togetherOperator(this.allBroadcasters)(this.allListeners);this.subs.push(e);break;case"forwards":var n=this.domOrderOperator(this.allBroadcasters)(this.allListeners);this.subs=n;break;case"backwards":var r=f(this.allBroadcasters).reverse(),i=f(this.allListeners).reverse();n=this.domOrderOperator(r)(i);this.subs=n}},t.prototype.hideSkeletonListener=function(t){return function(){t.hide()}},t.prototype.showSkeletonListener=function(t){return function(){t.show()}},t.prototype.togetherOperator=function(t){var e=this;return this.skeletons.forEach((function(t){return e.showSkeletonListener(t)()})),function(e){return n.combineLatest(f(t)).pipe(r.skip(1),r.pairwise(),r.filter((function(t){var e=c(t,2),n=e[0],r=e[1],i=n.some((function(t){return t})),o=!r.some((function(t){return t}));return i&&o}))).subscribe((function(){e.forEach((function(t){return t()}))}))}},t.prototype.domOrderOperator=function(t){var e=this;return this.skeletons.forEach((function(t){return e.showSkeletonListener(t)()})),function(n){var i=[],o=f(new Array(t.length)).fill(null);return t.forEach((function(t,s){i.push(t.pipe(r.skip(1),r.pairwise(),r.filter((function(t){var e=c(t,2),n=e[0],r=e[1];return n&&!r}))).subscribe((function(){var t,r;o[s]=!0;var i=e.getFlushIndexes(o);try{for(var a=p(i),u=a.next();!u.done;u=a.next()){var l=u.value;n[l]()}}catch(e){t={error:e}}finally{try{u&&!u.done&&(r=a.return)&&r.call(a)}finally{if(t)throw t.error}}})))})),i}},t.prototype.getFlushIndexes=function(t){for(var e=[],n=0;n<t.length;n++)if(!(e.indexOf(n)>-1)){if(null===t[n])break;e.push(n)}return e},u([e.Input()],t.prototype,"revealOrder",void 0),u([e.ContentChildren(y)],t.prototype,"skeletons",void 0),u([e.ContentChildren(i)],t.prototype,"list",void 0),t=i=u([e.Component({selector:"SuspenseList",template:"<ng-content></ng-content>\n",exportAs:"list"})],t)}(),v=h,m=function(){function t(){}var n;return n=t,t.forRoot=function(t){return{ngModule:n,providers:[{provide:b,useValue:a(a({},h),t)}]}},t=n=u([e.NgModule({declarations:[g,y],imports:[o.BrowserAnimationsModule,s.CommonModule],providers:[{provide:b,useValue:v}],schemas:[e.CUSTOM_ELEMENTS_SCHEMA],exports:[y,g]})],t)}();t.LOADING_CONFIG_TOKEN=b,t.LOADING_DEFUALT_CONFIG=h,t.NgxSuspenseComponent=y,t.NgxSuspenseListComponent=g,t.NgxSuspenseModule=m,t.NgxSuspenseService=d,t.ɵ0=v,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ngx-suspense.umd.min.js.map