@descope/web-components-ui 1.0.371 → 1.0.372

package/dist/index.esm.js

@@ -1008,7 +1008,7 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // useProxyTargets flag allows to forwardProps to other targets, other than
-    // `this.inputElement`.
+    // `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
@@ -1147,7 +1147,10 @@ const proxyInputMixin =
 
           // sync properties
           proxyProps.forEach((prop) => {
-            const proxyTargets = useProxyTargets ? [this.baseElement].filter(Boolean) : [];
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
             forwardProps(this, [this.inputElement, ...proxyTargets], prop);
           });
 
@@ -1397,6 +1400,252 @@ const inputEventsDispatchingMixin = (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, 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;
+};
+
+// 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) => {
+  // We set a timeout here to avoid "Double Print" cases,
+  // caused by sampling the computed style before it's ready.
+  setTimeout(() => {
+    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');
+    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);
+
+    const commonThemeStyles = [
+      ['all', 'unset'],
+      ['position', 'absolute'],
+      ['background-color', 'transparent'],
+      ['height', height],
+      ['left', paddingLeft],
+      ['right', paddingRight],
+      ['font-size', fontSize],
+      ['font-family', fontFamily],
+      ['letter-spacing', letterSpacing],
+      ['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');
+    }
+
+    // sample and apply width only after original input is ready and fully rendered
+    const width = computedStyle.getPropertyValue('width');
+    targetInputEle.style.setProperty(
+      'width',
+      `calc(${width} - ${paddingLeft} - ${paddingRight}`,
+      'important'
+    );
+  }, 0);
+};
+
+const externalInputMixin =
+  ({ inputType, autocompleteType, includeAttrs = [], noBlurDispatch = false }) =>
+  (superclass) =>
+    class ExternalInputMixinClass extends superclass {
+      #timers = [];
+
+      get isExternalInput() {
+        return this.getAttribute('external-input') === 'true';
+      }
+
+      createExternalInput() {
+        if (!this.isExternalInput) {
+          return null;
+        }
+
+        // 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
+        this.baseElement.appendChild(externalInputSlot);
+
+        this.externalInput = createExternalInputEle(
+          'external-input',
+          inputType,
+          this.getAutocompleteType()
+        );
+
+        // apply original input's styles to external input
+        setTimeout(() => {
+          applyExternalInputStyles(origInput, this.externalInput, this.getAttribute('label-type'));
+        });
+
+        // 1Password catches the internal input, so we forward the value to the external input
+        this.forwardInputValue(origInput, this.externalInput);
+
+        syncAttrs(origInput, this.externalInput, {
+          includeAttrs,
+        });
+
+        // We disable Vaadin's original `_setFocused` function, and use handleFocusEvents
+        // and handleBlurEvents functions
+        this.baseElement
+          .querySelector('input')
+          .addEventListener('focusout', (e) => e.stopImmediatePropagation(), true);
+
+        // In order to manage focus/blur events when moving between parts of the component
+        // we're managing the event dispatching by ourselves, with the following strategy:
+        // - If one of the component parts is focused - it means that the component is still focused - so we stop the blur events.
+        // - When none of the component parts is focused, we dispatch blur event.
+        this.handleFocusEvents();
+        this.handleBlurEvents();
+
+        // sync input value
+        this.handlelInputEvents(this.externalInput);
+
+        // append external input to component's DOM
+        this.appendChild(this.externalInput);
+
+        return this.externalInput;
+      }
+
+      clearBlurTimers() {
+        this.#timers.forEach((timer) => clearTimeout(timer));
+        this.#timers.length = 0;
+      }
+
+      dispatchBlur() {
+        return setTimeout(() => {
+          this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
+          this.removeAttribute('focused');
+        });
+      }
+
+      handleFocusEvents() {
+        // on baseElement `focus` we forward the focus to the external input.
+        // also, in order to avoid any blur within the component, we clear the blur timers.
+        this.baseElement.addEventListener('focus', () => {
+          this.externalInput.focus();
+          this.clearBlurTimers();
+        });
+
+        // on `focus` of the external input, we manually set the `focused` attribute
+        this.externalInput.addEventListener('focus', () => {
+          this.clearBlurTimers();
+          setTimeout(() => this.baseElement.setAttribute('focused', 'true'));
+        });
+      }
+
+      handleBlurEvents() {
+        this.baseElement.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            // some components do not require this synthetic blur dispatch (e.g. Password)
+            // so we allow them to override this dispatch
+            if (noBlurDispatch) return;
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+
+        this.externalInput.addEventListener(
+          'blur',
+          (e) => {
+            e.stopImmediatePropagation();
+            this.#timers.push(this.dispatchBlur());
+          },
+          true
+        );
+      }
+
+      handlelInputEvents(externalInput) {
+        // sync value of insible input back to original input
+        externalInput.addEventListener('input', (e) => {
+          this.value = e.target.value;
+        });
+
+        // handle has-value attr
+        externalInput.addEventListener('input', (e) => {
+          if (!e.target.value) {
+            this.removeAttribute('has-value');
+          } else {
+            this.setAttribute('has-value', 'true');
+          }
+        });
+      }
+
+      getAutocompleteType() {
+        return this.getAttribute('autocomplete') || autocompleteType;
+      }
+
+      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,
+        });
+      }
+    };
+
 const getFileExtension = (path) => {
   const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
   return match ? match[1] : null;
@@ -2601,6 +2850,10 @@ const {
   disabledPlaceholder,
   inputDisabled,
   inputIcon,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -2617,6 +2870,10 @@ const {
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
   inputIcon: { selector: 'vaadin-icon' },
+  externalInput: { selector: () => '::slotted(input)' },
+  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
+  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
+  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
 };
 
 var textFieldMappings = {
@@ -2649,8 +2906,12 @@ var textFieldMappings = {
   inputValueTextColor: [
     { ...inputField$6, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
+    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
+  ],
+  inputCaretTextColor: [
+    { ...input, property: 'caret-color' },
+    { ...externalInput, property: 'caret-color' },
   ],
-  inputCaretTextColor: [{ ...input, property: 'color' }],
 
   labelRequiredIndicator: { ...requiredIndicator$9, property: 'content' },
 
@@ -2663,6 +2924,8 @@ var textFieldMappings = {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField$6, property: 'outline-color' },
@@ -2670,12 +2933,17 @@ var textFieldMappings = {
   inputOutlineWidth: { ...inputField$6, property: 'outline-width' },
   inputOutlineOffset: { ...inputField$6, property: 'outline-offset' },
 
-  inputTextAlign: [{ ...input, property: 'text-align' }],
+  inputTextAlign: [
+    { ...input, property: 'text-align' },
+    { ...externalInput, property: 'text-align' },
+  ],
 
   inputPlaceholderColor: [
     { selector: () => ':host input:placeholder-shown', property: 'color' },
+    { ...externalPlaceholder, property: 'color' },
     { ...placeholder$3, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 
   labelPosition: { ...label$9, property: 'position' },
@@ -2687,10 +2955,22 @@ var textFieldMappings = {
   inputTransformY: { ...label$9, property: 'transform' },
   inputTransition: { ...label$9, property: 'transition' },
   marginInlineStart: { ...label$9, property: 'margin-inline-start' },
-  placeholderOpacity: [{ selector: '> input:placeholder-shown', property: 'opacity' }],
-  inputVerticalAlignment: [{ ...inputField$6, property: 'align-items' }],
-  valueInputHeight: [{ ...input, property: 'height' }],
-  valueInputMarginBottom: [{ ...input, property: 'margin-bottom' }],
+  placeholderOpacity: [
+    { selector: '> input:placeholder-shown', property: 'opacity' },
+    { ...externalPlaceholder, property: 'opacity' },
+  ],
+  inputVerticalAlignment: [
+    { ...inputField$6, property: 'align-items' },
+    { ...externalInput, property: 'align-items' },
+  ],
+  valueInputHeight: [
+    { ...input, property: 'height' },
+    { ...externalInput, property: 'height' },
+  ],
+  valueInputMarginBottom: [
+    { ...input, property: 'margin-bottom' },
+    { ...externalInput, property: 'margin-bottom' },
+  ],
 
   inputIconOffset: [
     { ...inputIcon, property: 'margin-right' },
@@ -2716,6 +2996,8 @@ const customMixin$c = (superclass) =>
       if (!this.getAttribute('autocomplete')) {
         this.setAttribute('autocomplete', defaultAutocomplete);
       }
+
+      this.createExternalInput();
     }
   };
 
@@ -2724,6 +3006,11 @@ const EmailFieldClass = compose(
     mappings: textFieldMappings,
   }),
   draggableMixin,
+  externalInputMixin({
+    inputType: 'text',
+    autocompleteType: 'username',
+    includeAttrs: ['disabled', 'readonly', 'pattern'],
+  }),
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   customMixin$c
@@ -2755,6 +3042,10 @@ const EmailFieldClass = compose(
       :host ::slotted(*) {
         -webkit-mask-image: none;
       }
+
+      vaadin-email-field[external-input="true"] > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$Q,
@@ -3593,6 +3884,15 @@ const customMixin$9 = (superclass) =>
       this.origSetPasswordVisible = this.baseElement._setPasswordVisible;
       this.origSetFocused = this.baseElement._setFocused;
       this.baseElement._setFocused = this.setFocus.bind(this);
+
+      this.initExternalInput();
+    }
+
+    initExternalInput() {
+      const externalInput = this.createExternalInput();
+      if (externalInput) {
+        this.handlePasswordVisibility(externalInput);
+      }
     }
 
     get caretPosition() {
@@ -3607,6 +3907,7 @@ const customMixin$9 = (superclass) =>
         setTimeout(() => {
           origTogglePasswordVisibility();
           this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);
+          return false;
         });
       };
     }
@@ -3633,6 +3934,44 @@ const customMixin$9 = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
     }
+
+    // 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);
+        }
+      };
+    }
+
+    showPasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'text');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'true');
+    }
+
+    hidePasswordVisibility(input) {
+      // handle input element's type
+      input.setAttribute('type', 'password');
+      // handle vaadin's `password-visible` attribute
+      this.setAttribute('password-visible', 'false');
+    }
   };
 
 const {
@@ -3727,7 +4066,12 @@ const PasswordClass = compose(
     },
   }),
   draggableMixin,
-  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  externalInputMixin({
+    inputType: 'password',
+    includeAttrs: ['disabled', 'readonly', 'pattern', 'type', 'autocomplete'],
+    noBlurDispatch: true,
+  }),
+  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
   componentNameValidationMixin,
   passwordDraggableMixin,
   customMixin$9
@@ -3791,6 +4135,10 @@ const PasswordClass = compose(
       ::part(reveal-button) {
         align-self: center;
       }
+
+      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {
+        opacity: 0;
+      }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$H,
@@ -6918,11 +7266,14 @@ const customMixin$6 = (superclass) =>
 
       const template = document.createElement('template');
 
+      const externalInputAttr = this.getAttribute('external-input');
+
       template.innerHTML = `
 			<${componentName$y}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
+        external-input="${externalInputAttr}"
 			>
       </${componentName$y}>
 			`;
@@ -6931,6 +7282,10 @@ const customMixin$6 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$y);
 
+      if (this.getAttribute('external-input') === 'true') {
+        this.initExternalInput();
+      }
+
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
           'password-label',
@@ -6955,6 +7310,34 @@ const customMixin$6 = (superclass) =>
         ],
       });
     }
+
+    createSlottedExternalInput(node, slotName) {
+      const externalInput = node.querySelector('input');
+      const slotEle = document.createElement('slot');
+
+      const targetSlot = externalInput.getAttribute('slot');
+
+      slotEle.setAttribute('name', slotName);
+      slotEle.setAttribute('slot', targetSlot);
+
+      node.appendChild(slotEle);
+
+      // move external input
+      externalInput.setAttribute('slot', slotName);
+      externalInput.setAttribute('data-hidden-input', 'true');
+
+      this.appendChild(externalInput);
+    }
+
+    initExternalInput() {
+      // get descope input components
+      this.passwordInput = this.inputElement.querySelector('[data-id="password"]');
+      this.confirmInput = this.inputElement.querySelector('[data-id="confirm"]');
+
+      // create slots for external password input
+      this.createSlottedExternalInput(this.passwordInput, 'external-password-input');
+      this.createSlottedExternalInput(this.confirmInput, 'external-confirm-input');
+    }
   };
 
 const {
@@ -7181,24 +7564,26 @@ class NewPasswordInternal extends BaseInputClass$4 {
         this.passwordInput.focus();
       }
     });
-
     super.init?.();
     this.renderInputs(this.hasConfirm, this.hasValidation);
   }
 
   renderInputs() {
+    const hasExternalInput = this.getAttribute('external-input') === 'true';
     const template = `
       <div>
         <descope-password
           autocomplete="new-password"
           manual-visibility-toggle="true"
           data-id="password"
+          external-input="${hasExternalInput}"
         ></descope-password>
         <descope-policy-validation></descope-policy-validation>
       </div>
       <descope-password
         autocomplete="new-password"
         manual-visibility-toggle="true"
+        external-input="${hasExternalInput}"
         data-id="confirm"
       ></descope-password>
     `;