├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── RELEASES.md ├── dev ├── app │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── block-element │ │ ├── block-element.component.css │ │ ├── block-element.component.html │ │ ├── block-element.component.ts │ │ └── block-element.module.ts │ ├── block-template │ │ └── block-template.component.ts │ ├── default │ │ ├── default.component.css │ │ ├── default.component.html │ │ └── default.component.ts │ ├── landing-page │ │ ├── landing-page.component.css │ │ ├── landing-page.component.html │ │ └── landing-page.component.ts │ ├── main.ts │ └── multi-http │ │ ├── multi-http.component.html │ │ └── multi-http.component.ts ├── bs-config.json ├── index.html ├── package-lock.json ├── package.json ├── styles.css ├── systemjs.config.js └── tsconfig.json ├── docs ├── http-module.md ├── migration-1.0.0.md ├── migration-2.0.0.md ├── router-module.md └── systemjs-config.md ├── examples ├── custom-spinner-styles │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── browserslist │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── custom-template │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── browserslist │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── block-template │ │ │ │ └── block-template.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── default-message │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── browserslist │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── default │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── browserslist │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ ├── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.spec.json │ │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json └── directive │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── browserslist │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── http ├── block-ui-http-settings.service.ts ├── block-ui-http.interceptor.spec.ts ├── block-ui-http.interceptor.ts ├── block-ui-http.module.ts ├── index.ts └── ng-package.json ├── karma.conf.js ├── karma.shim.ts ├── lib ├── block-ui.module.spec.ts ├── block-ui.module.ts ├── components │ ├── block-ui-content │ │ ├── block-ui-content.component.spec.ts │ │ ├── block-ui-content.component.style.ts │ │ ├── block-ui-content.component.template.ts │ │ └── block-ui-content.component.ts │ └── block-ui │ │ ├── block-ui.component.spec.ts │ │ └── block-ui.component.ts ├── constants │ ├── block-ui-actions.constant.ts │ └── block-ui-default-name.constant.ts ├── decorators │ ├── block-ui.decorator.spec.ts │ └── block-ui.decorator.ts ├── directives │ ├── block-ui.directive.spec.ts │ └── block-ui.directive.ts ├── index.ts ├── models │ ├── block-ui-block-timeout.model.ts │ ├── block-ui-decorator-settings.model.ts │ ├── block-ui-event.model.ts │ ├── block-ui-http-settings.model.ts │ ├── block-ui-settings.model.ts │ └── block-ui.model.ts └── services │ ├── block-ui-instance.service.spec.ts │ ├── block-ui-instance.service.ts │ ├── block-ui.service.spec.ts │ └── block-ui.service.ts ├── ng-package.json ├── package-lock.json ├── package.json ├── router ├── block-ui-prevent-navigation.service.spec.ts ├── block-ui-prevent-navigation.service.ts ├── block-ui-router.module.ts ├── index.ts └── ng-package.json ├── tsconfig-umd.json ├── tsconfig.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea/ 3 | node_modules 4 | npm-debug.log 5 | settings.json 6 | *.tgz 7 | *.metadata.json 8 | 9 | /dist 10 | /bundles 11 | dev/bundles 12 | dev/node_modules 13 | dev/app/**/*.js 14 | dev/app/**/*.js.map 15 | dev/package-lock.json 16 | coverage 17 | 18 | index.js 19 | index.js.map 20 | lib/**/*.js 21 | lib/**/*.js.map 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .gitignore 3 | npm-debug.log 4 | *.tgz 5 | .npmignore 6 | config 7 | dev 8 | karma.conf.js 9 | karma.shim.js 10 | tslint.json 11 | webpack.config.json 12 | vendor.ts 13 | docs 14 | .travis.yml 15 | CONTRIBUTING.md 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | addons: 4 | chrome: stable 5 | before_script: 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start 8 | - sleep 3 9 | language: node_js 10 | node_js: 11 | - '8' 12 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | Pull request are always welcome and I appreciate any help on this project. This doc will hopefully make it easier for people to help contribute to this project. 3 | 4 | ## Setup 5 | * Fork the repo and clone the repo locally 6 | * Install main library dependencies 7 | * Run `npm install` in the root of the project 8 | * Install dev dependencies 9 | * Change to the `dev` directory 10 | * Run `npm install` to install dev dependencies 11 | 12 | ## Local Development 13 | This repo contains a `dev` directory to make it easier to test and debug changes made to the library. Currently, it just is used to test components but in the future I would like this to turn into interactive examples for the docs as well. 14 | 15 | ### Steps for Local Development 16 | * In the root folder run `npm start`. This will watch the `lib` folder for changes and then transpile any changes. Once transpiled, the changes will copied to the `dev` directory and replace the `ng-block-ui` dependency. 17 | * In a separate terminal run `npm start` in the `dev` directory. This will spin up a server with the dev app. Whenever changes are made to the `dev` or `lib` directory the server will reload. 18 | 19 | ## Git 20 | 21 | ### Commit Messages 22 | To make it easier to generate a changelog the npm [generate-changelog](https://www.npmjs.com/package/generate-changelog) is used. For this to work the following commit schema should be used for all commit messages. *More info can be found [here](https://www.npmjs.com/package/generate-changelog#usage) and please look at past commit messages for reference* 23 | 24 | ``` 25 | type(category): description (#issue) 26 | ``` 27 | 28 | * **type:** Type of change - *examples: feat, fix, task* 29 | * **category:** Section being changed - *examples: docs, directive, module* 30 | * **description:** Short description of changes 31 | * **issue:** Github issue number that your commit addresses 32 | 33 | ### Pull Request 34 | Please use the same name as your git commit message for the pull request title. Also include a quick description of your changes. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dev/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dev/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | templateUrl: './app.component.html', 6 | moduleId: __moduleName 7 | }) 8 | export class AppComponent {} 9 | -------------------------------------------------------------------------------- /dev/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule, Routes } from '@angular/router'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | 6 | import { BlockUIModule } from 'ng-block-ui'; 7 | import { BlockUIRouterModule, BlockUIPreventNavigation } from 'ng-block-ui/router'; 8 | import { BlockUIHttpModule } from 'ng-block-ui/http'; 9 | 10 | import { BlockElementModule } from './block-element/block-element.module'; 11 | import { BlockTemplateComponent } from './block-template/block-template.component'; 12 | import { AppComponent } from './app.component'; 13 | import { DefaultComponent } from './default/default.component'; 14 | import { LandingPageComponent } from './landing-page/landing-page.component'; 15 | import { MultiHttpComponent } from './multi-http/multi-http.component'; 16 | 17 | const appRoutes: Routes = [ 18 | { 19 | path: '', 20 | canActivateChild: [BlockUIPreventNavigation], 21 | children: [ 22 | { path: '', component: DefaultComponent }, 23 | { path: 'landing-page', component: LandingPageComponent }, 24 | { path: 'multi-http', component: MultiHttpComponent } 25 | ] 26 | } 27 | ]; 28 | 29 | @NgModule({ 30 | imports: [ 31 | BrowserModule, 32 | BlockElementModule, 33 | BlockUIModule.forRoot({ 34 | message: 'Global Default Message', 35 | template: BlockTemplateComponent 36 | }), 37 | BlockUIRouterModule.forRoot(), 38 | BlockUIHttpModule.forRoot({ 39 | requestFilters: [] // /\/api.github.com\/users\// 40 | }), 41 | HttpClientModule, 42 | RouterModule.forRoot(appRoutes) 43 | ], 44 | declarations: [ 45 | BlockTemplateComponent, 46 | AppComponent, 47 | DefaultComponent, 48 | LandingPageComponent, 49 | MultiHttpComponent 50 | ], 51 | providers: [], 52 | entryComponents: [ 53 | BlockTemplateComponent 54 | ], 55 | bootstrap: [ 56 | AppComponent 57 | ] 58 | }) 59 | export class AppModule { } 60 | -------------------------------------------------------------------------------- /dev/app/block-element/block-element.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | width: 45%; 4 | max-width: 650px; 5 | margin: 75px auto 10px auto; 6 | background: #eee; 7 | } 8 | 9 | :host h1 { 10 | padding: 155px 0; 11 | color: #32424e; 12 | } -------------------------------------------------------------------------------- /dev/app/block-element/block-element.component.html: -------------------------------------------------------------------------------- 1 |

Angular Block UI Element

-------------------------------------------------------------------------------- /dev/app/block-element/block-element.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | selector: 'block-element', 6 | templateUrl: './block-element.component.html', 7 | styleUrls: ['./block-element.component.css'], 8 | moduleId: __moduleName 9 | }) 10 | export class BlockElementComponent { 11 | 12 | constructor() { } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /dev/app/block-element/block-element.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { BlockUIModule } from 'ng-block-ui'; 4 | 5 | import { BlockElementComponent } from './block-element.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | BrowserModule, 10 | BlockUIModule 11 | ], 12 | declarations: [ 13 | BlockElementComponent 14 | ], 15 | exports: [ 16 | BlockElementComponent 17 | ], 18 | entryComponents: [ BlockElementComponent ] 19 | }) 20 | export class BlockElementModule { } 21 | -------------------------------------------------------------------------------- /dev/app/block-template/block-template.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | styles: [` 6 | :host { 7 | color: #fff; 8 | } 9 | `], 10 | template: ` 11 |
12 |
{{message}}
13 |
Custom Template
14 |
15 | `, 16 | }) 17 | export class BlockTemplateComponent { 18 | constructor() {} 19 | } 20 | -------------------------------------------------------------------------------- /dev/app/default/default.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/dev/app/default/default.component.css -------------------------------------------------------------------------------- /dev/app/default/default.component.html: -------------------------------------------------------------------------------- 1 |

Angular Block UI

2 |
3 | 6 | 9 |
10 |
11 | 14 | 17 | 20 | 23 |
24 |
25 | 28 |
29 |
30 | 33 |
34 |
35 | 36 |
37 | -------------------------------------------------------------------------------- /dev/app/default/default.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BlockUI, NgBlockUI, BlockUIService } from 'ng-block-ui'; 3 | 4 | @Component({ 5 | selector: 'default', 6 | templateUrl: './default.component.html', 7 | styleUrls: ['./default.component.css'], 8 | moduleId: __moduleName 9 | }) 10 | export class DefaultComponent { 11 | @BlockUI() blockUI: NgBlockUI; 12 | @BlockUI('block-element') elementBlockUI: NgBlockUI; 13 | 14 | defaultMessage: string = 'Default Message...'; 15 | timeout: number = 2000; 16 | blockInstances = ['block-element', 'block-element-2', 'block-element-3']; 17 | 18 | constructor( 19 | private blockUIService: BlockUIService 20 | ) { } 21 | 22 | blockMain(message: string) { 23 | this.blockUI.start(message); 24 | 25 | setTimeout(() => { 26 | this.blockUI.stop(); 27 | }, this.timeout); 28 | } 29 | 30 | blockElement() { 31 | this.elementBlockUI.start(); 32 | 33 | setTimeout(() => { 34 | this.elementBlockUI.stop(); 35 | }, this.timeout); 36 | } 37 | 38 | blockAllElements() { 39 | this.blockUIService.start(this.blockInstances, 'Loading All'); 40 | 41 | setTimeout(() => { 42 | this.blockUIService.update(this.blockInstances, 'Update Message'); 43 | }, this.timeout / 2); 44 | 45 | setTimeout(() => { 46 | this.blockUIService.stop(this.blockInstances); 47 | }, this.timeout); 48 | } 49 | 50 | blockUpdate() { 51 | let messages: string[] = ['Logging In', 'Loading Settings', 'Loading Widgets'], 52 | i = 0, 53 | interval: any; 54 | 55 | this.elementBlockUI.start('Welcome'); 56 | 57 | interval = setInterval(() => { 58 | this.elementBlockUI.update(messages[i]); 59 | i++; 60 | 61 | if (i > messages.length) { 62 | this.elementBlockUI.stop(); 63 | clearInterval(interval); 64 | } 65 | }, 850); 66 | } 67 | 68 | blockNestedTimeout() { 69 | this.blockUI.start("foo"); 70 | 71 | setTimeout(() => { 72 | this.blockUI.stop(); 73 | this.blockUI.start("bar"); 74 | 75 | setTimeout(() => { 76 | this.blockUI.stop(); 77 | }, 2500); 78 | }, 2500); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /dev/app/landing-page/landing-page.component.css: -------------------------------------------------------------------------------- 1 | .user { 2 | margin: 30px 0 0 0; 3 | color: #fff; 4 | } 5 | -------------------------------------------------------------------------------- /dev/app/landing-page/landing-page.component.html: -------------------------------------------------------------------------------- 1 |

Super Cool Landing Page

2 |
3 | 4 | 5 | 6 |
7 |
8 | 9 |

{{user.login}}

10 |
11 | -------------------------------------------------------------------------------- /dev/app/landing-page/landing-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { BlockUI, NgBlockUI } from 'ng-block-ui'; 4 | 5 | @Component({ 6 | selector: 'landing-page', 7 | templateUrl: './landing-page.component.html', 8 | styleUrls: ['./landing-page.component.css'], 9 | moduleId: __moduleName 10 | }) 11 | export class LandingPageComponent { 12 | @BlockUI() blockUI: NgBlockUI; 13 | user: any = null; 14 | private timeout: number = 8000; 15 | private url: string = 'https://api.github.com/users/kuuurt13'; 16 | 17 | constructor(public http: HttpClient) {} 18 | 19 | public getUser() { 20 | this.http.get(this.url) 21 | .subscribe( 22 | data => this.user = data, 23 | err => console.log(err) 24 | ); 25 | } 26 | 27 | blockMain() { 28 | this.blockUI.start('Try To Navigate Back'); 29 | 30 | setTimeout((blockUI) => { 31 | this.blockUI.stop(); 32 | }, this.timeout); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /dev/app/main.ts: -------------------------------------------------------------------------------- 1 | import 'core-js/es7/reflect'; 2 | import 'zone.js/dist/zone'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | 5 | import { AppModule } from './app.module'; 6 | 7 | const platform = platformBrowserDynamic(); 8 | 9 | platform.bootstrapModule(AppModule); 10 | -------------------------------------------------------------------------------- /dev/app/multi-http/multi-http.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Request 1: {{ requests.first }}

4 |

Request 2: {{ requests.second }}

5 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /dev/app/multi-http/multi-http.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { HttpClient } from "@angular/common/http"; 3 | 4 | @Component({ 5 | selector: "multi-http", 6 | templateUrl: "./multi-http.component.html", 7 | styleUrls: [], 8 | moduleId: __moduleName 9 | }) 10 | export class MultiHttpComponent { 11 | requests = { 12 | first: "undefined", 13 | second: "undefined" 14 | }; 15 | url = "https://httpstat.us/200?sleep="; 16 | 17 | constructor(public http: HttpClient) { } 18 | 19 | getWithTimeout(request: string, timeout: number) { 20 | this.requests[request] = "pending"; 21 | this.http.get(this.url + timeout).subscribe(data => { 22 | this.requests[request] = "complete"; 23 | }); 24 | } 25 | 26 | makeRequests() { 27 | this.getWithTimeout("first", 1000); 28 | this.getWithTimeout("second", 3000); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /dev/bs-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": ["./**/*.{html,htm,css,js,ts}" ], 3 | "watchOptions": { 4 | "ignored": "node_modules" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ng-block-ui Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /dev/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-block-ui-dev", 3 | "version": "1.0.0", 4 | "description": "Angular (2.x & up) Block UI Demo", 5 | "main": "src/index.ts", 6 | "scripts": { 7 | "start": "lite-server -c bs-config.json" 8 | }, 9 | "repository": {}, 10 | "keywords": [], 11 | "author": "kuuurt13", 12 | "license": "MIT", 13 | "bugs": {}, 14 | "homepage": "", 15 | "dependencies": { 16 | "@angular/common": "^6.0.7", 17 | "@angular/compiler": "^6.0.7", 18 | "@angular/core": "^6.0.7", 19 | "@angular/forms": "6.0.7", 20 | "@angular/http": "6.0.7", 21 | "@angular/platform-browser": "^6.0.7", 22 | "@angular/platform-browser-dynamic": "^6.0.7", 23 | "@angular/router": "6.0.7", 24 | "@angular/upgrade": "6.0.7", 25 | "angular2-in-memory-web-api": "0.0.21", 26 | "core-js": "^2.5.7", 27 | "plugin-typescript": "^7.1.1", 28 | "reflect-metadata": "^0.1.10", 29 | "rxjs": "^6.2.1", 30 | "rxjs-compat": "^6.2.2", 31 | "systemjs": "^0.20.19", 32 | "ts": "0.0.0", 33 | "tslib": "^1.9.3", 34 | "typescript": "2.7.2", 35 | "zone.js": "^0.8.26" 36 | }, 37 | "devDependencies": { 38 | "lite-server": "^2.5.4" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /dev/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | background: #32424e; 4 | font-family: sans-serif; 5 | text-align: center; 6 | } 7 | 8 | h1 { 9 | color: #dae2ea; 10 | } 11 | 12 | .button { 13 | padding: 10px 20px; 14 | margin: 0 5px; 15 | border: none; 16 | cursor: pointer; 17 | } 18 | 19 | .button--default { 20 | background: #ff6675; 21 | color: #fff; 22 | } 23 | 24 | .controls { 25 | margin-bottom: 10px 26 | } -------------------------------------------------------------------------------- /dev/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * PLUNKER VERSION 3 | * (based on systemjs.config.js in angular.io) 4 | * System configuration for Angular 2 samples 5 | * Adjust as necessary for your application needs. 6 | */ 7 | (function (global) { 8 | System.config({ 9 | baseURL: '../', 10 | transpiler: 'ts', 11 | typescriptOptions: { 12 | tsconfig: true 13 | }, 14 | meta: { 15 | 'typescript': { 16 | "exports": "ts" 17 | } 18 | }, 19 | paths: { 20 | // paths serve as alias 21 | 'npm:': 'node_modules/', 22 | 'bundles': 'bundles' 23 | }, 24 | // map tells the System loader where to look for things 25 | map: { 26 | // our app is within the app folder 27 | app: 'app', 28 | 29 | // angular bundles 30 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 31 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 32 | '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js', 33 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 34 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 35 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 36 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 37 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 38 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 39 | '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 40 | 41 | // other libraries 42 | 'core-js': 'npm:core-js', 43 | 'rxjs': 'npm:rxjs', 44 | 'rxjs-compat': 'npm:rxjs', 45 | 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 46 | 'tslib': 'npm:tslib/tslib.js', 47 | 'ts': 'npm:plugin-typescript/lib/plugin.js', 48 | 'typescript': 'npm:typescript/lib/typescript.js', 49 | 'zone.js': 'npm:zone.js', 50 | 'ng-block-ui': 'bundles/umd/lib', 51 | 'ng-block-ui/router': 'bundles/umd/router', 52 | 'ng-block-ui/http': 'bundles/umd/http', 53 | }, 54 | // packages tells the System loader how to load when no filename and/or no extension 55 | packages: { 56 | app: { 57 | main: './main.ts', 58 | defaultExtension: 'ts' 59 | }, 60 | 'core-js': {}, 61 | 'rxjs': {'main': 'index.js','defaultExtension': 'js'}, 62 | 'rxjs/operators': {'main': 'index.js','defaultExtension': 'js'}, 63 | 'rxjs/internal-compatibility': {'main': 'index.js','defaultExtension': 'js'}, 64 | 'rxjs/testing': {'main': 'index.js','defaultExtension': 'js'}, 65 | 'rxjs/ajax': {'main': 'index.js','defaultExtension': 'js'}, 66 | 'rxjs/webSocket': {'main': 'index.js','defaultExtension': 'js'}, 67 | 'rxjs-compat': {'main': 'index.js','defaultExtension': 'js'}, 68 | 'angular2-in-memory-web-api': { 69 | main: './index.js', 70 | defaultExtension: 'js' 71 | }, 72 | 'zone.js': { 73 | main: './zone.js', 74 | defaultExtension: 'js' 75 | }, 76 | 'ng-block-ui': { 77 | main: 'index.js', 78 | defaultExtension: 'js' 79 | }, 80 | 'ng-block-ui/router': { 81 | main: 'index.js', 82 | defaultExtension: 'js' 83 | }, 84 | 'ng-block-ui/http': { 85 | main: 'index.js', 86 | defaultExtension: 'js' 87 | }, 88 | } 89 | }); 90 | })(this); 91 | 92 | 93 | /* 94 | Copyright 2016 Google Inc. All Rights Reserved. 95 | Use of this source code is governed by an MIT-style license that 96 | can be found in the LICENSE file at http://angular.io/license 97 | */ -------------------------------------------------------------------------------- /dev/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "system", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true, 12 | "baseUrl": ".", 13 | "paths": { 14 | "ng-block-ui": ["./bundles/umd"], 15 | "ng-block-ui/router": ["./bundles/umd/router"], 16 | "ng-block-ui/http": ["./bundles/umd/http"] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/http-module.md: -------------------------------------------------------------------------------- 1 | # Router Module 2 | 3 | ## Automatically Block HTTP Requests 4 | 5 | This module allows for blocking automatically during all HTTP requests made with the `HttpClient` 6 | 7 | ### Setup 8 | 9 | The core `BlockUIModule` should first be imported within the app. Once added, a seperate module called `BlockUIHttpModule` should then be imported to allow for HTTP blocking. 10 | 11 | ```ts 12 | import { HttpClientModule } from '@angular/common/http'; 13 | import { BlockUIModule } from 'ng-block-ui'; 14 | import { BlockUIHttpModule } from 'ng-block-ui/http'; 15 | 16 | @NgModule({ 17 | imports: [ 18 | HttpClientModule, // Import Http Client 19 | BlockUIModule.forRoot(), // Import BlockUIModule 20 | BlockUIHttpModule.forRoot(), // Import Block UI Http Module 21 | ], 22 | ... 23 | }) 24 | export class AppModule {} 25 | ``` 26 | 27 | ### Setting: `requestFilters` 28 | 29 | Accepts an array of requests to be filtered out from being blocked. 30 | 31 | **Types** 32 | 33 | ``` 34 | requestFilters: (RegExp | { method: string, url: RegExp } | Function)[] 35 | ``` 36 | 37 | _Note: If using RegExp with AOT compiling, please see this [Stack Overflow Post](https://stackoverflow.com/questions/48751006/ng-build-gives-an-error-because-of-regexp)._ 38 | 39 | #### Type: `RegExp` 40 | 41 | Filter requests by URL 42 | 43 | Below will filter out blocking for any requests containing `api.github.com/users/` in the URL. 44 | 45 | ```ts 46 | @NgModule({ 47 | imports: [ 48 | ... 49 | BlockUIHttpModule.forRoot({ 50 | requestFilters: [/api.github.com\/users\//] 51 | }), 52 | ], 53 | ... 54 | }) 55 | export class AppModule {} 56 | ``` 57 | 58 | #### Type: `{ method: string, url: RegExp }` 59 | 60 | Filter requests by http method and URL 61 | 62 | Below will filter out blocking for any requests with a `POST` method and a URL containing `api.github.com/users/` 63 | 64 | ```ts 65 | @NgModule({ 66 | imports: [ 67 | ... 68 | BlockUIHttpModule.forRoot({ 69 | requestFilters: [{ 70 | method: 'POST', 71 | url: /api.github.com\/users\// 72 | }] 73 | }), 74 | ], 75 | ... 76 | }) 77 | export class AppModule {} 78 | ``` 79 | 80 | #### Type: `Function` 81 | 82 | Filter requests by passing a function. The function will be passed the current request and if `true` is returned the request will not be blocked. 83 | 84 | Below will filter out all requests with a query parameter of `foo=bar`. 85 | 86 | ```ts 87 | function filterFooBar(req HttpRequest): boolean { 88 | return req.params.get('foo') === 'bar'; 89 | } 90 | 91 | @NgModule({ 92 | imports: [ 93 | ... 94 | BlockUIHttpModule.forRoot({ 95 | requestFilters: [filterFooBar] 96 | }), 97 | ], 98 | ... 99 | }) 100 | export class AppModule {} 101 | ``` 102 | 103 | ### Setting: `blockAllRequestsInProgress` 104 | 105 | If set to `false`, when multiple http requests are fired off blocking will stop when the first request resolves instead of waiting for all requests to resolve. 106 | 107 | Defaulted to `true`. 108 | 109 | #### Type: `boolean` 110 | -------------------------------------------------------------------------------- /docs/migration-1.0.0.md: -------------------------------------------------------------------------------- 1 | # Migrating to NG Block UI 1.0.0 2 | With the 1.0.0 release, settings can now be set on a module level and all components and directives will inherit these settings. 3 | 4 | To allow for these changes the `BlockUIModule` module now needs to be imported by invoking the `forRoot` method instead of the module itself. Even if settings are not being set the `forRoot` method must be invoked for the module to be imported correctly. 5 | 6 | ### Old Module Import 7 | 8 | ```ts 9 | @NgModule({ 10 | imports: [ 11 | BlockUIModule 12 | ] 13 | }) 14 | export class AppModule {} 15 | ``` 16 | 17 | ### New 1.0 Module Import 18 | ```ts 19 | @NgModule({ 20 | imports: [ 21 | // Settings can be passed to forRoot 22 | BlockUIModule.forRoot() 23 | ] 24 | }) 25 | export class AppModule {} 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/migration-2.0.0.md: -------------------------------------------------------------------------------- 1 | # Migrating to NG Block UI 2.0.0 2 | 3 | ## Requires Angular and RxJS 6 4 | To use `2.0.0` you will need to upgrade Angular and RxJS to `6.x.x`. 5 | 6 | ## Changes to start/stop behavior 7 | When migrating to `2.0.0` be aware that call queueing has been added to all blocking calls so that the number of calls to `start/stop` are tracked. Below is an overview of the change in behavior. 8 | 9 | ### Current Behavior: 10 | In the example below blocking would be stopped even though the same instance has had `start` called multiple times. The issue with this is that if the user wants to start blocking from multiple services and does not want the blocking to stop when one of the services resolve they would have to keep track of all services and then call stop when everything resolves. Calling multiple services can happen frequently in apps so the burden of accounting for this shouldn’t be on the user of the library. 11 | 12 | #### Example 13 | ```ts 14 | this.blockUI.start() 15 | this.blockUI.start() 16 | this.blockUI.stop() 17 | ``` 18 | 19 | ### New Behavior: 20 | Calls are now queued so the previous example would result in blocking still being shown until `stop` has been called a second time. To clear the call queue when there are multiple blocking calls, the `reset` method could still be called to achieve the same behavior as before. 21 | 22 | #### Example 23 | ```ts 24 | this.blockUI.start() 25 | this.blockUI.start() 26 | this.blockUI.reset() 27 | ``` 28 | -------------------------------------------------------------------------------- /docs/router-module.md: -------------------------------------------------------------------------------- 1 | # Router Module 2 | 3 | ## Prevent Navigation During Active Block UI 4 | This module allows for blocking route changes when Block UI is active. 5 | 6 | ### Import Modules 7 | The core `BlockUIModule` should first be imported within the app. Once added, a separate module called `BlockUIRouterModule` should then be imported to allow for route blocking. 8 | 9 | ```js 10 | import { RouterModule } from '@angular/router'; 11 | import { BlockUIModule } from 'ng-block-ui'; 12 | import { BlockUIRouterModule } from 'ng-block-ui/router'; 13 | import { appRoutes } from './app.routes'; 14 | 15 | @NgModule({ 16 | imports: [ 17 | BlockUIModule.forRoot(), // Import BlockUIModule 18 | BlockUIRouterModule.forRoot(), // Import before Routes 19 | RouterModule.forRoot(appRoutes) // Import app routes 20 | ], 21 | ... 22 | }) 23 | export class AppModule {} 24 | ``` 25 | 26 | ### Add Block UI Route Guard to Routes 27 | Next, import `BlockUIPreventNavigation` guard from `ng-block-ui/router`. This is the guard that should be added for all routes that you don't want to be navigated away from when Block UI is active. 28 | 29 | #### Imports 30 | ```js 31 | import { Routes } from '@angular/router'; 32 | import { BlockUIPreventNavigation } from 'ng-block-ui/router'; 33 | // Other Components 34 | ``` 35 | 36 | #### Add Block UI Guard for specific Routes 37 | The guard can be added to specific routes by adding it to the `canActivate` property of that route. 38 | 39 | In the example below 40 | a user cannot navigate from the `login` route when the Block UI is active. 41 | 42 | ```js 43 | export appRoutes: Routes = [ 44 | { 45 | path: '', 46 | component: HomeComponent 47 | }, 48 | { 49 | path: 'login', 50 | component: LoginComponent, 51 | canActivate: [ 52 | BlockUIPreventNavigation // Add Block UI Route Guard 53 | ] 54 | } 55 | ]; 56 | ``` 57 | 58 | #### Add Block UI Guard for all Routes 59 | The guard can also be added for all routes for an app. To achieve this a parent route with a blank path should be added. Then the `BlockUIPreventNavigation` guard should be added to the `canActivateChild` property of the parent route. 60 | 61 | In the example below a user cannot navigate from any routes when the Block UI is active. 62 | 63 | ```js 64 | export appRoutes: Routes = [ 65 | { 66 | path: '', // Create a parent route with no path 67 | canActivateChild: [ BlockUIPreventNavigation ], // Add Block UI Route Guard 68 | // Add app routes 69 | children: [ 70 | { path: '', component: HomeComponent }, 71 | { path: 'login', component: LoginComponent } 72 | ] 73 | } 74 | ]; 75 | ``` 76 | -------------------------------------------------------------------------------- /docs/systemjs-config.md: -------------------------------------------------------------------------------- 1 | # Configuring SystemJS 2 | 3 | If your project is using SystemJS for module loading, you will need to add ng-block-ui to the SystemJS configuration: 4 | 5 | ```js 6 | System.config({ 7 | // Existing configuration options 8 | map: { 9 | ... 10 | 'ng-block-ui': 'npm:ng-block-ui/bundles/ng-block-ui.umd.js', // Required 11 | 'ng-block-ui/http': 'npm:ng-block-ui/bundles/ng-block-ui-http.umd.js', // Optional 12 | 'ng-block-ui/router': 'npm:ng-block-ui/bundles/ng-block-ui-router.umd.js' // Optional 13 | } 14 | }); 15 | ``` -------------------------------------------------------------------------------- /examples/custom-spinner-styles/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/README.md: -------------------------------------------------------------------------------- 1 | # CliNine 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "cli-nine": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/cli-nine", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true, 47 | "budgets": [ 48 | { 49 | "type": "initial", 50 | "maximumWarning": "2mb", 51 | "maximumError": "5mb" 52 | }, 53 | { 54 | "type": "anyComponentStyle", 55 | "maximumWarning": "6kb", 56 | "maximumError": "10kb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "cli-nine:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "cli-nine:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "cli-nine:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.spec.json", 85 | "karmaConfig": "karma.conf.js", 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ], 93 | "scripts": [] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "tsconfig.app.json", 101 | "tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "cli-nine:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "cli-nine:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }}, 123 | "defaultProject": "cli-nine" 124 | } 125 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /examples/custom-spinner-styles/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/cli-nine'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "block-ui-example", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~9.0.6", 15 | "@angular/common": "~9.0.6", 16 | "@angular/compiler": "~9.0.6", 17 | "@angular/core": "~9.0.6", 18 | "@angular/forms": "~9.0.6", 19 | "@angular/platform-browser": "~9.0.6", 20 | "@angular/platform-browser-dynamic": "~9.0.6", 21 | "@angular/router": "~9.0.6", 22 | "core-js": "^2.6.11", 23 | "ng-block-ui": "latest", 24 | "rxjs": "~6.5.4", 25 | "tslib": "^1.10.0", 26 | "zone.js": "~0.10.2" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^0.1000.2", 30 | "@angular/cli": "~9.0.6", 31 | "@angular/compiler-cli": "~9.0.6", 32 | "@angular/language-service": "~9.0.6", 33 | "@types/jasmine": "~3.5.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "@types/node": "^12.11.1", 36 | "codelyzer": "^5.1.2", 37 | "jasmine-core": "~3.5.0", 38 | "jasmine-spec-reporter": "~4.2.1", 39 | "karma": "^5.1.0", 40 | "karma-chrome-launcher": "~3.1.0", 41 | "karma-coverage-istanbul-reporter": "~2.1.0", 42 | "karma-jasmine": "~2.0.1", 43 | "karma-jasmine-html-reporter": "^1.4.2", 44 | "protractor": "^7.0.0", 45 | "ts-node": "~8.3.0", 46 | "tslint": "~5.18.0", 47 | "typescript": "~3.7.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | padding: 20px; 3 | min-height: 240px; 4 | background-color: #1976d2; 5 | background: -webkit-linear-gradient(145deg, #9175c5, #42a5f5); 6 | background: linear-gradient(145deg, #9175c5, #42a5f5); 7 | color: #fff; 8 | text-align: center; 9 | } 10 | 11 | .hero h1 { 12 | font-size: 3.5em; 13 | margin: 50px 0 0 0; 14 | } 15 | 16 | .hero p { 17 | font-size: 1.5em; 18 | margin: 5px 0 15px 0; 19 | } 20 | 21 | .block-form { 22 | padding: 70px; 23 | text-align: center; 24 | background: #fff; 25 | } 26 | 27 | .control { 28 | display: block; 29 | margin: 5px auto; 30 | padding: 5px; 31 | background: transparent; 32 | font-size: 1.7em; 33 | border: none; 34 | text-align: center; 35 | } 36 | 37 | .control__btn { 38 | margin: 15px auto; 39 | padding: 10px 15px; 40 | font-size: 1.3em; 41 | background: #708ada; 42 | color: #fff; 43 | cursor: pointer; 44 | } 45 | 46 | .control__input { 47 | color: #708ada; 48 | border-bottom: solid 3px #708ada; 49 | text-align: left; 50 | } 51 | 52 | .control__input:focus { 53 | outline: none; 54 | } 55 | 56 | .control__input::placeholder { 57 | color: #eae9e9; 58 | } 59 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

NG Block UI

5 |

Block UI Implementation for Angular

6 | 13 |
14 |
15 | 22 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BlockUI, NgBlockUI } from 'ng-block-ui'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: 'app.component.html', 7 | styleUrls: ['app.component.css'] 8 | }) 9 | export class AppComponent { 10 | // Wires up BlockUI instance 11 | @BlockUI() blockUI: NgBlockUI; 12 | 13 | constructor() { } 14 | 15 | toggleBlocking(message: string) { 16 | this.blockUI.start(message); 17 | 18 | setTimeout(() => { 19 | this.blockUI.stop(); 20 | }, 2500); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { BlockUIModule } from 'ng-block-ui'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | BrowserModule, 9 | BlockUIModule.forRoot() 10 | ], 11 | declarations: [AppComponent], 12 | bootstrap: [AppComponent] 13 | }) 14 | 15 | export class AppModule { } 16 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/custom-spinner-styles/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/custom-spinner-styles/src/favicon.ico -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BlockUiExample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { 12 | // Ensure Angular destroys itself on hot reloads. 13 | if (window['ngRef']) { 14 | window['ngRef'].destroy(); 15 | } 16 | window['ngRef'] = ref; 17 | 18 | // Otherwise, log the boot error 19 | }).catch(err => console.error(err)); -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | /** 56 | * By default, zone.js will patch all possible macroTask and DomEvents 57 | * user can disable parts of macroTask/DomEvents patch by setting following flags 58 | */ 59 | 60 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 61 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 62 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 63 | 64 | /* 65 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 66 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 67 | */ 68 | // (window as any).__Zone_enable_cross_context_check = true; 69 | 70 | /*************************************************************************************************** 71 | * Zone JS is required by default for Angular itself. 72 | */ 73 | import 'zone.js/dist/zone'; // Included with Angular CLI. 74 | 75 | 76 | 77 | /*************************************************************************************************** 78 | * APPLICATION IMPORTS 79 | */ 80 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Helvetica Neue', 'Helvetica'; 6 | } 7 | 8 | /****************************/ 9 | /* BLOCK UI OVERRIDE STYLES */ 10 | /****************************/ 11 | 12 | /* Block UI Wrapper (Backdrop) */ 13 | div.block-ui-wrapper { 14 | background-color: rgba(212, 205, 205, 0.7); 15 | } 16 | 17 | /* Spinner */ 18 | div.block-ui-wrapper .loader { 19 | border-color: #fff; /* Circle color */ 20 | border-left-color: #708ada; /* Spinning section in circle color */ 21 | } 22 | 23 | /* Message */ 24 | div.block-ui-spinner .message { 25 | color: #708ada; /* Loading text color */ 26 | } -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | }, 12 | "files": [ 13 | "test.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/custom-spinner-styles/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-var-requires": false, 64 | "object-literal-key-quotes": [ 65 | true, 66 | "as-needed" 67 | ], 68 | "object-literal-sort-keys": false, 69 | "ordered-imports": false, 70 | "quotemark": [ 71 | true, 72 | "single" 73 | ], 74 | "trailing-comma": false, 75 | "no-conflicting-lifecycle": true, 76 | "no-host-metadata-property": true, 77 | "no-input-rename": true, 78 | "no-inputs-metadata-property": true, 79 | "no-output-native": true, 80 | "no-output-on-prefix": true, 81 | "no-output-rename": true, 82 | "no-outputs-metadata-property": true, 83 | "template-banana-in-box": true, 84 | "template-no-negated-async": true, 85 | "use-lifecycle-interface": true, 86 | "use-pipe-transform-interface": true 87 | }, 88 | "rulesDirectory": [ 89 | "codelyzer" 90 | ] 91 | } -------------------------------------------------------------------------------- /examples/custom-template/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/custom-template/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /examples/custom-template/README.md: -------------------------------------------------------------------------------- 1 | # CliNine 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /examples/custom-template/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "cli-nine": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/cli-nine", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true, 47 | "budgets": [ 48 | { 49 | "type": "initial", 50 | "maximumWarning": "2mb", 51 | "maximumError": "5mb" 52 | }, 53 | { 54 | "type": "anyComponentStyle", 55 | "maximumWarning": "6kb", 56 | "maximumError": "10kb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "cli-nine:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "cli-nine:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "cli-nine:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.spec.json", 85 | "karmaConfig": "karma.conf.js", 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ], 93 | "scripts": [] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "tsconfig.app.json", 101 | "tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "cli-nine:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "cli-nine:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }}, 123 | "defaultProject": "cli-nine" 124 | } 125 | -------------------------------------------------------------------------------- /examples/custom-template/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /examples/custom-template/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/cli-nine'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /examples/custom-template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "block-ui-example", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~9.0.6", 15 | "@angular/common": "~9.0.6", 16 | "@angular/compiler": "~9.0.6", 17 | "@angular/core": "~9.0.6", 18 | "@angular/forms": "~9.0.6", 19 | "@angular/platform-browser": "~9.0.6", 20 | "@angular/platform-browser-dynamic": "~9.0.6", 21 | "@angular/router": "~9.0.6", 22 | "core-js": "^2.6.11", 23 | "ng-block-ui": "latest", 24 | "rxjs": "~6.5.4", 25 | "tslib": "^1.10.0", 26 | "zone.js": "~0.10.2" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^0.1000.2", 30 | "@angular/cli": "~9.0.6", 31 | "@angular/compiler-cli": "~9.0.6", 32 | "@angular/language-service": "~9.0.6", 33 | "@types/jasmine": "~3.5.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "@types/node": "^12.11.1", 36 | "codelyzer": "^5.1.2", 37 | "jasmine-core": "~3.5.0", 38 | "jasmine-spec-reporter": "~4.2.1", 39 | "karma": "^5.1.0", 40 | "karma-chrome-launcher": "~3.1.0", 41 | "karma-coverage-istanbul-reporter": "~2.1.0", 42 | "karma-jasmine": "~2.0.1", 43 | "karma-jasmine-html-reporter": "^1.4.2", 44 | "protractor": "^7.0.0", 45 | "ts-node": "~8.3.0", 46 | "tslint": "~5.18.0", 47 | "typescript": "~3.7.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/custom-template/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | padding: 20px; 3 | min-height: 240px; 4 | background-color: #1976D2; 5 | background: -webkit-linear-gradient(145deg,#9175c5,#42A5F5); 6 | background: linear-gradient(145deg,#9175c5,#42A5F5); 7 | color: #fff; 8 | text-align: center; 9 | } 10 | 11 | .hero h1 { 12 | font-size: 3.5em; 13 | margin: 50px 0 0 0; 14 | } 15 | 16 | .hero p { 17 | font-size: 1.5em; 18 | margin: 5px 0 15px 0; 19 | } 20 | 21 | .block-form { 22 | padding: 70px; 23 | text-align: center; 24 | background: #fff; 25 | } 26 | 27 | .control { 28 | display: block; 29 | margin: 5px auto; 30 | padding: 5px; 31 | background: transparent; 32 | font-size: 1.7em; 33 | border: none; 34 | text-align: center; 35 | } 36 | 37 | .control__btn { 38 | margin: 15px auto; 39 | padding: 10px 15px; 40 | font-size: 1.3em; 41 | background: #708ada; 42 | color: #fff; 43 | cursor: pointer; 44 | } 45 | 46 | .control__input { 47 | color: #708ada; 48 | border-bottom: solid 3px #708ada; 49 | text-align: left; 50 | } 51 | 52 | .control__input:focus { 53 | outline: none; 54 | } 55 | 56 | .control__input::placeholder { 57 | color: #eae9e9; 58 | } -------------------------------------------------------------------------------- /examples/custom-template/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

NG Block UI

5 |

Block UI Implementation for Angular

6 | 8 |
9 |
10 | 11 | 14 |
15 | -------------------------------------------------------------------------------- /examples/custom-template/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BlockUI, NgBlockUI } from 'ng-block-ui'; 3 | import { BlockTemplateComponent } from './block-template/block-template.component'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: 'app.component.html', 8 | styleUrls: ['app.component.css'] 9 | }) 10 | export class AppComponent { 11 | // Wires up BlockUI instance 12 | @BlockUI() blockUI: NgBlockUI; 13 | blockTemplate: BlockTemplateComponent; 14 | 15 | constructor() { } 16 | 17 | toggleBlocking(message?: string) { 18 | this.blockUI.start(message); 19 | 20 | setTimeout(() => { 21 | this.blockUI.stop(); 22 | }, 2500); 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /examples/custom-template/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { BlockUIModule } from 'ng-block-ui'; 5 | import { BlockTemplateComponent } from './block-template/block-template.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | BrowserModule, 10 | BlockUIModule.forRoot({ 11 | template: BlockTemplateComponent 12 | }) 13 | ], 14 | declarations: [ 15 | AppComponent, 16 | BlockTemplateComponent 17 | ], 18 | entryComponents: [ 19 | BlockTemplateComponent // Make sure to add it to the entry components 20 | ], 21 | bootstrap: [AppComponent] 22 | }) 23 | 24 | export class AppModule { } 25 | -------------------------------------------------------------------------------- /examples/custom-template/src/app/block-template/block-template.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-block-temp', 5 | styles: [` 6 | :host { 7 | text-align: center; 8 | color: #ffffff; 9 | } 10 | `], 11 | template: ` 12 |
13 | 14 |
{{message}}
15 |
16 | ` 17 | }) 18 | export class BlockTemplateComponent { 19 | message: any; 20 | } 21 | -------------------------------------------------------------------------------- /examples/custom-template/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/custom-template/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/custom-template/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/custom-template/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /examples/custom-template/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/custom-template/src/favicon.ico -------------------------------------------------------------------------------- /examples/custom-template/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BlockUiExample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/custom-template/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { 12 | // Ensure Angular destroys itself on hot reloads. 13 | if (window['ngRef']) { 14 | window['ngRef'].destroy(); 15 | } 16 | window['ngRef'] = ref; 17 | 18 | // Otherwise, log the boot error 19 | }).catch(err => console.error(err)); -------------------------------------------------------------------------------- /examples/custom-template/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | /** 56 | * By default, zone.js will patch all possible macroTask and DomEvents 57 | * user can disable parts of macroTask/DomEvents patch by setting following flags 58 | */ 59 | 60 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 61 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 62 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 63 | 64 | /* 65 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 66 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 67 | */ 68 | // (window as any).__Zone_enable_cross_context_check = true; 69 | 70 | /*************************************************************************************************** 71 | * Zone JS is required by default for Angular itself. 72 | */ 73 | import 'zone.js/dist/zone'; // Included with Angular CLI. 74 | 75 | 76 | 77 | /*************************************************************************************************** 78 | * APPLICATION IMPORTS 79 | */ 80 | -------------------------------------------------------------------------------- /examples/custom-template/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | html, 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Helvetica Neue', 'Helvetica'; 7 | } 8 | -------------------------------------------------------------------------------- /examples/custom-template/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /examples/custom-template/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /examples/custom-template/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | }, 12 | "files": [ 13 | "test.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /examples/custom-template/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /examples/custom-template/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/custom-template/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/custom-template/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/custom-template/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-var-requires": false, 64 | "object-literal-key-quotes": [ 65 | true, 66 | "as-needed" 67 | ], 68 | "object-literal-sort-keys": false, 69 | "ordered-imports": false, 70 | "quotemark": [ 71 | true, 72 | "single" 73 | ], 74 | "trailing-comma": false, 75 | "no-conflicting-lifecycle": true, 76 | "no-host-metadata-property": true, 77 | "no-input-rename": true, 78 | "no-inputs-metadata-property": true, 79 | "no-output-native": true, 80 | "no-output-on-prefix": true, 81 | "no-output-rename": true, 82 | "no-outputs-metadata-property": true, 83 | "template-banana-in-box": true, 84 | "template-no-negated-async": true, 85 | "use-lifecycle-interface": true, 86 | "use-pipe-transform-interface": true 87 | }, 88 | "rulesDirectory": [ 89 | "codelyzer" 90 | ] 91 | } -------------------------------------------------------------------------------- /examples/default-message/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/default-message/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /examples/default-message/README.md: -------------------------------------------------------------------------------- 1 | # CliNine 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /examples/default-message/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "cli-nine": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/cli-nine", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true, 47 | "budgets": [ 48 | { 49 | "type": "initial", 50 | "maximumWarning": "2mb", 51 | "maximumError": "5mb" 52 | }, 53 | { 54 | "type": "anyComponentStyle", 55 | "maximumWarning": "6kb", 56 | "maximumError": "10kb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "cli-nine:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "cli-nine:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "cli-nine:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.spec.json", 85 | "karmaConfig": "karma.conf.js", 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ], 93 | "scripts": [] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "tsconfig.app.json", 101 | "tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "cli-nine:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "cli-nine:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }}, 123 | "defaultProject": "cli-nine" 124 | } 125 | -------------------------------------------------------------------------------- /examples/default-message/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /examples/default-message/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/cli-nine'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /examples/default-message/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "block-ui-example", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~9.0.6", 15 | "@angular/common": "~9.0.6", 16 | "@angular/compiler": "~9.0.6", 17 | "@angular/core": "~9.0.6", 18 | "@angular/forms": "~9.0.6", 19 | "@angular/platform-browser": "~9.0.6", 20 | "@angular/platform-browser-dynamic": "~9.0.6", 21 | "@angular/router": "~9.0.6", 22 | "core-js": "^2.6.11", 23 | "ng-block-ui": "latest", 24 | "rxjs": "~6.5.4", 25 | "tslib": "^1.10.0", 26 | "zone.js": "~0.10.2" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^0.1000.2", 30 | "@angular/cli": "~9.0.6", 31 | "@angular/compiler-cli": "~9.0.6", 32 | "@angular/language-service": "~9.0.6", 33 | "@types/jasmine": "~3.5.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "@types/node": "^12.11.1", 36 | "codelyzer": "^5.1.2", 37 | "jasmine-core": "~3.5.0", 38 | "jasmine-spec-reporter": "~4.2.1", 39 | "karma": "^5.1.0", 40 | "karma-chrome-launcher": "~3.1.0", 41 | "karma-coverage-istanbul-reporter": "~2.1.0", 42 | "karma-jasmine": "~2.0.1", 43 | "karma-jasmine-html-reporter": "^1.4.2", 44 | "protractor": "^7.0.0", 45 | "ts-node": "~8.3.0", 46 | "tslint": "~5.18.0", 47 | "typescript": "~3.7.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/default-message/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | padding: 20px; 3 | min-height: 240px; 4 | background-color: #1976D2; 5 | background: -webkit-linear-gradient(145deg,#9175c5,#42A5F5); 6 | background: linear-gradient(145deg,#9175c5,#42A5F5); 7 | color: #fff; 8 | text-align: center; 9 | } 10 | 11 | .hero h1 { 12 | font-size: 3.5em; 13 | margin: 50px 0 0 0; 14 | } 15 | 16 | .hero p { 17 | font-size: 1.5em; 18 | margin: 5px 0 15px 0; 19 | } 20 | 21 | .block-form { 22 | padding: 70px; 23 | text-align: center; 24 | background: #fff; 25 | } 26 | 27 | .control { 28 | display: block; 29 | margin: 5px auto; 30 | padding: 5px; 31 | background: transparent; 32 | font-size: 1.7em; 33 | border: none; 34 | text-align: center; 35 | } 36 | 37 | .control__btn { 38 | margin: 15px auto; 39 | padding: 10px 15px; 40 | font-size: 1.3em; 41 | background: #708ada; 42 | color: #fff; 43 | cursor: pointer; 44 | } 45 | 46 | .control__input { 47 | color: #708ada; 48 | border-bottom: solid 3px #708ada; 49 | text-align: left; 50 | } 51 | 52 | .control__input:focus { 53 | outline: none; 54 | } 55 | 56 | .control__input::placeholder { 57 | color: #eae9e9; 58 | } -------------------------------------------------------------------------------- /examples/default-message/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

NG Block UI

5 |

Block UI Implementation for Angular

6 | 8 |
9 |
10 | 11 | 14 |
15 | -------------------------------------------------------------------------------- /examples/default-message/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BlockUI, NgBlockUI } from 'ng-block-ui'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: 'app.component.html', 7 | styleUrls: ['app.component.css'] 8 | }) 9 | export class AppComponent { 10 | // Wires up BlockUI instance 11 | @BlockUI() blockUI: NgBlockUI; 12 | 13 | constructor() {} 14 | 15 | toggleBlocking(message?: string) { 16 | this.blockUI.start(message); 17 | 18 | setTimeout(() => { 19 | this.blockUI.stop(); 20 | }, 2500); 21 | 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /examples/default-message/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { BlockUIModule } from 'ng-block-ui'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | BrowserModule, 9 | BlockUIModule.forRoot({ 10 | message: 'Default Message...' 11 | }) 12 | ], 13 | declarations: [AppComponent], 14 | bootstrap: [AppComponent] 15 | }) 16 | 17 | export class AppModule { } 18 | -------------------------------------------------------------------------------- /examples/default-message/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/default-message/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/default-message/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/default-message/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /examples/default-message/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/default-message/src/favicon.ico -------------------------------------------------------------------------------- /examples/default-message/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BlockUiExample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/default-message/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { 12 | // Ensure Angular destroys itself on hot reloads. 13 | if (window['ngRef']) { 14 | window['ngRef'].destroy(); 15 | } 16 | window['ngRef'] = ref; 17 | 18 | // Otherwise, log the boot error 19 | }).catch(err => console.error(err)); 20 | -------------------------------------------------------------------------------- /examples/default-message/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | /** 56 | * By default, zone.js will patch all possible macroTask and DomEvents 57 | * user can disable parts of macroTask/DomEvents patch by setting following flags 58 | */ 59 | 60 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 61 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 62 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 63 | 64 | /* 65 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 66 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 67 | */ 68 | // (window as any).__Zone_enable_cross_context_check = true; 69 | 70 | /*************************************************************************************************** 71 | * Zone JS is required by default for Angular itself. 72 | */ 73 | import 'zone.js/dist/zone'; // Included with Angular CLI. 74 | 75 | 76 | 77 | /*************************************************************************************************** 78 | * APPLICATION IMPORTS 79 | */ 80 | -------------------------------------------------------------------------------- /examples/default-message/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | html, 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Helvetica Neue', 'Helvetica'; 7 | } 8 | -------------------------------------------------------------------------------- /examples/default-message/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /examples/default-message/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /examples/default-message/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | }, 12 | "files": [ 13 | "test.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /examples/default-message/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /examples/default-message/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/default-message/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/default-message/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/default-message/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-var-requires": false, 64 | "object-literal-key-quotes": [ 65 | true, 66 | "as-needed" 67 | ], 68 | "object-literal-sort-keys": false, 69 | "ordered-imports": false, 70 | "quotemark": [ 71 | true, 72 | "single" 73 | ], 74 | "trailing-comma": false, 75 | "no-conflicting-lifecycle": true, 76 | "no-host-metadata-property": true, 77 | "no-input-rename": true, 78 | "no-inputs-metadata-property": true, 79 | "no-output-native": true, 80 | "no-output-on-prefix": true, 81 | "no-output-rename": true, 82 | "no-outputs-metadata-property": true, 83 | "template-banana-in-box": true, 84 | "template-no-negated-async": true, 85 | "use-lifecycle-interface": true, 86 | "use-pipe-transform-interface": true 87 | }, 88 | "rulesDirectory": [ 89 | "codelyzer" 90 | ] 91 | } -------------------------------------------------------------------------------- /examples/default/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/default/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /examples/default/README.md: -------------------------------------------------------------------------------- 1 | # CliNine 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /examples/default/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "cli-nine": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/cli-nine", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true, 47 | "budgets": [ 48 | { 49 | "type": "initial", 50 | "maximumWarning": "2mb", 51 | "maximumError": "5mb" 52 | }, 53 | { 54 | "type": "anyComponentStyle", 55 | "maximumWarning": "6kb", 56 | "maximumError": "10kb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "cli-nine:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "cli-nine:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "cli-nine:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.spec.json", 85 | "karmaConfig": "karma.conf.js", 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ], 93 | "scripts": [] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "tsconfig.app.json", 101 | "tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "cli-nine:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "cli-nine:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }}, 123 | "defaultProject": "cli-nine" 124 | } 125 | -------------------------------------------------------------------------------- /examples/default/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /examples/default/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/cli-nine'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /examples/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "block-ui-example", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~9.0.6", 15 | "@angular/common": "~9.0.6", 16 | "@angular/compiler": "~9.0.6", 17 | "@angular/core": "~9.0.6", 18 | "@angular/forms": "~9.0.6", 19 | "@angular/platform-browser": "~9.0.6", 20 | "@angular/platform-browser-dynamic": "~9.0.6", 21 | "@angular/router": "~9.0.6", 22 | "core-js": "^2.6.11", 23 | "ng-block-ui": "latest", 24 | "rxjs": "~6.5.4", 25 | "tslib": "^1.10.0", 26 | "zone.js": "~0.10.2" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^0.1000.2", 30 | "@angular/cli": "~9.0.6", 31 | "@angular/compiler-cli": "~9.0.6", 32 | "@angular/language-service": "~9.0.6", 33 | "@types/jasmine": "~3.5.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "@types/node": "^12.11.1", 36 | "codelyzer": "^5.1.2", 37 | "jasmine-core": "~3.5.0", 38 | "jasmine-spec-reporter": "~4.2.1", 39 | "karma": "^5.1.0", 40 | "karma-chrome-launcher": "~3.1.0", 41 | "karma-coverage-istanbul-reporter": "~2.1.0", 42 | "karma-jasmine": "~2.0.1", 43 | "karma-jasmine-html-reporter": "^1.4.2", 44 | "protractor": "^7.0.0", 45 | "ts-node": "~8.3.0", 46 | "tslint": "~5.18.0", 47 | "typescript": "~3.7.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/default/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | padding: 20px; 3 | min-height: 240px; 4 | background-color: #1976D2; 5 | background: -webkit-linear-gradient(145deg,#9175c5,#42A5F5); 6 | background: linear-gradient(145deg,#9175c5,#42A5F5); 7 | color: #fff; 8 | text-align: center; 9 | } 10 | 11 | .hero h1 { 12 | font-size: 3.5em; 13 | margin: 50px 0 0 0; 14 | } 15 | 16 | .hero p { 17 | font-size: 1.5em; 18 | margin: 5px 0 15px 0; 19 | } 20 | 21 | .block-form { 22 | padding: 70px; 23 | text-align: center; 24 | background: #fff; 25 | } 26 | 27 | .control { 28 | display: block; 29 | margin: 5px auto; 30 | padding: 5px; 31 | background: transparent; 32 | font-size: 1.7em; 33 | border: none; 34 | text-align: center; 35 | } 36 | 37 | .control__btn { 38 | margin: 15px auto; 39 | padding: 10px 15px; 40 | font-size: 1.3em; 41 | background: #708ada; 42 | color: #fff; 43 | cursor: pointer; 44 | } 45 | 46 | .control__input { 47 | color: #708ada; 48 | border-bottom: solid 3px #708ada; 49 | text-align: left; 50 | } 51 | 52 | .control__input:focus { 53 | outline: none; 54 | } 55 | 56 | .control__input::placeholder { 57 | color: #eae9e9; 58 | } -------------------------------------------------------------------------------- /examples/default/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

NG Block UI

5 |

Block UI Implementation for Angular

6 | 8 |
9 |
10 | 11 | 14 |
15 | -------------------------------------------------------------------------------- /examples/default/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BlockUI, NgBlockUI } from 'ng-block-ui'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: 'app.component.html', 7 | styleUrls: ['app.component.css'] 8 | }) 9 | export class AppComponent { 10 | // Wires up BlockUI instance 11 | @BlockUI() blockUI: NgBlockUI; 12 | 13 | constructor() {} 14 | 15 | toggleBlocking(message?: string) { 16 | this.blockUI.start(message); 17 | 18 | setTimeout(() => { 19 | this.blockUI.stop(); 20 | }, 2500); 21 | 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /examples/default/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { BlockUIModule } from 'ng-block-ui'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | BrowserModule, 9 | BlockUIModule.forRoot() 10 | ], 11 | declarations: [AppComponent], 12 | bootstrap: [AppComponent] 13 | }) 14 | 15 | export class AppModule { } 16 | -------------------------------------------------------------------------------- /examples/default/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/default/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/default/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/default/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /examples/default/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/default/src/favicon.ico -------------------------------------------------------------------------------- /examples/default/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BlockUiExample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/default/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { 12 | // Ensure Angular destroys itself on hot reloads. 13 | if (window['ngRef']) { 14 | window['ngRef'].destroy(); 15 | } 16 | window['ngRef'] = ref; 17 | 18 | // Otherwise, log the boot error 19 | }).catch(err => console.error(err)); -------------------------------------------------------------------------------- /examples/default/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | /** 56 | * By default, zone.js will patch all possible macroTask and DomEvents 57 | * user can disable parts of macroTask/DomEvents patch by setting following flags 58 | */ 59 | 60 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 61 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 62 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 63 | 64 | /* 65 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 66 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 67 | */ 68 | // (window as any).__Zone_enable_cross_context_check = true; 69 | 70 | /*************************************************************************************************** 71 | * Zone JS is required by default for Angular itself. 72 | */ 73 | import 'zone.js/dist/zone'; // Included with Angular CLI. 74 | 75 | 76 | 77 | /*************************************************************************************************** 78 | * APPLICATION IMPORTS 79 | */ 80 | -------------------------------------------------------------------------------- /examples/default/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | html, 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Helvetica Neue', 'Helvetica'; 7 | } 8 | -------------------------------------------------------------------------------- /examples/default/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /examples/default/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /examples/default/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | }, 12 | "files": [ 13 | "test.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /examples/default/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /examples/default/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/default/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/default/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/default/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-var-requires": false, 64 | "object-literal-key-quotes": [ 65 | true, 66 | "as-needed" 67 | ], 68 | "object-literal-sort-keys": false, 69 | "ordered-imports": false, 70 | "quotemark": [ 71 | true, 72 | "single" 73 | ], 74 | "trailing-comma": false, 75 | "no-conflicting-lifecycle": true, 76 | "no-host-metadata-property": true, 77 | "no-input-rename": true, 78 | "no-inputs-metadata-property": true, 79 | "no-output-native": true, 80 | "no-output-on-prefix": true, 81 | "no-output-rename": true, 82 | "no-outputs-metadata-property": true, 83 | "template-banana-in-box": true, 84 | "template-no-negated-async": true, 85 | "use-lifecycle-interface": true, 86 | "use-pipe-transform-interface": true 87 | }, 88 | "rulesDirectory": [ 89 | "codelyzer" 90 | ] 91 | } -------------------------------------------------------------------------------- /examples/directive/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /examples/directive/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /examples/directive/README.md: -------------------------------------------------------------------------------- 1 | # CliNine 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /examples/directive/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "cli-nine": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/cli-nine", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "src/environments/environment.ts", 36 | "with": "src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true, 47 | "budgets": [ 48 | { 49 | "type": "initial", 50 | "maximumWarning": "2mb", 51 | "maximumError": "5mb" 52 | }, 53 | { 54 | "type": "anyComponentStyle", 55 | "maximumWarning": "6kb", 56 | "maximumError": "10kb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "cli-nine:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "cli-nine:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "cli-nine:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.spec.json", 85 | "karmaConfig": "karma.conf.js", 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ], 93 | "scripts": [] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "tsconfig.app.json", 101 | "tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "cli-nine:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "cli-nine:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }}, 123 | "defaultProject": "cli-nine" 124 | } 125 | -------------------------------------------------------------------------------- /examples/directive/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /examples/directive/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/cli-nine'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /examples/directive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "block-ui-example", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~9.0.6", 15 | "@angular/common": "~9.0.6", 16 | "@angular/compiler": "~9.0.6", 17 | "@angular/core": "~9.0.6", 18 | "@angular/forms": "~9.0.6", 19 | "@angular/platform-browser": "~9.0.6", 20 | "@angular/platform-browser-dynamic": "~9.0.6", 21 | "@angular/router": "~9.0.6", 22 | "core-js": "^2.6.11", 23 | "ng-block-ui": "latest", 24 | "rxjs": "~6.5.4", 25 | "tslib": "^1.10.0", 26 | "zone.js": "~0.10.2" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^0.1000.2", 30 | "@angular/cli": "~9.0.6", 31 | "@angular/compiler-cli": "~9.0.6", 32 | "@angular/language-service": "~9.0.6", 33 | "@types/jasmine": "~3.5.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "@types/node": "^12.11.1", 36 | "codelyzer": "^5.1.2", 37 | "jasmine-core": "~3.5.0", 38 | "jasmine-spec-reporter": "~4.2.1", 39 | "karma": "^5.1.0", 40 | "karma-chrome-launcher": "~3.1.0", 41 | "karma-coverage-istanbul-reporter": "~2.1.0", 42 | "karma-jasmine": "~2.0.1", 43 | "karma-jasmine-html-reporter": "^1.4.2", 44 | "protractor": "^7.0.0", 45 | "ts-node": "~8.3.0", 46 | "tslint": "~5.18.0", 47 | "typescript": "~3.7.5" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/directive/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | padding: 20px; 3 | min-height: 240px; 4 | background-color: #1976D2; 5 | background: -webkit-linear-gradient(145deg,#9175c5,#42A5F5); 6 | background: linear-gradient(145deg,#9175c5,#42A5F5); 7 | color: #fff; 8 | text-align: center; 9 | } 10 | 11 | .hero h1 { 12 | font-size: 3.5em; 13 | margin: 50px 0 0 0; 14 | } 15 | 16 | .hero p { 17 | font-size: 1.5em; 18 | margin: 5px 0 15px 0; 19 | } 20 | 21 | .block-form { 22 | padding: 70px; 23 | text-align: center; 24 | background: #fff; 25 | } 26 | 27 | .control { 28 | display: block; 29 | margin: 5px auto; 30 | padding: 5px; 31 | background: transparent; 32 | font-size: 1.7em; 33 | border: none; 34 | text-align: center; 35 | } 36 | 37 | .control__btn { 38 | margin: 15px auto; 39 | padding: 10px 15px; 40 | font-size: 1.3em; 41 | background: #708ada; 42 | color: #fff; 43 | cursor: pointer; 44 | } 45 | 46 | .control__input { 47 | color: #708ada; 48 | border-bottom: solid 3px #708ada; 49 | text-align: left; 50 | } 51 | 52 | .control__input:focus { 53 | outline: none; 54 | } 55 | 56 | .control__input::placeholder { 57 | color: #eae9e9; 58 | } -------------------------------------------------------------------------------- /examples/directive/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

NG Block UI

4 |

Block UI Implementation for Angular

5 | 7 |
8 |
9 | 10 | 13 |
-------------------------------------------------------------------------------- /examples/directive/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BlockUI, NgBlockUI } from 'ng-block-ui'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: 'app.component.html', 7 | styleUrls: ['app.component.css'] 8 | }) 9 | export class AppComponent { 10 | // Wires up BlockUI instance for hero-section directive 11 | @BlockUI('hero-section') blockUI: NgBlockUI; 12 | 13 | constructor() {} 14 | 15 | toggleBlocking(message?: string) { 16 | this.blockUI.start(message); 17 | 18 | setTimeout(() => { 19 | this.blockUI.stop(); 20 | }, 2500); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /examples/directive/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { BlockUIModule } from 'ng-block-ui'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | BrowserModule, 9 | BlockUIModule.forRoot() 10 | ], 11 | declarations: [AppComponent], 12 | bootstrap: [AppComponent] 13 | }) 14 | 15 | export class AppModule { } 16 | -------------------------------------------------------------------------------- /examples/directive/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/directive/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/directive/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/directive/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /examples/directive/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuuurt13/ng-block-ui/88b2d21680c2f88217f17db1750230687550bd58/examples/directive/src/favicon.ico -------------------------------------------------------------------------------- /examples/directive/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BlockUiExample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/directive/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { 12 | // Ensure Angular destroys itself on hot reloads. 13 | if (window['ngRef']) { 14 | window['ngRef'].destroy(); 15 | } 16 | window['ngRef'] = ref; 17 | 18 | // Otherwise, log the boot error 19 | }).catch(err => console.error(err)); -------------------------------------------------------------------------------- /examples/directive/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | /** 56 | * By default, zone.js will patch all possible macroTask and DomEvents 57 | * user can disable parts of macroTask/DomEvents patch by setting following flags 58 | */ 59 | 60 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 61 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 62 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 63 | 64 | /* 65 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 66 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 67 | */ 68 | // (window as any).__Zone_enable_cross_context_check = true; 69 | 70 | /*************************************************************************************************** 71 | * Zone JS is required by default for Angular itself. 72 | */ 73 | import 'zone.js/dist/zone'; // Included with Angular CLI. 74 | 75 | 76 | 77 | /*************************************************************************************************** 78 | * APPLICATION IMPORTS 79 | */ 80 | -------------------------------------------------------------------------------- /examples/directive/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | html, 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Helvetica Neue', 'Helvetica'; 7 | } 8 | -------------------------------------------------------------------------------- /examples/directive/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /examples/directive/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /examples/directive/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | }, 12 | "files": [ 13 | "test.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /examples/directive/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /examples/directive/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/directive/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/directive/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/directive/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-var-requires": false, 64 | "object-literal-key-quotes": [ 65 | true, 66 | "as-needed" 67 | ], 68 | "object-literal-sort-keys": false, 69 | "ordered-imports": false, 70 | "quotemark": [ 71 | true, 72 | "single" 73 | ], 74 | "trailing-comma": false, 75 | "no-conflicting-lifecycle": true, 76 | "no-host-metadata-property": true, 77 | "no-input-rename": true, 78 | "no-inputs-metadata-property": true, 79 | "no-output-native": true, 80 | "no-output-on-prefix": true, 81 | "no-output-rename": true, 82 | "no-outputs-metadata-property": true, 83 | "template-banana-in-box": true, 84 | "template-no-negated-async": true, 85 | "use-lifecycle-interface": true, 86 | "use-pipe-transform-interface": true 87 | }, 88 | "rulesDirectory": [ 89 | "codelyzer" 90 | ] 91 | } -------------------------------------------------------------------------------- /http/block-ui-http-settings.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpSettings } from 'ng-block-ui'; 3 | 4 | @Injectable() 5 | export class BlockUIHttpSettings { 6 | settings: HttpSettings = {}; 7 | } 8 | -------------------------------------------------------------------------------- /http/block-ui-http.interceptor.spec.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { TestBed, async } from '@angular/core/testing'; 3 | import { HttpClient } from '@angular/common/http'; 4 | import { HttpClientTestingModule } from '@angular/common/http/testing'; 5 | import { Observable } from 'rxjs'; 6 | import { BlockUIModule, BlockUIService, BLOCKUI_DEFAULT } from 'ng-block-ui'; 7 | import { BlockUIHttpModule } from './block-ui-http.module'; 8 | 9 | 10 | describe('BlockUIInterceptor', () => { 11 | let service: TestService; 12 | let blockUIService; 13 | let blockUIServiceSpy; 14 | 15 | @Injectable() 16 | class TestService { 17 | constructor(private http: HttpClient) { } 18 | 19 | get(url: string) { 20 | return new Observable(observer => { 21 | try { 22 | this.http.get(url).subscribe(); 23 | } finally { 24 | observer.next(); 25 | } 26 | }); 27 | } 28 | 29 | post(url: string, body: any = {}) { 30 | return new Observable(observer => { 31 | try { 32 | this.http.post(url, body).subscribe(); 33 | } finally { 34 | observer.next(); 35 | } 36 | }); 37 | } 38 | } 39 | 40 | beforeEach(async(() => { 41 | TestBed.configureTestingModule({ 42 | imports: [ 43 | HttpClientTestingModule, 44 | BlockUIModule.forRoot(), 45 | BlockUIHttpModule.forRoot({ 46 | requestFilters: [ 47 | /\/nope/, 48 | { method: 'POST', url: /\/test/ }, 49 | req => req.body && req.body.id === 123 50 | ] 51 | }) 52 | ], 53 | providers: [ 54 | TestService, 55 | BlockUIService 56 | ], 57 | }); 58 | 59 | service = TestBed.get(TestService); 60 | blockUIService = TestBed.get(BlockUIService); 61 | blockUIServiceSpy = spyOn(blockUIService, 'start'); 62 | })); 63 | 64 | it('starts blocking', done => { 65 | service.get('/yup').subscribe(response => { 66 | expect(blockUIServiceSpy).toHaveBeenCalledWith(BLOCKUI_DEFAULT); 67 | done(); 68 | }); 69 | }); 70 | 71 | it('filters by url', done => { 72 | service.get('/nope').subscribe(response => { 73 | expect(blockUIServiceSpy.calls.count()).toEqual(0); 74 | done(); 75 | }); 76 | }); 77 | 78 | it('filters by method/url', done => { 79 | service.post('/test').subscribe(response => { 80 | expect(blockUIServiceSpy.calls.count()).toEqual(0); 81 | done(); 82 | }); 83 | }); 84 | 85 | it('filters by function', done => { 86 | service.post('/yup', { id: 123 }).subscribe(response => { 87 | expect(blockUIServiceSpy.calls.count()).toEqual(0); 88 | done(); 89 | }); 90 | }); 91 | }); 92 | -------------------------------------------------------------------------------- /http/block-ui-http.interceptor.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { 3 | HttpRequest, 4 | HttpHandler, 5 | HttpEvent, 6 | HttpInterceptor 7 | } from '@angular/common/http'; 8 | import { Observable } from 'rxjs'; 9 | import { finalize } from 'rxjs/operators'; 10 | import { BlockUIService, BLOCKUI_DEFAULT } from 'ng-block-ui'; 11 | import { BlockUIHttpSettings } from './block-ui-http-settings.service'; 12 | 13 | @Injectable() 14 | export class BlockUIInterceptor implements HttpInterceptor { 15 | private activeHttpRequests: number; 16 | 17 | constructor( 18 | private blockUIService: BlockUIService, 19 | private blockUIHttpSettings: BlockUIHttpSettings 20 | ) { 21 | this.activeHttpRequests = 0; 22 | } 23 | 24 | intercept(request: HttpRequest, next: HttpHandler): Observable> { 25 | let active: boolean = false; 26 | 27 | if (this.shouldBlock(request)) { 28 | this.blockUIService.start(BLOCKUI_DEFAULT); 29 | } 30 | 31 | return next.handle(request) 32 | .pipe( 33 | finalize(() => { 34 | if (this.shouldBlock(request)) { 35 | const { blockAllRequestsInProgress } = this.blockUIHttpSettings.settings; 36 | const method: string = blockAllRequestsInProgress ? 'stop' : 'reset'; 37 | this.blockUIService[method](BLOCKUI_DEFAULT); 38 | } 39 | }) 40 | ); 41 | } 42 | 43 | shouldBlock(request: HttpRequest): boolean { 44 | const { method, urlWithParams } = request; 45 | const { settings } = this.blockUIHttpSettings; 46 | const requestFilters = settings.requestFilters || []; 47 | 48 | return !requestFilters.some((f: any) => { 49 | if (f && f.method && f.url) { 50 | return f.method.toUpperCase() === method && f.url.test(urlWithParams); 51 | } else if (typeof f === 'function') { 52 | return f(request); 53 | } 54 | 55 | return f.test(urlWithParams); 56 | }); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /http/block-ui-http.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core'; 2 | import { HTTP_INTERCEPTORS } from '@angular/common/http'; 3 | import { BlockUIModule, HttpSettings } from 'ng-block-ui'; 4 | import { BlockUIHttpSettings } from './block-ui-http-settings.service'; 5 | import { BlockUIInterceptor } from './block-ui-http.interceptor'; 6 | 7 | 8 | // Needed for AOT compiling 9 | export const BlockUIHttpModuleSettings = new InjectionToken('BlockUIHttpModuleSettings'); 10 | 11 | export function provideSettingsInstance(settings: HttpSettings): BlockUIHttpSettings { 12 | return { 13 | settings: { 14 | blockAllRequestsInProgress: true, 15 | ...settings 16 | } 17 | }; 18 | } 19 | 20 | @NgModule({ 21 | imports: [BlockUIModule] 22 | }) 23 | export class BlockUIHttpModule { 24 | static forRoot(settings: HttpSettings = {}): ModuleWithProviders { 25 | return { 26 | ngModule: BlockUIHttpModule, 27 | providers: [ 28 | { 29 | provide: BlockUIHttpModuleSettings, 30 | useValue: settings 31 | }, 32 | { 33 | provide: BlockUIHttpSettings, 34 | useFactory: provideSettingsInstance, 35 | deps: [BlockUIHttpModuleSettings] 36 | }, 37 | { 38 | provide: HTTP_INTERCEPTORS, 39 | useClass: BlockUIInterceptor, 40 | multi: true 41 | } 42 | ] 43 | }; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /http/index.ts: -------------------------------------------------------------------------------- 1 | import { BlockUIHttpModule } from './block-ui-http.module'; 2 | 3 | export { 4 | BlockUIHttpModule 5 | }; 6 | -------------------------------------------------------------------------------- /http/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "./index.ts" 4 | } 5 | } -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = (config) => { 4 | config.set({ 5 | files: ["karma.shim.ts", "lib/**/*.ts", "http/**/*.ts", "router/**/*.ts"], 6 | exclude: ["examples", "dev"], 7 | autoWatch: true, 8 | frameworks: ["jasmine", "karma-typescript"], 9 | logLevel: config.LOG_INFO, 10 | port: 9876, 11 | preprocessors: { 12 | "**/*.ts": ["karma-typescript"], 13 | }, 14 | reporters: ["spec", "karma-typescript"], 15 | singleRun: true, 16 | browsers: ["Chrome"], 17 | karmaTypescriptConfig: { 18 | include: [ 19 | "karma.shim.ts", 20 | "lib/**/*.ts", 21 | "http/**/*.ts", 22 | "router/**/*.ts", 23 | ], 24 | exclude: ["node_modules", "examples", "dev"], 25 | compilerOptions: { 26 | baseUrl: ".", 27 | paths: { 28 | "ng-block-ui": ["lib"], 29 | }, 30 | }, 31 | }, 32 | customLaunchers: { 33 | Chrome_travis_ci: { 34 | base: "Chrome", 35 | flags: ["--no-sandbox"], 36 | }, 37 | }, 38 | }); 39 | }; 40 | -------------------------------------------------------------------------------- /karma.shim.ts: -------------------------------------------------------------------------------- 1 | import 'es6-shim'; 2 | import 'reflect-metadata'; 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/zone-testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | import { TestBed } from '@angular/core/testing'; 10 | 11 | TestBed.initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting() 14 | ); 15 | 16 | beforeEach(() => { 17 | Error.stackTraceLimit = Infinity; 18 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000; 19 | }); 20 | -------------------------------------------------------------------------------- /lib/block-ui.module.spec.ts: -------------------------------------------------------------------------------- 1 | import { } from 'jasmine'; 2 | import { ComponentFixture, TestBed, async } from '@angular/core/testing'; 3 | import { Component } from '@angular/core'; 4 | 5 | import { BlockUIModule } from './block-ui.module'; 6 | import { BlockUIInstanceService } from './services/block-ui-instance.service'; 7 | import { BlockUISettings } from './models/block-ui-settings.model'; 8 | 9 | 10 | describe('BlockUIModule', () => { 11 | @Component({ 12 | selector: 'test-comp', 13 | template: `
` 14 | }) 15 | class TestComp { 16 | constructor( 17 | public blockUIInstance: BlockUIInstanceService 18 | ) { } 19 | } 20 | 21 | let testCmp: TestComp; 22 | let cf: ComponentFixture; 23 | let blockUIInstance: BlockUIInstanceService; 24 | let moduleSettings: BlockUISettings = { 25 | message: 'test' 26 | }; 27 | 28 | beforeEach(async(() => { 29 | TestBed.configureTestingModule({ 30 | imports: [BlockUIModule.forRoot(moduleSettings)], 31 | declarations: [TestComp] 32 | }).compileComponents(); 33 | 34 | cf = TestBed.createComponent(TestComp); 35 | cf.detectChanges(); 36 | 37 | testCmp = cf.debugElement.componentInstance; 38 | blockUIInstance = testCmp.blockUIInstance; 39 | })); 40 | 41 | afterEach(() => { 42 | cf.destroy(); 43 | testCmp = null; 44 | }); 45 | 46 | describe('"forRoot" method', () => { 47 | it('should be defined', () => { 48 | expect(BlockUIModule.forRoot).toBeDefined(); 49 | }); 50 | 51 | it('should pass settings to BlockUIInstanceService', () => { 52 | const settings = blockUIInstance.getSettings(); 53 | expect(settings.message).toEqual(moduleSettings.message); 54 | }); 55 | }); 56 | }); 57 | -------------------------------------------------------------------------------- /lib/block-ui.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { BlockUIComponent } from './components/block-ui/block-ui.component'; 5 | import { BlockUIContentComponent } from './components/block-ui-content/block-ui-content.component'; 6 | import { BlockUIInstanceService } from './services/block-ui-instance.service'; 7 | import { BlockUIService } from './services/block-ui.service'; 8 | import { BlockUIDirective } from './directives/block-ui.directive'; 9 | import { BlockUISettings } from './models/block-ui-settings.model'; 10 | 11 | export const BlockUIServiceInstance = new BlockUIInstanceService(); 12 | 13 | // Needed for AOT compiling 14 | export const BlockUIModuleSettings = new InjectionToken('BlockUIModuleSettings'); 15 | 16 | export function provideInstance(settings: BlockUISettings): any { 17 | BlockUIServiceInstance.updateSettings(settings); 18 | return BlockUIServiceInstance; 19 | } 20 | 21 | @NgModule({ 22 | imports: [ 23 | CommonModule 24 | ], 25 | entryComponents: [ 26 | BlockUIComponent, 27 | BlockUIContentComponent 28 | ], 29 | declarations: [ 30 | BlockUIComponent, 31 | BlockUIDirective, 32 | BlockUIContentComponent 33 | ], 34 | exports: [ 35 | BlockUIComponent, 36 | BlockUIDirective, 37 | BlockUIContentComponent 38 | ] 39 | }) 40 | export class BlockUIModule { 41 | public static forRoot(settings: BlockUISettings = {}): ModuleWithProviders { 42 | return { 43 | ngModule: BlockUIModule, 44 | providers: [ 45 | { 46 | provide: BlockUIModuleSettings, 47 | useValue: settings 48 | }, 49 | { 50 | provide: BlockUIInstanceService, 51 | useFactory: provideInstance, 52 | deps: [BlockUIModuleSettings] 53 | }, 54 | BlockUIService 55 | ] 56 | }; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /lib/components/block-ui-content/block-ui-content.component.style.ts: -------------------------------------------------------------------------------- 1 | // Spinner style - https://github.com/lukehaas/css-loaders 2 | 3 | export const styles = ` 4 | .block-ui-wrapper { 5 | display: none; 6 | position: fixed; 7 | height: 100%; 8 | width: 100%; 9 | top: 0; 10 | left: 0; 11 | background: rgba(0, 0, 0, 0.70); 12 | z-index: 30000; 13 | cursor: wait; 14 | } 15 | 16 | .block-ui-wrapper.block-ui-wrapper--element { 17 | position: absolute; 18 | } 19 | 20 | .block-ui-wrapper.active { 21 | display: block; 22 | } 23 | 24 | .block-ui-wrapper.block-ui-main { 25 | position: fixed; 26 | } 27 | 28 | .block-ui-spinner, 29 | .block-ui-template { 30 | position: absolute; 31 | top: 40%; 32 | margin: 0 auto; 33 | left: 0; 34 | right: 0; 35 | transform: translateY(-50%); 36 | } 37 | 38 | .block-ui-spinner > .message { 39 | font-size: 1.3em; 40 | text-align: center; 41 | color: #fff; 42 | } 43 | 44 | .block-ui__element { 45 | position: relative; 46 | } 47 | 48 | .loader, 49 | .loader:after { 50 | border-radius: 50%; 51 | width: 10em; 52 | height: 10em; 53 | } 54 | .loader { 55 | margin: 7px auto; 56 | font-size: 5px; 57 | position: relative; 58 | text-indent: -9999em; 59 | border-top: 1.1em solid rgba(255, 255, 255, 0.2); 60 | border-right: 1.1em solid rgba(255, 255, 255, 0.2); 61 | border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); 62 | border-left: 1.1em solid #ffffff; 63 | -webkit-transform: translateZ(0); 64 | -ms-transform: translateZ(0); 65 | transform: translateZ(0); 66 | -webkit-animation: load8 1.1s infinite linear; 67 | animation: load8 1.1s infinite linear; 68 | } 69 | 70 | @-webkit-keyframes load8 { 71 | 0% { 72 | -webkit-transform: rotate(0deg); 73 | transform: rotate(0deg); 74 | } 75 | 100% { 76 | -webkit-transform: rotate(360deg); 77 | transform: rotate(360deg); 78 | } 79 | } 80 | 81 | @keyframes load8 { 82 | 0% { 83 | -webkit-transform: rotate(0deg); 84 | transform: rotate(0deg); 85 | } 86 | 100% { 87 | -webkit-transform: rotate(360deg); 88 | transform: rotate(360deg); 89 | } 90 | } 91 | `; 92 | -------------------------------------------------------------------------------- /lib/components/block-ui-content/block-ui-content.component.template.ts: -------------------------------------------------------------------------------- 1 | export const template = ` 2 |
3 | 9 | 10 |
11 | `; 12 | -------------------------------------------------------------------------------- /lib/components/block-ui/block-ui.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { } from 'jasmine'; 2 | import { ComponentFixture, TestBed, async } from '@angular/core/testing'; 3 | import { NgModule, Component, DebugElement } from '@angular/core'; 4 | import { By } from '@angular/platform-browser'; 5 | 6 | import { BlockUIModule } from '../../block-ui.module'; 7 | import { BlockUIContentComponent } from '../block-ui-content/block-ui-content.component'; 8 | import { BlockUIDefaultName } from '../../constants/block-ui-default-name.constant'; 9 | import { BlockUISettings } from '../../models/block-ui-settings.model'; 10 | 11 | 12 | describe('block-ui component', () => { 13 | 14 | @Component({ 15 | selector: 'template-comp', 16 | template: ` 17 |
{{message}}
18 | ` 19 | }) 20 | class TestTemplateComp { } 21 | 22 | let cf: ComponentFixture; 23 | let testCmp: any; 24 | let blkContComp: DebugElement; 25 | let blockContentElement: HTMLElement; 26 | let globalSettings: BlockUISettings = { 27 | message: 'Global', 28 | delayStart: 1900, 29 | delayStop: 2000, 30 | }; 31 | 32 | beforeEach(async(() => { 33 | @Component({ 34 | selector: 'test-comp', 35 | template: ` 36 | 43 |

Test

44 | 45 | ` 46 | }) 47 | class TestComp { 48 | blockName: string; 49 | message: string; 50 | delayStart: number; 51 | delayStop: number; 52 | customTmp: any; 53 | } 54 | 55 | TestBed.configureTestingModule({ 56 | imports: [ 57 | BlockUIModule.forRoot(globalSettings) 58 | ], 59 | declarations: [ 60 | TestTemplateComp, 61 | TestComp 62 | ], 63 | }) 64 | .compileComponents(); 65 | 66 | cf = TestBed.createComponent(TestComp); 67 | cf.detectChanges(); 68 | 69 | blkContComp = cf.debugElement.query(By.directive(BlockUIContentComponent)); 70 | blockContentElement = blkContComp.nativeElement; 71 | testCmp = cf.debugElement.componentInstance; 72 | })); 73 | 74 | it('appends block-ui-content', () => { 75 | expect(blockContentElement).toBeDefined(); 76 | }); 77 | 78 | it('projects transcluded elements', () => { 79 | let { nativeElement } = cf.debugElement.query(By.css('h1.header')); 80 | expect(nativeElement).not.toBe(null); 81 | }); 82 | 83 | it('sets block-ui-content name to default if name is undefined', () => { 84 | let { componentInstance } = blkContComp; 85 | expect(componentInstance.name).toBe(BlockUIDefaultName); 86 | }); 87 | 88 | it('passes name property to block-ui-content', () => { 89 | let name = 'test-name'; 90 | let { componentInstance } = blkContComp; 91 | 92 | componentInstance.name = name; 93 | cf.detectChanges(); 94 | 95 | expect(componentInstance.name).toBe(name); 96 | }); 97 | 98 | it('passes default message property to block-ui-content', () => { 99 | let msg = 'test'; 100 | let { componentInstance } = blkContComp; 101 | testCmp.message = msg; 102 | 103 | cf.detectChanges(); 104 | 105 | expect(componentInstance.defaultMessage).toBe(msg); 106 | }); 107 | 108 | it('passes delays to block-ui-content', () => { 109 | let start = 3000; 110 | let stop = 3000; 111 | let { componentInstance } = blkContComp; 112 | 113 | testCmp.delayStart = start; 114 | testCmp.delayStop = stop; 115 | 116 | cf.detectChanges(); 117 | 118 | expect(componentInstance.delayStart).toBe(start); 119 | expect(componentInstance.delayStop).toBe(stop); 120 | }); 121 | 122 | it('passes template to block-ui-content', () => { 123 | let { componentInstance } = blkContComp; 124 | 125 | testCmp.customTmp = TestTemplateComp; 126 | 127 | cf.detectChanges(); 128 | 129 | expect(componentInstance.templateCmp).toBe(TestTemplateComp); 130 | }); 131 | }); 132 | -------------------------------------------------------------------------------- /lib/components/block-ui/block-ui.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Input, 4 | ViewEncapsulation, 5 | OnInit, 6 | ComponentRef 7 | } from '@angular/core'; 8 | import { BlockUIInstanceService } from '../../services/block-ui-instance.service'; 9 | import { BlockUIDefaultName } from '../../constants/block-ui-default-name.constant'; 10 | 11 | @Component({ 12 | selector: 'block-ui', 13 | template: ` 14 | 15 | 22 | 23 | `, 24 | encapsulation: ViewEncapsulation.None 25 | }) 26 | export class BlockUIComponent implements OnInit { 27 | @Input() name: string; 28 | @Input() message: any; 29 | @Input() delayStart: number; 30 | @Input() delayStop: number; 31 | @Input() template: any; 32 | 33 | constructor( 34 | private blockUI: BlockUIInstanceService, 35 | ) { } 36 | 37 | ngOnInit() { 38 | this.name = this.name || BlockUIDefaultName; 39 | this.template = this.template || this.blockUI.blockUISettings.template; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /lib/constants/block-ui-actions.constant.ts: -------------------------------------------------------------------------------- 1 | export class BlockUIActions { 2 | static START = 'start'; 3 | static STOP = 'stop'; 4 | static UPDATE = 'update'; 5 | static RESET = 'reset'; 6 | static RESET_GLOBAL = 'reset_global'; 7 | static UNSUBSCRIBE = 'unsubscribe'; 8 | } -------------------------------------------------------------------------------- /lib/constants/block-ui-default-name.constant.ts: -------------------------------------------------------------------------------- 1 | export const BlockUIDefaultName: string = 'block-ui-main'; 2 | -------------------------------------------------------------------------------- /lib/decorators/block-ui.decorator.spec.ts: -------------------------------------------------------------------------------- 1 | import { } from 'jasmine'; 2 | import { TestBed, async } from '@angular/core/testing'; 3 | 4 | import { BlockUIModule, BlockUIServiceInstance } from '../block-ui.module'; 5 | import { NgBlockUI } from '../models/block-ui.model'; 6 | import { BlockUI } from './block-ui.decorator'; 7 | 8 | 9 | describe('BlockUI decorator', () => { 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | imports: [BlockUIModule.forRoot()] 13 | }) 14 | .compileComponents(); 15 | 16 | spyOn(BlockUIServiceInstance, 'decorate').and.callFake(name => ({ name })); 17 | })); 18 | 19 | it('sets blockUI to instance of NgBlockUI', () => { 20 | class TestClass { 21 | @BlockUI() blockUI: NgBlockUI; 22 | } 23 | 24 | expect(BlockUIServiceInstance.decorate).toHaveBeenCalled(); 25 | }); 26 | 27 | it('pass name to NgBlockUI instance', () => { 28 | class TestClass { 29 | @BlockUI('test') blockUI: NgBlockUI; 30 | } 31 | 32 | expect(BlockUIServiceInstance.decorate).toHaveBeenCalledWith('test'); 33 | }); 34 | 35 | it('it creates a unique instance name when "scopeToInstance" is true', () => { 36 | class TestClass { 37 | @BlockUI('test', { scopeToInstance: true }) blockUI: NgBlockUI; 38 | } 39 | 40 | const instance = new TestClass(); 41 | expect(instance.blockUI.name).toBe('test-1'); 42 | 43 | const instanceTwo = new TestClass(); 44 | expect(instanceTwo.blockUI.name).toBe('test-2'); 45 | }); 46 | }); -------------------------------------------------------------------------------- /lib/decorators/block-ui.decorator.ts: -------------------------------------------------------------------------------- 1 | import { BlockUIServiceInstance } from '../block-ui.module'; 2 | import { BlockUIDecoratorSettings } from '../models/block-ui-decorator-settings.model'; 3 | 4 | export let blockInstanceGuid = 1; 5 | 6 | export function BlockUI(blockName?: string, settings: BlockUIDecoratorSettings = {}) { 7 | if (!settings.scopeToInstance) { 8 | return function (target?: any, propertyKey?: string) { 9 | target[propertyKey] = BlockUIServiceInstance.decorate(blockName); 10 | }; 11 | } 12 | 13 | 14 | return function (target?: any, key?: string) { 15 | const secret = `_${key}-block-ui`; 16 | 17 | Object.defineProperty(target, key, { 18 | get: function () { 19 | if (this[secret]) { 20 | return this[secret]; 21 | } 22 | 23 | const instanceName = `${blockName}-${blockInstanceGuid++}`; 24 | this[secret] = BlockUIServiceInstance.decorate(instanceName); 25 | 26 | return this[secret]; 27 | }, 28 | set: function (value: any) { 29 | this[secret] = value; 30 | }, 31 | }); 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /lib/directives/block-ui.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { } from 'jasmine'; 2 | import { ComponentFixture, TestBed, async } from '@angular/core/testing'; 3 | import { Component, DebugElement } from '@angular/core'; 4 | import { By } from '@angular/platform-browser'; 5 | import { BlockUIModule } from '../block-ui.module'; 6 | import { BlockUI } from '../decorators/block-ui.decorator'; 7 | import { BlockUIContentComponent } from '../components/block-ui-content/block-ui-content.component'; 8 | 9 | 10 | describe(`block-ui element directive`, () => { 11 | @Component({ 12 | selector: 'test-comp', 13 | template: ` 14 | 15 |
Test
16 | 17 |
18 |

Test

19 |
20 | ` 21 | }) 22 | class TestComp { 23 | @BlockUI('element') blockUI: any; 24 | blockName: string; 25 | } 26 | 27 | let cf: ComponentFixture; 28 | let blkContComp: DebugElement; 29 | let blockContentElement: HTMLElement; 30 | let testCmp: TestComp; 31 | 32 | beforeEach(async(() => { 33 | TestBed.configureTestingModule({ 34 | imports: [BlockUIModule.forRoot()], 35 | declarations: [TestComp] 36 | }) 37 | .compileComponents(); 38 | 39 | cf = TestBed.createComponent(TestComp); 40 | cf.detectChanges(); 41 | 42 | testCmp = cf.debugElement.componentInstance; 43 | })); 44 | 45 | afterEach(() => { 46 | cf.destroy(); 47 | testCmp = null; 48 | }); 49 | 50 | it(`appends block-ui-content`, () => { 51 | blkContComp = cf.debugElement.query(By.directive(BlockUIContentComponent)); 52 | blockContentElement = blkContComp.nativeElement; 53 | expect(blockContentElement).toBeDefined(); 54 | }); 55 | 56 | it(`adds 'block-ui-wrapper--element' to block-ui-content`, () => { 57 | let blkContComp = cf.debugElement.query(By.css('block-ui-content.block-ui-wrapper--element')); 58 | expect(blkContComp).toBeDefined(); 59 | }); 60 | 61 | it(`adds 'block-ui__element' class to host element`, () => { 62 | let hostElement = cf.debugElement.query(By.css('host-element.block-ui__element')); 63 | expect(hostElement).toBeDefined(); 64 | }); 65 | 66 | it(`projects transcluded elements`, () => { 67 | let { nativeElement } = cf.debugElement.query(By.css('h1.header')); 68 | expect(nativeElement).not.toBe(null); 69 | }); 70 | 71 | it(`passes name property to block-ui-content`, () => { 72 | let name = 'test-name'; 73 | let { componentInstance } = cf.debugElement.query(By.directive(BlockUIContentComponent)); 74 | 75 | componentInstance.name = name; 76 | cf.detectChanges(); 77 | 78 | expect(componentInstance.name).toBe(name); 79 | }); 80 | 81 | it(`passes default message property to block-ui-content`, () => { 82 | let expectedMessage = 'default'; 83 | let { componentInstance } = cf.debugElement.query(By.directive(BlockUIContentComponent)); 84 | 85 | expect(componentInstance.defaultMessage).toBe(expectedMessage); 86 | }); 87 | 88 | it(`passes custom template to block-ui-content`, () => { 89 | testCmp.blockUI.start(); 90 | cf.detectChanges(); 91 | 92 | const template = cf.debugElement.query(By.css('.test-template')); 93 | expect(template).not.toBe(null); 94 | }); 95 | }); 96 | -------------------------------------------------------------------------------- /lib/index.ts: -------------------------------------------------------------------------------- 1 | import { BlockUIModule } from "./block-ui.module"; 2 | import { BlockUIComponent } from "./components/block-ui/block-ui.component"; 3 | import { BlockUIContentComponent } from "./components/block-ui-content/block-ui-content.component"; 4 | import { BlockUI } from "./decorators/block-ui.decorator"; 5 | import { NgBlockUI } from "./models/block-ui.model"; 6 | import { HttpSettings } from "./models/block-ui-http-settings.model"; 7 | import { BlockUIService } from "./services/block-ui.service"; 8 | import { BlockUIDefaultName as BLOCKUI_DEFAULT } from "./constants/block-ui-default-name.constant"; 9 | import { BlockUIDirective } from "./directives/block-ui.directive"; 10 | 11 | export { 12 | BlockUIModule, 13 | BlockUIComponent, 14 | BlockUIContentComponent, 15 | BlockUI, 16 | NgBlockUI, 17 | HttpSettings, 18 | BlockUIService, 19 | BlockUIDirective, 20 | BLOCKUI_DEFAULT, 21 | }; 22 | -------------------------------------------------------------------------------- /lib/models/block-ui-block-timeout.model.ts: -------------------------------------------------------------------------------- 1 | export interface BlockTimeout { 2 | delayStart: any; 3 | delayStop: any; 4 | } 5 | -------------------------------------------------------------------------------- /lib/models/block-ui-decorator-settings.model.ts: -------------------------------------------------------------------------------- 1 | export interface BlockUIDecoratorSettings { 2 | scopeToInstance?: boolean 3 | } -------------------------------------------------------------------------------- /lib/models/block-ui-event.model.ts: -------------------------------------------------------------------------------- 1 | import { BlockUIActions } from '../constants/block-ui-actions.constant'; 2 | 3 | export class BlockUIEvent { 4 | name: string; 5 | action: BlockUIActions; 6 | message?: any; 7 | } 8 | -------------------------------------------------------------------------------- /lib/models/block-ui-http-settings.model.ts: -------------------------------------------------------------------------------- 1 | export interface HttpSettings { 2 | requestFilters?: (RegExp | { method: string, url: RegExp } | Function)[]; 3 | blockAllRequestsInProgress?: boolean; 4 | } 5 | -------------------------------------------------------------------------------- /lib/models/block-ui-settings.model.ts: -------------------------------------------------------------------------------- 1 | import { ComponentRef } from '@angular/core'; 2 | 3 | export interface BlockUISettings { 4 | message?: string; 5 | delayStart?: number; 6 | delayStop?: number; 7 | template?: ComponentRef<{ message?: any }> | any; 8 | } 9 | -------------------------------------------------------------------------------- /lib/models/block-ui.model.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A BlockUI instance 3 | */ 4 | export interface NgBlockUI { 5 | [key: string]: any; 6 | 7 | /** 8 | * BlockUI instance name 9 | */ 10 | name: string; 11 | 12 | /** 13 | * Is BlockUI instance active 14 | */ 15 | isActive: boolean; 16 | 17 | /** 18 | * Number of start method calls for instance 19 | */ 20 | blockCount: number; 21 | 22 | /** 23 | * Starts blocking for BlockUI instance 24 | */ 25 | start(message?: any): void; 26 | 27 | /** 28 | * Update blocking message for BlockUI instance 29 | */ 30 | update(message: any): void; 31 | 32 | /** 33 | * Stops blocking for BlockUI instance 34 | */ 35 | stop(): void; 36 | 37 | /** 38 | * Resets blocking for BlockUI instances regardless of how many times start was called 39 | */ 40 | reset(): void; 41 | 42 | /** 43 | * Resets blocking for all BlockUI instances 44 | */ 45 | resetGlobal(): void; 46 | 47 | /** 48 | * Unsubscribes BlockUI instance 49 | */ 50 | unsubscribe(): void; 51 | } 52 | -------------------------------------------------------------------------------- /lib/services/block-ui-instance.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { } from 'jasmine'; 2 | import { TestBed } from '@angular/core/testing'; 3 | import { map } from 'rxjs/operators'; 4 | import { BlockUIModule } from '../block-ui.module'; 5 | import { BlockUIInstanceService } from './block-ui-instance.service'; 6 | import { BlockUIActions } from '../constants/block-ui-actions.constant'; 7 | import { BlockUIDefaultName } from '../constants/block-ui-default-name.constant'; 8 | 9 | 10 | describe('BlockUIInstance service', () => { 11 | let blockUIService; 12 | 13 | beforeEach(() => { 14 | blockUIService = new BlockUIInstanceService(); 15 | 16 | spyOn(blockUIService, 'dispatch'); 17 | }); 18 | 19 | describe('decorate', () => { 20 | it('returns NgBlockUI instance', () => { 21 | const blockUI = blockUIService.decorate(); 22 | 23 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 24 | blockUIService.blockUISubject, BlockUIActions.START, BlockUIDefaultName 25 | ); 26 | 27 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 28 | blockUIService.blockUISubject, BlockUIActions.STOP, BlockUIDefaultName 29 | ); 30 | 31 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 32 | blockUIService.blockUISubject, BlockUIActions.RESET, BlockUIDefaultName 33 | ); 34 | }); 35 | 36 | it('passes instance name to NgBlockUI instance', () => { 37 | const expectName = 'test'; 38 | const blockUI = blockUIService.decorate(expectName); 39 | 40 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 41 | blockUIService.blockUISubject, BlockUIActions.START, expectName 42 | ); 43 | }); 44 | }); 45 | 46 | describe('observe', () => { 47 | it('returns a blockUI observable', () => { 48 | const blockUIObservable = blockUIService.observe(); 49 | 50 | expect(blockUIObservable).toEqual(blockUIService.blockUIObservable); 51 | }); 52 | 53 | it('observable subscribes to blockUISubject', done => { 54 | const blockUIObservable = blockUIService.observe(); 55 | const expectedResult = 'test'; 56 | 57 | blockUIService.blockUIObservable.pipe(map((data) => { 58 | expect(data).toEqual(expectedResult); 59 | done(); 60 | })) 61 | .subscribe(); 62 | 63 | blockUIService.blockUISubject.next(expectedResult); 64 | }); 65 | }); 66 | 67 | describe('dispatch', () => { 68 | let expectedData = { 69 | name: BlockUIDefaultName, 70 | action: BlockUIActions.START, 71 | message: undefined 72 | }; 73 | 74 | beforeEach(() => { 75 | blockUIService = new BlockUIInstanceService(); 76 | 77 | spyOn(blockUIService.blockUISubject, 'next'); 78 | }); 79 | 80 | it('invokes blockUISubject next method', () => { 81 | const dispatcher = blockUIService.dispatch( 82 | blockUIService.blockUISubject, BlockUIActions.START 83 | ); 84 | 85 | dispatcher(); 86 | 87 | expect(blockUIService.blockUISubject.next).toHaveBeenCalledWith(expectedData); 88 | }); 89 | 90 | it('passes message to dispatched data', () => { 91 | const message = 'Loading...'; 92 | 93 | const dispatcher = blockUIService.dispatch( 94 | blockUIService.blockUISubject, BlockUIActions.START 95 | ); 96 | 97 | dispatcher(message); 98 | 99 | expect(blockUIService.blockUISubject.next).toHaveBeenCalledWith( 100 | { ...expectedData, message } 101 | ); 102 | }); 103 | }); 104 | }); 105 | -------------------------------------------------------------------------------- /lib/services/block-ui-instance.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, ReplaySubject } from 'rxjs'; 3 | import { BlockUIActions } from '../constants/block-ui-actions.constant'; 4 | import { BlockUIDefaultName } from '../constants/block-ui-default-name.constant'; 5 | import { NgBlockUI } from '../models/block-ui.model'; 6 | import { BlockUISettings } from '../models/block-ui-settings.model'; 7 | import { BlockUIEvent } from '../models/block-ui-event.model'; 8 | 9 | 10 | @Injectable() 11 | export class BlockUIInstanceService { 12 | blockUISettings: BlockUISettings | any = {}; 13 | blockUIInstances: any = {}; 14 | private blockUISubject: ReplaySubject = new ReplaySubject(1); 15 | private blockUIObservable: Observable = this.blockUISubject.asObservable(); 16 | 17 | constructor() { 18 | this.blockUIObservable.subscribe(this.blockUIMiddleware.bind(this)); 19 | } 20 | 21 | getSettings(): BlockUISettings | any { 22 | return this.blockUISettings; 23 | } 24 | 25 | updateSettings(settings: BlockUISettings | any = {}): void { 26 | this.blockUISettings = { ...this.blockUISettings, ...settings }; 27 | } 28 | 29 | decorate(name: string = BlockUIDefaultName): NgBlockUI { 30 | const blockUI = { 31 | name, 32 | isActive: false, 33 | blockCount: 0, 34 | start: this.dispatch(this.blockUISubject, BlockUIActions.START, name), 35 | update: this.dispatch(this.blockUISubject, BlockUIActions.UPDATE, name), 36 | stop: this.dispatch(this.blockUISubject, BlockUIActions.STOP, name), 37 | reset: this.dispatch(this.blockUISubject, BlockUIActions.RESET, name), 38 | resetGlobal: this.dispatch(this.blockUISubject, BlockUIActions.RESET_GLOBAL, name), 39 | unsubscribe: this.dispatch(this.blockUISubject, BlockUIActions.UNSUBSCRIBE, name) 40 | } as NgBlockUI; 41 | 42 | this.blockUIInstances[name] = this.blockUIInstances[name] || blockUI; 43 | 44 | return blockUI; 45 | } 46 | 47 | observe(): Observable { 48 | return this.blockUIObservable; 49 | } 50 | 51 | clearInstance(instanceName: string) { 52 | this.dispatch(this.blockUISubject, BlockUIActions.RESET, instanceName); 53 | } 54 | 55 | private blockUIMiddleware({ action, name }: BlockUIEvent): void { 56 | let isActive: boolean = null; 57 | 58 | switch (action) { 59 | case (BlockUIActions.START): 60 | isActive = true; 61 | break; 62 | 63 | case (BlockUIActions.STOP): 64 | case (BlockUIActions.RESET): 65 | isActive = false; 66 | break; 67 | } 68 | 69 | if (isActive !== null) { 70 | this.blockUIInstances[name].isActive = isActive; 71 | } 72 | } 73 | 74 | private dispatch(subject: ReplaySubject, action: BlockUIActions, name: string = BlockUIDefaultName): Function { 75 | return (message?: any): void => { 76 | subject.next({ 77 | name, 78 | action, 79 | message 80 | }); 81 | }; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /lib/services/block-ui.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { } from 'jasmine'; 2 | import { TestBed } from '@angular/core/testing'; 3 | 4 | import { BlockUIModule } from '../block-ui.module'; 5 | import { BlockUIService } from './block-ui.service'; 6 | import { BlockUIInstanceService } from './block-ui-instance.service'; 7 | import { BlockUIActions } from '../constants/block-ui-actions.constant'; 8 | import { BlockUIDefaultName } from '../constants/block-ui-default-name.constant'; 9 | 10 | // This needs to be more thorough 11 | // I am having issues spying on blockUIInstance.dispatch 12 | describe('BlockUI service', () => { 13 | let blockUIService; 14 | 15 | beforeEach(() => { 16 | blockUIService = new BlockUIService(new BlockUIInstanceService()); 17 | 18 | spyOn(blockUIService, 'dispatch'); 19 | }); 20 | 21 | describe('decorate', () => { 22 | const instance = 'testInstance'; 23 | 24 | it('methods dispatch corresponding actions', () => { 25 | blockUIService.start(instance); 26 | blockUIService.update(instance); 27 | blockUIService.stop(instance); 28 | blockUIService.unsubscribe(instance); 29 | 30 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 31 | instance, BlockUIActions.START, undefined 32 | ); 33 | 34 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 35 | instance, BlockUIActions.UPDATE, undefined 36 | ); 37 | 38 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 39 | instance, BlockUIActions.STOP 40 | ); 41 | 42 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 43 | instance, BlockUIActions.UNSUBSCRIBE 44 | ); 45 | }); 46 | 47 | it('start method can be passed a message', () => { 48 | const message = 'Test message'; 49 | 50 | blockUIService.start(instance, message); 51 | 52 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 53 | instance, BlockUIActions.START, message 54 | ); 55 | }); 56 | 57 | it('passes a message to the update method', () => { 58 | const message = 'Test message'; 59 | 60 | blockUIService.update(instance, message); 61 | 62 | expect(blockUIService.dispatch).toHaveBeenCalledWith( 63 | instance, BlockUIActions.UPDATE, message 64 | ); 65 | }); 66 | }); 67 | }); 68 | -------------------------------------------------------------------------------- /lib/services/block-ui.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BlockUIActions } from '../constants/block-ui-actions.constant'; 3 | import { BlockUIInstanceService } from './block-ui-instance.service'; 4 | import { NgBlockUI } from '../models/block-ui.model'; 5 | 6 | 7 | @Injectable() 8 | export class BlockUIService { 9 | globalDispatch: NgBlockUI = this.blockUIInstance.decorate(); 10 | 11 | constructor( 12 | private blockUIInstance: BlockUIInstanceService 13 | ) { } 14 | 15 | /** 16 | * Starts blocking for given BlockUI instance or instances 17 | */ 18 | start(target: string | string[], message?: any): void { 19 | this.dispatch(target, BlockUIActions.START, message); 20 | } 21 | 22 | /** 23 | * Stops blocking for given BlockUI instance or instances 24 | */ 25 | stop(target: string | string[]): void { 26 | this.dispatch(target, BlockUIActions.STOP); 27 | } 28 | 29 | /** 30 | * Reset blocking for given BlockUI instance or instances 31 | */ 32 | reset(target: string | string[]): void { 33 | this.dispatch(target, BlockUIActions.RESET); 34 | } 35 | 36 | /** 37 | * Reset blocking for all BlockUI instances 38 | */ 39 | resetGlobal(): void { 40 | this.globalDispatch.resetGlobal(); 41 | } 42 | 43 | /** 44 | * Updates message for given BlockUI instance or instances 45 | */ 46 | update(target: string | string[], message: any): void { 47 | this.dispatch(target, BlockUIActions.UPDATE, message); 48 | } 49 | 50 | /** 51 | * Unsubscribes for given BlockUI instance or instances 52 | */ 53 | unsubscribe(target: string | string[]): void { 54 | this.dispatch(target, BlockUIActions.UNSUBSCRIBE); 55 | } 56 | 57 | /** 58 | * Checks if BlockUI is actively blocking 59 | */ 60 | isActive(target: string | string[] = null): boolean { 61 | const targets = target ? this.toArray(target) : null; 62 | const instances = this.blockUIInstance.blockUIInstances; 63 | 64 | return Object.keys(instances).some((key: string) => { 65 | if (!targets) { 66 | return instances[key].isActive; 67 | } 68 | 69 | return targets.indexOf(instances[key].name) >= 0 && instances[key].isActive; 70 | }); 71 | } 72 | 73 | private dispatch(target: string | string[] = [], type: string, message?: any) { 74 | const instances = this.toArray(target); 75 | instances.forEach(i => this.blockUIInstance.decorate(i)[type](message)); 76 | } 77 | 78 | private toArray(target: string | string[] = []) { 79 | return typeof target === 'string' ? [target] : target; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/ng-packagr/ng-package.schema.json", 3 | "lib": { 4 | "entryFile": "lib/index.ts" 5 | } 6 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-block-ui", 3 | "version": "4.0.1", 4 | "description": "Angular Block UI", 5 | "main": "./lib/index.js", 6 | "typings": "./lib/index.d.ts", 7 | "scripts": { 8 | "start": "watchman lib 'npm run build:dev && cp -r dist/bundles dev'", 9 | "build": "ng-packagr -p ng-package.json", 10 | "build:dev": "tsc -p tsconfig-umd.json && echo 'Build Complete'", 11 | "release:major": "changelog -M && git add *.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin master && git push origin --tags", 12 | "release:minor": "changelog -m && git add *.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin master && git push origin --tags", 13 | "release:patch": "changelog -p && git add *.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin master && git push origin --tags", 14 | "test": "karma start karma.conf.js", 15 | "test:watch": "karma start karma.conf.js --singleRun=false" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/kuuurt13/ng-block-ui.git" 20 | }, 21 | "keywords": [ 22 | "Angular", 23 | "Loading", 24 | "Block UI", 25 | "Spinner" 26 | ], 27 | "author": "kuuurt13", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/kuuurt13/ng-block-ui/issues" 31 | }, 32 | "homepage": "https://github.com/kuuurt13/ng-block-ui#readme", 33 | "peerDependencies": { 34 | "@angular/common": ">=14.0.0", 35 | "@angular/core": ">=14.0.0", 36 | "@angular/platform-browser": ">=14.0.0", 37 | "@angular/platform-browser-dynamic": ">=14.0.0", 38 | "@angular/router": ">=14.0.0", 39 | "rxjs": ">=7.5.0", 40 | "zone.js": ">=0.11.4" 41 | }, 42 | "devDependencies": { 43 | "@angular-devkit/build-angular": "^14.2.3", 44 | "@angular/cli": "~14.2.3", 45 | "@angular/common": "^14.2.0", 46 | "@angular/compiler": "^14.2.0", 47 | "@angular/compiler-cli": "^14.2.0", 48 | "@angular/core": "^14.2.0", 49 | "@angular/platform-browser": "^14.2.0", 50 | "@angular/platform-browser-dynamic": "^14.2.0", 51 | "@angular/router": "^14.2.0", 52 | "@types/jasmine": "~4.0.0", 53 | "generate-changelog": "^1.8.0", 54 | "jasmine-core": "~4.3.0", 55 | "karma": "~6.4.0", 56 | "karma-chrome-launcher": "~3.1.0", 57 | "karma-coverage": "~2.2.0", 58 | "karma-jasmine": "~5.1.0", 59 | "karma-jasmine-html-reporter": "~2.0.0", 60 | "ng-packagr": "^14.2.1", 61 | "rxjs": "~7.5.0", 62 | "tslib": "^2.3.0", 63 | "typescript": "~4.7.2", 64 | "watchman": "^1.0.0", 65 | "zone.js": "~0.11.4" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /router/block-ui-prevent-navigation.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { APP_BASE_HREF } from '@angular/common'; 3 | import { RouterModule, Routes, Router } from '@angular/router'; 4 | import { TestBed, ComponentFixture, async } from '@angular/core/testing'; 5 | import { BlockUI, BlockUIModule } from 'ng-block-ui'; 6 | import { BlockUIRouterModule } from './block-ui-router.module'; 7 | import { BlockUIPreventNavigation } from './block-ui-prevent-navigation.service'; 8 | 9 | 10 | describe('block-ui-prevent-navigation', () => { 11 | @Component({ 12 | selector: 'landing-comp', 13 | template: `
` 14 | }) 15 | class LandingComp { 16 | } 17 | 18 | @Component({ 19 | selector: 'template-comp', 20 | template: `
` 21 | }) 22 | class TestComp { 23 | @BlockUI() blockUI: any; 24 | 25 | constructor( 26 | public router: Router 27 | ) { } 28 | } 29 | 30 | let cf: ComponentFixture; 31 | let testCmp: TestComp; 32 | 33 | beforeEach(async(() => { 34 | const appRoutes: Routes = [ 35 | { 36 | path: '', canActivateChild: [BlockUIPreventNavigation], children: [ 37 | { path: '', component: TestComp }, 38 | { path: 'landing-page', component: LandingComp } 39 | ] 40 | } 41 | ]; 42 | 43 | TestBed.configureTestingModule({ 44 | imports: [ 45 | RouterModule.forRoot(appRoutes), 46 | BlockUIModule.forRoot(), 47 | BlockUIRouterModule.forRoot() 48 | ], 49 | declarations: [ 50 | TestComp, 51 | LandingComp 52 | ], 53 | providers: [ 54 | { provide: APP_BASE_HREF, useValue: '/' } 55 | ] 56 | }).compileComponents(); 57 | 58 | cf = TestBed.createComponent(TestComp); 59 | cf.detectChanges(); 60 | 61 | testCmp = cf.debugElement.componentInstance; 62 | })); 63 | 64 | it('should block navigation if blocking', () => { 65 | testCmp.blockUI.reset(); 66 | testCmp.blockUI.start(); 67 | 68 | cf.detectChanges(); 69 | 70 | testCmp.router.navigate(['landing-page']) 71 | .then(canActivate => { 72 | expect(canActivate).toBeFalsy(); 73 | }); 74 | }); 75 | 76 | it('should\'nt block if not blocking', () => { 77 | testCmp.blockUI.reset(); 78 | 79 | cf.detectChanges(); 80 | 81 | testCmp.router.navigate(['landing-page']) 82 | .then(canActivate => { 83 | expect(canActivate).toBeTruthy(); 84 | }); 85 | }); 86 | }); 87 | -------------------------------------------------------------------------------- /router/block-ui-prevent-navigation.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { CanActivate, CanActivateChild } from '@angular/router'; 3 | 4 | import { BlockUIService, BLOCKUI_DEFAULT } from 'ng-block-ui'; 5 | 6 | @Injectable() 7 | export class BlockUIPreventNavigation implements CanActivate, CanActivateChild { 8 | 9 | constructor( 10 | private blockUIService: BlockUIService 11 | ) {} 12 | 13 | canActivate() { 14 | return !this.blockUIService.isActive(BLOCKUI_DEFAULT); 15 | } 16 | 17 | canActivateChild() { 18 | return !this.blockUIService.isActive(BLOCKUI_DEFAULT); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /router/block-ui-router.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders } from '@angular/core'; 2 | 3 | import { BlockUIModule } from 'ng-block-ui'; 4 | import { BlockUIPreventNavigation } from './block-ui-prevent-navigation.service'; 5 | 6 | 7 | @NgModule({ 8 | imports: [ 9 | BlockUIModule 10 | ] 11 | }) 12 | export class BlockUIRouterModule { 13 | public static forRoot(): ModuleWithProviders { 14 | return { 15 | ngModule: BlockUIRouterModule, 16 | providers: [ 17 | BlockUIPreventNavigation 18 | ] 19 | }; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /router/index.ts: -------------------------------------------------------------------------------- 1 | import { BlockUIRouterModule } from './block-ui-router.module'; 2 | import { BlockUIPreventNavigation } from './block-ui-prevent-navigation.service'; 3 | 4 | export { 5 | BlockUIRouterModule, 6 | BlockUIPreventNavigation 7 | }; 8 | -------------------------------------------------------------------------------- /router/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "lib": { 3 | "entryFile": "./index.ts" 4 | } 5 | } -------------------------------------------------------------------------------- /tsconfig-umd.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "ng-block-ui": ["lib"] 6 | }, 7 | "outDir": "dist/bundles/umd", 8 | "target": "es5", 9 | "module": "umd", 10 | "moduleResolution": "node", 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "sourceMap": false, 14 | "noEmitHelpers": false, 15 | "noImplicitAny": false, 16 | "declaration": true, 17 | "skipLibCheck": true, 18 | "stripInternal": true, 19 | "lib": [ 20 | "es2015", 21 | "dom" 22 | ] 23 | }, 24 | "exclude": [ 25 | "node_modules", 26 | "dev", 27 | "**/*.spec.ts", 28 | "dist" 29 | ], 30 | "files": [ 31 | "./lib/index.ts", 32 | "./router/index.ts", 33 | "./http/index.ts" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "ng-block-ui": ["lib"] 6 | }, 7 | "outDir": "dist", 8 | "target": "es5", 9 | "module": "commonjs", 10 | "moduleResolution": "node", 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "sourceMap": false, 14 | "noEmitHelpers": false, 15 | "noImplicitAny": false, 16 | "declaration": true, 17 | "skipLibCheck": true, 18 | "stripInternal": true, 19 | "lib": [ 20 | "es2015", 21 | "dom" 22 | ] 23 | }, 24 | "exclude": [ 25 | "node_modules", 26 | "dev", 27 | "**/*.spec.ts" 28 | ], 29 | "types": [ 30 | "jasmine" 31 | ], 32 | "files": [ 33 | "./lib/index.ts", 34 | "./router/index.ts", 35 | "./http/index.ts" 36 | ], 37 | "angularCompilerOptions": { 38 | "genDir": "dist", 39 | "skipTemplateCodegen": true 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "indent": [ 9 | true, 10 | "spaces" 11 | ], 12 | "no-duplicate-variable": true, 13 | "no-eval": true, 14 | "no-internal-module": true, 15 | "no-trailing-whitespace": true, 16 | "no-unsafe-finally": true, 17 | "no-var-keyword": true, 18 | "one-line": [ 19 | true, 20 | "check-open-brace", 21 | "check-whitespace" 22 | ], 23 | "quotemark": [ 24 | true, 25 | "single" 26 | ], 27 | "semicolon": [ 28 | true, 29 | "always" 30 | ], 31 | "triple-equals": [ 32 | true, 33 | "allow-null-check" 34 | ], 35 | "typedef-whitespace": [ 36 | true, 37 | { 38 | "call-signature": "nospace", 39 | "index-signature": "nospace", 40 | "parameter": "nospace", 41 | "property-declaration": "nospace", 42 | "variable-declaration": "nospace" 43 | } 44 | ], 45 | "variable-name": [ 46 | true, 47 | "ban-keywords" 48 | ], 49 | "whitespace": [ 50 | true, 51 | "check-branch", 52 | "check-decl", 53 | "check-operator", 54 | "check-separator", 55 | "check-type" 56 | ] 57 | } 58 | } 59 | --------------------------------------------------------------------------------