Merged migrate-to-qrious into master

Author: SuperiorJT

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.npmrc

README.md

@@ -1,6 +1,12 @@
 [![npm version](https://badge.fury.io/js/angular2-qrcode.svg)](https://badge.fury.io/js/angular2-qrcode)
 # angular2-qrcode
-angular2-qrcode is a component that you can easily integrate into your project. It relies on [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) to generate QR Codes.
+angular2-qrcode is a component that you can easily integrate into your project. It relies on [qrious](https://github.com/neocotic/qrious) to generate QR Codes.
+
+## Breaking Changes for 2.0.0
+
+`data` has been replaced with `value`. For those that don't need the new features of `2.0.0`, just keep using `1.0.5`. No change will be needed unless you upgrade.
+
+The `type` field has also been removed.
 
 ## Install
 
@@ -27,7 +33,7 @@ import { QRCodeModule } from 'angular2-qrcode';
 In component template:
 ```
 <div>
-    <qr-code [data]="'All QR Code data goes here!'" [size]="150"></qr-code>
+    <qr-code [value]="'All QR Code data goes here!'" [size]="150"></qr-code>
 </div>
 ```
 
@@ -42,7 +48,7 @@ import {QRCodeComponent} from 'angular2-qrcode';
   directives: [QRCodeComponent],
   template: `
     <div>
-      <qr-code [data]="'All QR Code data goes here!'" [size]="150"></qr-code>
+      <qr-code [value]="'All QR Code data goes here!'" [size]="150"></qr-code>
     </div>
   `
 })
@@ -52,14 +58,16 @@ import {QRCodeComponent} from 'angular2-qrcode';
 
 | Attribute        | Type           | Default | Description  |
 | ------------- |-------------| -----|------------|
-| data      | String | '' | Your data string |
-| size      | Number | 128     | This is the height/width of your QR Code component |
-| level | String | 'M'    | QR Correction level ('L', 'M', 'Q', 'H') |
-| type | Number | 4 | Buffer size for data string
-
-## Note
-
-If you have `code length overflow` errors, you need to increase the `[type]` value to increase the buffer for your data string.
+| value      | String | '' | Your data string |
+| size      | Number | 100     | This is the height/width of your QR Code component |
+| level | String | 'L'    | QR Correction level ('L', 'M', 'Q', 'H') |
+| background | String | 'white' | The color for the background |
+| backgroundAlpha | Number | 1.0 | The opacity of the background |
+| foreground | String | 'black' | The color for the foreground |
+| foregroundAlpha | Number | 1.0 | The opacity of the foreground |
+| mime | String | 'image/png' | The mime type for the output image |
+| padding | Number | null | The padding around the QR Code |
+| canvas | Boolean | false | Will output a canvas element if true |
 
 ## License
 MIT License

angular2-qrcode.d.ts

@@ -2,10 +2,16 @@ import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
 export declare class QRCodeComponent implements OnChanges {
     private elementRef;
     ngOnChanges(changes: SimpleChanges): void;
-    data: string;
-    size: number;
-    type: number;
+    background: string;
+    backgroundAlpha: number;
+    foreground: string;
+    foregroundAlpha: number;
     level: string;
+    mime: string;
+    padding: number;
+    size: number;
+    value: string;
+    canvas: boolean;
     constructor(elementRef: ElementRef);
     generate(): void;
 }

angular2-qrcode.js

@@ -6,41 +6,66 @@ import {
     OnChanges,
     SimpleChanges
 } from '@angular/core';
-import * as qrcode from "qrcode-generator";
+import * as QRious from 'qrious';
 
 @Component({
     moduleId: 'module.id',
     selector: 'qr-code',
-    template: ''
+    template: ``
 })
 export class QRCodeComponent implements OnChanges {
     ngOnChanges(changes: SimpleChanges): void {
-        if ('data' in changes) {
+        if ('background' in changes ||
+            'backgroundAlpha' in changes ||
+            'foreground' in changes ||
+            'foregroundAlpha' in changes ||
+            'level' in changes ||
+            'mime' in changes ||
+            'padding' in changes ||
+            'size' in changes ||
+            'value' in changes ||
+            'canvas' in changes) {
             this.generate();
         }
     }
+    
+    @Input() background: string = 'white';
+    @Input() backgroundAlpha: number = 1.0;
+    @Input() foreground: string = 'black';
+    @Input() foregroundAlpha: number = 1.0;
+    @Input() level: string = 'L';
+    @Input() mime: string = 'image/png';
+    @Input() padding: number = null;
+    @Input() size: number = 100;
+    @Input() value: string = '';
 
-    @Input() data: string = '';
-    @Input() size: number = 128;
-    @Input() type: number = 4;
-    @Input() level: string = 'M';
+    @Input() canvas: boolean = false;
 
 
     constructor(private elementRef: ElementRef) {
     }
 
     generate() {
         try {
-            let qr = qrcode(this.type, this.level);
-            qr.addData(this.data);
-            qr.make();
-
-            let imgTagString = qr.createImgTag(this.type, 0);
             let el: HTMLElement = this.elementRef.nativeElement;
-            el.innerHTML = imgTagString;
-            let imgTagObject: HTMLImageElement = <HTMLImageElement> el.firstElementChild;
-            imgTagObject.width = this.size;
-            imgTagObject.height = this.size;
+            el.innerHTML = '';
+            let qr = new QRious({
+                background: this.background,
+                backgroundAlpha: this.backgroundAlpha,
+                foreground: this.foreground,
+                foregroundAlpha: this.foregroundAlpha,
+                level: this.level,
+                mime: this.mime,
+                padding: this.padding,
+                size: this.size,
+                value: this.value
+            });
+            
+            if (this.canvas) {
+                el.appendChild(qr.canvas);
+            } else {
+                el.appendChild(qr.image);
+            }
         } catch (e) {
             console.error(`Could not generate QR Code: ${e.message}`);
         }

angular2-qrcode.js.map

@@ -1,13 +1,13 @@
 {
   "name": "angular2-qrcode",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "An Angular 2 component that generates a QR Code.",
   "main": "angular2-qrcode.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/SuperiorJT/angular2-qrcode.git"
   },
-  "scripts": { },
+  "scripts": {},
   "keywords": [
     "qrcode",
     "qr",
@@ -17,8 +17,14 @@
     "2",
     "ng2"
   ],
+  "files": [
+    "angular2-qrcode.d.ts",
+    "angular2-qrcode.js",
+    "angular2-qrcode.js.map",
+    "README.md"
+  ],
   "dependencies": {
-    "qrcode-generator": "^1.0.0"
+    "qrious": "^2.2.0"
   },
   "peerDependencies": {
     "@angular/core": "^2.0.0"