@salesforcedevs/dw-components 1.3.397-canary.5 → 1.3.397-canary.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.397-canary.5",
+    "version": "1.3.397-canary.6",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

package/src/modules/dw/deSignupForm/deSignupForm.ts

@@ -4,7 +4,7 @@ import { track as trackGtm } from "dxUtils/analytics";
 import { submitForm, ErrorCode, SignupForm, UserData } from "./submitForm";
 import { CountryOptions } from "typings/custom";
 import { stateMap } from "dwUtils/forms";
-import Recaptcha from "packages/@salesforcedevs/dw-components/src/modules/dw/recaptcha/recaptcha";
+import Recaptcha from "dw/recaptcha";
 
 type SelectOption = { value: string; label: string };
 type Country = SelectOption & {
@@ -86,7 +86,9 @@ export default class DeSignupForm extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this.recaptchaComponent = e.target as Recaptcha;
+        this.recaptchaComponent = (
+            e.target as HTMLSlotElement
+        )?.assignedElements()[0] as unknown as Recaptcha;
     }
 
     createUUID() {

package/src/modules/dw/recaptcha/recaptcha.css

@@ -1,13 +1,6 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
-.container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
 .error-message-box {
     margin-top: var(--dx-g-spacing-xs);
     display: block;

package/src/modules/dw/recaptcha/recaptcha.html

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <div class="g-recaptcha"></div>
+        <slot onslotchange={onSlotChange}></slot>
         <div
             if:true={errorMessage}
             aria-live="assertive"

package/src/modules/dw/recaptcha/recaptcha.ts

@@ -7,8 +7,9 @@ type RecaptchaApi = {
 };
 
 export default class Recaptcha extends LightningElement {
+    private didRenderRecaptcha = false;
     private errorMessage = "";
-    private recaptchaDiv!: HTMLDivElement;
+    private recaptchaDiv?: HTMLDivElement;
     private recaptchaApi?: RecaptchaApi;
     private recaptchaToken = "";
 
@@ -22,7 +23,10 @@ export default class Recaptcha extends LightningElement {
 
     @api
     recaptchaScriptOnLoad = (recaptchaApi: RecaptchaApi) => {
+        // store callbacks to be used with recaptcha
         this.recaptchaApi = recaptchaApi;
+
+        // and if we have everything needed to render, render
         if (this.recaptchaDiv) {
             this.renderRecaptcha();
         }
@@ -47,30 +51,36 @@ export default class Recaptcha extends LightningElement {
         return Boolean(this.recaptchaToken);
     };
 
-    renderedCallback() {
-        if (!this.recaptchaDiv) {
-            this.recaptchaDiv = this.template.querySelector(
-                ".g-recaptcha"
-            ) as HTMLDivElement;
-            if (this.recaptchaApi) {
-                this.renderRecaptcha();
-            }
+    private onSlotChange = (e: Event) => {
+        this.recaptchaDiv = (
+            e.target as HTMLSlotElement
+        )?.assignedElements?.()[0] as HTMLDivElement;
+
+        // if we have everything needed to render, render
+        if (this.recaptchaApi) {
+            this.renderRecaptcha();
         }
-    }
+    };
 
     private renderRecaptcha = () => {
+        if (this.didRenderRecaptcha) {
+            return;
+        }
+
         const smallMatchMedia = window.matchMedia(
             "screen and (max-width: 768px)"
         );
 
         // render recaptcha, referencing this component's callbacks for handling events
-        this.recaptchaApi?.render(this.recaptchaDiv, {
+        this.recaptchaApi?.render(this.recaptchaDiv as HTMLDivElement, {
             sitekey: this.recaptchaSiteKey,
             callback: this.recaptchaCallback,
             "expired-callback": this.recaptchaExpiredCallback,
             "error-callback": this.recaptchaErrorCallback,
             size: smallMatchMedia.matches ? "compact" : "normal"
         });
+
+        this.didRenderRecaptcha = true;
     };
 
     private recaptchaCallback = (token: string) => {