@descope/web-components-ui 1.0.320 → 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,11 +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
@@ -3485,6 +3497,7 @@ const customMixin$9 = (superclass) =>
 
       // sync input stateful attributes: `type` (for visibility state change) and `readonly`
       syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
+      syncAttrs(this, externalInput, { includeAttrs: ['focused'] });
 
       origInput.addEventListener('focus', (e) => {
         e.preventDefault();
@@ -3502,6 +3515,59 @@ const customMixin$9 = (superclass) =>
       this.appendChild(externalInput);
     }
 
+    // override vaadin's password visibility toggle.
+    // we need this override in order to to resolve the external input `focus` race condition,
+    // which is caused due to the focus sync between the two inputs.
+    handlePasswordVisibility(externalInput) {
+      // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
+      const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
+      this.baseElement
+        .querySelector('vaadin-password-field-button')
+        .removeEventListener('mousedown', origBoundRevealButtonMouseDown);
+
+      // disable vaadin's `_passwordVisibleChanged` observer
+      this.baseElement._passwordVisibleChanged = () => {};
+
+      // override vaadin's `_togglePasswordVisibility`
+      this.baseElement._togglePasswordVisibility = () => {
+        const currVisibility = externalInput.getAttribute('type');
+        if (currVisibility === 'password') {
+          this.showPasswordVisibility(externalInput);
+        } else {
+          this.hidePasswordVisibility(externalInput);
+        }
+      };
+
+      // on component blur, if password is revealed - hide it
+      // this behaves differently from vaadin's focus handling, and checks if the blur takes the component out of focus
+      // (which menas the click was made outside the component) or if the blur was called due to clicking the Reveal Button
+      // and then focusing in the input again
+      this.addEventListener('blur', () => {
+        setTimeout(() => {
+          const isHiddenAndFocused =
+            externalInput.getAttribute('type') !== 'password' &&
+            externalInput.getAttribute('focused') !== 'true';
+          if (isHiddenAndFocused) {
+            this.hidePasswordVisibility(externalInput);
+          }
+        });
+      });
+    }
+
+    hidePasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'password');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'false');
+    }
+
+    showPasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'text');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'true');
+    }
+
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'current-password';
     }
@@ -3760,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,