@descope/web-components-ui 1.0.313 → 1.0.314

package/dist/index.esm.js

@@ -763,8 +763,13 @@ const errorAttributes = {
   tooShort: 'data-errormessage-pattern-mismatch-too-short',
   tooLong: 'data-errormessage-pattern-mismatch-too-long',
 };
+
+const validationTargetSymbol = Symbol('validationTarget');
+
 const inputValidationMixin = (superclass) =>
   class InputValidationMixinClass extends superclass {
+    #validationTarget = validationTargetSymbol;
+
     static get observedAttributes() {
       return [...(superclass.observedAttributes || []), ...observedAttributes$6];
     }
@@ -881,7 +886,13 @@ const inputValidationMixin = (superclass) =>
     }
 
     get validationTarget() {
-      return this.inputElement;
+      return this.#validationTarget === validationTargetSymbol
+        ? this.inputElement
+        : this.#validationTarget;
+    }
+
+    set validationTarget(val) {
+      this.#validationTarget = val;
     }
 
     setCustomValidity(errorMessage) {
@@ -2539,7 +2550,7 @@ var textFieldMappings = {
 
 const componentName$K = getComponentName('email-field');
 
-const customMixin$8 = (superclass) =>
+const customMixin$9 = (superclass) =>
   class EmailFieldMixinClass extends superclass {
     init() {
       super.init?.();
@@ -2553,7 +2564,7 @@ const EmailFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$8
+  customMixin$9
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -3012,7 +3023,7 @@ const componentName$D = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$7 = (superclass) =>
+const customMixin$8 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -3064,7 +3075,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$7
+  customMixin$8
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -3091,7 +3102,7 @@ const componentName$C = getComponentName('passcode');
 
 const observedAttributes$4 = ['digits'];
 
-const customMixin$6 = (superclass) =>
+const customMixin$7 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
       return observedAttributes$4.concat(superclass.observedAttributes || []);
@@ -3187,7 +3198,7 @@ const PasscodeClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$6
+  customMixin$7
 )(
   createProxy({
     slots: [],
@@ -3283,32 +3294,165 @@ const passwordDraggableMixin = (superclass) =>
       // there is an issue in Chrome that input field with type password cannot be D&D
       // so in case the input is draggable & readonly, we are changing the input type to "text" before dragging
       // and return the original type when done
-      this.addEventListener('mousedown', (e) => {
+      super.init?.();
+
+      const ele = this.querySelector('input');
+
+      ele?.addEventListener('mousedown', (e) => {
         if (this.isDraggable && this.isReadOnly) {
-          const inputEle = this.baseElement.querySelector('input');
-          const prevType = inputEle.getAttribute('type');
+          ele.setAttribute('inert', 'true');
 
+          const inputEle = e.target;
+          const prevType = inputEle.getAttribute('type');
           inputEle.setAttribute('type', 'text');
-          setTimeout(() => inputEle.focus());
+          setTimeout(() => {
+            inputEle.focus();
+          });
 
           const onComplete = (_) => {
             inputEle.setAttribute('type', prevType);
-
-            e.target.removeEventListener('mouseup', onComplete);
-            e.target.removeEventListener('dragend', onComplete);
+            ele.removeAttribute('inert');
+            this.removeEventListener('mouseup', onComplete);
+            this.removeEventListener('dragend', onComplete);
           };
 
-          e.target.addEventListener('mouseup', onComplete, { once: true });
-          e.target.addEventListener('dragend', onComplete, { once: true });
+          this.addEventListener('dragend', onComplete, { once: true });
+          this.addEventListener('mouseup', onComplete, { once: true });
         }
       });
-
-      super.init?.();
     }
   };
 
+// 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$B = getComponentName('password');
 
+const customMixin$6 = (superclass) =>
+  class PasswordFieldMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      // 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);
+
+      // create external input
+      const externalInput = createExternalInputEle('external-input', this.getAutocompleteType());
+
+      // apply original input's styles to external input
+      setTimeout(() => {
+        applyExternalInputStyles(origInput, externalInput);
+      });
+
+      // set external input events
+      this.handleExternalInputEvents(externalInput);
+
+      // sync input stateful attributes: `type` (for visibility state change) and `readonly`
+      syncAttrs(origInput, externalInput, { includeAttrs: ['type', 'readonly'] });
+
+      origInput.addEventListener('focus', (e) => {
+        e.preventDefault();
+        if (e.isTrusted) {
+          externalInput.focus();
+        }
+      });
+
+      this.addEventListener('focus', (e) => {
+        e.preventDefault();
+        this.focus();
+      });
+
+      // append external input to component's DOM
+      this.appendChild(externalInput);
+    }
+
+    getAutocompleteType() {
+      return this.getAttribute('autocomplete') || 'current-password';
+    }
+
+    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');
+      });
+    }
+  };
+
 const {
   host: host$f,
   inputField: inputField$5,
@@ -3324,9 +3468,9 @@ const {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
   inputElement: { selector: '> input' },
-  inputElementPlaceholder: { selector: '> input:placeholder-shown' },
-  revealButtonContainer: { selector: () => '::part(reveal-button)' },
-  revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
+  inputElementPlaceholder: { selector: () => ':host input:placeholder-shown' },
+  revealButtonContainer: { selector: '::part(reveal-button)' },
+  revealButtonIcon: { selector: '::part(reveal-button)::before' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   helperText: { selector: '::part(helper-text)' },
@@ -3365,8 +3509,14 @@ const PasswordClass = compose(
       labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
       errorMessageTextColor: { ...errorMessage$8, property: 'color' },
 
-      inputValueTextColor: { ...inputElement$2, property: 'color' },
-      inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+      inputPlaceholderTextColor: [
+        { ...inputElementPlaceholder, property: 'color' },
+        { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
+      ],
+      inputValueTextColor: [
+        { ...inputElement$2, property: 'color' },
+        { selector: () => ':host ::slotted(input)', property: 'color' },
+      ],
 
       revealButtonOffset: [
         { ...revealButtonContainer, property: 'margin-right' },
@@ -3379,7 +3529,8 @@ const PasswordClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  passwordDraggableMixin
+  passwordDraggableMixin,
+  customMixin$6
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -3390,6 +3541,7 @@ const PasswordClass = compose(
 				max-width: 100%;
 				min-width: 10em;
         box-sizing: border-box;
+        position: relative;
 			}
 			${useHostExternalPadding(PasswordClass.cssVarList)}
 			${resetInputCursor('vaadin-password-field')}
@@ -3401,7 +3553,9 @@ const PasswordClass = compose(
 				padding: 0;
 			}
 			vaadin-password-field > input {
+        -webkit-mask-image: none;
 				box-sizing: border-box;
+        opacity: 1;
 			}
 			vaadin-password-field::part(input-field) {
 				box-sizing: border-box;
@@ -3410,12 +3564,11 @@ const PasswordClass = compose(
 			vaadin-password-field[focus-ring]::part(input-field) {
 				box-shadow: none;
 			}
-			vaadin-password-field > input {
+      :host ::slotted(input) {
 				min-height: 0;
-				-webkit-mask-image: none;
-			}
-			vaadin-password-field[readonly] > input:placeholder-shown {
-				opacity: 1;
+      }
+      :host([readonly]) ::slotted(input:placeholder-shown) {
+				opacity: 0;
 			}
 			vaadin-password-field::before {
 				height: initial;
@@ -3426,11 +3579,9 @@ const PasswordClass = compose(
 			vaadin-password-field-button {
 				cursor: pointer;
 			}
-
-			[readonly] vaadin-password-field-button {
+			:host([readonly]) vaadin-password-field-button {
 				pointer-events: none;
 			}
-
 			vaadin-password-field-button[focus-ring] {
 				box-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});
 			}
@@ -6354,13 +6505,24 @@ const customMixin$3 = (superclass) =>
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$s}>
+			>
+      </${componentName$s}>
 			`;
 
+      this.setAttribute('external-input', 'true');
+
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(componentName$s);
 
+      // 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.createExternalInput(this.passwordInput, 'external-password-input');
+      this.createExternalInput(this.confirmInput, 'external-confirm-input');
+
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
           'password-label',
@@ -6383,6 +6545,20 @@ const customMixin$3 = (superclass) =>
         ],
       });
     }
+
+    createExternalInput(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);
+    }
   };
 
 const {
@@ -6470,6 +6646,7 @@ const NewPasswordClass = compose(
 			padding: 0;
 		}
 		descope-new-password-internal > .wrapper {
+      -webkit-mask-image: none;
 			width: 100%;
 			height: 100%;
 			display: flex;
@@ -6506,6 +6683,7 @@ const passwordInputAttrs = ['password-label', 'password-placeholder'];
 const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
 const policyPanelAttrs = ['has-validation'];
 const commonAttrs = [
+  'has-confirm',
   'disabled',
   'bordered',
   'size',
@@ -6528,7 +6706,7 @@ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$s,
 
 class NewPasswordInternal extends BaseInputClass$4 {
   static get observedAttributes() {
-    return ['has-confirm'].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
+    return [].concat(BaseInputClass$4.observedAttributes || [], inputRelatedAttrs);
   }
 
   constructor() {
@@ -6554,6 +6732,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
     return this.getAttribute('has-confirm') === 'true';
   }
 
+  onHasConfirmChange(hasConfirm) {
+    this.confirmInput.style.display = hasConfirm ? '' : 'none';
+  }
+
+  onHasValidationChange(hasValidation) {
+    this.policyPanel.style.display = hasValidation ? '' : 'none';
+  }
+
   get hasValidation() {
     return this.getAttribute('has-validation') === 'true';
   }
@@ -6592,20 +6778,15 @@ class NewPasswordInternal extends BaseInputClass$4 {
     this.renderInputs(this.hasConfirm, this.hasValidation);
   }
 
-  renderInputs(shouldRenderConfirm, shouldRenderValidation) {
-    let template = `
+  renderInputs() {
+    const template = `
       <div>
-        <descope-password data-id="password"></descope-password>
-        <descope-policy-validation class="${
-          shouldRenderValidation ? 'hidden' : ''
-        }"></descope-policy-validation>
+        <descope-password autocomplete="new-password" data-id="password"></descope-password>
+        <descope-policy-validation></descope-policy-validation>
       </div>
+      <descope-password autocomplete="new-password" data-id="confirm"></descope-password>
     `;
 
-    if (shouldRenderConfirm) {
-      template += `<descope-password data-id="confirm"></descope-password>`;
-    }
-
     this.wrapperEle.innerHTML = template;
 
     this.passwordInput = this.querySelector('[data-id="password"]');
@@ -6616,12 +6797,7 @@ class NewPasswordInternal extends BaseInputClass$4 {
 
     this.initInputs();
 
-    // we are calling attributeChangedCallback with all the input related attributes
-    // in order to set it on the newly generated input
-    [...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
-      this.attributeChangedCallback(attr, null, this.getAttribute(attr));
-    });
-
+    // sync input value to policy validation panel
     this.passwordInput.addEventListener('input', (e) => {
       this.policyPanel.setAttribute('value', e.target.value);
     });
@@ -6697,22 +6873,14 @@ class NewPasswordInternal extends BaseInputClass$4 {
     value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
   }
 
-  hidePolicy() {
-    this.policyPanel.classList.add('hidden');
-  }
-
-  showPolicy() {
-    this.policyPanel.classList.remove('hidden');
-  }
-
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
     if (oldValue !== newValue) {
       if (attrName === 'has-validation') {
-        this.renderInputs(this.hasConfirm, newValue === 'true');
+        this.onHasValidationChange(newValue === 'true');
       } else if (attrName === 'has-confirm') {
-        this.renderInputs(newValue !== null && newValue !== 'false', this.hasValidation);
+        this.onHasConfirmChange(newValue === 'true');
       } else if (commonAttrs.includes(attrName)) {
         this.inputs.forEach((input) => this.toggleBooleanAttribute(input, attrName, newValue));
       } else if (passwordInputAttrs.includes(attrName)) {
@@ -6728,9 +6896,6 @@ class NewPasswordInternal extends BaseInputClass$4 {
           newValue
         );
       }
-      if (attrName === 'has-validation') {
-        newValue === 'true' ? this.showPolicy() : this.hidePolicy();
-      }
     }
   }
 }