@descope/web-components-ui 1.0.312 → 1.0.314

package/dist/cjs/index.cjs.js

@@ -1985,8 +1985,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$4];
     }
@@ -2103,7 +2108,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) {
@@ -3139,7 +3150,7 @@ const componentName$O = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
-const customMixin$8 = (superclass) =>
+const customMixin$9 = (superclass) =>
   class TextFieldClass extends superclass {
     static get observedAttributes() {
       return observedAttrs.concat(superclass.observedAttributes || []);
@@ -3191,7 +3202,7 @@ const TextFieldClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  customMixin$8
+  customMixin$9
 )(
   createProxy({
     slots: ['prefix', 'suffix'],
@@ -3346,32 +3357,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$M = getComponentName('password');
 
+const customMixin$8 = (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$l,
   inputField: inputField$5,
@@ -3387,9 +3531,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)' },
@@ -3428,8 +3572,14 @@ const PasswordClass = compose(
       labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
       errorMessageTextColor: { ...errorMessage$b, 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' },
@@ -3442,7 +3592,8 @@ const PasswordClass = compose(
   draggableMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  passwordDraggableMixin
+  passwordDraggableMixin,
+  customMixin$8
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -3453,6 +3604,7 @@ const PasswordClass = compose(
 				max-width: 100%;
 				min-width: 10em;
         box-sizing: border-box;
+        position: relative;
 			}
 			${useHostExternalPadding(PasswordClass.cssVarList)}
 			${resetInputCursor('vaadin-password-field')}
@@ -3464,7 +3616,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;
@@ -3473,12 +3627,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;
@@ -3489,11 +3642,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});
 			}
@@ -4537,6 +4688,7 @@ class RawText extends createBaseClass({ componentName: componentName$B, baseSele
     <style>
       :host {
         display: inline-block;
+        line-height: 1em;
       }
       :host > slot {
         width: 100%;
@@ -4701,6 +4853,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     <style>
       :host {
         display: inline-block;
+        line-height: 1em;
       }
       :host > slot {
         width: 100%;
@@ -4861,6 +5014,7 @@ class RawLink extends createBaseClass({ componentName: componentName$z, baseSele
 		<style>
 		:host {
 			display: inline-block;
+      line-height: 1em;
 		}
 		:host a {
 			display: inline;
@@ -8044,13 +8198,24 @@ const customMixin$3 = (superclass) =>
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$n}>
+			>
+      </${componentName$n}>
 			`;
 
+      this.setAttribute('external-input', 'true');
+
       this.baseElement.appendChild(template.content.cloneNode(true));
 
       this.inputElement = this.shadowRoot.querySelector(componentName$n);
 
+      // 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',
@@ -8073,6 +8238,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 {
@@ -8160,6 +8339,7 @@ const NewPasswordClass = compose(
 			padding: 0;
 		}
 		descope-new-password-internal > .wrapper {
+      -webkit-mask-image: none;
 			width: 100%;
 			height: 100%;
 			display: flex;