UNPKG

@paymate-software/ngx-loading-spinner

Version:

Customizable loading spinner for Angular 2+ with Ivy support

1 lines 33.8 kB
{"version":3,"file":"paymate-software-ngx-loading-spinner.mjs","sources":["../../../projects/ngx-loading-spinner/src/lib/animation-types.ts","../../../projects/ngx-loading-spinner/src/lib/config.ts","../../../projects/ngx-loading-spinner/src/lib/ngx-loading-spinner.component.ts","../../../projects/ngx-loading-spinner/src/lib/utils.ts","../../../projects/ngx-loading-spinner/src/lib/ngx-loading-spinner-config.service.ts","../../../projects/ngx-loading-spinner/src/lib/ngx-loading-spinner.directive.ts","../../../projects/ngx-loading-spinner/src/lib/ngx-loading-spinner.provider.ts","../../../projects/ngx-loading-spinner/src/public-api.ts","../../../projects/ngx-loading-spinner/src/paymate-software-ngx-loading-spinner.ts"],"sourcesContent":["export const ANIMATION_TYPES = {\r\n dualCircle: 'dualCircle',\r\n scalingBars: 'scalingBars',\r\n chasingDots: 'chasingDots',\r\n bouncingDots: 'bouncingDots',\r\n fadingCircle: 'fadingCircle',\r\n halfCircle: 'halfCircle',\r\n cubeGrid: 'cubeGrid'\r\n};\r\n","type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '' | undefined;\r\n\r\nexport interface INgxLoadingSpinnerConfig {\r\n animationType: string,\r\n backdropColor: string,\r\n backdropBorderRadius?: string,\r\n spinnerColor: string,\r\n spinnerPosition: string,\r\n spinnerSize: SpinnerSize,\r\n spinnerFontSize: string\r\n}\r\n\r\nexport class NgxLoadingSpinnerConfig implements INgxLoadingSpinnerConfig {\r\n animationType;\r\n backdropColor: string;\r\n spinnerColor: string;\r\n spinnerPosition: string;\r\n backdropBorderRadius?: string;\r\n spinnerSize: SpinnerSize;\r\n spinnerFontSize: string;\r\n\r\n constructor(config: INgxLoadingSpinnerConfig) {\r\n this.animationType = config.animationType;\r\n this.backdropColor = config.backdropColor;\r\n this.spinnerColor = config.spinnerColor;\r\n this.spinnerPosition = config.spinnerPosition;\r\n this.backdropBorderRadius = config.backdropBorderRadius;\r\n this.spinnerSize = config.spinnerSize;\r\n this.spinnerFontSize = config.spinnerFontSize;\r\n }\r\n}\r\n","import {Component, TemplateRef, ViewContainerRef, inject, input} from '@angular/core';\r\nimport {ANIMATION_TYPES} from './animation-types';\r\nimport {NgxLoadingSpinnerConfig} from './config';\r\nimport {NgClass, NgStyle, NgTemplateOutlet} from '@angular/common';\r\n\r\n@Component({\r\n selector: 'ngx-loading-spinner',\r\n template: `\r\n <div class=\"backdrop\"\r\n [ngStyle]=\"{'background-color': config()?.backdropColor, 'border-radius': config()?.backdropBorderRadius}\"></div>\r\n\r\n <div class=\"wrapper\"\r\n [ngClass]=\"[config()?.spinnerPosition, config()?.spinnerSize]\"\r\n [ngStyle]=\"{'color': config()?.spinnerColor, 'font-size': config()?.spinnerFontSize}\">\r\n @if (!template()) {\r\n <!-- DUAL CIRCLE SPINNER -->\r\n @if (config()?.animationType === ANIMATION_TYPES.dualCircle) {\r\n <div class=\"dual-circle\"></div>\r\n }\r\n <!-- SCALING BARS -->\r\n @if (config()?.animationType === ANIMATION_TYPES.scalingBars) {\r\n <div class=\"scaling-bars\"></div>\r\n }\r\n <!-- CHASING DOTS -->\r\n @if (config()?.animationType === ANIMATION_TYPES.chasingDots) {\r\n <div class=\"chasing-dots\"></div>\r\n }\r\n <!-- BOUNCING DOTS -->\r\n @if (config()?.animationType === ANIMATION_TYPES.bouncingDots) {\r\n <div class=\"bouncing-dots\">\r\n <div class=\"bounce-1\"></div>\r\n <div class=\"bounce-2\"></div>\r\n <div class=\"bounce-3\"></div>\r\n </div>\r\n }\r\n <!-- FADING CIRCLE -->\r\n @if (config()?.animationType === ANIMATION_TYPES.fadingCircle) {\r\n <div class=\"fading-circle\">\r\n <div class=\"sk-circle1 sk-circle\"></div>\r\n <div class=\"sk-circle2 sk-circle\"></div>\r\n <div class=\"sk-circle3 sk-circle\"></div>\r\n <div class=\"sk-circle4 sk-circle\"></div>\r\n <div class=\"sk-circle5 sk-circle\"></div>\r\n <div class=\"sk-circle6 sk-circle\"></div>\r\n <div class=\"sk-circle7 sk-circle\"></div>\r\n <div class=\"sk-circle8 sk-circle\"></div>\r\n <div class=\"sk-circle9 sk-circle\"></div>\r\n <div class=\"sk-circle10 sk-circle\"></div>\r\n <div class=\"sk-circle11 sk-circle\"></div>\r\n <div class=\"sk-circle12 sk-circle\"></div>\r\n </div>\r\n }\r\n <!-- HALF CIRCLE -->\r\n @if (config()?.animationType === ANIMATION_TYPES.halfCircle) {\r\n <div class=\"half-circle\"></div>\r\n }\r\n <!-- CUBIC GRID -->\r\n @if (config()?.animationType === ANIMATION_TYPES.cubeGrid) {\r\n <div class=\"sk-cube-grid cube-grid\">\r\n <div class=\"sk-cube sk-cube1\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube2\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube3\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube4\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube5\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube6\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube7\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube8\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n <div class=\"sk-cube sk-cube9\" [ngStyle]=\"{'background-color': config()?.spinnerColor}\"></div>\r\n </div>\r\n }\r\n }\r\n\r\n <ng-container *ngTemplateOutlet=\"template()\"></ng-container>\r\n </div>\r\n `,\r\n styles: [`\r\n .backdrop {\r\n background-color: rgba(0, 0, 0, 0.3);\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 2000;\r\n }\r\n\r\n .wrapper {\r\n position: absolute;\r\n z-index: 2001;\r\n }\r\n\r\n /* POSITIONING SPINNER */\r\n .left {\r\n top: 50%;\r\n left: 5px;\r\n transform: translateY(-50%);\r\n }\r\n\r\n .right {\r\n top: 50%;\r\n right: 5px;\r\n transform: translateY(-50%);\r\n }\r\n\r\n .top {\r\n top: 5px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n\r\n .bottom {\r\n bottom: 5px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n\r\n .top-right {\r\n top: 5px;\r\n right: 5px;\r\n }\r\n\r\n .top-left {\r\n top: 5px;\r\n left: 5px;\r\n }\r\n\r\n .bottom-right {\r\n bottom: 5px;\r\n right: 5px;\r\n }\r\n\r\n .bottom-left {\r\n bottom: 5px;\r\n left: 5px;\r\n }\r\n\r\n .center {\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n /***********************/\r\n /* SIZING SPINNER */\r\n /***********************/\r\n .xs {\r\n font-size: 0.5rem;\r\n }\r\n\r\n .sm {\r\n font-size: 1rem;\r\n }\r\n\r\n .md {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .lg {\r\n font-size: 2rem;\r\n }\r\n\r\n .xl {\r\n font-size: 2.5rem;\r\n }\r\n\r\n /***********************/\r\n /* DUAL CIRCLE SPINNER */\r\n /***********************/\r\n .dual-circle {\r\n display: inline-block;\r\n }\r\n\r\n .dual-circle:after {\r\n content: \" \";\r\n display: block;\r\n width: 1.5em;\r\n height: 1.5em;\r\n border-radius: 50%;\r\n border: .1em solid currentColor;\r\n border-color: currentColor transparent currentColor transparent;\r\n animation: dual-cricle-anim 1.2s linear infinite;\r\n }\r\n\r\n @keyframes dual-cricle-anim {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n /***********************/\r\n /* SCALING BARS SPINNER */\r\n /***********************/\r\n\r\n .center .scaling-bars,\r\n .top .scaling-bars,\r\n .bottom .scaling-bars {\r\n left: 0;\r\n }\r\n\r\n .left .scaling-bars,\r\n .top-left .scaling-bars,\r\n .top-bottom .scaling-bars {\r\n left: 1.5em;\r\n }\r\n\r\n .right .scaling-bars,\r\n .top-right .scaling-bars,\r\n .bottom-right .scaling-bars {\r\n right: 1.5em;\r\n }\r\n\r\n .scaling-bars,\r\n .scaling-bars:before,\r\n .scaling-bars:after {\r\n background: currentColor;\r\n -webkit-animation: scaling-bars-anim 1s infinite ease-in-out;\r\n animation: scaling-bars-anim 1s infinite ease-in-out;\r\n width: 1em;\r\n height: 2em;\r\n }\r\n\r\n .scaling-bars {\r\n color: currentColor;\r\n text-indent: -9999em;\r\n position: relative;\r\n font-size: .5em;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation-delay: -0.16s;\r\n animation-delay: -0.16s;\r\n }\r\n\r\n .scaling-bars:before,\r\n .scaling-bars:after {\r\n position: absolute;\r\n top: 0;\r\n content: '';\r\n }\r\n\r\n .scaling-bars:before {\r\n left: -1.5em;\r\n -webkit-animation-delay: -0.32s;\r\n animation-delay: -0.32s;\r\n }\r\n\r\n .scaling-bars:after {\r\n left: 1.5em;\r\n }\r\n\r\n @-webkit-keyframes scaling-bars-anim {\r\n 0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 0;\r\n height: 4em;\r\n }\r\n 40% {\r\n box-shadow: 0 -2em;\r\n height: 5em;\r\n }\r\n }\r\n\r\n @keyframes scaling-bars-anim {\r\n 0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 0;\r\n height: 4em;\r\n }\r\n 40% {\r\n box-shadow: 0 -2em;\r\n height: 5em;\r\n }\r\n }\r\n\r\n /***********************/\r\n /* CHASING DOTS SPINNER */\r\n /***********************/\r\n .chasing-dots {\r\n color: currentColor;\r\n font-size: 1.5em;\r\n text-indent: -9999em;\r\n overflow: hidden;\r\n width: 1em;\r\n height: 1em;\r\n border-radius: 50%;\r\n position: relative;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;\r\n animation: load6 1.7s infinite ease, round 1.7s infinite ease;\r\n }\r\n\r\n @-webkit-keyframes load6 {\r\n 0% {\r\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\r\n }\r\n 5%,\r\n 95% {\r\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\r\n }\r\n 10%,\r\n 59% {\r\n box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;\r\n }\r\n 20% {\r\n box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;\r\n }\r\n 38% {\r\n box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;\r\n }\r\n 100% {\r\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\r\n }\r\n }\r\n\r\n @keyframes load6 {\r\n 0% {\r\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\r\n }\r\n 5%,\r\n 95% {\r\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\r\n }\r\n 10%,\r\n 59% {\r\n box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;\r\n }\r\n 20% {\r\n box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;\r\n }\r\n 38% {\r\n box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;\r\n }\r\n 100% {\r\n box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;\r\n }\r\n }\r\n\r\n @-webkit-keyframes round {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes round {\r\n 0% {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n /***********************/\r\n /* BOUNCING DOTS SPINNER */\r\n /***********************/\r\n\r\n .bouncing-dots {\r\n font-size: inherit;\r\n text-align: center;\r\n }\r\n\r\n .bouncing-dots > div {\r\n width: 1em;\r\n height: 1em;\r\n background-color: currentColor;\r\n border-radius: 100%;\r\n display: inline-block;\r\n -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;\r\n animation: sk-bouncedelay 1.4s infinite ease-in-out both;\r\n }\r\n\r\n .bouncing-dots .bounce-1 {\r\n -webkit-animation-delay: -0.32s;\r\n animation-delay: -0.32s;\r\n }\r\n\r\n .bouncing-dots .bounce-2 {\r\n -webkit-animation-delay: -0.16s;\r\n animation-delay: -0.16s;\r\n }\r\n\r\n @-webkit-keyframes sk-bouncedelay {\r\n 0%, 80%, 100% {\r\n -webkit-transform: scale(0)\r\n }\r\n 40% {\r\n -webkit-transform: scale(1.0)\r\n }\r\n }\r\n\r\n @keyframes sk-bouncedelay {\r\n 0%, 80%, 100% {\r\n -webkit-transform: scale(0);\r\n transform: scale(0);\r\n }\r\n 40% {\r\n -webkit-transform: scale(1.0);\r\n transform: scale(1.0);\r\n }\r\n }\r\n\r\n /***********************/\r\n /* FADING CIRCLE SPINNER */\r\n /***********************/\r\n\r\n .fading-circle {\r\n font-size: inherit;\r\n width: 2em;\r\n height: 2em;\r\n position: relative;\r\n }\r\n\r\n .fading-circle .sk-circle {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n }\r\n\r\n .fading-circle .sk-circle:before {\r\n content: '';\r\n display: block;\r\n margin: 0 auto;\r\n width: 15%;\r\n height: 15%;\r\n background-color: currentColor;\r\n border-radius: 100%;\r\n -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;\r\n animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;\r\n }\r\n\r\n .fading-circle .sk-circle2 {\r\n -webkit-transform: rotate(30deg);\r\n -ms-transform: rotate(30deg);\r\n transform: rotate(30deg);\r\n }\r\n\r\n .fading-circle .sk-circle3 {\r\n -webkit-transform: rotate(60deg);\r\n -ms-transform: rotate(60deg);\r\n transform: rotate(60deg);\r\n }\r\n\r\n .fading-circle .sk-circle4 {\r\n -webkit-transform: rotate(90deg);\r\n -ms-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .fading-circle .sk-circle5 {\r\n -webkit-transform: rotate(120deg);\r\n -ms-transform: rotate(120deg);\r\n transform: rotate(120deg);\r\n }\r\n\r\n .fading-circle .sk-circle6 {\r\n -webkit-transform: rotate(150deg);\r\n -ms-transform: rotate(150deg);\r\n transform: rotate(150deg);\r\n }\r\n\r\n .fading-circle .sk-circle7 {\r\n -webkit-transform: rotate(180deg);\r\n -ms-transform: rotate(180deg);\r\n transform: rotate(180deg);\r\n }\r\n\r\n .fading-circle .sk-circle8 {\r\n -webkit-transform: rotate(210deg);\r\n -ms-transform: rotate(210deg);\r\n transform: rotate(210deg);\r\n }\r\n\r\n .fading-circle .sk-circle9 {\r\n -webkit-transform: rotate(240deg);\r\n -ms-transform: rotate(240deg);\r\n transform: rotate(240deg);\r\n }\r\n\r\n .fading-circle .sk-circle10 {\r\n -webkit-transform: rotate(270deg);\r\n -ms-transform: rotate(270deg);\r\n transform: rotate(270deg);\r\n }\r\n\r\n .fading-circle .sk-circle11 {\r\n -webkit-transform: rotate(300deg);\r\n -ms-transform: rotate(300deg);\r\n transform: rotate(300deg);\r\n }\r\n\r\n .fading-circle .sk-circle12 {\r\n -webkit-transform: rotate(330deg);\r\n -ms-transform: rotate(330deg);\r\n transform: rotate(330deg);\r\n }\r\n\r\n .fading-circle .sk-circle2:before {\r\n -webkit-animation-delay: -1.1s;\r\n animation-delay: -1.1s;\r\n }\r\n\r\n .fading-circle .sk-circle3:before {\r\n -webkit-animation-delay: -1s;\r\n animation-delay: -1s;\r\n }\r\n\r\n .fading-circle .sk-circle4:before {\r\n -webkit-animation-delay: -0.9s;\r\n animation-delay: -0.9s;\r\n }\r\n\r\n .fading-circle .sk-circle5:before {\r\n -webkit-animation-delay: -0.8s;\r\n animation-delay: -0.8s;\r\n }\r\n\r\n .fading-circle .sk-circle6:before {\r\n -webkit-animation-delay: -0.7s;\r\n animation-delay: -0.7s;\r\n }\r\n\r\n .fading-circle .sk-circle7:before {\r\n -webkit-animation-delay: -0.6s;\r\n animation-delay: -0.6s;\r\n }\r\n\r\n .fading-circle .sk-circle8:before {\r\n -webkit-animation-delay: -0.5s;\r\n animation-delay: -0.5s;\r\n }\r\n\r\n .fading-circle .sk-circle9:before {\r\n -webkit-animation-delay: -0.4s;\r\n animation-delay: -0.4s;\r\n }\r\n\r\n .fading-circle .sk-circle10:before {\r\n -webkit-animation-delay: -0.3s;\r\n animation-delay: -0.3s;\r\n }\r\n\r\n .fading-circle .sk-circle11:before {\r\n -webkit-animation-delay: -0.2s;\r\n animation-delay: -0.2s;\r\n }\r\n\r\n .fading-circle .sk-circle12:before {\r\n -webkit-animation-delay: -0.1s;\r\n animation-delay: -0.1s;\r\n }\r\n\r\n @-webkit-keyframes sk-circleFadeDelay {\r\n 0%, 39%, 100% {\r\n opacity: 0;\r\n }\r\n 40% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n @keyframes sk-circleFadeDelay {\r\n 0%, 39%, 100% {\r\n opacity: 0;\r\n }\r\n 40% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n /***********************/\r\n /* HALF CIRCLE SPINNER */\r\n /***********************/\r\n\r\n .half-circle {\r\n width: 2em;\r\n height: 2em;\r\n display: inline-block;\r\n border: .2em solid transparent;\r\n border-left-color: currentColor;\r\n border-top-color: currentColor;\r\n animation: rotate 600ms infinite linear;\r\n border-radius: 50%;\r\n }\r\n\r\n @keyframes rotate {\r\n to {\r\n transform: rotate(1turn)\r\n }\r\n }\r\n\r\n\r\n /***********************/\r\n /* CUBIC GRID SPINNER */\r\n /***********************/\r\n .sk-cube-grid {\r\n width: 2em;\r\n height: 2em;\r\n }\r\n\r\n .sk-cube-grid .sk-cube {\r\n width: 33%;\r\n height: 33%;\r\n float: left;\r\n -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;\r\n animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;\r\n }\r\n\r\n .sk-cube-grid .sk-cube1 {\r\n -webkit-animation-delay: 0.2s;\r\n animation-delay: 0.2s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube2 {\r\n -webkit-animation-delay: 0.3s;\r\n animation-delay: 0.3s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube3 {\r\n -webkit-animation-delay: 0.4s;\r\n animation-delay: 0.4s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube4 {\r\n -webkit-animation-delay: 0.1s;\r\n animation-delay: 0.1s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube5 {\r\n -webkit-animation-delay: 0.2s;\r\n animation-delay: 0.2s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube6 {\r\n -webkit-animation-delay: 0.3s;\r\n animation-delay: 0.3s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube7 {\r\n -webkit-animation-delay: 0s;\r\n animation-delay: 0s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube8 {\r\n -webkit-animation-delay: 0.1s;\r\n animation-delay: 0.1s;\r\n }\r\n\r\n .sk-cube-grid .sk-cube9 {\r\n -webkit-animation-delay: 0.2s;\r\n animation-delay: 0.2s;\r\n }\r\n\r\n @-webkit-keyframes sk-cubeGridScaleDelay {\r\n 0%, 70%, 100% {\r\n -webkit-transform: scale3D(1, 1, 1);\r\n transform: scale3D(1, 1, 1);\r\n }\r\n 35% {\r\n -webkit-transform: scale3D(0, 0, 1);\r\n transform: scale3D(0, 0, 1);\r\n }\r\n }\r\n\r\n @keyframes sk-cubeGridScaleDelay {\r\n 0%, 70%, 100% {\r\n -webkit-transform: scale3D(1, 1, 1);\r\n transform: scale3D(1, 1, 1);\r\n }\r\n 35% {\r\n -webkit-transform: scale3D(0, 0, 1);\r\n transform: scale3D(0, 0, 1);\r\n }\r\n }\r\n `],\r\n imports: [NgStyle, NgClass, NgTemplateOutlet]\r\n})\r\nexport class NgxLoadingSpinnerComponent {\r\n vcRef = inject(ViewContainerRef);\r\n\r\n\r\n config = input<NgxLoadingSpinnerConfig | null>(null);\r\n template = input<TemplateRef<any> | null>(null);\r\n\r\n ANIMATION_TYPES = ANIMATION_TYPES;\r\n}\r\n","export const findIndex = function (arr: any[], item: any) {\r\n for (let i = 0; i < arr.length; i++) {\r\n if (arr[i] === item) {\r\n return i;\r\n }\r\n }\r\n\r\n return -1;\r\n};\r\n\r\n\r\nexport const objectValues = function (obj: any) {\r\n let values = [];\r\n\r\n for (let item in obj) {\r\n if (obj.hasOwnProperty(item)) {\r\n values.push(obj[item]);\r\n }\r\n }\r\n\r\n return values;\r\n};\r\n","import {Injectable, inject} from '@angular/core';\r\nimport {NgxLoadingSpinnerConfig} from './config';\r\nimport {ANIMATION_TYPES} from './animation-types';\r\nimport {findIndex, objectValues} from './utils';\r\n\r\n@Injectable()\r\nexport class NgxLoadingSpinnerConfigService {\r\n private readonly loadingConfig = inject<Partial<NgxLoadingSpinnerConfig>>('loadingConfig' as never, {optional: true});\r\n\r\n\r\n private readonly defaultConfig: NgxLoadingSpinnerConfig;\r\n\r\n constructor() {\r\n this.defaultConfig = new NgxLoadingSpinnerConfig({\r\n animationType: this.loadingConfig?.animationType || ANIMATION_TYPES.fadingCircle,\r\n backdropColor: this.loadingConfig?.backdropColor || 'rgba(0, 0, 0, 0.3)',\r\n spinnerColor: this.loadingConfig?.spinnerColor || '#fff',\r\n spinnerPosition: this.loadingConfig?.spinnerPosition || 'center',\r\n backdropBorderRadius: this.loadingConfig?.backdropBorderRadius || '0',\r\n spinnerSize: this.loadingConfig?.spinnerSize || 'md',\r\n spinnerFontSize: this?.loadingConfig?.spinnerFontSize || ''\r\n });\r\n }\r\n\r\n normalizeConfigs(config: NgxLoadingSpinnerConfig) {\r\n if (!config) {\r\n config = this.defaultConfig;\r\n return config;\r\n }\r\n\r\n if (config.spinnerSize === '' && config.spinnerFontSize === '') {\r\n config.spinnerFontSize = '1rem';\r\n }\r\n\r\n for (const option in this.defaultConfig) {\r\n // @ts-ignore\r\n if (!config[option]) {\r\n // @ts-ignore\r\n config[option] = this.defaultConfig[option];\r\n }\r\n }\r\n\r\n if (findIndex(objectValues(ANIMATION_TYPES), config['animationType']) === -1) {\r\n config['animationType'] = ANIMATION_TYPES.fadingCircle;\r\n }\r\n\r\n return config;\r\n }\r\n}\r\n","import {ComponentRef, DestroyRef, Directive, effect, ElementRef, inject, input, model, Renderer2, TemplateRef, ViewContainerRef} from '@angular/core';\r\nimport {NgxLoadingSpinnerComponent} from './ngx-loading-spinner.component';\r\nimport {NgxLoadingSpinnerConfigService} from './ngx-loading-spinner-config.service';\r\nimport {NgxLoadingSpinnerConfig} from './config';\r\n\r\n@Directive({\r\n selector: '[ngx-loading]',\r\n providers: [NgxLoadingSpinnerConfigService]\r\n})\r\nexport class NgxLoadingSpinnerDirective {\r\n private el = inject(ElementRef);\r\n private vcRef = inject(ViewContainerRef);\r\n private renderer = inject(Renderer2);\r\n private configService = inject(NgxLoadingSpinnerConfigService);\r\n\r\n\r\n show = input(false, {alias: 'ngx-loading'});\r\n config = model<NgxLoadingSpinnerConfig>({} as NgxLoadingSpinnerConfig);\r\n template = input<TemplateRef<any> | null>(null);\r\n\r\n private spinnerComponentRef?: ComponentRef<NgxLoadingSpinnerComponent>;\r\n\r\n constructor() {\r\n effect(() => {\r\n if (this.show()) {\r\n this.createSpinner();\r\n } else {\r\n this.destroySpinner();\r\n }\r\n });\r\n\r\n inject(DestroyRef).onDestroy(() => this.destroySpinner());\r\n\r\n this.setPosition();\r\n }\r\n\r\n setPosition() {\r\n const elPosition = this.el.nativeElement.style.position;\r\n if (elPosition === 'relative' || elPosition === 'absolute') {\r\n return;\r\n }\r\n\r\n this.el.nativeElement.style.position = 'relative';\r\n }\r\n\r\n createSpinner() {\r\n this.spinnerComponentRef = this.vcRef.createComponent(NgxLoadingSpinnerComponent);\r\n\r\n\r\n const config = this.configService.normalizeConfigs(this.config());\r\n this.spinnerComponentRef.setInput('config', config);\r\n this.spinnerComponentRef.setInput('template', this.template());\r\n\r\n this.renderer.appendChild(\r\n this.vcRef.element.nativeElement,\r\n this.spinnerComponentRef.injector.get(NgxLoadingSpinnerComponent).vcRef.element.nativeElement\r\n );\r\n }\r\n\r\n destroySpinner() {\r\n if (this.spinnerComponentRef) {\r\n this.spinnerComponentRef.destroy();\r\n }\r\n }\r\n}\r\n","import {makeEnvironmentProviders} from '@angular/core';\r\nimport {NgxLoadingSpinnerConfigService} from './ngx-loading-spinner-config.service';\r\nimport {NgxLoadingSpinnerConfig} from './config';\r\n\r\nexport function provideNgxLoadingSpinner(globalConfig: Partial<NgxLoadingSpinnerConfig>) {\r\n return makeEnvironmentProviders([\r\n NgxLoadingSpinnerConfigService,\r\n {provide: 'loadingConfig', useValue: globalConfig}\r\n ]);\r\n}\r\n","/*\r\n * Public API Surface of ngx-loading-spinner\r\n */\r\n\r\nexport {ANIMATION_TYPES} from './lib/animation-types';\r\nexport {NgxLoadingSpinnerConfig, INgxLoadingSpinnerConfig} from './lib/config';\r\nexport {NgxLoadingSpinnerDirective} from './lib/ngx-loading-spinner.directive';\r\nexport {provideNgxLoadingSpinner} from './lib/ngx-loading-spinner.provider';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}