ngx-loading-fork 17.0.0

package/LICENSE

@@ -0,0 +1,23 @@
+The MIT License (MIT)
+
+Copyright 2024
+
+Original author: Z.C
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

package/README.md

@@ -0,0 +1,180 @@
+# ngx-loading
+
+A customisable loading spinner for Angular applications.
+
+[![npm version](https://badge.fury.io/js/ngx-loading.svg)](https://badge.fury.io/js/ngx-loading)
+[![Monthly Downloads](https://img.shields.io/npm/dm/ngx-loading)]()
+![Known Vulnerabilities](https://snyk.io/test/github/Zak-C/ngx-loading/badge.svg)
+
+![ngx-loading](https://cloud.githubusercontent.com/assets/26901242/25317405/05a1ce4a-2870-11e7-8693-ed2394b54cba.gif)
+
+## Table of contents
+
+1. [Demo](#demo)
+2. [Installation](#installation)
+3. [Getting started](#getting-started)
+4. [Input parameters](#input-parameters)
+5. [Config options](#config-options)
+
+## Demo
+
+Check out the interactive demo on [StackBlitz](https://stackblitz.com/edit/ngx-loading-sample?file=src/app/app.component.html "ngx-loading StackBlitz demo").
+
+## Installation
+
+Install ngx-loading via NPM, using the command below.
+
+### NPM
+
+```shell
+npm install --save ngx-loading
+```
+
+NOTE: Version 17 of this package requires Angular 17 as a dependency. If you are using an older version of Angular, please install the relevant version e.g. 2.0.1 for Angular 2:
+
+```shell
+npm install --save ngx-loading@2.0.1
+```
+
+## Getting started
+
+Import the `NgxLoadingModule` in your root application module:
+
+```typescript
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { CoreModule } from "./core/core.module";
+import { NgxLoadingModule } from "ngx-loading";
+
+@NgModule({
+  //...
+  imports: [
+    //...
+    NgxLoadingModule.forRoot({}),
+  ],
+  //...
+})
+export class AppModule {}
+```
+
+You must create a boolean variable (e.g. `loading` below) that is accessible from the component which will contain ngx-loading. This boolean is used as an input into ngx-loading, and will determine when the loading spinner is visible.
+
+```typescript
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  //...
+})
+export class AppComponent implements OnInit {
+  //...
+  public loading = false;
+
+  constructor(private authService: AuthService) {}
+
+  ngOnInit() {}
+
+  Login() {
+    this.loading = true;
+    this.authService.login(this.email, this.password).subscribe(
+      (res) => {
+        this.loading = false;
+        //...
+      },
+      (err) => {
+        this.loading = false;
+        //...
+      }
+    );
+  }
+}
+```
+
+Next, add the ngx-loading component selector to your application component's template. Set the `[show]` input variable of ngx-loading to point to your boolean, which will determine when ngx-loading is visible. Optionally set the `[config]` input variable of ngx-loading to setup custom configuration options. If the `[config]` input variable is not set, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options) for further information.
+
+You can also optionally define a `[template]` input variable, which can be used to inject your own custom templates into the component.
+
+NOTE: ngx-loading will fill the entirety of its parent component. If you wish for ngx-loading to only fill a specific element within your component, ensure that ngx-loading is a child element of that element, and that the containing element has its `position` attribute set to `relative`.
+
+```html
+<div class="my-container">
+  <ng-template #customLoadingTemplate>
+    <div class="custom-class">
+      <h3>Loading...</h3>
+      <button (click)="showAlert()">Click me!</button>
+    </div>
+  </ng-template>
+
+  <ngx-loading
+    [show]="loading"
+    [config]="{ backdropBorderRadius: '3px' }"
+    [template]="customLoadingTemplate"
+  ></ngx-loading>
+  //...
+</div>
+```
+
+## Input parameters
+
+| Input    | Required | Details                                                                                                                                                                                                                                                         |
+| -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| show     | Required | A boolean, which will determine when ngx-loading is visible.                                                                                                                                                                                                    |
+| config   | Optional | A set of configuration options for ngx-loading. If this is not specified, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options). |
+| template | Optional | A TemplateRef, which will be displayed within the ngx-loading component. Use this to inject your own custom templates into the component.                                                                                                                       |
+
+## Config options
+
+| Option                   | Required | Default                              | Details                                                                                                         |
+| ------------------------ | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| animationType            | Optional | ngxLoadingAnimationTypes.threeBounce | The animation to be used within ngx-loading. Use the ngxLoadingAnimationTypes constant to select valid options. |
+| backdropBorderRadius     | Optional | 0                                    | The border-radius to be applied to the ngx-loading backdrop, e.g. '14px'.                                       |
+| backdropBackgroundColour | Optional | rgba(0, 0, 0, 0.3)                   | The background-color to be applied to the ngx-loading backdrop, e.g. 'rgba(255, 255, 255, 0.2)'.                |
+| fullScreenBackdrop       | Optional | false                                | Set to true to make the backdrop full screen, with the loading animation centered in the middle of the screen.  |
+| primaryColour            | Optional | #ffffff                              | The primary colour, which will be applied to the ngx-loading animation.                                         |
+| secondaryColour          | Optional | #ffffff                              | The secondary colour, which will be applied to the ngx-loading animation (where appropriate).                   |
+| tertiaryColour           | Optional | #ffffff                              | The tertiary colour, which will be applied to the ngx-loading animation (where appropriate).                    |
+
+Config options can be set globally (using the `.forRoot() module import statement`), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.
+
+```typescript
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { CoreModule } from "./core/core.module";
+import { NgxLoadingModule, ngxLoadingAnimationTypes } from "ngx-loading";
+
+@NgModule({
+  //...
+  imports: [
+    //...
+    NgxLoadingModule.forRoot({
+      animationType: ngxLoadingAnimationTypes.wanderingCubes,
+      backdropBackgroundColour: "rgba(0,0,0,0.1)",
+      backdropBorderRadius: "4px",
+      primaryColour: "#ffffff",
+      secondaryColour: "#ffffff",
+      tertiaryColour: "#ffffff",
+    }),
+  ],
+  //...
+})
+export class AppModule {}
+```
+
+```html
+<div class="my-container">
+  <ng-template #customLoadingTemplate>
+    <div class="custom-class">
+      <h3>Loading...</h3>
+      <button (click)="showAlert()">Click me!</button>
+    </div>
+  </ng-template>
+
+  <ngx-loading
+    [show]="loading"
+    [config]="{ animationType: ngxLoadingAnimationTypes.rectangleBounce,
+        backdropBackgroundColour: 'rgba(255,255,255,0.3)', backdropBorderRadius: '10px',
+        primaryColour: '#ffffff', secondaryColour: '#ffffff', tertiaryColour: '#ffffff' }"
+    [template]="customLoadingTemplate"
+  ></ngx-loading>
+  //...
+</div>
+```

package/esm2022/lib/ngx-loading-config.mjs

@@ -0,0 +1,25 @@
+export class NgxLoadingConfig {
+    constructor(config = {}) {
+        this.backdropBorderRadius = config.backdropBorderRadius;
+        this.backdropBackgroundColour = config.backdropBackgroundColour;
+        this.fullScreenBackdrop = config.fullScreenBackdrop;
+        this.animationType = config.animationType;
+        this.primaryColour = config.primaryColour;
+        this.secondaryColour = config.secondaryColour;
+        this.tertiaryColour = config.tertiaryColour;
+    }
+}
+export const ngxLoadingAnimationTypes = {
+    chasingDots: 'chasing-dots',
+    circle: 'sk-circle',
+    circleSwish: 'circleSwish',
+    cubeGrid: 'sk-cube-grid',
+    doubleBounce: 'double-bounce',
+    none: 'none',
+    pulse: 'pulse',
+    rectangleBounce: 'rectangle-bounce',
+    rotatingPlane: 'rotating-plane',
+    threeBounce: 'three-bounce',
+    wanderingCubes: 'wandering-cubes',
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWxvYWRpbmctY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxvYWRpbmcvc3JjL2xpYi9uZ3gtbG9hZGluZy1jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV0EsTUFBTSxPQUFPLGdCQUFnQjtJQVUzQixZQUFZLFNBQTRCLEVBQUU7UUFDeEMsSUFBSSxDQUFDLG9CQUFvQixHQUFHLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQztRQUN4RCxJQUFJLENBQUMsd0JBQXdCLEdBQUcsTUFBTSxDQUFDLHdCQUF3QixDQUFDO1FBQ2hFLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUM7UUFDcEQsSUFBSSxDQUFDLGFBQWEsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDO1FBQzFDLElBQUksQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQztRQUMxQyxJQUFJLENBQUMsZUFBZSxHQUFHLE1BQU0sQ0FBQyxlQUFlLENBQUM7UUFDOUMsSUFBSSxDQUFDLGNBQWMsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDO0lBQzlDLENBQUM7Q0FDRjtBQUVELE1BQU0sQ0FBQyxNQUFNLHdCQUF3QixHQUFHO0lBQ3RDLFdBQVcsRUFBRSxjQUFjO0lBQzNCLE1BQU0sRUFBRSxXQUFXO0lBQ25CLFdBQVcsRUFBRSxhQUFhO0lBQzFCLFFBQVEsRUFBRSxjQUFjO0lBQ3hCLFlBQVksRUFBRSxlQUFlO0lBQzdCLElBQUksRUFBRSxNQUFNO0lBQ1osS0FBSyxFQUFFLE9BQU87SUFDZCxlQUFlLEVBQUUsa0JBQWtCO0lBQ25DLGFBQWEsRUFBRSxnQkFBZ0I7SUFDL0IsV0FBVyxFQUFFLGNBQWM7SUFDM0IsY0FBYyxFQUFFLGlCQUFpQjtDQUNsQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBJTmd4TG9hZGluZ0NvbmZpZyB7XG4gIGJhY2tkcm9wQm9yZGVyUmFkaXVzPzogc3RyaW5nO1xuICBiYWNrZHJvcEJhY2tncm91bmRDb2xvdXI/OiBzdHJpbmc7XG4gIGZ1bGxTY3JlZW5CYWNrZHJvcD86IGJvb2xlYW47XG4gIGFuaW1hdGlvblR5cGU/OiBzdHJpbmc7XG4gIHByaW1hcnlDb2xvdXI/OiBzdHJpbmc7XG4gIHNlY29uZGFyeUNvbG91cj86IHN0cmluZztcbiAgdGVydGlhcnlDb2xvdXI/OiBzdHJpbmc7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZyB8IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG59XG5cbmV4cG9ydCBjbGFzcyBOZ3hMb2FkaW5nQ29uZmlnIGltcGxlbWVudHMgSU5neExvYWRpbmdDb25maWcge1xuICBiYWNrZHJvcEJvcmRlclJhZGl1cz86IHN0cmluZztcbiAgYmFja2Ryb3BCYWNrZ3JvdW5kQ29sb3VyPzogc3RyaW5nO1xuICBmdWxsU2NyZWVuQmFja2Ryb3A/OiBib29sZWFuO1xuICBhbmltYXRpb25UeXBlPzogc3RyaW5nO1xuICBwcmltYXJ5Q29sb3VyPzogc3RyaW5nO1xuICBzZWNvbmRhcnlDb2xvdXI/OiBzdHJpbmc7XG4gIHRlcnRpYXJ5Q29sb3VyPzogc3RyaW5nO1xuICBba2V5OiBzdHJpbmddOiBzdHJpbmcgfCBib29sZWFuIHwgdW5kZWZpbmVkO1xuXG4gIGNvbnN0cnVjdG9yKGNvbmZpZzogSU5neExvYWRpbmdDb25maWcgPSB7fSkge1xuICAgIHRoaXMuYmFja2Ryb3BCb3JkZXJSYWRpdXMgPSBjb25maWcuYmFja2Ryb3BCb3JkZXJSYWRpdXM7XG4gICAgdGhpcy5iYWNrZHJvcEJhY2tncm91bmRDb2xvdXIgPSBjb25maWcuYmFja2Ryb3BCYWNrZ3JvdW5kQ29sb3VyO1xuICAgIHRoaXMuZnVsbFNjcmVlbkJhY2tkcm9wID0gY29uZmlnLmZ1bGxTY3JlZW5CYWNrZHJvcDtcbiAgICB0aGlzLmFuaW1hdGlvblR5cGUgPSBjb25maWcuYW5pbWF0aW9uVHlwZTtcbiAgICB0aGlzLnByaW1hcnlDb2xvdXIgPSBjb25maWcucHJpbWFyeUNvbG91cjtcbiAgICB0aGlzLnNlY29uZGFyeUNvbG91ciA9IGNvbmZpZy5zZWNvbmRhcnlDb2xvdXI7XG4gICAgdGhpcy50ZXJ0aWFyeUNvbG91ciA9IGNvbmZpZy50ZXJ0aWFyeUNvbG91cjtcbiAgfVxufVxuXG5leHBvcnQgY29uc3Qgbmd4TG9hZGluZ0FuaW1hdGlvblR5cGVzID0ge1xuICBjaGFzaW5nRG90czogJ2NoYXNpbmctZG90cycsXG4gIGNpcmNsZTogJ3NrLWNpcmNsZScsXG4gIGNpcmNsZVN3aXNoOiAnY2lyY2xlU3dpc2gnLFxuICBjdWJlR3JpZDogJ3NrLWN1YmUtZ3JpZCcsXG4gIGRvdWJsZUJvdW5jZTogJ2RvdWJsZS1ib3VuY2UnLFxuICBub25lOiAnbm9uZScsXG4gIHB1bHNlOiAncHVsc2UnLFxuICByZWN0YW5nbGVCb3VuY2U6ICdyZWN0YW5nbGUtYm91bmNlJyxcbiAgcm90YXRpbmdQbGFuZTogJ3JvdGF0aW5nLXBsYW5lJyxcbiAgdGhyZWVCb3VuY2U6ICd0aHJlZS1ib3VuY2UnLFxuICB3YW5kZXJpbmdDdWJlczogJ3dhbmRlcmluZy1jdWJlcycsXG59O1xuIl19