@descope/web-components-ui 1.0.335 → 1.0.337

package/dist/cjs/index.cjs.js

@@ -2805,15 +2805,15 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$r = getThemeRefs(globals);
+const globalRefs$s = getThemeRefs(globals);
 const compVars$5 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$r.colors.primary,
-  secondary: globalRefs$r.colors.secondary,
-  success: globalRefs$r.colors.success,
-  error: globalRefs$r.colors.error,
-  surface: globalRefs$r.colors.surface,
+  primary: globalRefs$s.colors.primary,
+  secondary: globalRefs$s.colors.secondary,
+  success: globalRefs$s.colors.success,
+  error: globalRefs$s.colors.error,
+  surface: globalRefs$s.colors.surface,
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$R);
@@ -2821,15 +2821,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
 const button = {
   ...helperTheme$3,
 
-  [compVars$5.fontFamily]: globalRefs$r.fonts.font1.family,
+  [compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
 
   [compVars$5.cursor]: 'pointer',
   [compVars$5.hostHeight]: '3em',
   [compVars$5.hostWidth]: 'auto',
-  [compVars$5.hostDirection]: globalRefs$r.direction,
+  [compVars$5.hostDirection]: globalRefs$s.direction,
 
-  [compVars$5.borderRadius]: globalRefs$r.radius.sm,
-  [compVars$5.borderWidth]: globalRefs$r.border.xs,
+  [compVars$5.borderRadius]: globalRefs$s.radius.sm,
+  [compVars$5.borderWidth]: globalRefs$s.border.xs,
   [compVars$5.borderStyle]: 'solid',
   [compVars$5.borderColor]: 'transparent',
 
@@ -2873,11 +2873,11 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$r.colors.surface.light,
-    [helperVars$3.dark]: globalRefs$r.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$r.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$r.colors.surface.main,
-    [compVars$5.iconColor]: globalRefs$r.colors.surface.main,
+    [helperVars$3.main]: globalRefs$s.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$s.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$s.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$s.colors.surface.main,
+    [compVars$5.iconColor]: globalRefs$s.colors.surface.main,
   },
 
   variant: {
@@ -2948,6 +2948,7 @@ const {
   errorMessage: errorMessage$c,
   disabledPlaceholder,
   inputDisabled,
+  inputIcon,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -2962,6 +2963,7 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
+  inputIcon: { selector: 'vaadin-icon' },
 };
 
 var textFieldMappings = {
@@ -3033,6 +3035,13 @@ var textFieldMappings = {
   inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
   valueInputHeight: [{ ...input, property: 'height' }],
   valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
+
+  inputIconOffset: [
+    { ...inputIcon, property: 'margin-right' },
+    { ...inputIcon, property: 'margin-left' },
+  ],
+  inputIconSize: { ...inputIcon, property: 'font-size' },
+  inputIconColor: { ...inputIcon, property: 'color' },
 };
 
 const useHostExternalPadding = (cssVarList) => `
@@ -3181,7 +3190,7 @@ const inputFloatingLabelStyle = () => {
 
 const componentName$Q = getComponentName('text-field');
 
-const observedAttrs = ['type', 'label-type'];
+const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
 
 const customMixin$a = (superclass) =>
   class TextFieldClass extends superclass {
@@ -3189,6 +3198,47 @@ const customMixin$a = (superclass) =>
       return observedAttrs.concat(superclass.observedAttributes || []);
     }
 
+    icon;
+
+    init() {
+      super.init?.();
+    }
+
+    renderCopyToClipboard(shouldRender) {
+      if (!shouldRender) {
+        this.icon?.remove();
+        return;
+      }
+
+      const iconInitConfig = {
+        icon: 'vaadin:copy-o',
+        title: 'Copy',
+        style: 'cursor: pointer',
+      };
+
+      const iconCopiedConfig = {
+        icon: 'vaadin:check-circle-o',
+        title: 'Copied',
+        style: 'cursor: initial',
+      };
+
+      this.icon = Object.assign(document.createElement('vaadin-icon'), {
+        slot: 'suffix',
+        ...iconInitConfig,
+      });
+
+      this.baseElement.appendChild(this.icon);
+      this.icon.addEventListener('click', () => {
+        navigator.clipboard.writeText(this.value);
+        Object.assign(this.icon, iconCopiedConfig);
+
+        // we want the icon to go back to the initial state after 5 seconds
+        setTimeout(() => {
+          Object.assign(this.icon, iconInitConfig);
+        }, 5000);
+      });
+    }
+
     onLabelClick() {
       this.focus();
     }
@@ -3212,6 +3262,8 @@ const customMixin$a = (superclass) =>
           } else {
             this.removeEventListener('click', this.onLabelClick);
           }
+        } else if (attrName === 'copy-to-clipboard') {
+          this.renderCopyToClipboard(newVal === 'true');
         }
       }
     }
@@ -3244,14 +3296,18 @@ const TextFieldClass = compose(
 
       vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
         opacity: 0;
-      }        
+      }
       ${resetInputLabelPosition('vaadin-text-field')}
 			${useHostExternalPadding(TextFieldClass.cssVarList)}
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
       ${inputFloatingLabelStyle()}
+
+      vaadin-text-field vaadin-icon {
+        align-self: center;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$Q,
@@ -3259,40 +3315,41 @@ const TextFieldClass = compose(
 );
 
 const componentName$P = getComponentName('input-wrapper');
-const globalRefs$q = getThemeRefs(globals);
+const globalRefs$r = getThemeRefs(globals);
 
 const [theme$1, refs, vars$H] = createHelperVars(
   {
-    labelTextColor: globalRefs$q.colors.surface.dark,
+    labelTextColor: globalRefs$r.colors.surface.dark,
     labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
     labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
-    valueTextColor: globalRefs$q.colors.surface.contrast,
-    placeholderTextColor: globalRefs$q.colors.surface.dark,
+    valueTextColor: globalRefs$r.colors.surface.contrast,
+    placeholderTextColor: globalRefs$r.colors.surface.dark,
     requiredIndicator: "'*'",
-    helperTextColor: globalRefs$q.colors.surface.dark,
-    errorMessageTextColor: globalRefs$q.colors.error.main,
-    successMessageTextColor: globalRefs$q.colors.success.main,
+    helperTextColor: globalRefs$r.colors.surface.dark,
+    errorMessageTextColor: globalRefs$r.colors.error.main,
+    successMessageTextColor: globalRefs$r.colors.success.main,
 
-    borderWidth: globalRefs$q.border.xs,
-    borderRadius: globalRefs$q.radius.xs,
+    borderWidth: globalRefs$r.border.xs,
+    borderRadius: globalRefs$r.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$q.border.sm,
+    outlineWidth: globalRefs$r.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
 
     minWidth: '10em',
     toggleButtonSize: '1.5em',
+    inputIconSize: '1em',
     inputHeight: '3em',
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$q.colors.surface.main,
+    backgroundColor: globalRefs$r.colors.surface.main,
 
-    fontFamily: globalRefs$q.fonts.font1.family,
+    fontFamily: globalRefs$r.fonts.font1.family,
 
-    direction: globalRefs$q.direction,
+    direction: globalRefs$r.direction,
 
     overlayOpacity: '0.3',
 
@@ -3342,28 +3399,28 @@ const [theme$1, refs, vars$H] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$q.colors.surface.light,
+      outlineColor: globalRefs$r.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$q.colors.error.main,
+        outlineColor: globalRefs$r.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$q.border.xs,
-      borderColor: globalRefs$q.colors.surface.light,
+      outlineWidth: globalRefs$r.border.xs,
+      borderColor: globalRefs$r.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$q.colors.error.main,
+        borderColor: globalRefs$r.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$q.colors.surface.light,
-      borderColor: globalRefs$q.colors.surface.light,
-      valueTextColor: globalRefs$q.colors.surface.light,
-      placeholderTextColor: globalRefs$q.colors.surface.light,
-      helperTextColor: globalRefs$q.colors.surface.light,
-      backgroundColor: globalRefs$q.colors.surface.main,
+      labelTextColor: globalRefs$r.colors.surface.light,
+      borderColor: globalRefs$r.colors.surface.light,
+      valueTextColor: globalRefs$r.colors.surface.light,
+      placeholderTextColor: globalRefs$r.colors.surface.light,
+      helperTextColor: globalRefs$r.colors.surface.light,
+      backgroundColor: globalRefs$r.colors.surface.main,
     },
   },
   componentName$P
@@ -3376,6 +3433,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   vars: vars$H
 });
 
+const globalRefs$q = getThemeRefs(globals);
 const vars$G = TextFieldClass.cssVarList;
 
 const textField$1 = {
@@ -3418,6 +3476,9 @@ const textField$1 = {
   [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$G.valueInputHeight]: refs.valueInputHeight,
   [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
+  [vars$G.inputIconOffset]: globalRefs$q.spacing.md,
+  [vars$G.inputIconSize]: refs.inputIconSize,
+  [vars$G.inputIconColor]: refs.placeholderTextColor,
 };
 
 var textField$2 = /*#__PURE__*/Object.freeze({
@@ -12946,6 +13007,53 @@ class RawRecaptcha extends BaseClass {
     return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
   }
 
+  #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
+    if (!this.isConnected) {
+      return;
+    }
+
+    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('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) {
+        return;
+      }
+      // 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, e) => {
+        if (e) {
+          // eslint-disable-next-line no-console
+          console.warn('could not execute recaptcha', e);
+        } else {
+          this.updateComponentsContext({
+            risktoken: token,
+            riskaction: this.action,
+          });
+          // if the component is still connected, we should try to get a new token before the token expires (2 minutes)
+          if (this.isConnected) {
+            setTimeout(() => {
+              this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
+            }, 110000);
+          }
+        }
+        removeCloneNode();
+      });
+    });
+  }
+
   #createOnLoadScript() {
     window.onRecaptchaLoadCallback = () => {
       const currentNode = this.recaptchaEle;
@@ -12962,48 +13070,12 @@ class RawRecaptcha extends BaseClass {
       }
 
       setTimeout(() => {
-        // 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('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) {
-            // 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);
-              });
-          }
-        });
+        this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
       }, 0);
     };
   }