@descope/web-components-ui 1.107.0 → 1.109.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.107.0",
+  "version": "1.109.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -75,22 +75,22 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "0.0.16",
-    "@descope-ui/descope-button": "0.0.15",
-    "@descope-ui/descope-image": "0.0.8",
-    "@descope-ui/descope-icon": "0.0.14",
-    "@descope-ui/descope-text": "0.0.17",
-    "@descope-ui/descope-avatar": "0.0.17",
-    "@descope-ui/descope-combo-box": "0.1.7",
-    "@descope-ui/descope-autocomplete-field": "0.0.20",
-    "@descope-ui/descope-address-field": "0.0.19",
-    "@descope-ui/descope-timer": "0.0.14",
-    "@descope-ui/descope-timer-button": "0.0.16",
-    "@descope-ui/descope-password-strength": "0.0.11",
-    "@descope-ui/descope-collapsible-container": "0.0.15",
-    "@descope-ui/descope-recovery-codes": "0.0.4",
-    "@descope-ui/descope-link": "0.0.1",
-    "@descope-ui/descope-enriched-text": "0.0.1"
+    "@descope-ui/common": "0.0.17",
+    "@descope-ui/descope-button": "0.0.16",
+    "@descope-ui/descope-image": "0.0.9",
+    "@descope-ui/descope-icon": "0.0.15",
+    "@descope-ui/descope-text": "0.0.18",
+    "@descope-ui/descope-avatar": "0.0.18",
+    "@descope-ui/descope-combo-box": "0.1.8",
+    "@descope-ui/descope-autocomplete-field": "0.0.21",
+    "@descope-ui/descope-address-field": "0.0.20",
+    "@descope-ui/descope-timer": "0.0.15",
+    "@descope-ui/descope-timer-button": "0.0.17",
+    "@descope-ui/descope-password-strength": "0.0.12",
+    "@descope-ui/descope-collapsible-container": "0.0.16",
+    "@descope-ui/descope-recovery-codes": "0.0.5",
+    "@descope-ui/descope-link": "0.0.2",
+    "@descope-ui/descope-enriched-text": "0.0.2"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-hcaptcha/HcaptchaClass.js

@@ -0,0 +1,137 @@
+import { injectStyle, observeChildren } from '@descope-ui/common/components-helpers';
+import { draggableMixin, createStyleMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+
+export const componentName = getComponentName('hcaptcha');
+
+const observedAttributes = ['enabled', 'site-key'];
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });
+class RawHcaptcha extends BaseInputClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue !== newValue) {
+      if (attrName === 'enabled') {
+        this.toggleCaptchaEles(newValue === 'true');
+      }
+    }
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="badge">
+      <span id="hcaptcha"></span>
+      <input id="hcaptcha-input" type="hidden" name="hcaptcha" required />
+      <img src="https://imgs.descope.com/connectors/templates/hcaptcha/hcaptcha-big.png" alt="hcaptcha"/>
+    </div>
+    <slot></slot>
+	`;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+      }
+      :host > div:not(.hidden) {
+        display: flex;
+      }
+      :host #hcaptcha-input {
+        display: none;
+      }
+      :host #hcaptcha .hcaptcha-logo {
+        height: 100%;
+      }
+      :host #hcaptcha {
+				width: 100%;
+        height: 100%;
+			}
+      :host img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+      .hidden {
+        display: none;
+      }
+        `,
+      this
+    );
+
+    this.captchaEle = this.shadowRoot.querySelector('#hcaptcha');
+    this.mockCaptchaEle = this.shadowRoot.querySelector('img');
+    this.badge = this.shadowRoot.querySelector('.badge');
+    this.inputElement = this.shadowRoot.querySelector('input');
+  }
+
+  init() {
+    super.init?.();
+
+    observeChildren(this, this.updatePreview.bind(this));
+    // avoid any possible conflicts with the inner input elements
+    this.inputElement.getValidity = null;
+    this.inputElement.checkValidity = null;
+  }
+
+  toggleCaptchaEles(enabled) {
+    if (enabled) {
+      this.captchaEle.style.display = '';
+      this.mockCaptchaEle.style.display = 'none';
+    } else {
+      this.captchaEle.style.display = 'none';
+      this.mockCaptchaEle.style.display = '';
+    }
+  }
+
+  updatePreview() {
+    this.toggleCaptchaEles(this.enabled);
+  }
+
+  getValidity() {
+    if (!this.inputElement.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+
+  checkValidity() {
+    return !!this.inputElement.value;
+  }
+
+  get siteKey() {
+    return this.getAttribute('site-key');
+  }
+
+  get enabled() {
+    return this.getAttribute('enabled') === 'true';
+  }
+}
+
+export const HcaptchaClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      maxHeight: [
+        { selector: '>img', property: 'height' },
+        { selector: '>#hcaptcha', property: 'height' },
+      ],
+      maxWidth: [
+        { selector: '>img', property: 'max-width' },
+        { selector: '>hcaptcha', property: 'max-width' },
+      ],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawHcaptcha);

package/src/components/descope-hcaptcha/index.js

@@ -0,0 +1,5 @@
+import { componentName, HcaptchaClass } from './HcaptchaClass';
+
+customElements.define(componentName, HcaptchaClass);
+
+export { HcaptchaClass, componentName };

package/src/helpers/themeHelpers/resetHelpers.js

@@ -132,9 +132,6 @@ export const inputFloatingLabelStyle = () => {
   :host([label-type="floating"]) {
     position: relative;
   }
-  :host([label-type="floating"][has-label]) [slot="label"] {
-    padding: 0;
-  }
   :host([label-type="floating"][has-label]) > ::part(label) {
     z-index: 1;
     padding: 0;

package/src/index.cjs.js

@@ -52,5 +52,6 @@ export { SecurityQuestionsSetupClass } from './components/descope-security-quest
 export { SecurityQuestionsVerifyClass } from './components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
 export { HybridFieldClass } from './components/descope-hybrid-field/HybridFieldClass';
 export { AlertClass } from './components/descope-alert/AlertClass';
+export { HcaptchaClass } from './components/descope-hcaptcha/HcaptchaClass';
 
 /* INJECT_COMPONENTS */

package/src/index.js

@@ -42,6 +42,7 @@ export * from './components/descope-security-questions-setup';
 export * from './components/descope-security-questions-verify';
 export * from './components/descope-hybrid-field';
 export * from './components/descope-alert';
+export * from './components/descope-hcaptcha';
 
 export {
   globalsThemeToStyle,

package/src/theme/components/hcaptcha.js

@@ -0,0 +1,14 @@
+import { HcaptchaClass } from '../../components/descope-hcaptcha/HcaptchaClass';
+
+const vars = HcaptchaClass.cssVarList;
+
+const hcaptcha = {
+  enabled: {
+    false: {
+      [vars.maxHeight]: '70px',
+    },
+  },
+};
+
+export default hcaptcha;
+export { vars };

package/src/theme/components/index.js

@@ -52,6 +52,7 @@ import * as securityQuestionsSetup from './securityQuestionsSetup';
 import * as securityQuestionsVerify from './securityQuestionsVerify';
 import * as hybridField from './hybridField';
 import * as alert from './alert';
+import * as hcaptcha from './hcaptcha';
 import * as autocompleteField from '@descope-ui/descope-autocomplete-field/theme';
 import * as addressField from '@descope-ui/descope-address-field/theme';
 import * as timer from '@descope-ui/descope-timer/theme';
@@ -123,6 +124,7 @@ const components = {
   passwordStrength,
   collapsibleContainer,
   recoveryCodes,
+  hcaptcha,
 };
 
 const theme = Object.keys(components).reduce(