@descope/web-components-ui 1.0.312 → 1.0.314

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

@@ -6,16 +6,86 @@ import {
   componentNameValidationMixin,
 } from '../../mixins';
 import { compose } from '../../helpers';
-import { getComponentName } from '../../helpers/componentHelpers';
+import { getComponentName, syncAttrs } from '../../helpers/componentHelpers';
 import passwordDraggableMixin from './passwordDraggableMixin';
 import {
   resetInputLabelPosition,
   resetInputCursor,
   useHostExternalPadding,
 } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  applyExternalInputStyles,
+  createExternalInputEle,
+  createExternalInputSlot,
+} from './helpers';
 
 export const componentName = getComponentName('password');
 
+const customMixin = (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,
   inputField,
@@ -31,9 +101,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)' },
@@ -72,8 +142,14 @@ export const PasswordClass = compose(
       labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
       errorMessageTextColor: { ...errorMessage, property: 'color' },
 
-      inputValueTextColor: { ...inputElement, property: 'color' },
-      inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+      inputPlaceholderTextColor: [
+        { ...inputElementPlaceholder, property: 'color' },
+        { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },
+      ],
+      inputValueTextColor: [
+        { ...inputElement, property: 'color' },
+        { selector: () => ':host ::slotted(input)', property: 'color' },
+      ],
 
       revealButtonOffset: [
         { ...revealButtonContainer, property: 'margin-right' },
@@ -86,7 +162,8 @@ export const PasswordClass = compose(
   draggableMixin,
   proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
-  passwordDraggableMixin
+  passwordDraggableMixin,
+  customMixin
 )(
   createProxy({
     slots: ['', 'suffix'],
@@ -97,6 +174,7 @@ export const PasswordClass = compose(
 				max-width: 100%;
 				min-width: 10em;
         box-sizing: border-box;
+        position: relative;
 			}
 			${useHostExternalPadding(PasswordClass.cssVarList)}
 			${resetInputCursor('vaadin-password-field')}
@@ -108,7 +186,9 @@ export 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;
@@ -117,12 +197,11 @@ export 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;
@@ -133,11 +212,9 @@ export 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});
 			}

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/components/descope-text/TextClass.js

@@ -13,6 +13,7 @@ class RawText extends createBaseClass({ componentName, baseSelector: ':host > sl
     <style>
       :host {
         display: inline-block;
+        line-height: 1em;
       }
       :host > slot {
         width: 100%;

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) {