ngx-loading/bundles/ngx-loading.umd.js.map

A customisable loading spinner for Angular applications.

{"version":3,"file":"ngx-loading.umd.js.map","sources":["ng://ngx-loading/lib/ngx-loading-config.ts","ng://ngx-loading/lib/ngx-loading.service.ts","ng://ngx-loading/lib/ngx-loading.component.ts","ng://ngx-loading/lib/ngx-loading.module.ts"],"sourcesContent":["export interface INgxLoadingConfig {\r\n    backdropBorderRadius?: string;\r\n    backdropBackgroundColour?: string;\r\n    fullScreenBackdrop?: boolean;\r\n    animationType?: string;\r\n    primaryColour?: string;\r\n    secondaryColour?: string;\r\n    tertiaryColour?: string;\r\n    [key: string]: string | boolean | undefined;\r\n}\r\n\r\nexport class NgxLoadingConfig implements INgxLoadingConfig {\r\n    backdropBorderRadius?: string;\r\n    backdropBackgroundColour?: string;\r\n    fullScreenBackdrop?: boolean;\r\n    animationType?: string;\r\n    primaryColour?: string;\r\n    secondaryColour?: string;\r\n    tertiaryColour?: string;\r\n    [key: string]: string | boolean | undefined;\r\n\r\n    constructor(config: INgxLoadingConfig = {}) {\r\n        this.backdropBorderRadius = config.backdropBorderRadius;\r\n        this.backdropBackgroundColour = config.backdropBackgroundColour;\r\n        this.fullScreenBackdrop = config.fullScreenBackdrop;\r\n        this.animationType = config.animationType;\r\n        this.primaryColour = config.primaryColour;\r\n        this.secondaryColour = config.secondaryColour;\r\n        this.tertiaryColour = config.tertiaryColour;\r\n    }\r\n}\r\n\r\nexport const ngxLoadingAnimationTypes = {\r\n    chasingDots: 'chasing-dots',\r\n    circle: 'sk-circle',\r\n    circleSwish: 'circleSwish',\r\n    cubeGrid: 'sk-cube-grid',\r\n    doubleBounce: 'double-bounce',\r\n    none: 'none',\r\n    pulse: 'pulse',\r\n    rectangleBounce: 'rectangle-bounce',\r\n    rotatingPlane: 'rotating-plane',\r\n    threeBounce: 'three-bounce',\r\n    wanderingCubes: 'wandering-cubes'\r\n};\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { INgxLoadingConfig, NgxLoadingConfig } from './ngx-loading-config';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class NgxLoadingService {\r\n  public loadingConfig: INgxLoadingConfig;\r\n\r\n  constructor(@Optional() @Inject('loadingConfig') private config: INgxLoadingConfig) {\r\n    this.loadingConfig = this.config || new NgxLoadingConfig();\r\n  }\r\n}\r\n","import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef } from '@angular/core';\r\nimport { ngxLoadingAnimationTypes, INgxLoadingConfig, NgxLoadingConfig } from './ngx-loading-config';\r\nimport { NgxLoadingService } from './ngx-loading.service';\r\n\r\n@Component({\r\n    selector: 'ngx-loading',\r\n    template: `\r\n    <div *ngIf=\"show\">\r\n      <div class=\"backdrop\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\" [ngStyle]=\"{'border-radius': config?.backdropBorderRadius, 'background-color': config?.backdropBackgroundColour}\"></div>\r\n\r\n      <div [ngSwitch]=\"config?.animationType\">\r\n        <div class=\"spinner-circle\" *ngSwitchCase=\"ngxLoadingAnimationTypes.circle\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\"\r\n          [ngStyle]=\"{'border-top-color': config?.secondaryColour, 'border-right-color': config?.secondaryColour, 'border-bottom-color': config?.secondaryColour, 'border-left-color': config?.primaryColour}\">\r\n        </div>\r\n\r\n        <div *ngSwitchCase=\"ngxLoadingAnimationTypes.cubeGrid\" class=\"sk-cube-grid\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\r\n          <div class=\"sk-cube sk-cube1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube2\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube3\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube4\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube5\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube6\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube7\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube8\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"sk-cube sk-cube9\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n        </div>\r\n\r\n        <div class=\"spinner-sk-rotateplane\" *ngSwitchCase=\"ngxLoadingAnimationTypes.rotatingPlane\" [ngStyle]=\"{'background-color': config?.primaryColour}\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\"></div>\r\n\r\n        <div class=\"spinner-rectangle-bounce\" *ngSwitchCase=\"ngxLoadingAnimationTypes.rectangleBounce\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\r\n          <div class=\"rect1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"rect2\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"rect3\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"rect4\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"rect5\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n        </div>\r\n\r\n        <div class=\"spinner-wandering-cubes\" *ngSwitchCase=\"ngxLoadingAnimationTypes.wanderingCubes\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\r\n          <div class=\"cube1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"cube2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\r\n        </div>\r\n\r\n        <div class=\"spinner-double-bounce\" *ngSwitchCase=\"ngxLoadingAnimationTypes.doubleBounce\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\r\n          <div class=\"double-bounce1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"double-bounce2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\r\n        </div>\r\n\r\n        <div class=\"spinner-pulse\" *ngSwitchCase=\"ngxLoadingAnimationTypes.pulse\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n\r\n        <div class=\"spinner-chasing-dots\" *ngSwitchCase=\"ngxLoadingAnimationTypes.chasingDots\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\r\n          <div class=\"dot1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"dot2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\r\n        </div>\r\n\r\n        <div class=\"spinner-circle-swish\" *ngSwitchCase=\"ngxLoadingAnimationTypes.circleSwish\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\" [ngStyle]=\"{'color': config?.primaryColour}\"></div>\r\n\r\n        <div *ngSwitchCase=\"ngxLoadingAnimationTypes.none\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\"></div>\r\n\r\n        <div *ngSwitchDefault class=\"spinner-three-bounce\" [ngClass]=\"{'full-screen' : config?.fullScreenBackdrop == true}\">\r\n          <div class=\"bounce1\" [ngStyle]=\"{'background-color': config?.primaryColour}\"></div>\r\n          <div class=\"bounce2\" [ngStyle]=\"{'background-color': config?.secondaryColour}\"></div>\r\n          <div class=\"bounce3\" [ngStyle]=\"{'background-color': config?.tertiaryColour}\"></div>\r\n        </div>\r\n        \r\n        <ng-container *ngIf=\"template\">\r\n            <ng-container *ngTemplateOutlet=\"template\"></ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  `,\r\n    styles: [\r\n        `\r\n      .backdrop {\r\n        z-index: 1999;\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background-color: rgba(0, 0, 0, 0.3);\r\n      }\r\n\r\n      /* Spinner Circle styles */\r\n      .spinner-circle,\r\n      .spinner-circle:after {\r\n          border-radius: 50%;\r\n          width: 10em;\r\n          height: 10em;\r\n      }\r\n\r\n      .spinner-circle {\r\n          font-size: 6px;\r\n          border-top: 1.1em solid rgba(255, 255, 255, 0.2);\r\n          border-right: 1.1em solid rgba(255, 255, 255, 0.2);\r\n          border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);\r\n          border-left: 1.1em solid #ffffff;\r\n          margin: auto;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n          -webkit-transform: translateZ(0);\r\n          -ms-transform: translateZ(0);\r\n          transform: translateZ(0);\r\n          -webkit-animation: load8 1.1s infinite linear;\r\n          animation: load8 1.1s infinite linear;\r\n      }\r\n      @-webkit-keyframes load8 {\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      @keyframes load8 {\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      /* Circle Swish styles */\r\n      .spinner-circle-swish {\r\n          font-size: 60px;\r\n          overflow: hidden;\r\n          width: 1em;\r\n          height: 1em;\r\n          z-index: 2000;\r\n          border-radius: 50%;\r\n          margin: auto;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\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        @-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        @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        @-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        @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      /* Cube Grid styles */\r\n      .sk-cube-grid {\r\n          width: 40px;\r\n          height: 40px;\r\n\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n      }\r\n\r\n      .sk-cube-grid .sk-cube {\r\n          width: 33%;\r\n          height: 33%;\r\n          background-color: #333;\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          } 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          } 35% {\r\n              -webkit-transform: scale3D(0, 0, 1);\r\n              transform: scale3D(0, 0, 1);\r\n          }\r\n      }\r\n\r\n      /* Double Bounce styles */\r\n      .spinner-double-bounce {\r\n          width: 40px;\r\n          height: 40px;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n      }\r\n\r\n      .double-bounce1, .double-bounce2 {\r\n          width: 100%;\r\n          height: 100%;\r\n          border-radius: 50%;\r\n          background-color: #333;\r\n          opacity: 0.6;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          -webkit-animation: sk-bounce 2.0s infinite ease-in-out;\r\n          animation: sk-bounce 2.0s infinite ease-in-out;\r\n      }\r\n\r\n      .double-bounce2 {\r\n          -webkit-animation-delay: -1.0s;\r\n          animation-delay: -1.0s;\r\n      }\r\n\r\n      @-webkit-keyframes sk-bounce {\r\n          0%, 100% { -webkit-transform: scale(0.0) }\r\n          50% { -webkit-transform: scale(1.0) }\r\n      }\r\n\r\n      @keyframes sk-bounce {\r\n          0%, 100% {\r\n            transform: scale(0.0);\r\n            -webkit-transform: scale(0.0);\r\n          } 50% {\r\n            transform: scale(1.0);\r\n            -webkit-transform: scale(1.0);\r\n          }\r\n      }\r\n\r\n      /* Pulse styles */\r\n      .spinner-pulse {\r\n          width: 40px;\r\n          height: 40px;\r\n          background-color: #333;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n          border-radius: 100%;\r\n          -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;\r\n          animation: sk-scaleout 1.0s infinite ease-in-out;\r\n      }\r\n\r\n      @-webkit-keyframes sk-scaleout {\r\n          0% { -webkit-transform: scale(0) }\r\n          100% {\r\n            -webkit-transform: scale(1.0);\r\n            opacity: 0;\r\n          }\r\n      }\r\n\r\n      @keyframes sk-scaleout {\r\n          0% {\r\n            -webkit-transform: scale(0);\r\n            transform: scale(0);\r\n          } 100% {\r\n            -webkit-transform: scale(1.0);\r\n            transform: scale(1.0);\r\n            opacity: 0;\r\n          }\r\n      }\r\n\r\n      /* Three Bounce styles */\r\n      .spinner-three-bounce {\r\n          width: 70px;\r\n          text-align: center;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          height: 20px;\r\n          margin: auto;\r\n          z-index: 2000;\r\n      }\r\n\r\n      .spinner-three-bounce > div {\r\n          width: 18px;\r\n          height: 18px;\r\n          background-color: #ffffff;\r\n\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      .spinner-three-bounce .bounce1 {\r\n          -webkit-animation-delay: -0.32s;\r\n          animation-delay: -0.32s;\r\n      }\r\n\r\n      .spinner-three-bounce .bounce2 {\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% { -webkit-transform: scale(0) }\r\n          40% { -webkit-transform: scale(1.0) }\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          } 40% {\r\n              -webkit-transform: scale(1.0);\r\n              transform: scale(1.0);\r\n          }\r\n      }\r\n\r\n      /* Rotate Plane styles */\r\n      .spinner-sk-rotateplane {\r\n          width: 40px;\r\n          height: 40px;\r\n          background-color: #ffffff;\r\n          text-align: center;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n          -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;\r\n          animation: sk-rotateplane 1.2s infinite ease-in-out;\r\n      }\r\n\r\n      @-webkit-keyframes sk-rotateplane {\r\n          0% { -webkit-transform: perspective(120px) }\r\n          50% { -webkit-transform: perspective(120px) rotateY(180deg) }\r\n          100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }\r\n      }\r\n\r\n      @keyframes sk-rotateplane {\r\n          0% {\r\n              transform: perspective(120px) rotateX(0deg) rotateY(0deg);\r\n              -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)\r\n          } 50% {\r\n              transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\r\n              -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)\r\n          } 100% {\r\n              transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\r\n              -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\r\n          }\r\n      }\r\n\r\n      /* Rectangle Bounce styles*/\r\n      .spinner-rectangle-bounce {\r\n          width: 50px;\r\n          height: 40px;\r\n          font-size: 10px;\r\n          text-align: center;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n      }\r\n\r\n      .spinner-rectangle-bounce > div {\r\n          background-color: #ffffff;\r\n          height: 100%;\r\n          width: 6px;\r\n          display: inline-block;\r\n          -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;\r\n          animation: sk-stretchdelay 1.2s infinite ease-in-out;\r\n      }\r\n\r\n      .spinner-rectangle-bounce .rect2 {\r\n          -webkit-animation-delay: -1.1s;\r\n          animation-delay: -1.1s;\r\n      }\r\n\r\n      .spinner-rectangle-bounce .rect3 {\r\n          -webkit-animation-delay: -1.0s;\r\n          animation-delay: -1.0s;\r\n      }\r\n\r\n      .spinner-rectangle-bounce .rect4 {\r\n          -webkit-animation-delay: -0.9s;\r\n          animation-delay: -0.9s;\r\n      }\r\n\r\n      .spinner-rectangle-bounce .rect5 {\r\n          -webkit-animation-delay: -0.8s;\r\n          animation-delay: -0.8s;\r\n      }\r\n\r\n      @-webkit-keyframes sk-stretchdelay {\r\n          0%, 40%, 100% { -webkit-transform: scaleY(0.4) }\r\n          20% { -webkit-transform: scaleY(1.0) }\r\n      }\r\n\r\n      @keyframes sk-stretchdelay {\r\n          0%, 40%, 100% {\r\n              transform: scaleY(0.4);\r\n              -webkit-transform: scaleY(0.4);\r\n          }  20% {\r\n              transform: scaleY(1.0);\r\n              -webkit-transform: scaleY(1.0);\r\n          }\r\n      }\r\n\r\n      /* Wandering Cubes styles */\r\n      .spinner-wandering-cubes {\r\n          width: 60px;\r\n          height: 58px;\r\n          font-size: 10px;\r\n          text-align: center;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n      }\r\n\r\n      .cube1, .cube2 {\r\n          background-color: #ffffff;\r\n          width: 15px;\r\n          height: 15px;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;\r\n          animation: sk-cubemove 1.8s infinite ease-in-out;\r\n      }\r\n\r\n      .cube2 {\r\n          -webkit-animation-delay: -0.9s;\r\n          animation-delay: -0.9s;\r\n      }\r\n\r\n      @-webkit-keyframes sk-cubemove {\r\n          25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }\r\n          50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }\r\n          75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }\r\n          100% { -webkit-transform: rotate(-360deg) }\r\n      }\r\n\r\n      @keyframes sk-cubemove {\r\n          25% {\r\n              transform: translateX(42px) rotate(-90deg) scale(0.5);\r\n              -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);\r\n          } 50% {\r\n              transform: translateX(42px) translateY(42px) rotate(-179deg);\r\n              -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);\r\n          } 50.1% {\r\n              transform: translateX(42px) translateY(42px) rotate(-180deg);\r\n              -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);\r\n          } 75% {\r\n              transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);\r\n              -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);\r\n          } 100% {\r\n              transform: rotate(-360deg);\r\n              -webkit-transform: rotate(-360deg);\r\n          }\r\n      }\r\n\r\n      /* Circle styles */\r\n      .sk-circle {\r\n          width: 40px;\r\n          height: 40px;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n        }\r\n        .sk-circle .sk-child {\r\n          width: 100%;\r\n          height: 100%;\r\n          position: absolute;\r\n          left: 0;\r\n          top: 0;\r\n        }\r\n        .sk-circle .sk-child: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: #333;\r\n          border-radius: 100%;\r\n          -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;\r\n                  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;\r\n        }\r\n        .sk-circle .sk-circle2 {\r\n          -webkit-transform: rotate(30deg);\r\n              -ms-transform: rotate(30deg);\r\n                  transform: rotate(30deg); }\r\n        .sk-circle .sk-circle3 {\r\n          -webkit-transform: rotate(60deg);\r\n              -ms-transform: rotate(60deg);\r\n                  transform: rotate(60deg); }\r\n        .sk-circle .sk-circle4 {\r\n          -webkit-transform: rotate(90deg);\r\n              -ms-transform: rotate(90deg);\r\n                  transform: rotate(90deg); }\r\n        .sk-circle .sk-circle5 {\r\n          -webkit-transform: rotate(120deg);\r\n              -ms-transform: rotate(120deg);\r\n                  transform: rotate(120deg); }\r\n        .sk-circle .sk-circle6 {\r\n          -webkit-transform: rotate(150deg);\r\n              -ms-transform: rotate(150deg);\r\n                  transform: rotate(150deg); }\r\n        .sk-circle .sk-circle7 {\r\n          -webkit-transform: rotate(180deg);\r\n              -ms-transform: rotate(180deg);\r\n                  transform: rotate(180deg); }\r\n        .sk-circle .sk-circle8 {\r\n          -webkit-transform: rotate(210deg);\r\n              -ms-transform: rotate(210deg);\r\n                  transform: rotate(210deg); }\r\n        .sk-circle .sk-circle9 {\r\n          -webkit-transform: rotate(240deg);\r\n              -ms-transform: rotate(240deg);\r\n                  transform: rotate(240deg); }\r\n        .sk-circle .sk-circle10 {\r\n          -webkit-transform: rotate(270deg);\r\n              -ms-transform: rotate(270deg);\r\n                  transform: rotate(270deg); }\r\n        .sk-circle .sk-circle11 {\r\n          -webkit-transform: rotate(300deg);\r\n              -ms-transform: rotate(300deg);\r\n                  transform: rotate(300deg); }\r\n        .sk-circle .sk-circle12 {\r\n          -webkit-transform: rotate(330deg);\r\n              -ms-transform: rotate(330deg);\r\n                  transform: rotate(330deg); }\r\n        .sk-circle .sk-circle2:before {\r\n          -webkit-animation-delay: -1.1s;\r\n                  animation-delay: -1.1s; }\r\n        .sk-circle .sk-circle3:before {\r\n          -webkit-animation-delay: -1s;\r\n                  animation-delay: -1s; }\r\n        .sk-circle .sk-circle4:before {\r\n          -webkit-animation-delay: -0.9s;\r\n                  animation-delay: -0.9s; }\r\n        .sk-circle .sk-circle5:before {\r\n          -webkit-animation-delay: -0.8s;\r\n                  animation-delay: -0.8s; }\r\n        .sk-circle .sk-circle6:before {\r\n          -webkit-animation-delay: -0.7s;\r\n                  animation-delay: -0.7s; }\r\n        .sk-circle .sk-circle7:before {\r\n          -webkit-animation-delay: -0.6s;\r\n                  animation-delay: -0.6s; }\r\n        .sk-circle .sk-circle8:before {\r\n          -webkit-animation-delay: -0.5s;\r\n                  animation-delay: -0.5s; }\r\n        .sk-circle .sk-circle9:before {\r\n          -webkit-animation-delay: -0.4s;\r\n                  animation-delay: -0.4s; }\r\n        .sk-circle .sk-circle10:before {\r\n          -webkit-animation-delay: -0.3s;\r\n                  animation-delay: -0.3s; }\r\n        .sk-circle .sk-circle11:before {\r\n          -webkit-animation-delay: -0.2s;\r\n                  animation-delay: -0.2s; }\r\n        .sk-circle .sk-circle12:before {\r\n          -webkit-animation-delay: -0.1s;\r\n                  animation-delay: -0.1s; }\r\n\r\n        @-webkit-keyframes sk-circleBounceDelay {\r\n          0%, 80%, 100% {\r\n            -webkit-transform: scale(0);\r\n                    transform: scale(0);\r\n          } 40% {\r\n            -webkit-transform: scale(1);\r\n                    transform: scale(1);\r\n          }\r\n        }\r\n\r\n        @keyframes sk-circleBounceDelay {\r\n          0%, 80%, 100% {\r\n            -webkit-transform: scale(0);\r\n                    transform: scale(0);\r\n          } 40% {\r\n            -webkit-transform: scale(1);\r\n                    transform: scale(1);\r\n          }\r\n        }\r\n\r\n        /* Chasing Dots styles */\r\n        .spinner-chasing-dots {\r\n          width: 40px;\r\n          height: 40px;\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          right: 0;\r\n          bottom: 0;\r\n          margin: auto;\r\n          z-index: 2000;\r\n          text-align: center;\r\n          -webkit-animation: sk-rotate 2.0s infinite linear;\r\n          animation: sk-rotate 2.0s infinite linear;\r\n        }\r\n\r\n        .dot1, .dot2 {\r\n          width: 60%;\r\n          height: 60%;\r\n          display: inline-block;\r\n          position: absolute;\r\n          top: 0;\r\n          background-color: #333;\r\n          border-radius: 100%;\r\n          -webkit-animation: sk-bounce 2.0s infinite ease-in-out;\r\n          animation: sk-bounce 2.0s infinite ease-in-out;\r\n        }\r\n\r\n        .dot2 {\r\n          top: auto;\r\n          bottom: 0;\r\n          -webkit-animation-delay: -1.0s;\r\n          animation-delay: -1.0s;\r\n        }\r\n\r\n        @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}\r\n        @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}\r\n\r\n        @-webkit-keyframes sk-bounce {\r\n          0%, 100% { -webkit-transform: scale(0.0) }\r\n          50% { -webkit-transform: scale(1.0) }\r\n        }\r\n\r\n        @keyframes sk-bounce {\r\n          0%, 100% {\r\n            transform: scale(0.0);\r\n            -webkit-transform: scale(0.0);\r\n          } 50% {\r\n            transform: scale(1.0);\r\n            -webkit-transform: scale(1.0);\r\n          }\r\n        }\r\n\r\n      .full-screen {\r\n          position: fixed;\r\n          position: -ms-page;\r\n      }\r\n    `\r\n    ]\r\n})\r\nexport class NgxLoadingComponent implements OnInit {\r\n    @Input() show: boolean;\r\n    @Input() config: INgxLoadingConfig = new NgxLoadingConfig();\r\n    @Input() template: TemplateRef<any>;\r\n    private defaultConfig: INgxLoadingConfig = {\r\n        animationType: ngxLoadingAnimationTypes.threeBounce,\r\n        backdropBackgroundColour: 'rgba(0, 0, 0, 0.3)',\r\n        backdropBorderRadius: '0px',\r\n        fullScreenBackdrop: false,\r\n        primaryColour: '#ffffff',\r\n        secondaryColour: '#ffffff',\r\n        tertiaryColour: '#ffffff'\r\n    };\r\n    public ngxLoadingAnimationTypes = ngxLoadingAnimationTypes;\r\n\r\n    constructor(private LoadingService: NgxLoadingService, private changeDetectorRef: ChangeDetectorRef) { }\r\n\r\n    ngOnInit() {\r\n        this.setupConfig();\r\n    }\r\n\r\n    private setupConfig(): void {\r\n        for (const option in this.defaultConfig) {\r\n            if (typeof this.config[option] === 'boolean') {\r\n                if (this.config[option] != null) {\r\n                    continue;\r\n                }\r\n\r\n                this.config[option] = this.LoadingService.loadingConfig[option] != null ? this.LoadingService.loadingConfig[option] : this.defaultConfig[option];\r\n            } else {\r\n                if (this.config[option] != null) {\r\n                    continue;\r\n                }\r\n\r\n                this.config[option] = this.LoadingService.loadingConfig[option] != null ? this.LoadingService.loadingConfig[option] : this.defaultConfig[option];\r\n            }\r\n        }\r\n    }\r\n\r\n    public setShow(show: boolean): void {\r\n        this.show = show;\r\n        this.changeDetectorRef.markForCheck();\r\n    }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { ModuleWithProviders, NgModule } from '@angular/core';\r\nimport { INgxLoadingConfig } from '../public_api';\r\nimport { NgxLoadingComponent } from './ngx-loading.component';\r\n\r\n@NgModule({\r\n  imports: [CommonModule],\r\n  declarations: [NgxLoadingComponent],\r\n  exports: [NgxLoadingComponent]\r\n})\r\nexport class NgxLoadingModule {\r\n  static forRoot(loadingConfig: INgxLoadingConfig): ModuleWithProviders {\r\n    return {\r\n      ngModule: NgxLoadingModule,\r\n      providers: [{ provide: 'loadingConfig', useValue: loadingConfig }]\r\n    };\r\n  }\r\n}\r\n"],"names":["Injectable","Optional","Inject","Component","ChangeDetectorRef","Input","NgModule","CommonModule"],"mappings":"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"}