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.
254 lines (234 loc) • 13.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, HostBinding, Input, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i2 from '@angular/platform-browser';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
var LoaderType;
(function (LoaderType) {
LoaderType["Spinner"] = "spinner";
LoaderType["Ellipsis"] = "ellipsis";
})(LoaderType || (LoaderType = {}));
class LoaderService {
constructor() {
this.type = LoaderType.Spinner;
this.loader = new BehaviorSubject({ type: LoaderType.Spinner, render: false });
this.loader$ = this.loader.asObservable();
}
load(render, type = LoaderType.Spinner) {
this.type = type;
this.loader.next({ render, type });
}
show() {
this.load(true, this.type);
}
hide() {
this.load(false, this.type);
}
}
LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class LoaderComponent {
constructor(service, sanitizer) {
this.service = service;
this.sanitizer = sanitizer;
this.showLoader = false;
this.transparent = true;
this.spinner = true;
this.ellipsis = false;
this.speed = 1000;
this.animation = 1000;
this.size = 200;
this.color = "#001F39";
this.background = "rgba(255,255,255,0.25)";
this.zIndex = 10000;
this.type = LoaderType.Spinner;
this.LoaderType = LoaderType;
this.timeout = 0;
this.initialize = () => {
this.service.loader$.subscribe(request => {
this.type = request.type ?? LoaderType.Spinner;
this.ellipsis = this.type === LoaderType.Ellipsis;
this.spinner = this.type === LoaderType.Spinner;
this.render(request.render);
});
};
}
;
ngOnInit() {
this.buildStyles();
}
ngAfterViewInit() {
window.setTimeout(this.initialize);
}
ngOnChanges(changes) {
this.buildStyles();
}
buildStyles() {
const eclipseSize = this.size * 0.8;
const transformSize = (eclipseSize / 2) + 2;
const position = (this.size - eclipseSize) / 2;
const translate1 = -0.5 * this.size;
const translate2 = 0.5 * this.size;
const dotSize = this.size;
const dotBoxSize = dotSize * 6;
const dotTop = (dotBoxSize - dotSize) / 2;
const dotGap = (dotBoxSize - (3 * dotSize)) / 4;
const dotEdge2 = (2 * dotGap) + dotSize;
const dotEdge3 = (3 * dotGap) + (2 * dotSize);
const transform = dotGap + dotSize;
const styles = `<style>
lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(${transform}px, 0);
}
}
loader.spinner,
loader.spinner.showLoader,
loader.spinner.hideLoader,
loader.ellipsis,
loader.ellipsis.showLoader,
loader.ellipsis.hideLoader {
transition: opacity ${this.speed / 1000}s;
}
loader.spinner.showLoader,
loader.ellipsis.showLoader {
background: ${this.background};
z-index: ${this.zIndex};
}
loader.spinner .lds-eclipse div:not(.percentage) {
box-shadow: 0 4px 0 0 ${this.color};
width: ${eclipseSize}px;
height: ${eclipseSize}px;
top: ${position}px;
left: ${position}px;
-webkit-transform-origin: ${eclipseSize / 2}px ${transformSize}px;
transform-origin: ${eclipseSize / 2}px ${transformSize}px;
-webkit-animation: lds-eclipse ${this.animation / 1000}s linear infinite;
animation: lds-eclipse ${this.animation / 1000}s linear infinite;
}
loader.spinner .lds-eclipse {
width: ${this.size}px;
height: ${this.size}px;
-webkit-transform: translate(${translate1}px, ${translate1}px) scale(1) translate(${translate2}px, ${translate2}px);
transform: translate(${translate1}px, ${translate1}px) scale(1) translate(${translate2}px, ${translate2}px);
}
loader.ellipsis .lds-ellipsis {
width: ${dotBoxSize}px;
height: ${dotBoxSize}px;
}
loader.ellipsis .lds-ellipsis div {
top: ${dotTop}px;
width: ${dotSize}px;
height: ${dotSize}px;
background: ${this.color};
}
loader.ellipsis .lds-ellipsis div:nth-child(1) {
left: ${dotGap}px;
animation-duration: ${this.animation / 1000}s !important;
}
loader.ellipsis .lds-ellipsis div:nth-child(2) {
left: ${dotGap}px;
animation: lds-ellipsis2 ${this.animation / 1000}s infinite !important;
}
loader.ellipsis .lds-ellipsis div:nth-child(3) {
left: ${dotEdge2}px;
animation: lds-ellipsis2 ${this.animation / 1000}s infinite !important;
}
loader.ellipsis .lds-ellipsis div:nth-child(4) {
left: ${dotEdge3}px;
animation-duration: ${this.animation / 1000}s !important;
}
</style>`;
this.styles = this.sanitizer.bypassSecurityTrustHtml(styles);
}
render(show) {
clearTimeout(this.timeout);
if (show)
this.show();
else
this.hide();
}
show() {
this.showLoader = true;
this.timeout = window.setTimeout(() => this.transparent = false);
}
hide() {
this.transparent = true;
this.timeout = window.setTimeout(() => this.showLoader = false, this.speed);
}
}
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [{ token: LoaderService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "loader", inputs: { speed: ["transition-speed", "speed"], animation: ["animation-duration", "animation"], size: "size", color: "color", background: "background", zIndex: ["z-index", "zIndex"] }, host: { properties: { "class.showLoader": "this.showLoader", "class.transparent": "this.transparent", "class.spinner": "this.spinner", "class.ellipsis": "this.ellipsis" } }, usesOnChanges: true, ngImport: i0, template: "<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>", styles: [":host.spinner{position:fixed;display:flex;justify-content:center;align-items:center;z-index:0;opacity:0;pointer-events:none;top:0;left:0;right:0;bottom:0}:host.spinner.showLoader{pointer-events:auto;opacity:1}:host.spinner.showLoader.transparent{opacity:0}:host.spinner.small{position:absolute}:host.spinner.small.showLoader{background:none}:host.spinner .lds-eclipse{position:relative;display:flex;justify-content:center;align-items:center}:host.spinner .lds-eclipse div:not(.percentage){position:absolute;border-radius:50%}:host.spinner .lds-eclipse div.percentage{font-size:1.25rem;background:rgba(0,0,0,.8);padding:.5rem;border-radius:2rem;width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;box-sizing:border-box}:host.ellipsis{position:fixed;display:flex;justify-content:center;align-items:center;z-index:0;opacity:0;pointer-events:none;top:0;left:0;right:0;bottom:0}:host.ellipsis.showLoader{pointer-events:auto;opacity:1}:host.ellipsis.showLoader.transparent{opacity:0}:host.ellipsis .lds-ellipsis{display:block;position:relative;margin:0 auto}:host.ellipsis .lds-ellipsis div{position:absolute;border-radius:50%;animation-timing-function:cubic-bezier(0,1,1,0)}:host.ellipsis .lds-ellipsis div:nth-child(1){animation:lds-ellipsis1 .6s infinite}:host.ellipsis .lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite}@keyframes lds-eclipse{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'loader', template: "<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>", styles: [":host.spinner{position:fixed;display:flex;justify-content:center;align-items:center;z-index:0;opacity:0;pointer-events:none;top:0;left:0;right:0;bottom:0}:host.spinner.showLoader{pointer-events:auto;opacity:1}:host.spinner.showLoader.transparent{opacity:0}:host.spinner.small{position:absolute}:host.spinner.small.showLoader{background:none}:host.spinner .lds-eclipse{position:relative;display:flex;justify-content:center;align-items:center}:host.spinner .lds-eclipse div:not(.percentage){position:absolute;border-radius:50%}:host.spinner .lds-eclipse div.percentage{font-size:1.25rem;background:rgba(0,0,0,.8);padding:.5rem;border-radius:2rem;width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;box-sizing:border-box}:host.ellipsis{position:fixed;display:flex;justify-content:center;align-items:center;z-index:0;opacity:0;pointer-events:none;top:0;left:0;right:0;bottom:0}:host.ellipsis.showLoader{pointer-events:auto;opacity:1}:host.ellipsis.showLoader.transparent{opacity:0}:host.ellipsis .lds-ellipsis{display:block;position:relative;margin:0 auto}:host.ellipsis .lds-ellipsis div{position:absolute;border-radius:50%;animation-timing-function:cubic-bezier(0,1,1,0)}:host.ellipsis .lds-ellipsis div:nth-child(1){animation:lds-ellipsis1 .6s infinite}:host.ellipsis .lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite}@keyframes lds-eclipse{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}\n"] }]
}], ctorParameters: function () { return [{ type: LoaderService }, { type: i2.DomSanitizer }]; }, propDecorators: { showLoader: [{
type: HostBinding,
args: ['class.showLoader']
}], transparent: [{
type: HostBinding,
args: ['class.transparent']
}], spinner: [{
type: HostBinding,
args: ['class.spinner']
}], ellipsis: [{
type: HostBinding,
args: ['class.ellipsis']
}], speed: [{
type: Input,
args: ["transition-speed"]
}], animation: [{
type: Input,
args: ["animation-duration"]
}], size: [{
type: Input,
args: ["size"]
}], color: [{
type: Input,
args: ["color"]
}], background: [{
type: Input,
args: ["background"]
}], zIndex: [{
type: Input,
args: ["z-index"]
}] } });
class LoaderModule {
}
LoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderModule, declarations: [LoaderComponent], imports: [CommonModule], exports: [LoaderComponent] });
LoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderModule, decorators: [{
type: NgModule,
args: [{
declarations: [
LoaderComponent
],
imports: [
CommonModule
],
exports: [
LoaderComponent,
]
}]
}] });
/*
* Public API Surface of loader
*/
/**
* Generated bundle index. Do not edit.
*/
export { LoaderComponent, LoaderModule, LoaderService, LoaderType };
//# sourceMappingURL=ems-web-app-loader.mjs.map