UNPKG

ng-http-loader

Version:

[![CI](https://github.com/mpalourdio/ng-http-loader/actions/workflows/main.yml/badge.svg)](https://github.com/mpalourdio/ng-http-loader/actions/workflows/main.yml) [![Coverage Status](https://coveralls.io/repos/github/mpalourdio/ng-http-loader/badge.svg?b

github.com/mpalourdio/ng-http-loader

mpalourdio/ng-http-loader

354 lines (341 loc) • 60.1 kB

JavaScript

import * as i0 from '@angular/core'; import { input, Directive, Component, Injectable, model, inject } from '@angular/core'; import { NgStyle, NgComponentOutlet } from '@angular/common'; import { ReplaySubject, partition, merge, timer } from 'rxjs'; import { switchMap, debounce, distinctUntilChanged, tap, finalize } from 'rxjs/operators'; import { toSignal } from '@angular/core/rxjs-interop'; /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class AbstractLoaderDirective { backgroundColor = input(); static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AbstractLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: AbstractLoaderDirective, isStandalone: true, inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AbstractLoaderDirective, decorators: [{ type: Directive }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkChasingDotsComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkChasingDotsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkChasingDotsComponent, isStandalone: true, selector: "sk-chasing-dots", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-chasing-dots\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-child sk-dot1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-dot2\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-chasing-dots{top:50%;margin:auto;width:40px;height:40px;position:relative;text-align:center;animation:sk-chasingDotsRotate 2s infinite linear}.sk-chasing-dots .sk-child{width:60%;height:60%;display:inline-block;position:absolute;top:0;border-radius:100%;animation:sk-chasingDotsBounce 2s infinite ease-in-out}.sk-chasing-dots .sk-dot2{top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasingDotsRotate{to{transform:rotate(360deg)}}@keyframes sk-chasingDotsBounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkChasingDotsComponent, decorators: [{ type: Component, args: [{ selector: 'sk-chasing-dots', standalone: true, template: "\n\n<div class=\"sk-chasing-dots\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-child sk-dot1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-dot2\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-chasing-dots{top:50%;margin:auto;width:40px;height:40px;position:relative;text-align:center;animation:sk-chasingDotsRotate 2s infinite linear}.sk-chasing-dots .sk-child{width:60%;height:60%;display:inline-block;position:absolute;top:0;border-radius:100%;animation:sk-chasingDotsBounce 2s infinite ease-in-out}.sk-chasing-dots .sk-dot2{top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasingDotsRotate{to{transform:rotate(360deg)}}@keyframes sk-chasingDotsBounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkCubeGridComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkCubeGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkCubeGridComponent, isStandalone: true, selector: "sk-cube-grid", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-cube-grid\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-cube sk-cube1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube2\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube3\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube4\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube5\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube6\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube7\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube8\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube9\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-cube-grid{position:relative;top:50%;width:40px;height:40px;margin:auto}.sk-cube-grid .sk-cube{width:33.33%;height:33.33%;float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{animation-delay:.2s}.sk-cube-grid .sk-cube2{animation-delay:.3s}.sk-cube-grid .sk-cube3{animation-delay:.4s}.sk-cube-grid .sk-cube4{animation-delay:.1s}.sk-cube-grid .sk-cube5{animation-delay:.2s}.sk-cube-grid .sk-cube6{animation-delay:.3s}.sk-cube-grid .sk-cube7{animation-delay:0s}.sk-cube-grid .sk-cube8{animation-delay:.1s}.sk-cube-grid .sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkCubeGridComponent, decorators: [{ type: Component, args: [{ selector: 'sk-cube-grid', standalone: true, template: "\n\n<div class=\"sk-cube-grid\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-cube sk-cube1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube2\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube3\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube4\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube5\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube6\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube7\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube8\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube9\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-cube-grid{position:relative;top:50%;width:40px;height:40px;margin:auto}.sk-cube-grid .sk-cube{width:33.33%;height:33.33%;float:left;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{animation-delay:.2s}.sk-cube-grid .sk-cube2{animation-delay:.3s}.sk-cube-grid .sk-cube3{animation-delay:.4s}.sk-cube-grid .sk-cube4{animation-delay:.1s}.sk-cube-grid .sk-cube5{animation-delay:.2s}.sk-cube-grid .sk-cube6{animation-delay:.3s}.sk-cube-grid .sk-cube7{animation-delay:0s}.sk-cube-grid .sk-cube8{animation-delay:.1s}.sk-cube-grid .sk-cube9{animation-delay:.2s}@keyframes sk-cubeGridScaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkDoubleBounceComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkDoubleBounceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkDoubleBounceComponent, isStandalone: true, selector: "sk-double-bounce", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-double-bounce\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-child sk-double-bounce1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-double-bounce2\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-double-bounce{top:50%;width:40px;height:40px;position:relative;margin:auto}.sk-double-bounce .sk-child{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;animation:sk-doubleBounce 2s infinite ease-in-out}.sk-double-bounce .sk-double-bounce2{animation-delay:-1s}@keyframes sk-doubleBounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkDoubleBounceComponent, decorators: [{ type: Component, args: [{ selector: 'sk-double-bounce', standalone: true, template: "\n\n<div class=\"sk-double-bounce\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-child sk-double-bounce1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-double-bounce2\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-double-bounce{top:50%;width:40px;height:40px;position:relative;margin:auto}.sk-double-bounce .sk-child{width:100%;height:100%;border-radius:50%;background-color:#333;opacity:.6;position:absolute;top:0;left:0;animation:sk-doubleBounce 2s infinite ease-in-out}.sk-double-bounce .sk-double-bounce2{animation-delay:-1s}@keyframes sk-doubleBounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkRotatingPlaneComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkRotatingPlaneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkRotatingPlaneComponent, isStandalone: true, selector: "sk-rotating-plane", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-rotating-plane colored-parent\" [style.background-color]='backgroundColor()'></div>\n", styles: [".sk-rotating-plane{position:relative;top:50%;width:40px;height:40px;margin:auto;animation:sk-rotatePlane 1.2s infinite ease-in-out}@keyframes sk-rotatePlane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkRotatingPlaneComponent, decorators: [{ type: Component, args: [{ selector: 'sk-rotating-plane', standalone: true, template: "\n\n<div class=\"sk-rotating-plane colored-parent\" [style.background-color]='backgroundColor()'></div>\n", styles: [".sk-rotating-plane{position:relative;top:50%;width:40px;height:40px;margin:auto;animation:sk-rotatePlane 1.2s infinite ease-in-out}@keyframes sk-rotatePlane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkSpinnerPulseComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkSpinnerPulseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkSpinnerPulseComponent, isStandalone: true, selector: "sk-spinner-pulse", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-spinner sk-spinner-pulse colored-parent\" [style.background-color]='backgroundColor()'></div>\n", styles: [".sk-spinner-pulse{position:relative;top:50%;width:40px;height:40px;margin:auto;border-radius:100%;animation:sk-pulseScaleOut 1s infinite ease-in-out}@keyframes sk-pulseScaleOut{0%{transform:scale(0)}to{transform:scale(1);opacity:0}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkSpinnerPulseComponent, decorators: [{ type: Component, args: [{ selector: 'sk-spinner-pulse', standalone: true, template: "\n\n<div class=\"sk-spinner sk-spinner-pulse colored-parent\" [style.background-color]='backgroundColor()'></div>\n", styles: [".sk-spinner-pulse{position:relative;top:50%;width:40px;height:40px;margin:auto;border-radius:100%;animation:sk-pulseScaleOut 1s infinite ease-in-out}@keyframes sk-pulseScaleOut{0%{transform:scale(0)}to{transform:scale(1);opacity:0}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkThreeBounceComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkThreeBounceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkThreeBounceComponent, isStandalone: true, selector: "sk-three-bounce", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-three-bounce\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-child sk-bounce1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-bounce2\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-bounce3\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-three-bounce{top:50%;position:relative;margin:auto;width:80px;text-align:center}.sk-three-bounce .sk-child{width:20px;height:20px;border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce .sk-bounce1{animation-delay:-.32s}.sk-three-bounce .sk-bounce2{animation-delay:-.16s}@keyframes sk-three-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkThreeBounceComponent, decorators: [{ type: Component, args: [{ selector: 'sk-three-bounce', standalone: true, template: "\n\n<div class=\"sk-three-bounce\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-child sk-bounce1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-bounce2\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-child sk-bounce3\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-three-bounce{top:50%;position:relative;margin:auto;width:80px;text-align:center}.sk-three-bounce .sk-child{width:20px;height:20px;border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce .sk-bounce1{animation-delay:-.32s}.sk-three-bounce .sk-bounce2{animation-delay:-.16s}@keyframes sk-three-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkWanderingCubesComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkWanderingCubesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkWanderingCubesComponent, isStandalone: true, selector: "sk-wandering-cubes", usesInheritance: true, ngImport: i0, template: "\n\n<div class=\"sk-wandering-cubes\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-cube sk-cube1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube2\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-wandering-cubes{top:50%;margin:auto;width:40px;height:40px;position:relative}.sk-wandering-cubes .sk-cube{width:10px;height:10px;position:absolute;top:0;left:0;animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes .sk-cube2{animation-delay:-.9s}@keyframes sk-wanderingCube{0%{transform:rotate(0)}25%{transform:translate(30px) rotate(-90deg) scale(.5)}50%{transform:translate(30px) translateY(30px) rotate(-179deg)}50.1%{transform:translate(30px) translateY(30px) rotate(-180deg)}75%{transform:translate(0) translateY(30px) rotate(-270deg) scale(.5)}to{transform:rotate(-360deg)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkWanderingCubesComponent, decorators: [{ type: Component, args: [{ selector: 'sk-wandering-cubes', standalone: true, template: "\n\n<div class=\"sk-wandering-cubes\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-cube sk-cube1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-cube sk-cube2\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-wandering-cubes{top:50%;margin:auto;width:40px;height:40px;position:relative}.sk-wandering-cubes .sk-cube{width:10px;height:10px;position:absolute;top:0;left:0;animation:sk-wanderingCube 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes .sk-cube2{animation-delay:-.9s}@keyframes sk-wanderingCube{0%{transform:rotate(0)}25%{transform:translate(30px) rotate(-90deg) scale(.5)}50%{transform:translate(30px) translateY(30px) rotate(-179deg)}50.1%{transform:translate(30px) translateY(30px) rotate(-180deg)}75%{transform:translate(0) translateY(30px) rotate(-270deg) scale(.5)}to{transform:rotate(-360deg)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SkWaveComponent extends AbstractLoaderDirective { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkWaveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: SkWaveComponent, isStandalone: true, selector: "sk-wave", usesInheritance: true, ngImport: i0, template: "\n<div class=\"sk-wave\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-rect sk-rect1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect2\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect3\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect4\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect5\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-wave{position:relative;top:50%;margin:auto;width:50px;height:40px;text-align:center;font-size:10px}.sk-wave .sk-rect{float:left;margin-right:1px;height:100%;width:6px;display:inline-block;animation:sk-waveStretchDelay 1.2s infinite ease-in-out}.sk-wave .sk-rect1{animation-delay:-1.2s}.sk-wave .sk-rect2{animation-delay:-1.1s}.sk-wave .sk-rect3{animation-delay:-1s}.sk-wave .sk-rect4{animation-delay:-.9s}.sk-wave .sk-rect5{animation-delay:-.8s}@keyframes sk-waveStretchDelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}\n"] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SkWaveComponent, decorators: [{ type: Component, args: [{ selector: 'sk-wave', standalone: true, template: "\n<div class=\"sk-wave\" [class.colored]=\"!backgroundColor()\">\n <div class=\"sk-rect sk-rect1\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect2\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect3\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect4\" [style.background-color]='backgroundColor()'></div>\n <div class=\"sk-rect sk-rect5\" [style.background-color]='backgroundColor()'></div>\n</div>\n", styles: [".sk-wave{position:relative;top:50%;margin:auto;width:50px;height:40px;text-align:center;font-size:10px}.sk-wave .sk-rect{float:left;margin-right:1px;height:100%;width:6px;display:inline-block;animation:sk-waveStretchDelay 1.2s infinite ease-in-out}.sk-wave .sk-rect1{animation-delay:-1.2s}.sk-wave .sk-rect2{animation-delay:-1.1s}.sk-wave .sk-rect3{animation-delay:-1s}.sk-wave .sk-rect4{animation-delay:-.9s}.sk-wave .sk-rect5{animation-delay:-.8s}@keyframes sk-waveStretchDelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}\n"] }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ const Spinkit = { skChasingDots: 'sk-chasing-dots', skCubeGrid: 'sk-cube-grid', skDoubleBounce: 'sk-double-bounce', skRotatingPlane: 'sk-rotationg-plane', skSpinnerPulse: 'sk-spinner-pulse', skThreeBounce: 'sk-three-bounce', skWanderingCubes: 'sk-wandering-cubes', skWave: 'sk-wave' }; const SPINKIT_COMPONENTS = [ SkCubeGridComponent, SkChasingDotsComponent, SkDoubleBounceComponent, SkRotatingPlaneComponent, SkSpinnerPulseComponent, SkThreeBounceComponent, SkWanderingCubesComponent, SkWaveComponent, ]; class PendingRequestsInterceptorConfigurer { _pendingRequests = 0; _pendingRequestsStatus$ = new ReplaySubject(1); _filteredUrlPatterns = []; _filteredMethods = []; _filteredHeaders = []; _forceByPass = false; get pendingRequestsStatus$() { return this._pendingRequestsStatus$.asObservable(); } get pendingRequestsStatusSubject$() { return this._pendingRequestsStatus$; } get pendingRequests() { return this._pendingRequests; } set pendingRequests(pendingRequests) { this._pendingRequests = pendingRequests; } get filteredUrlPatterns() { return this._filteredUrlPatterns; } set filteredMethods(httpMethods) { this._filteredMethods = httpMethods; } set filteredHeaders(value) { this._filteredHeaders = value; } set forceByPass(value) { this._forceByPass = value; } shouldBypassUrl(url) { return this._filteredUrlPatterns.some(e => { return e.test(url); }); } shouldBypassMethod(req) { return this._filteredMethods.some(e => { return e.toUpperCase() === req.method.toUpperCase(); }); } shouldBypassHeader(req) { return this._filteredHeaders.some(e => { return req.headers.has(e); }); } shouldBypass(req) { return this._forceByPass || this.shouldBypassUrl(req.urlWithParams) || this.shouldBypassMethod(req) || this.shouldBypassHeader(req); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PendingRequestsInterceptorConfigurer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PendingRequestsInterceptorConfigurer, providedIn: 'root' }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PendingRequestsInterceptorConfigurer, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class SpinnerVisibilityService { pendingRequestsInterceptorConfigurer; _visibility$ = new ReplaySubject(1); constructor(pendingRequestsInterceptorConfigurer) { this.pendingRequestsInterceptorConfigurer = pendingRequestsInterceptorConfigurer; } get visibility$() { return this._visibility$.asObservable(); } show() { this.pendingRequestsInterceptorConfigurer.forceByPass = true; this._visibility$.next(true); } hide() { this._visibility$.next(false); this.pendingRequestsInterceptorConfigurer.forceByPass = false; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SpinnerVisibilityService, deps: [{ token: PendingRequestsInterceptorConfigurer }], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SpinnerVisibilityService, providedIn: 'root' }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SpinnerVisibilityService, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }], ctorParameters: () => [{ type: PendingRequestsInterceptorConfigurer }] }); /* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class NgHttpLoaderComponent { pendingRequestsInterceptorConfigurer; spinnerVisibility; spinkit = Spinkit; isVisible$; isVisible; visibleUntil = Date.now(); backdrop = input(true); backgroundColor = input(); debounceDelay = input(0); entryComponent = input(null); extraDuration = input(0); filteredHeaders = input([]); filteredMethods = input([]); filteredUrlPatterns = input([]); minDuration = input(0); opacity = input('.7'); backdropBackgroundColor = input('#f1f1f1'); spinner = model(Spinkit.skWave); constructor(pendingRequestsInterceptorConfigurer, spinnerVisibility) { this.pendingRequestsInterceptorConfigurer = pendingRequestsInterceptorConfigurer; this.spinnerVisibility = spinnerVisibility; const [showSpinner$, hideSpinner$] = partition(this.pendingRequestsInterceptorConfigurer.pendingRequestsStatus$, h => h); this.isVisible$ = merge(this.pendingRequestsInterceptorConfigurer.pendingRequestsStatus$ .pipe(switchMap(() => showSpinner$.pipe(debounce(() => timer(this.debounceDelay()))))), showSpinner$ .pipe(switchMap(() => hideSpinner$.pipe(debounce(() => this.getVisibilityTimer$())))), this.spinnerVisibility.visibility$).pipe(distinctUntilChanged(), tap(h => this.updateExpirationDelay(h))); this.isVisible = toSignal(this.isVisible$); } ngOnInit() { this.nullifySpinnerIfEntryComponentIsDefined(); this.initFilters(); } nullifySpinnerIfEntryComponentIsDefined() { if (this.entryComponent()) { this.spinner.update(() => null); } } initFilters() { this.initFilteredUrlPatterns(); this.initFilteredMethods(); this.initFilteredHeaders(); } initFilteredUrlPatterns() { if (!!this.filteredUrlPatterns().length) { this.filteredUrlPatterns().forEach(e => this.pendingRequestsInterceptorConfigurer.filteredUrlPatterns.push(new RegExp(e))); } } initFilteredMethods() { this.pendingRequestsInterceptorConfigurer.filteredMethods = this.filteredMethods(); } initFilteredHeaders() { this.pendingRequestsInterceptorConfigurer.filteredHeaders = this.filteredHeaders(); } updateExpirationDelay(showSpinner) { if (showSpinner) { this.visibleUntil = Date.now() + this.minDuration(); } } getVisibilityTimer$() { return timer(Math.max(this.extraDuration(), th