Merge pull request #19 from wayneparrott/ng6-upgrade

Resolves #18, upgraded to work with Angular 6+

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -2,6 +2,14 @@ npm-debug.log
 node_modules
 jspm_packages
 .idea
-lib
 build
-*.log
+*.log
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# System Files
+.DS_Store
+Thumbs.db

.project

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>ng-canvas-gauges</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>

README.md

@@ -1,41 +1,37 @@
-### Angular2 component wrapper for the canvas-gauges library written by @Mikhus(https://github.com/Mikhus/canvas-gauges).
+### Angular 6+ component wrapper for the canvas-gauges library by @Mikhus(https://github.com/Mikhus/canvas-gauges).
 
-### The setup path:
-1. Install the package in your angular2 app
+### Getting Started
+1. Install the package in your angular 7 or greater app
 ~~~
-npm install --save ng-canvas-gauges
+npm install ng-canvas-gauges
 ~~~
-2. Add the GaugesModule to your AppModule file and register it inside the imports:
+2. Import the GaugesModule to your AppModule file and register it in the imports:
 
 ~~~javascript 
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {HttpModule} from '@angular/http';
-
 import {AppComponent} from './app.component';
-import {GaugesModule} from 'ng-canvas-gauges/lib';
+
+import {GaugesModule} from 'ng-canvas-gauges';
 
 @NgModule({
     declarations: [
         AppComponent,
     ],
     imports: [
         BrowserModule,
-        FormsModule,
-        HttpModule,
         GaugesModule
     ],
     providers: [],
     bootstrap: [AppComponent]
 })
 export class AppModule {
 }
-
 ~~~
-3. Add the markup to your template as simple as that:
+3. Add the linear-gauge or radial-gauge element to your template:
 ~~~javascript
-<linear-gauge width="150" height="600"></linear-gauge>
+<linear-gauge width="150" height="400"></linear-gauge>
+<radial-gauge width="400" height="400"></radial-gauge>
 ~~~
 ------------------------------------------------------
 
@@ -80,9 +76,27 @@ export class AppModule {
     [attr.value]="value"
   ></linear-gauge>
 ~~~
-All possible attributes from the original library are supported and can be found right here:
+All canvas-gauge attributes are supported. Learn more:
 [https://canvas-gauges.com/documentation/user-guide/configuration](https://canvas-gauges.com/documentation/user-guide/configuration)
 
+------------------------------------------------------
+## Build
+This repo layout is based on an Angular 6 or greater workspace containing the ng-canvas-gauge library project
+and a demo angular app project. 
+
+1. Install dependencies
+~~~
+npm install
+~~~
+
+2. Create an installable library (.tgz) for upload to the npm public repository or for local installation. 
+    Output is to ./dist/ng-canvas-gauges/ folder.
+~~~
+npm run build:package
+~~~
+
+------------------------------------------------------
+
 ## Special Thanks
 
 [![Lohika](http://www.lohika.com/wp-content/themes/gridalicious/images/lohika_full.svg)](http://www.lohika.com/)

angular.json

@@ -0,0 +1,142 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-canvas-gauges": {
+      "root": "projects/ng-canvas-gauges",
+      "sourceRoot": "projects/ng-canvas-gauges/src",
+      "projectType": "library",
+      "prefix": "",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ng-canvas-gauges/tsconfig.lib.json",
+            "project": "projects/ng-canvas-gauges/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ng-canvas-gauges/src/test.ts",
+            "tsConfig": "projects/ng-canvas-gauges/tsconfig.spec.json",
+            "karmaConfig": "projects/ng-canvas-gauges/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ng-canvas-gauges/tsconfig.lib.json",
+              "projects/ng-canvas-gauges/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "demo": {
+      "root": "projects/demo/",
+      "sourceRoot": "projects/demo/src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "projects/demo/src/index.html",
+            "main": "projects/demo/src/main.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "assets": [
+              "projects/demo/src/favicon.ico",
+              "projects/demo/src/assets"
+            ],
+            "styles": [
+              "projects/demo/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/demo/src/environments/environment.ts",
+                  "with": "projects/demo/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/demo/src/test.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
+            "tsConfig": "projects/demo/tsconfig.spec.json",
+            "karmaConfig": "projects/demo/karma.conf.js",
+            "styles": [
+              "projects/demo/src/styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "projects/demo/src/favicon.ico",
+              "projects/demo/src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/demo/tsconfig.app.json",
+              "projects/demo/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ng-canvas-gauges"
+}