feat(component): add support for badge property

fixes #30

demo/examples/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "preinstall": "npm uninstall ng-recaptcha"
+    "latest": "npm install && npm uninstall ng-recaptcha && npm install ng-recaptcha"
   },
   "dependencies": {
     "@angular/common": "^4.0.0",

package.json

@@ -3,9 +3,10 @@
   "version": "2.0.2",
   "description": "Angular component for Google reCAPTCHA",
   "scripts": {
-    "demo": "cd demo && bundle exec jekyll serve",
+    "demo": "npm run demo:install && npm run demo:serve",
+    "demo:serve": "cd demo && bundle exec jekyll serve",
     "demo:build": "cd demo && bundle exec jekyll build",
-    "demo:install": "npm run transpile && cd demo/examples && npm install && cd ../.. && npm run clean",
+    "demo:install": "npm run transpile && cd demo/examples && npm run latest && cd ../.. && npm run clean",
     "demo:publish": "npm run demo:build && gh-pages -d demo/_site/",
     "transpile": "ngc -p ./tsconfig.json",
     "clean": "del-cli './{recaptcha/,index,forms}*.{js,d.ts,js.map,metadata.json}' factories",

recaptcha/recaptcha.component.ts

@@ -29,6 +29,7 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
   @Input() public type: ReCaptchaV2.Type;
   @Input() public size: ReCaptchaV2.Size | 'invisible';
   @Input() public tabIndex: number;
+  @Input() public badge: 'bottomright' | 'bottomleft' | 'inline' = 'bottomright';
 
   @Output() public resolved = new EventEmitter<string>();
 
@@ -104,6 +105,7 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
   /** @internal */
   private renderRecaptcha() {
     this.widget = this.grecaptcha.render(this.id, {
+      badge: this.badge,
       callback: (response: string) => {
         this.zone.run(() => this.captchaReponseCallback(response));
       },
@@ -116,6 +118,7 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
       tabindex: this.tabIndex,
       theme: this.theme,
       type: this.type,
-    });
+    // tslint:disable-next-line:no-any
+    } as any);
   }
 }