@descope/web-components-ui 1.0.313 → 1.0.314

package/src/components/descope-password/helpers.js

@@ -0,0 +1,62 @@
+// 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;
+};
+
+export const createExternalInputSlot = (slotName, targetSlotName) => {
+  const slotEle = document.createElement('slot');
+
+  slotEle.setAttribute('name', slotName);
+  slotEle.setAttribute('slot', targetSlotName);
+
+  return slotEle;
+};
+
+export 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;
+};
+
+export 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;
+  `;
+};

package/src/components/descope-password/passwordDraggableMixin.js

@@ -8,27 +8,32 @@ 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?.();
     }
   };
 

package/src/mixins/inputValidationMixin.js

@@ -8,8 +8,13 @@ const errorAttributes = {
   tooShort: 'data-errormessage-pattern-mismatch-too-short',
   tooLong: 'data-errormessage-pattern-mismatch-too-long',
 };
+
+const validationTargetSymbol = Symbol('validationTarget');
+
 export const inputValidationMixin = (superclass) =>
   class InputValidationMixinClass extends superclass {
+    #validationTarget = validationTargetSymbol;
+
     static get observedAttributes() {
       return [...(superclass.observedAttributes || []), ...observedAttributes];
     }
@@ -126,7 +131,13 @@ export const inputValidationMixin = (superclass) =>
     }
 
     get validationTarget() {
-      return this.inputElement;
+      return this.#validationTarget === validationTargetSymbol
+        ? this.inputElement
+        : this.#validationTarget;
+    }
+
+    set validationTarget(val) {
+      this.#validationTarget = val;
     }
 
     setCustomValidity(errorMessage) {