Merge pull request #132 from Zak-C/develop

Develop
Zak-C · Mar 1, 2022 · 651060c · 651060c
2 parents d8351b1 + cf57ae6
commit 651060c
Show file tree

Hide file tree

Showing 42 changed files with 11,030 additions and 8,916 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,54 @@
+{
+    "root": true,
+    "ignorePatterns": [
+      "projects/**/*"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.ts"
+        ],
+        "parserOptions": {
+          "project": [
+            "tsconfig.json",
+            "e2e/tsconfig.json"
+          ],
+          "createDefaultProgram": true
+        },
+        "extends": [
+            "plugin:@angular-eslint/recommended",
+            "eslint:recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:@typescript-eslint/recommended-requiring-type-checking",
+            "plugin:@angular-eslint/template/process-inline-templates"
+        ],
+        "rules": {
+          "@angular-eslint/component-selector": [
+            "error",
+            {
+              "type": "element",
+              "prefix": "app",
+              "style": "kebab-case"
+            }
+          ],
+          "@angular-eslint/directive-selector": [
+            "error",
+            {
+              "type": "attribute",
+              "prefix": "app",
+              "style": "camelCase"
+            }
+          ]
+        }
+      },
+      {
+        "files": [
+          "*.html"
+        ],
+        "extends": [
+          "plugin:@angular-eslint/template/recommended"
+        ],
+        "rules": {}
+      }
+    ]
+  }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,18 @@
+name: CI Angular app through Github Actions
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+
+      - name: Setup
+        run: npm ci
+
+      - name: Test
+        run: |
+          npm test -- --configuration=ci
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.pretterrc b/.pretterrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+**/dist
+**/coverage
+**/.vscode
+**/.nyc_output
+**/.github
+**/node_modules
+**/.angular
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,23 @@
+The MIT License (MIT)
+
+Copyright 2022
+
+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.
diff --git a/README.md b/README.md
@@ -1,80 +1,89 @@
 # 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)
 
 ![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. 
+
+Install ngx-loading via NPM, using the command below.
 
 ### NPM
+
 ```shell
 npm install --save ngx-loading
 ```
 
 NOTE: Version 13 of this package requires Angular 13 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';
+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({})
+    NgxLoadingModule.forRoot({}),
   ],
   //...
 })
-export class AppModule { }
+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';
+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;
-                //...
-            });
-    }
+  //...
+  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;
+        //...
+      }
+    );
+  }
 }
 ```
 
@@ -86,84 +95,84 @@ NOTE: ngx-loading will fill the entirety of its parent component. If you wish fo
 
 ```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>
-    //...
+  <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.
+| 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). |
+| 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';
+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'
-    })
+      animationType: ngxLoadingAnimationTypes.wanderingCubes,
+      backdropBackgroundColour: "rgba(0,0,0,0.1)",
+      backdropBorderRadius: "4px",
+      primaryColour: "#ffffff",
+      secondaryColour: "#ffffff",
+      tertiaryColour: "#ffffff",
+    }),
   ],
   //...
 })
-export class AppModule { }
+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,
+  <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>
-    //...
+        primaryColour: '#ffffff', secondaryColour: '#ffffff', tertiaryColour: '#ffffff' }"
+    [template]="customLoadingTemplate"
+  ></ngx-loading>
+  //...
 </div>
-```
+```