ng-recaptcha - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="3.0.3"></a>
+## [3.0.3](https://github.com/DethAriel/ng-recaptcha/compare/v3.0.2...v3.0.3) (2017-12-26)
+
+
+### Bug Fixes
+
+* **component:** use ElementRef to access component's native element ([d3a8409](https://github.com/DethAriel/ng-recaptcha/commit/d3a8409)), closes [#48](https://github.com/DethAriel/ng-recaptcha/issues/48) [#68](https://github.com/DethAriel/ng-recaptcha/issues/68)
+
+
+
 <a name="3.0.2"></a>
@@ -2,0 +12,0 @@ ## [3.0.2](https://github.com/DethAriel/ng-recaptcha/compare/v3.0.1...v3.0.2) (2017-10-18)

package.json

 {
   "name": "ng-recaptcha",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Angular component for Google reCAPTCHA",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -13,2 +13,3 @@ # Angular component for Google reCAPTCHA
 2. [Basic Usage](#example-basic)
+   * [Playground](#playground)
 3. [Working with `@angular/forms`](#forms-ready)
@@ -78,2 +79,6 @@ 4. [API](#api)
 
+### <a name="playground"></a>Playground
+
+You can also play with [this demo plunk](https://plnkr.co/edit/JNVNl0WJl3bFuWtt2O9i?p=preview) to get a feel of how this component can be used.
+
 ## <a name="forms-ready"></a>Working with `@angular/forms`
@@ -240,2 +245,24 @@
 
+A similar approach can be taken for reactive forms:
+
+```typescript
+@Component({
+  selector: 'my-reactive-form',
+  template: `
+    <form [formGroup]="reactiveForm">
+      <re-captcha formControlName="recaptchaReactive"></re-captcha>
+      <button [disabled]="reactiveForm.invalid">Submit</button>
+    </form>
+  `,
+}) export class MyReactiveForm {
+  reactiveForm: FormGroup;
+
+  ngOnInit() {
+    this.reactiveForm = new FormGroup({
+      recaptchaReactive: new FormControl(null, Validators.required)
+    });
+  }
+}
+```
+
 ### <a name="example-invisible"></a>Working with invisible reCAPTCHA [(see in action)](https://dethariel.github.io/ng-recaptcha/invisible)
@@ -242,0 +269,0 @@

recaptcha/recaptcha.component.d.ts

 /// <reference types="grecaptcha" />
-import { AfterViewInit, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { RecaptchaLoaderService } from './recaptcha-loader.service';
 import { RecaptchaSettings } from './recaptcha-settings';
 export declare class RecaptchaComponent implements AfterViewInit, OnDestroy {
+    private elementRef;
     private loader;
@@ -16,3 +17,3 @@ private zone;
     resolved: EventEmitter<string>;
-    constructor(loader: RecaptchaLoaderService, zone: NgZone, settings?: RecaptchaSettings);
+    constructor(elementRef: ElementRef, loader: RecaptchaLoaderService, zone: NgZone, settings?: RecaptchaSettings);
     ngAfterViewInit(): void;
@@ -19,0 +20,0 @@ ngOnDestroy(): void;

recaptcha/recaptcha.component.js

@@ -8,3 +8,4 @@ "use strict";
 var RecaptchaComponent = (function () {
-    function RecaptchaComponent(loader, zone, settings) {
+    function RecaptchaComponent(elementRef, loader, zone, settings) {
+        this.elementRef = elementRef;
         this.loader = loader;
@@ -80,3 +81,3 @@ this.zone = zone;
         var _this = this;
-        this.widget = this.grecaptcha.render(this.id, {
+        this.widget = this.grecaptcha.render(this.elementRef.nativeElement, {
             badge: this.badge,
@@ -105,2 +106,3 @@ callback: function (response) {
     RecaptchaComponent.ctorParameters = function () { return [
+        { type: core_1.ElementRef, },
         { type: recaptcha_loader_service_1.RecaptchaLoaderService, },
@@ -107,0 +109,0 @@ { type: core_1.NgZone, },

recaptcha/recaptcha.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"RecaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"exportAs":"reCaptcha","selector":"re-captcha","template":""}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.id"]}]}],"siteKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"badge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resolved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./recaptcha-settings","name":"RECAPTCHA_SETTINGS"}]}]],"parameters":[{"__symbolic":"reference","module":"./recaptcha-loader.service","name":"RecaptchaLoaderService"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./recaptcha-settings","name":"RecaptchaSettings"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"expired":[{"__symbolic":"method"}],"captchaReponseCallback":[{"__symbolic":"method"}],"grecaptchaReset":[{"__symbolic":"method"}],"renderRecaptcha":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"RecaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"exportAs":"reCaptcha","selector":"re-captcha","template":""}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.id"]}]}],"siteKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"badge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resolved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./recaptcha-settings","name":"RECAPTCHA_SETTINGS"}]}]],"parameters":[{"__symbolic":"reference","module":"./recaptcha-loader.service","name":"RecaptchaLoaderService"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./recaptcha-settings","name":"RecaptchaSettings"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"expired":[{"__symbolic":"method"}],"captchaReponseCallback":[{"__symbolic":"method"}],"grecaptchaReset":[{"__symbolic":"method"}],"renderRecaptcha":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"RecaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"exportAs":"reCaptcha","selector":"re-captcha","template":""}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.id"]}]}],"siteKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"badge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resolved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./recaptcha-settings","name":"RECAPTCHA_SETTINGS"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./recaptcha-loader.service","name":"RecaptchaLoaderService"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./recaptcha-settings","name":"RecaptchaSettings"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"expired":[{"__symbolic":"method"}],"captchaReponseCallback":[{"__symbolic":"method"}],"grecaptchaReset":[{"__symbolic":"method"}],"renderRecaptcha":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"RecaptchaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"exportAs":"reCaptcha","selector":"re-captcha","template":""}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.id"]}]}],"siteKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"badge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resolved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./recaptcha-settings","name":"RECAPTCHA_SETTINGS"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./recaptcha-loader.service","name":"RecaptchaLoaderService"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./recaptcha-settings","name":"RecaptchaSettings"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"execute":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"expired":[{"__symbolic":"method"}],"captchaReponseCallback":[{"__symbolic":"method"}],"grecaptchaReset":[{"__symbolic":"method"}],"renderRecaptcha":[{"__symbolic":"method"}]}}}}]

No alert changes

Improved metrics

Total package byte prevSize

52623

increased by2.83%

Lines of code

379

increased by0.8%

Number of lines in readme file

306

increased by9.68%

No dependency changes