@descope/web-components-ui 1.0.331 → 1.0.333

package/dist/index.esm.js

@@ -152,7 +152,7 @@ const forwardAttrs = (source, dest, options = {}) => {
   observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
 };
 
-const forwardProps = (src, target, props = []) => {
+const forwardProps$1 = (src, target, props = []) => {
   if (!props.length) return;
 
   const config = props.reduce(
@@ -744,7 +744,7 @@ const createProxy = ({
       });
 
       // this is needed for components that uses props, such as combo box
-      forwardProps(this.baseElement, this, includeForwardProps);
+      forwardProps$1(this.baseElement, this, includeForwardProps);
 
       syncAttrs(this.baseElement, this, {
         excludeAttrs: excludeAttrsSync,
@@ -950,13 +950,17 @@ const inputValidationMixin = (superclass) =>
 
 const errorAttrs = ['invalid', 'required'];
 
-const propertyObserver = (src, target, property) => {
+const forwardProps = (src, targets, property) => {
+  const targetArr = Array.isArray(targets) ? targets : [targets];
+
   Object.defineProperty(src, property, {
     set(v) {
-      target[property] = v;
+      targetArr.forEach((target) => {
+        target[property] = v;
+      });
     },
     get() {
-      return target[property];
+      return targets[0][property];
     },
     configurable: true,
   });
@@ -980,6 +984,10 @@ const getNestedInput = (ele) => {
 const proxyInputMixin =
   ({
     proxyProps = [],
+    // useProxyTargets flag allows to forwardProps to other targets, other than
+    // `this.inputElement`. It's to be used within `external-input` components,
+    // if needed
+    useProxyTargets = false,
     // allows us to set the event that should trigger validation
     // it can be either a string or an array of strings (for multiple events)
     inputEvent = 'input',
@@ -1106,7 +1114,11 @@ const proxyInputMixin =
 
           // sync properties
           proxyProps.forEach((prop) => {
-            propertyObserver(this, this.inputElement, prop);
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
+            forwardProps(this, [this.inputElement, ...proxyTargets], prop);
           });
 
           this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
@@ -1687,7 +1699,7 @@ const booleanFieldMixin = (superclass) =>
         ],
       });
 
-      forwardProps(this.inputElement, this, ['checked']);
+      forwardProps$1(this.inputElement, this, ['checked']);
       syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
     }
   };
@@ -2636,8 +2648,13 @@ const createExternalInputEle = (targetSlotName, type, autocompleteType) => {
   return inputEle;
 };
 
-const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) => {
+// We apply the original input's style to the external-input.
+// Eventually, the user should interact directly with the external input.
+// We keep the original input
+const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
   const computedStyle = getComputedStyle(sourceInputEle);
+
+  // Get minimal set of computed theme properties to set on external input
   const height = computedStyle.getPropertyValue('height');
   const paddingLeft = computedStyle.getPropertyValue('padding-left');
   const paddingRight = computedStyle.getPropertyValue('padding-right');
@@ -2645,24 +2662,33 @@ const applyExternalInputStyles = (sourceInputEle, targetInputEle, customStyle) =
   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 commonThemeStyles = [
+    ['all', 'unset'],
+    ['position', 'absolute'],
+    ['background-color', 'transparent'],
+    ['height', height],
+    ['left', paddingLeft],
+    ['right', paddingRight],
+    ['font-size', fontSize],
+    ['font-family', fontFamily],
+    ['letter-spacing', letterSpacing],
+    ['width', `calc(100% - ${paddingLeft} - ${paddingRight}`],
+    ['caret-color', caretColor], // this is for seeing caret when focusing on external input
+    ['color', valueColor],
+  ];
+
+  commonThemeStyles.forEach(([key, val]) =>
+    targetInputEle.style.setProperty(key, val, 'important')
+  );
+
+  // Handle floating label theme properties
+  if (labelType === 'floating') {
+    const marginBottom = computedStyle.getPropertyValue('margin-bottom');
+    targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
+  }
 };
 
 const componentName$M = getComponentName('email-field');
@@ -2674,19 +2700,52 @@ const customMixin$a = (superclass) =>
 
       this.baseElement.setAttribute('pattern', '^[\\w\\.\\%\\+\\-]+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$');
 
-      this.handleExternalInput();
+      if (!this.isNoExternalInput) {
+        this.externalInput = this.handleExternalInput();
+
+        this.addEventListener('focus', () => {
+          this.externalInput.focus();
+        });
+      } else {
+        this.setAttribute('autocomplete', this.getAutocompleteType());
+      }
     }
 
-    handleExternalInput() {
-      // reset vaadin's checkValidity
-      this.baseElement.checkValidity = () => {};
+    get isNoExternalInput() {
+      return this.getAttribute('no-external-input') === 'true';
+    }
+
+    forwardInputValue(source, target) {
+      // set internal sync events
+      const valueDescriptor = Object.getOwnPropertyDescriptor(
+        this.inputElement.constructor.prototype,
+        'value'
+      );
+
+      Object.defineProperty(source, 'value', {
+        ...valueDescriptor,
+
+        set(v) {
+          valueDescriptor.set.call(this, v);
+          // eslint-disable-next-line no-param-reassign
+          target.value = v;
+        },
+        configurable: true,
+      });
+    }
 
+    handleExternalInput() {
       // set safety attribute `external-input`
       this.setAttribute('external-input', 'true');
 
       // use original input element as reference
       const origInput = this.baseElement.querySelector('input');
 
+      // to avoid focus loop between external-input and origInput
+      // we set origInput's tabindex to -1
+      // otherwise, shift-tab will never leave the component focus
+      origInput.setAttribute('tabindex', '-1');
+
       // create external slot
       const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
       // append external slot to base element
@@ -2700,42 +2759,41 @@ const customMixin$a = (superclass) =>
 
       // apply original input's styles to external input
       setTimeout(() => {
-        applyExternalInputStyles(origInput, externalInput);
+        applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
       });
 
       // set external input events
       this.handleExternalInputEvents(externalInput);
 
-      syncAttrs(origInput, externalInput, { includeAttrs: ['disabled', 'readonly', 'pattern'] });
+      // 1Password catches the internal input, so we forward the value to the external input
+      this.forwardInputValue(origInput, externalInput);
 
-      externalInput.addEventListener('input', (e) => {
-        if (!e.target.value) {
-          this.removeAttribute('has-value');
-        } else {
-          this.setAttribute('has-value', 'true');
-        }
+      syncAttrs(origInput, externalInput, {
+        includeAttrs: ['disabled', 'readonly', 'pattern'],
       });
 
       // append external input to component's DOM
       this.appendChild(externalInput);
+
+      return externalInput;
     }
 
     getAutocompleteType() {
       return this.getAttribute('autocomplete') || 'username';
     }
 
-    handleExternalInputEvents(inputEle) {
+    handleExternalInputEvents(externalInput) {
       // sync value of insible input back to original input
-      inputEle.addEventListener('input', (e) => {
+      externalInput.addEventListener('input', (e) => {
         this.value = e.target.value;
       });
 
       // sync `focused` attribute on host when focusing on external input
-      inputEle.addEventListener('focus', () => {
+      externalInput.addEventListener('focus', () => {
         this.setAttribute('focused', 'true');
       });
 
-      inputEle.addEventListener('blur', () => {
+      externalInput.addEventListener('blur', () => {
         this.removeAttribute('focused');
       });
     }
@@ -2746,7 +2804,7 @@ const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   customMixin$a
 )(
@@ -2773,6 +2831,14 @@ const EmailFieldClass = compose(
       vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
         opacity: 0;
       }
+
+      vaadin-email-field:not([no-external-input="true"]) > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
+
+      :host ::slotted(*) {
+        -webkit-mask-image: none;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$M,
@@ -3287,7 +3353,7 @@ const TextFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   customMixin$9
 )(
@@ -3563,6 +3629,11 @@ const customMixin$7 = (superclass) =>
       // use original input element as reference
       const origInput = this.baseElement.querySelector('input');
 
+      // to avoid focus loop between external-input and origInput
+      // we set origInput's tabindex to -1
+      // otherwise, shift-tab will never leave the component focus
+      origInput.setAttribute('tabindex', '-1');
+
       // create external slot
       const externalInputSlot = createExternalInputSlot('external-input', 'suffix');
       // append external slot to base element
@@ -3579,13 +3650,7 @@ const customMixin$7 = (superclass) =>
 
       // apply original input's styles to external input
       setTimeout(() => {
-        applyExternalInputStyles(
-          origInput,
-          externalInput,
-          `
-          width: calc(100% - 3em) !important;
-        `
-        );
+        applyExternalInputStyles(origInput, externalInput, this.getAttribute('label-type'));
       });
 
       // set external input events
@@ -3610,11 +3675,6 @@ const customMixin$7 = (superclass) =>
         }
       });
 
-      this.addEventListener('focus', (e) => {
-        e.preventDefault();
-        this.focus();
-      });
-
       // append external input to component's DOM
       this.appendChild(externalInput);
     }
@@ -3686,6 +3746,10 @@ const customMixin$7 = (superclass) =>
       inputEle.addEventListener('focus', () => {
         this.setAttribute('focused', 'true');
       });
+
+      inputEle.addEventListener('blur', () => {
+        this.removeAttribute('focused');
+      });
     }
   };
 
@@ -3844,8 +3908,11 @@ const PasswordClass = compose(
     
       ::part(reveal-button) {
         align-self: center;
-      }      
-        
+      }
+
+      vaadin-password-field > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$D,