@descope/web-components-ui 1.0.308 → 1.0.310

package/dist/cjs/index.cjs.js

@@ -960,21 +960,8 @@ const componentNameValidationMixin = (superclass) =>
     }
   };
 
-// create a dispatch event function that also calls to the onevent function in case  it's set
-// usage example:
-// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
-// this will dispatch a new event when called, but also call to "onsomething"
-function createDispatchEvent(eventName, options = {}) {
-  const event = new Event(eventName, options);
-
-  this[`on${eventName}`]?.(event); // in case we got an event callback as property
-  this.dispatchEvent(event);
-}
-
 const componentsContextMixin = (superclass) =>
   class ComponentsContextMixinClass extends superclass {
-    #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
-
     updateComponentsContext(componentsContext) {
       this.dispatchEvent(
         new CustomEvent('components-context', {
@@ -1117,6 +1104,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
   )(DescopeBaseClass);
 };
 
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
+
 const createProxy = ({
   componentName,
   wrappedEleName,
@@ -2183,7 +2181,7 @@ const getNestedInput = (ele) => {
   let nonSlotEle = ele;
   for (let i = 0; i < nestingLevel; i++) {
     [nonSlotEle] = nonSlotEle.assignedElements();
-    if (nonSlotEle.localName !== 'slot') return nonSlotEle;
+    if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
   }
   return undefined;
 };
@@ -2923,6 +2921,10 @@ const {
   errorMessage: errorMessage$c,
   disabledPlaceholder,
   inputDisabled,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -2934,6 +2936,10 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
+  externalInput: { selector: () => '::slotted(input)' },
+  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
+  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
+  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
 };
 
 var textFieldMappings = {
@@ -2959,8 +2965,12 @@ var textFieldMappings = {
   inputValueTextColor: [
     { ...inputField$6, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
+    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
+  ],
+  inputCaretTextColor: [
+    { ...input, property: 'color' },
+    { ...externalInput, property: 'color' },
   ],
-  inputCaretTextColor: { ...input, property: 'color' },
 
   labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
 
@@ -2973,6 +2983,8 @@ var textFieldMappings = {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField$6, property: 'outline-color' },
@@ -2980,11 +2992,16 @@ var textFieldMappings = {
   inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
   inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
 
-  inputTextAlign: { ...input, property: 'text-align' },
+  inputTextAlign: [
+    { ...input, property: 'text-align' },
+    { ...externalInput, property: 'text-align' },
+  ],
 
   inputPlaceholderColor: [
     { ...placeholder$3, property: 'color' },
+    { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 };
 
@@ -3139,6 +3156,31 @@ const customMixin$8 = (superclass) =>
         this.baseElement._setType(newVal);
       }
     }
+
+    // webauthn is not working when the native input element is nested inside multiple shadow roots
+    // so we need to be able move the input outside the shadow root for some cases
+    get isExternalInput() {
+      return this.getAttribute('external-input') === 'true';
+    }
+
+    constructor() {
+      super();
+
+      if (this.isExternalInput) {
+        const origInput = this.baseElement.querySelector('input');
+        this.inputSlot = document.createElement('slot');
+
+        this.focus = () => {
+          origInput.focus();
+        };
+
+        this.inputSlot.setAttribute('name', 'input');
+        this.inputSlot.setAttribute('slot', 'input');
+        this.baseElement.appendChild(this.inputSlot);
+
+        this.appendChild(origInput);
+      }
+    }
   };
 
 const TextFieldClass = compose(
@@ -11659,8 +11701,10 @@ class RawRecaptcha extends BaseClass {
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
-    if (attrName === 'enabled') {
-      this.#toggleRecaptcha(newValue === 'true');
+    if (oldValue !== newValue) {
+      if (attrName === 'enabled') {
+        this.#toggleRecaptcha(newValue === 'true');
+      }
     }
   }
 
@@ -11730,73 +11774,89 @@ class RawRecaptcha extends BaseClass {
   #toggleRecaptcha(enabled) {
     this.renderRecaptcha(enabled);
     if (enabled) {
-      this.#loadRecaptchaScript();
       this.#createOnLoadScript();
+      if (!document.getElementById('recaptcha-script')) {
+        this.#loadRecaptchaScript();
+      } else {
+        window.onRecaptchaLoadCallback();
+      }
     }
   }
 
   #loadRecaptchaScript() {
-    if (!document.getElementById('recaptcha-script')) {
-      const script = document.createElement('script');
-      script.src = this.scriptURL;
-      script.async = true;
-      script.id = 'recaptcha-script';
-      script.defer = true;
-      document.body.appendChild(script);
-    } else {
-      window.onRecaptchaLoadCallback();
-    }
+    const script = document.createElement('script');
+    script.src = this.scriptURL;
+    script.async = true;
+    script.id = 'recaptcha-script';
+    script.defer = true;
+    document.body.appendChild(script);
   }
 
-  #createOnLoadScript() {
-    if (window.onRecaptchaLoadCallback) {
-      return;
-    }
+  get grecaptchaInstance() {
+    return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
+  }
 
+  #createOnLoadScript() {
     window.onRecaptchaLoadCallback = () => {
       const currentNode = this.recaptchaEle;
+
       // if there are child nodes, it means that the recaptcha was already rendered
       if (currentNode.hasChildNodes()) {
         return;
       }
-      const grecaptchaInstance = this.enterprise
-        ? window.grecaptcha?.enterprise
-        : window.grecaptcha;
+
+      const { grecaptchaInstance } = this;
 
       if (!grecaptchaInstance) {
         return;
       }
 
       setTimeout(() => {
-        const view = grecaptchaInstance.render(currentNode, {
+        // returns recaptchaWidgetId
+        const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
           sitekey: this.siteKey,
           badge: 'inline',
           size: 'invisible',
         });
+
         grecaptchaInstance.ready(() => {
           // clone the node and append it to the body so that it can be used by the grepcaptcha script
-          const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
+          const cloneNode = currentNode
+            .querySelector('textarea[name^="g-recaptcha-response"]')
+            ?.cloneNode();
           if (cloneNode) {
             cloneNode.style.display = 'none';
             document.body.appendChild(cloneNode);
           }
+
+          // cleaning up the recaptcha element we added to the body
+          const removeCloneNode = () => {
+            cloneNode.remove();
+          };
+
           if (this.siteKey) {
-            grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
-              this.updateComponentsContext({
-                risktoken: token,
-                riskaction: this.action,
+            // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
+            // also calling grecaptchaInstance.reset() does not work
+            const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
+            exec
+              .then((token) => {
+                this.updateComponentsContext({
+                  risktoken: token,
+                  riskaction: this.action,
+                });
+
+                removeCloneNode();
+              })
+              .catch((e) => {
+                removeCloneNode();
+                // eslint-disable-next-line no-console
+                console.warn('could not execute recaptcha', e);
               });
-            });
           }
         });
       }, 0);
     };
   }
-
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.#toggleRecaptcha(this.enabled);
-  }
 }
 
 const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);