@descope/web-components-ui 3.2.2 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "3.2.2",
+  "version": "3.3.1",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -51,10 +51,10 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "rollup-replace-plugin": "3.2.2",
-    "webpack-extract-font-loader": "3.2.2",
-    "webpack-replace-plugin": "3.2.2",
-    "test-drivers": "3.2.2"
+    "rollup-replace-plugin": "3.3.1",
+    "test-drivers": "3.3.1",
+    "webpack-extract-font-loader": "3.3.1",
+    "webpack-replace-plugin": "3.3.1"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -78,33 +78,33 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/descope-address-field": "3.2.2",
-    "@descope-ui/descope-country-subdivision-city-field": "3.2.2",
-    "@descope-ui/common": "3.2.2",
-    "@descope-ui/descope-apps-list": "3.2.2",
-    "@descope-ui/descope-autocomplete-field": "3.2.2",
-    "@descope-ui/descope-avatar": "3.2.2",
-    "@descope-ui/descope-badge": "3.2.2",
-    "@descope-ui/descope-button": "3.2.2",
-    "@descope-ui/descope-collapsible-container": "3.2.2",
-    "@descope-ui/descope-combo-box": "3.2.2",
-    "@descope-ui/descope-icon": "3.2.2",
-    "@descope-ui/descope-link": "3.2.2",
-    "@descope-ui/descope-list": "3.2.2",
-    "@descope-ui/descope-list-item": "3.2.2",
-    "@descope-ui/descope-outbound-app-button": "3.2.2",
-    "@descope-ui/descope-outbound-apps": "3.2.2",
-    "@descope-ui/descope-enriched-text": "3.2.2",
-    "@descope-ui/descope-password-strength": "3.2.2",
-    "@descope-ui/descope-ponyhot": "3.2.2",
-    "@descope-ui/descope-recovery-codes": "3.2.2",
-    "@descope-ui/descope-text": "3.2.2",
-    "@descope-ui/descope-timer": "3.2.2",
-    "@descope-ui/descope-image": "3.2.2",
-    "@descope-ui/descope-tooltip": "3.2.2",
-    "@descope-ui/descope-trusted-devices": "3.2.2",
-    "@descope-ui/descope-attachment": "3.2.2",
-    "@descope-ui/descope-timer-button": "3.2.2"
+    "@descope-ui/common": "3.3.1",
+    "@descope-ui/descope-address-field": "3.3.1",
+    "@descope-ui/descope-country-subdivision-city-field": "3.3.1",
+    "@descope-ui/descope-avatar": "3.3.1",
+    "@descope-ui/descope-badge": "3.3.1",
+    "@descope-ui/descope-button": "3.3.1",
+    "@descope-ui/descope-autocomplete-field": "3.3.1",
+    "@descope-ui/descope-apps-list": "3.3.1",
+    "@descope-ui/descope-combo-box": "3.3.1",
+    "@descope-ui/descope-collapsible-container": "3.3.1",
+    "@descope-ui/descope-enriched-text": "3.3.1",
+    "@descope-ui/descope-image": "3.3.1",
+    "@descope-ui/descope-link": "3.3.1",
+    "@descope-ui/descope-icon": "3.3.1",
+    "@descope-ui/descope-list": "3.3.1",
+    "@descope-ui/descope-list-item": "3.3.1",
+    "@descope-ui/descope-outbound-app-button": "3.3.1",
+    "@descope-ui/descope-outbound-apps": "3.3.1",
+    "@descope-ui/descope-password-strength": "3.3.1",
+    "@descope-ui/descope-ponyhot": "3.3.1",
+    "@descope-ui/descope-recovery-codes": "3.3.1",
+    "@descope-ui/descope-text": "3.3.1",
+    "@descope-ui/descope-timer": "3.3.1",
+    "@descope-ui/descope-timer-button": "3.3.1",
+    "@descope-ui/descope-tooltip": "3.3.1",
+    "@descope-ui/descope-trusted-devices": "3.3.1",
+    "@descope-ui/descope-attachment": "3.3.1"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-hybrid-field/HybridFieldClass.js

@@ -40,6 +40,7 @@ const attrs = {
       'phone-minlength',
       'phone-format-value',
       'phone-strict-validation',
+      'phone-input-type',
       'data-errormessage-value-missing-phone',
     ],
     inputBox: [
@@ -48,6 +49,7 @@ const attrs = {
       'phone-minlength',
       'phone-format-value',
       'phone-strict-validation',
+      'phone-input-type',
       'data-errormessage-value-missing-phone',
     ],
   },
@@ -87,8 +89,8 @@ class RawHybridField extends BaseClass {
     this.attachShadow({ mode: 'open' }).innerHTML = `
     <div class="wrapper">
       <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
-      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
-      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
+      <descope-phone-field allow-alphanumeric-input="true" phone-input-type="text"></descope-phone-field>
+      <descope-phone-input-box-field allow-alphanumeric-input="true" phone-input-type="text"></descope-phone-input-box-field>
     </div>
 		`;
 

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -6,7 +6,7 @@ import { getComponentName, observeChildren } from '../../helpers/componentHelper
 
 export const componentName = getComponentName('recaptcha');
 
-const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
 const BaseClass = createBaseClass({
   componentName,
@@ -23,6 +23,10 @@ class RawRecaptcha extends BaseClass {
       if (attrName === 'enabled') {
         this.#toggleRecaptcha(newValue === 'true');
       }
+
+      if (attrName === 'variant') {
+        this.updatePreview();
+      }
     }
   }
 
@@ -35,13 +39,37 @@ class RawRecaptcha extends BaseClass {
     this.toggleRecaptchaEles(enabled);
   }
 
+  displayRecaptcha() {
+    if (this.isWidget) {
+      this.displayWidget();
+    } else {
+      this.displayDeprecated();
+    }
+  }
+
+  displayWidget() {
+    this.mockRecaptchaEle.style.display = 'none';
+    this.recaptchaWidgetEle.style.display = '';
+    this.depercatedRecaptchaEle.style.display = 'none';
+  }
+
+  hideRecaptcha() {
+    this.recaptchaWidgetEle.style.display = 'none';
+    this.depercatedRecaptchaEle.style.display = 'none';
+    this.mockRecaptchaEle.style.display = '';
+  }
+
+  displayDeprecated() {
+    this.mockRecaptchaEle.style.display = 'none';
+    this.recaptchaWidgetEle.style.display = 'none';
+    this.depercatedRecaptchaEle.style.display = '';
+  }
+
   toggleRecaptchaEles(enabled) {
     if (enabled) {
-      this.recaptchaEle.style.display = '';
-      this.mockRecaptchaEle.style.display = 'none';
+      this.displayRecaptcha();
     } else {
-      this.recaptchaEle.style.display = 'none';
-      this.mockRecaptchaEle.style.display = '';
+      this.hideRecaptcha();
     }
   }
 
@@ -51,6 +79,8 @@ class RawRecaptcha extends BaseClass {
     this.attachShadow({ mode: 'open' }).innerHTML = `
     <div class="badge">
       <span id="recaptcha"></span>
+      <span id="recaptcha-widget"></span>
+      <input id="recaptcha-widget-input" type="hidden" name="recaptcha-widget" required />
       <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
     </div>
     <slot></slot>
@@ -74,6 +104,13 @@ class RawRecaptcha extends BaseClass {
 				width: 100%;
         height: 100%;
 			}
+      :host #recaptcha-widget {
+        width: 100%;
+        height: 100%;
+      }
+      :host #recaptcha-widget-input {
+        display: none;
+      }
       :host img {
         width: 256px;
       }
@@ -87,7 +124,9 @@ class RawRecaptcha extends BaseClass {
       this
     );
 
-    this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.depercatedRecaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.recaptchaWidgetEle = this.baseElement.querySelector('#recaptcha-widget');
+    this.recaptchaWidgetInputEle = this.baseElement.querySelector('#recaptcha-widget-input');
     this.mockRecaptchaEle = this.baseElement.querySelector('img');
     this.badge = this.shadowRoot.querySelector('.badge');
   }
@@ -100,7 +139,8 @@ class RawRecaptcha extends BaseClass {
 
   updatePreview() {
     if (this.children.length) {
-      this.recaptchaEle.style.display = 'none';
+      this.depercatedRecaptchaEle.style.display = 'none';
+      this.recaptchaWidgetEle.style.display = 'none';
       this.mockRecaptchaEle.style.display = 'none';
       this.badge.classList.add('hidden');
     } else {
@@ -109,6 +149,26 @@ class RawRecaptcha extends BaseClass {
     }
   }
 
+  getValidity() {
+    if (!this.isWidget) {
+      return {};
+    }
+
+    if (!this.recaptchaWidgetInputEle.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+
+  checkValidity() {
+    if (!this.isWidget) {
+      return true;
+    }
+
+    return !!this.recaptchaWidgetInputEle.value;
+  }
+
   get enterprise() {
     return this.getAttribute('enterprise') === 'true';
   }
@@ -125,6 +185,14 @@ class RawRecaptcha extends BaseClass {
     return this.getAttribute('enabled') === 'true';
   }
 
+  get variant() {
+    return this.getAttribute('variant') || 'text';
+  }
+
+  get isWidget() {
+    return this.variant === 'widget';
+  }
+
   get scriptURL() {
     const url = new URL('https://www.google.com/recaptcha/');
     url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
@@ -135,6 +203,11 @@ class RawRecaptcha extends BaseClass {
 
   #toggleRecaptcha(enabled) {
     this.renderRecaptcha(enabled);
+    if (this.isWidget) {
+      // For the v2 checkbox flow, scripts are loaded/executed by the runtime (grecaptcha-v2).
+      // This legacy v3/invisible path must be fully skipped.
+      return;
+    }
     if (enabled) {
       this.#createOnLoadScript();
       if (!document.getElementById('recaptcha-script')) {
@@ -207,7 +280,7 @@ class RawRecaptcha extends BaseClass {
 
   #createOnLoadScript() {
     window.onRecaptchaLoadCallback = () => {
-      const currentNode = this.recaptchaEle;
+      const currentNode = this.depercatedRecaptchaEle;
 
       // if there are child nodes, it means that the recaptcha was already rendered
       if (currentNode.hasChildNodes()) {

package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js

@@ -64,6 +64,7 @@ const customMixin = (superclass) =>
           'allow-alphanumeric-input',
           'format-value',
           'strict-validation',
+          'phone-input-type',
         ],
       });
     }

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -8,12 +8,19 @@ export const componentName = getComponentName('phone-field-internal');
 
 const commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
-const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
+const phoneAttrs = [
+  'phone-input-placeholder',
+  'maxlength',
+  'autocomplete',
+  'name',
+  'phone-input-type',
+];
 const labelTypeAttrs = ['label-type', 'country-input-label', 'label'];
 const mapAttrs = {
   'country-input-label': 'label',
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
+  'phone-input-type': 'type',
 };
 
 const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);
@@ -49,7 +56,10 @@ class PhoneFieldInternal extends BaseInputClass {
     this.inputs = [this.comboBox, this.textField];
 
     forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });
-    forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });
+    forwardAttrs(this, this.textField, {
+      includeAttrs: ['label-type', 'required', 'phone-input-type'],
+      mapAttrs: { 'phone-input-type': 'type' },
+    });
 
     // override combo box setter to display dialCode value in input
     this.comboBox.customValueTransformFn = (val) => {

package/src/components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass.js

@@ -63,6 +63,7 @@ const customMixin = (superclass) =>
           'format-value',
           'strict-validation',
           'data-errormessage-type-mismatch',
+          'phone-input-type',
         ],
       });
     }

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -15,9 +15,11 @@ const observedAttributes = [
   'maxlength',
   'autocomplete',
   'label-type',
+  'phone-input-type',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
+  'phone-input-type': 'type',
 };
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
@@ -111,6 +113,11 @@ class PhoneFieldInternal extends BaseInputClass {
     this.handleFocusEventsDispatching([this.textField]);
 
     forwardAttrs(this.textField, this, { includeAttrs: ['has-value'] });
+
+    forwardAttrs(this, this.textField, {
+      includeAttrs: ['phone-input-type'],
+      mapAttrs: { 'phone-input-type': 'type' },
+    });
   }
 
   getValidity() {