feat(component): *deprecate* error output in favor of errored

`(error)` will be removed in the next major version due to a name clash with DOM Element's [`'error'` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event). `(errored)` is an equivalent substitute.

*Failure* to properly address this deprecation before its removal *may result in breakages* of custom error handling code (for when `errorMode` parameter value is set to `"handled"`).

README.md

@@ -188,7 +188,7 @@ Besides specifying these options on the component itself, you can provide a glob
   If the captcha has expired prior to submitting its value to the server, the component
   will reset the captcha, and trigger the `resolved` event with `response === null`.
 
-- `error(errorDetails: RecaptchaErrorParameters)`. Occurs when reCAPTCHA encounters an error (usually a connectivity problem) **if and only if** `errorMode` input has been set to `"handled"`.
+- `errored(errorDetails: RecaptchaErrorParameters)`. Occurs when reCAPTCHA encounters an error (usually a connectivity problem) **if and only if** `errorMode` input has been set to `"handled"`.
   `errorDetails` is a simple propagation of any arguments that the original `error-callback` has provided, and is documented here for the purposes of completeness and future-proofing. This array will most often (if not always) be empty. A good strategy would be to rely on just the fact that this event got triggered, and show a message to your app's user telling them to retry.
 
 ### <a name="api-methods"></a>Methods
@@ -288,7 +288,7 @@ import { Component } from "@angular/core";
 
 @Component({
   selector: "my-app",
-  template: `<re-captcha (resolved)="resolved($event)" (error)="errored($event)" errorMode="handled"></re-captcha>`,
+  template: `<re-captcha (resolved)="resolved($event)" (errored)="errored($event)" errorMode="handled"></re-captcha>`,
 })
 export class MyApp {
   resolved(captchaResponse: string) {
@@ -303,9 +303,9 @@ export class MyApp {
 
 You can see this in action by navigating to either [basic example demo](https://dethariel.github.io/ng-recaptcha/basic) or [invisible demo](https://dethariel.github.io/ng-recaptcha/invisible) and trying to interact with reCAPTCHA after setting the network to "Offline".
 
-The `errorMode` input has two possible values -- `"handled"` and `"default"`, with latter being the default as the name suggests. Not specifying `errorMode`, or setting it to anything other than `"handled"` will not invoke your `(error)` callback, and will instead result in default reCAPTCHA functionality.
+The `errorMode` input has two possible values -- `"handled"` and `"default"`, with latter being the default as the name suggests. Not specifying `errorMode`, or setting it to anything other than `"handled"` will not invoke your `(errored)` callback, and will instead result in default reCAPTCHA functionality.
 
-The `(error)` callback will propagate all of the parameters that it receives from `grecaptcha['error-callback']` (which might be none) as an array.
+The `(errored)` callback will propagate all of the parameters that it receives from `grecaptcha['error-callback']` (which might be none) as an array.
 
 ### <a name="example-preload-api"></a>Loading the reCAPTCHA API by yourself [(see in action)](https://dethariel.github.io/ng-recaptcha/v8/preload-api)
 

projects/demo/src/app/examples/basic/basic-demo.component.html

@@ -1 +1 @@
-<re-captcha (resolved)="resolved($event)" (error)="onError($event)" errorMode="handled"></re-captcha>
+<re-captcha (resolved)="resolved($event)" (errored)="onError($event)" errorMode="handled"></re-captcha>

projects/demo/src/app/examples/invisible/invisible-demo.component.html

@@ -1,7 +1,7 @@
 <re-captcha
   #captchaRef="reCaptcha"
   (resolved)="resolved($event)"
-  (error)="onError($event)"
+  (errored)="onError($event)"
   errorMode="handled"
   size="invisible"
 ></re-captcha>

projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts

@@ -117,7 +117,7 @@ describe("RecaptchaComponent", () => {
   it("should emit grecaptcha error if errorMode was set to 'handled'", () => {
     // Arrange
     const emittedErrors: Array<RecaptchaErrorParameters> = [];
-    component.error.subscribe((error: RecaptchaErrorParameters) => emittedErrors.push(error));
+    component.errored.subscribe((error: RecaptchaErrorParameters) => emittedErrors.push(error));
     component.errorMode = "handled";
     mockRecaptchaLoaderService.init();
 

projects/ng-recaptcha/src/lib/recaptcha.component.ts

@@ -42,9 +42,12 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
   @Input() public errorMode: "handled" | "default" = "default";
 
   @Output() public resolved = new EventEmitter<string>();
-  // The rename will happen a bit later
+  /**
+   * @deprecated `(error) output will be removed in the next major version. Use (errored) instead
+   */
   // eslint-disable-next-line @angular-eslint/no-output-native
   @Output() public error = new EventEmitter<RecaptchaErrorParameters>();
+  @Output() public errored = new EventEmitter<RecaptchaErrorParameters>();
 
   /** @internal */
   private subscription: Subscription;
@@ -136,8 +139,9 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
   }
 
   /** @internal */
-  private errored(args: RecaptchaErrorParameters) {
+  private onError(args: RecaptchaErrorParameters) {
     this.error.emit(args);
+    this.errored.emit(args);
   }
 
   /** @internal */
@@ -172,7 +176,7 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
 
     if (this.errorMode === "handled") {
       renderOptions["error-callback"] = (...args: RecaptchaErrorParameters) => {
-        this.zone.run(() => this.errored(args));
+        this.zone.run(() => this.onError(args));
       };
     }