ems-web-app-loader
Version:
The embedded angular.io component and service expose an interface for rendering a modal overlay and loader animation during server transactions.
1 lines • 14.3 kB
Source Map (JSON)
{"version":3,"file":"ems-web-app-loader.mjs","sources":["../../src/lib/loader.classes.ts","../../src/lib/loader.service.ts","../../src/lib/loader.component.ts","../../src/lib/loader.component.html","../../src/lib/loader.module.ts","../../src/projects.ts","../../src/ems-web-app-loader.ts"],"sourcesContent":["export enum LoaderType {\n Spinner = \"spinner\",\n Ellipsis = \"ellipsis\"\n}\n\nexport interface ILoaderRequest {\n render: boolean,\n type?: LoaderType\n}","import { Injectable } from '@angular/core';\nimport { Observable, Subject, BehaviorSubject, throwError, of } from 'rxjs';\nimport { LoaderType, ILoaderRequest } from \"./loader.classes\";\n\n@Injectable({\n providedIn: 'root'\n})\nexport class LoaderService {\n\n private type: LoaderType = LoaderType.Spinner;\n private loader:BehaviorSubject<ILoaderRequest> = new BehaviorSubject<ILoaderRequest>({ type: LoaderType.Spinner, render: false });\n public loader$ = this.loader.asObservable();\n\n public load(render: boolean, type: LoaderType = LoaderType.Spinner) {\n this.type = type;\n this.loader.next({ render, type});\n }\n\n public show() {\n this.load(true, this.type);\n } \n\n public hide() {\n this.load(false, this.type);\n }\n}\n","import { Component, Input, OnInit, AfterViewInit, OnChanges, SimpleChanges, HostBinding } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { LoaderService } from \"./loader.service\";\nimport { LoaderType } from \"./loader.classes\";\n\n@Component({\n selector: 'loader',\n templateUrl: 'loader.component.html',\n styleUrls: ['loader.component.less']\n})\nexport class LoaderComponent implements OnInit, AfterViewInit, OnChanges {\n\n @HostBinding('class.showLoader') showLoader: boolean = false;\n @HostBinding('class.transparent') transparent: boolean = true;\n @HostBinding('class.spinner') spinner: boolean = true;\n @HostBinding('class.ellipsis') ellipsis: boolean = false;\n @Input(\"transition-speed\") speed: number = 1000;\n @Input(\"animation-duration\") animation: number = 1000;\n @Input(\"size\") size: number = 200;\n @Input(\"color\") color: string = \"#001F39\";\n @Input(\"background\") background: string = \"rgba(255,255,255,0.25)\";\n @Input(\"z-index\") zIndex: number = 10000;\n\n public type: LoaderType = LoaderType.Spinner;\n public LoaderType = LoaderType;\n public styles!: SafeHtml;\n\n private timeout: number = 0;\n\n constructor(private service: LoaderService, private sanitizer: DomSanitizer) {};\n\n ngOnInit() {\n this.buildStyles();\n }\n\n ngAfterViewInit(): void {\n window.setTimeout(this.initialize);\n }\n\n ngOnChanges(changes: SimpleChanges) {\n this.buildStyles();\n }\n\n private buildStyles() {\n const eclipseSize = this.size * 0.8;\n const transformSize = (eclipseSize / 2) + 2;\n const position = (this.size - eclipseSize) / 2;\n const translate1 = -0.5 * this.size;\n const translate2 = 0.5 * this.size;\n\n const dotSize = this.size;\n const dotBoxSize = dotSize * 6;\n const dotTop = (dotBoxSize - dotSize) / 2;\n const dotGap = (dotBoxSize - (3 * dotSize)) / 4;\n const dotEdge2 = (2 * dotGap) + dotSize;\n const dotEdge3 = (3 * dotGap) + (2 * dotSize);\n const transform = dotGap + dotSize;\n\n const styles = `<style>\n @keyframes lds-ellipsis2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(${transform}px, 0);\n }\n }\n\n loader.spinner,\n loader.spinner.showLoader,\n loader.spinner.hideLoader,\n loader.ellipsis,\n loader.ellipsis.showLoader,\n loader.ellipsis.hideLoader {\n transition: opacity ${this.speed / 1000}s;\n }\n\n loader.spinner.showLoader,\n loader.ellipsis.showLoader {\n background: ${this.background};\n z-index: ${this.zIndex};\n }\n\n loader.spinner .lds-eclipse div:not(.percentage) {\n box-shadow: 0 4px 0 0 ${this.color};\n width: ${eclipseSize}px;\n height: ${eclipseSize}px;\n top: ${position}px;\n left: ${position}px;\n -webkit-transform-origin: ${eclipseSize/2}px ${transformSize}px;\n transform-origin: ${eclipseSize/2}px ${transformSize}px;\n -webkit-animation: lds-eclipse ${this.animation/1000}s linear infinite;\n animation: lds-eclipse ${this.animation/1000}s linear infinite;\n }\n\n loader.spinner .lds-eclipse {\n width: ${this.size}px;\n height: ${this.size}px;\n -webkit-transform: translate(${translate1}px, ${translate1}px) scale(1) translate(${translate2}px, ${translate2}px);\n transform: translate(${translate1}px, ${translate1}px) scale(1) translate(${translate2}px, ${translate2}px);\n }\n\n loader.ellipsis .lds-ellipsis {\n width: ${dotBoxSize}px;\n height: ${dotBoxSize}px;\n }\n\n loader.ellipsis .lds-ellipsis div {\n top: ${dotTop}px;\n width: ${dotSize}px;\n height: ${dotSize}px;\n background: ${this.color};\n }\n\n loader.ellipsis .lds-ellipsis div:nth-child(1) {\n left: ${dotGap}px;\n animation-duration: ${this.animation/1000}s !important;\n }\n \n loader.ellipsis .lds-ellipsis div:nth-child(2) {\n left: ${dotGap}px;\n animation: lds-ellipsis2 ${this.animation/1000}s infinite !important;\n }\n\n loader.ellipsis .lds-ellipsis div:nth-child(3) {\n left: ${dotEdge2}px;\n animation: lds-ellipsis2 ${this.animation/1000}s infinite !important;\n }\n\n loader.ellipsis .lds-ellipsis div:nth-child(4) {\n left: ${dotEdge3}px;\n animation-duration: ${this.animation/1000}s !important;\n }\n\n \n </style>`;\n\n this.styles = this.sanitizer.bypassSecurityTrustHtml(styles);\n }\n\n private initialize = () => {\n this.service.loader$.subscribe(request => {\n this.type = request.type ?? LoaderType.Spinner;\n this.ellipsis = this.type === LoaderType.Ellipsis;\n this.spinner = this.type === LoaderType.Spinner;\n this.render(request.render);\n });\n }\n\n private render(show: boolean) {\n clearTimeout(this.timeout);\n if(show) this.show();\n else this.hide();\n }\n\n private show() {\n this.showLoader = true;\n this.timeout = window.setTimeout(() => this.transparent = false);\n }\n\n private hide() {\n this.transparent = true;\n this.timeout = window.setTimeout(() => this.showLoader = false, this.speed);\n }\n}\n\n","<div class=\"loader-container\" *ngIf=\"type === LoaderType.Spinner\">\n\t<div class=\"lds-css\">\n\t\t<div class=\"lds-eclipse\">\n\t\t <div></div>\n\t\t</div>\n\t</div>\n</div>\n<div class=\"loader-container\" *ngIf=\"type === LoaderType.Ellipsis\">\n\t<div class=\"lds-ellipsis\">\n\t\t<div class=\"dot\"></div>\n\t\t<div class=\"dot\"></div>\n\t\t<div class=\"dot\"></div>\n\t\t<div class=\"dot\"></div>\n\t</div>\n</div>\n<div class=\"style-container\" [innerHtml]=\"styles\"></div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common'; \nimport { LoaderComponent } from './loader.component';\n\nexport * from \"./loader.classes\";\n\n@NgModule({\n declarations: [\n LoaderComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [\n LoaderComponent,\n ]\n})\nexport class LoaderModule { }\n","/*\n * Public API Surface of loader\n */\n\nexport * from './lib/loader.service';\nexport * from './lib/loader.component';\nexport * from './lib/loader.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './projects';\n"],"names":["i1.LoaderService"],"mappings":"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"}