@descope/web-components-ui 1.0.321 → 1.0.322

package/dist/cjs/index.cjs.js

@@ -3412,18 +3412,18 @@ const createExternalInputSlot = (slotName, targetSlotName) => {
   return slotEle;
 };
 
-const createExternalInputEle = (targetSlotName, autocompleteType) => {
+const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
   const inputEle = document.createElement('input');
 
   inputEle.setAttribute('slot', targetSlotName);
-  inputEle.setAttribute('type', 'password');
+  inputEle.setAttribute('type', type);
   inputEle.setAttribute('data-hidden-input', 'true');
   inputEle.setAttribute('autocomplete', autocompleteType);
 
   return inputEle;
 };
 
-const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
+const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
   const computedStyle = getComputedStyle(sourceInputEle);
   const height = computedStyle.getPropertyValue('height');
   const paddingLeft = computedStyle.getPropertyValue('padding-left');
@@ -3439,7 +3439,6 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
   targetInputEle.style = `
   all: unset !important;
   position: absolute !important;
-  width: calc(100% - 3em) !important;
   background-color: transparent !important;
   color: ${valueColor} !important;
   height: ${height} !important;
@@ -3449,6 +3448,7 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
   font-family: ${fontFamily} !important;
   letter-spacing: ${letterSpacing} !important;
   caret-color: ${caretColor} !important;
+  ${customStyle || ''}
   `;
 };
 
@@ -3473,13 +3473,23 @@ const customMixin$9 = (superclass) =>
       this.baseElement.appendChild(externalInputSlot);
 
       // create external input
-      const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
+      const externalInput = createExternalInputEle(
+        'external-input',
+        'password',
+        this.getAutocompleteType()
+      );
 
       this.handlePasswordVisibility(externalInput);
 
       // apply original input's styles to external input
       setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput);
+        applyExternalInputStyles(
+          origInput,
+          externalInput,
+          `
+          width: calc(100% - 3em) !important;
+        `
+        );
       });
 
       // set external input events
@@ -3816,9 +3826,68 @@ const customMixin$8 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
+
       this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
+
+      this.handleExternalInput();
+    }
+
+    handleExternalInput() {
+      // reset vaadin's checkValidity
+      this.baseElement.checkValidity = () => {};
+
+      // set safety attribute `external-input`
+      this.setAttribute('external-input', 'true');
+
+      // use original input element as reference
+      const origInput = this.baseElement.querySelector('input');
+
+      // create external slot
+      const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
+      // append external slot to base element
+      this.baseElement.appendChild(externalInputSlot);
+
+      const externalInput = createExternalInputEle(
+        'external-input',
+        'text',
+        this.getAutocompleteType()
+      );
+
+      // apply original input's styles to external input
+      setTimeout(() => {
+        applyExternalInputStyles(origInput, externalInput);
+      });
+
+      // set external input events
+      this.handleExternalInputEvents(externalInput);
+
+      syncAttrs(origInput, externalInput, { includeAttrs: ['disabled', 'readonly', 'pattern'] });
+
+      // append external input to component's DOM
+      this.appendChild(externalInput);
+    }
+
+    getAutocompleteType() {
+      return this.getAttribute('autocomplete') || 'username';
+    }
+
+    handleExternalInputEvents(inputEle) {
+      // sync value of insible input back to original input
+      inputEle.addEventListener('input', (e) => {
+        this.value = e.target.value;
+      });
+
+      // sync `focused` attribute on host when focusing on external input
+      inputEle.addEventListener('focus', () => {
+        this.setAttribute('focused', 'true');
+      });
+
+      inputEle.addEventListener('blur', () => {
+        this.removeAttribute('focused');
+      });
     }
   };
+
 const EmailFieldClass = compose(
   createStyleMixin({
     mappings: textFieldMappings,