@descope/web-components-ui 1.0.320 → 1.0.322

package/dist/index.esm.js

@@ -2549,15 +2549,137 @@ var textFieldMappings = {
   ],
 };
 
+// since on load we can only sample the color of the placeholder,
+// we need to temporarily populate the input in order to sample the value color
+const getValueColor = (ele, computedStyle) => {
+  // eslint-disable-next-line no-param-reassign
+  ele.value = '_';
+
+  const valueColor = computedStyle.getPropertyValue('color');
+
+  // eslint-disable-next-line no-param-reassign
+  ele.value = '';
+
+  return valueColor;
+};
+
+const createExternalInputSlot = (slotName, targetSlotName) => {
+  const slotEle = document.createElement('slot');
+
+  slotEle.setAttribute('name', slotName);
+  slotEle.setAttribute('slot', targetSlotName);
+
+  return slotEle;
+};
+
+const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
+  const inputEle = document.createElement('input');
+
+  inputEle.setAttribute('slot', targetSlotName);
+  inputEle.setAttribute('type', type);
+  inputEle.setAttribute('data-hidden-input', 'true');
+  inputEle.setAttribute('autocomplete', autocompleteType);
+
+  return inputEle;
+};
+
+const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
+  const computedStyle = getComputedStyle(sourceInputEle);
+  const height = computedStyle.getPropertyValue('height');
+  const paddingLeft = computedStyle.getPropertyValue('padding-left');
+  const paddingRight = computedStyle.getPropertyValue('padding-right');
+  const fontSize = computedStyle.getPropertyValue('font-size');
+  const fontFamily = computedStyle.getPropertyValue('font-family');
+  const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
+  const caretColor = computedStyle.getPropertyValue('caret-color');
+  const valueColor = getValueColor(sourceInputEle, computedStyle);
+
+  // set external input style (and lock it with `all: unset` and `!important` all around)
+  // eslint-disable-next-line no-param-reassign
+  targetInputEle.style = `
+  all: unset !important;
+  position: absolute !important;
+  background-color: transparent !important;
+  color: ${valueColor} !important;
+  height: ${height} !important;
+  left: ${paddingLeft} !important;
+  right: ${paddingRight} !important;
+  font-size: ${fontSize} !important;
+  font-family: ${fontFamily} !important;
+  letter-spacing: ${letterSpacing} !important;
+  caret-color: ${caretColor} !important;
+  ${customStyle || ''}
+  `;
+};
+
 const componentName$M = getComponentName('email-field');
 
 const customMixin$a = (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,
@@ -3327,69 +3449,6 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-// since on load we can only sample the color of the placeholder,
-// we need to temporarily populate the input in order to sample the value color
-const getValueColor = (ele, computedStyle) => {
-  // eslint-disable-next-line no-param-reassign
-  ele.value = '_';
-
-  const valueColor = computedStyle.getPropertyValue('color');
-
-  // eslint-disable-next-line no-param-reassign
-  ele.value = '';
-
-  return valueColor;
-};
-
-const createExternalInputSlot = (slotName, targetSlotName) => {
-  const slotEle = document.createElement('slot');
-
-  slotEle.setAttribute('name', slotName);
-  slotEle.setAttribute('slot', targetSlotName);
-
-  return slotEle;
-};
-
-const createExternalInputEle = (targetSlotName, autocompleteType) => {
-  const inputEle = document.createElement('input');
-
-  inputEle.setAttribute('slot', targetSlotName);
-  inputEle.setAttribute('type', 'password');
-  inputEle.setAttribute('data-hidden-input', 'true');
-  inputEle.setAttribute('autocomplete', autocompleteType);
-
-  return inputEle;
-};
-
-const applyExternalInputStyles = (sourceInputEle, targetInputEle) => {
-  const computedStyle = getComputedStyle(sourceInputEle);
-  const height = computedStyle.getPropertyValue('height');
-  const paddingLeft = computedStyle.getPropertyValue('padding-left');
-  const paddingRight = computedStyle.getPropertyValue('padding-right');
-  const fontSize = computedStyle.getPropertyValue('font-size');
-  const fontFamily = computedStyle.getPropertyValue('font-family');
-  const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
-  const caretColor = computedStyle.getPropertyValue('caret-color');
-  const valueColor = getValueColor(sourceInputEle, computedStyle);
-
-  // set external input style (and lock it with `all: unset` and `!important` all around)
-  // eslint-disable-next-line no-param-reassign
-  targetInputEle.style = `
-  all: unset !important;
-  position: absolute !important;
-  width: calc(100% - 3em) !important;
-  background-color: transparent !important;
-  color: ${valueColor} !important;
-  height: ${height} !important;
-  left: ${paddingLeft} !important;
-  right: ${paddingRight} !important;
-  font-size: ${fontSize} !important;
-  font-family: ${fontFamily} !important;
-  letter-spacing: ${letterSpacing} !important;
-  caret-color: ${caretColor} !important;
-  `;
-};
-
 const componentName$D = getComponentName('password');
 
 const customMixin$7 = (superclass) =>
@@ -3411,11 +3470,23 @@ const customMixin$7 = (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
@@ -3423,6 +3494,7 @@ const customMixin$7 = (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();
@@ -3440,6 +3512,59 @@ const customMixin$7 = (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';
     }