@descope/web-components-ui 1.0.78 → 1.0.80

package/src/components/descope-new-password/NewPassword.js

@@ -0,0 +1,129 @@
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { compose } from '../../helpers';
+import {
+	createStyleMixin,
+	proxyInputMixin,
+	draggableMixin,
+	createProxy,
+} from '../../mixins';
+import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
+import PasswordField from "../descope-password-field/PasswordField";
+
+export const componentName = getComponentName('new-password');
+
+const customMixin = (superclass) =>
+	class NewPasswordMixinClass extends superclass {
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+			<${descopeInternalComponentName} 
+				name="new-password" 
+				tabindex="-1"
+				slot="input"
+			></${descopeInternalComponentName}>
+			`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+			forwardAttrs(this, this.inputElement, {
+				includeAttrs: [
+					'password-label',
+					'password-placeholder',
+					'confirm-label',
+					'confirm-placeholder',
+					'full-width',
+					'size',
+					'bordered',
+					'label',
+					'has-confirm',
+					'invalid',
+				]
+			});
+		}
+	};
+
+const { host, internalInputsWrapper } = {
+	host: { selector: () => ':host' },
+	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
+}
+const NewPassword = compose(
+	createStyleMixin({
+		mappings: {
+			componentWidth: { ...host, property: 'width' },
+			requiredContent: { ...host, property: 'content' },
+			inputLabelTextColor: {
+				selector: PasswordField.componentName,
+				property: PasswordField.cssVarList.labelTextColor
+			},
+			inputTextColor: {
+				selector: PasswordField.componentName,
+				property: PasswordField.cssVarList.inputTextColor
+			},
+			inputsGap: {...internalInputsWrapper, property: 'gap'}
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	customMixin,
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+const overrides = `
+	:host {
+		--vaadin-field-default-width: auto;
+		display: inline-block;
+	}
+	vaadin-text-field {
+		padding: 0;
+		width: 100%;
+		height: 100%;
+	}
+	vaadin-text-field::part(input-field) {
+		min-height: 0;
+		background: transparent;
+		overflow: hidden;
+		box-shadow: none;
+	}
+	vaadin-text-field::part(input-field)::after {
+		background: transparent;
+		opacity: 0;
+	}
+	descope-new-password-internal {
+		-webkit-mask-image: none;
+		padding: 0;
+		min-height: 0;
+		width: 100%;
+		height: 100%;		
+	}
+	descope-new-password-internal > .wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+    flex-direction: column;
+	}
+	descope-password-field {
+		display: block;
+		width: 100%;
+	}
+	descope-new-password-internal vaadin-password-field::before {
+		height: initial;
+	}
+`;
+
+export default NewPassword;

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -0,0 +1,189 @@
+import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
+import { observeAttributes } from '../../../helpers/componentHelpers';
+import NewPassword from '../NewPassword';
+import { componentName } from './componentName';
+
+const passwordAttrPrefixRegex = /^password-/
+const confirmAttrPrefixRegex = /^confirm-/
+
+const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '')
+
+const passwordInputAttrs = ['password-label', 'password-placeholder'];
+const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
+const commonAttrs = [
+	'disabled',
+	'bordered',
+	'size',
+	'full-width',
+	'maxlength',
+	'invalid',
+];
+
+const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class NewPasswordInternal extends BaseInputClass {
+	static get observedAttributes() {
+		return ['has-confirm'].concat(
+			BaseInputClass.observedAttributes || [],
+			inputRelatedAttrs,
+		);
+	}
+
+	constructor() {
+		super();
+
+		this.innerHTML = `
+			<div class="wrapper"></div>
+		`;
+
+		this.wrapperEle = this.querySelector('.wrapper')
+	}
+
+	get value() {
+		return this.passwordInput?.value || '';
+	}
+
+	set value(val) {
+		if (val === this.value) return;
+		this.value = val;
+	}
+
+	get hasConfirm() {
+		return this.getAttribute('has-confirm') === 'true';
+	}
+
+	getValidity() {
+		if (this.isRequired && !this.value) {
+			return { valueMissing: true };
+		}
+		if (this.hasConfirm && this.confirmInput && this.value !== this.confirmInput.value) {
+			return { patternMismatch: true };
+		}
+
+		const min = this.getAttribute('minlength');
+		const minVal = parseInt(min, 10) || 0;
+		const minValid = this.value.length >= minVal;
+		if (!minValid) {
+			return { tooShort: true }
+		}
+
+		return {}
+	};
+
+	init() {
+		this.addEventListener('focus', (e) => {
+			// we want to ignore focus events we are dispatching
+			if (e.isTrusted) {
+				this.passwordInput.focus()
+			}
+		});
+
+		super.init();
+		this.renderInputs(this.hasConfirm);
+	}
+
+	renderInputs(shouldRenderConfirm) {
+		let template = `<descope-password-field data-id="password"></descope-password-field>`;
+
+		if (shouldRenderConfirm) {
+			template += `<descope-password-field data-id="confirm"></descope-password-field>`
+		}
+
+		this.wrapperEle.innerHTML = template;
+
+		this.passwordInput = this.querySelector('[data-id="password"]');
+		this.confirmInput = this.querySelector('[data-id="confirm"]');
+
+		this.inputs = [this.passwordInput, this.confirmInput];
+
+		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))
+		})
+	}
+
+	// the inputs are not required but we still want it to have a required
+	// indicator in case the root component is required
+	handleIndicatorStyle() {
+		for (const input of this.inputs) {
+			const styleTag = document.createElement('style');
+			styleTag.innerHTML = `
+				:host::part(required-indicator)::after {
+					content: var(${NewPassword.cssVarList.requiredContent});
+				}
+				`;
+			input?.shadowRoot.appendChild(styleTag);
+		}
+	}
+
+	get isInvalid() {
+		return this.hasAttribute('invalid') && this.getAttribute('invalid') !== 'false'
+	}
+
+	// for some reason, Vaadin is removing the invalid attribute on several events, 
+	// e.g. focus, input, etc..., so we need to make sure the inputs will stay invalid
+	// if the root component is invalid
+	handleInputsInvalidAttribute() {
+		this.inputs.forEach(input => {
+			input && observeAttributes(input, (changedAttributes) => {
+				if (changedAttributes.includes('invalid')) {
+					const inputInvalidValue = input.getAttribute('invalid')
+					const rootInvalidValue = this.getAttribute('invalid')
+
+					if (this.isInvalid && rootInvalidValue !== inputInvalidValue) {
+						input.setAttribute('invalid', 'true')
+					}
+				}
+			}, {});
+		})
+	}
+
+	initInputs() {
+		this.handleIndicatorStyle()
+		this.handleInputsInvalidAttribute();
+		this.handleFocusEventsDispatching(this.inputs)
+	}
+
+	toggleBooleanAttribute(ele, name, value) {
+		value === null ?
+			ele?.removeAttribute(name) :
+			ele?.setAttribute(name, value)
+	}
+
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+		if (oldValue !== newValue) {
+			if (attrName === 'has-confirm') {
+				this.renderInputs(newValue !== null && newValue !== 'false');
+			}
+			else if (commonAttrs.includes(attrName)) {
+				this.inputs.forEach(
+					(input) => this.toggleBooleanAttribute(input, attrName, newValue)
+				);
+			}
+			else if (passwordInputAttrs.includes(attrName)) {
+				this.toggleBooleanAttribute(
+					this.passwordInput,
+					removeAttrPrefix(attrName, passwordAttrPrefixRegex),
+					newValue
+				);
+			}
+			else if (confirmInputAttrs.includes(attrName)) {
+				this.toggleBooleanAttribute(
+					this.confirmInput,
+					removeAttrPrefix(attrName, confirmAttrPrefixRegex),
+					newValue
+				);
+
+			}
+		}
+	}
+}
+
+export default NewPasswordInternal;

package/src/components/descope-new-password/descope-new-password-internal/componentName.js

@@ -0,0 +1,3 @@
+import { getComponentName } from "../../../helpers/componentHelpers";
+
+export const componentName = getComponentName('new-password-internal');

package/src/components/descope-new-password/descope-new-password-internal/index.js

@@ -0,0 +1,4 @@
+import NewPasswordInternal from "./NewPasswordInternal"
+import { componentName } from "./componentName"
+
+customElements.define(componentName, NewPasswordInternal)

package/src/components/descope-new-password/index.js

@@ -0,0 +1,6 @@
+import NewPassword, { componentName } from './NewPassword';
+import '../descope-text-field'
+import '../descope-password-field'
+import './descope-new-password-internal'
+
+customElements.define(componentName, NewPassword);

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -173,8 +173,8 @@ class PasscodeInternal extends BaseInputClass {
 			forwardAttrs(this, input, { includeAttrs: forwardAttributes })
 		})
 
-		this.handleFocusEventsDispatching(this.inputs)
-		this.handleInputEventDispatching(this.inputs)
+		this.handleFocusEventsDispatching(this.inputs);
+		this.handleInputEventDispatching();
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {

package/src/components/descope-password-field/PasswordField.js

@@ -5,7 +5,6 @@ import {
 	proxyInputMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
@@ -13,16 +12,37 @@ export const componentName = getComponentName('password-field');
 
 let overrides = ``;
 
+const { host, inputWrapper, inputElement, inputElementPlaceholder, revealButton, label, requiredIndicator } = {
+	host: () => ':host',
+	inputWrapper: { selector: '::part(input-field)' },
+	inputElement: { selector: '> input' },
+	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+	revealButton: { selector: 'vaadin-password-field-button' },
+	label: { selector: '> label' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+}
+
 const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
-			...textFieldMappings,
-			revealCursor: [
-				{
-					selector: '::part(reveal-button)::before',
-					property: 'cursor'
-				}
-			]
+			wrapperBorderStyle: { ...inputWrapper, property: 'border-style' },
+			wrapperBorderWidth: { ...inputWrapper, property: 'border-width' },
+			wrapperBorderColor: { ...inputWrapper, property: 'border-color' },
+			wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
+			labelTextColor: [
+				{ ...label, property: 'color' },
+				{ ...requiredIndicator, property: 'color' }
+			],
+			inputTextColor: [{ ...inputElement, property: 'color' }],
+			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+			fontSize: [{}, host],
+			height: inputWrapper,
+			padding: inputWrapper,
+			pointerCursor: [
+				{ ...revealButton, property: 'cursor' },
+				{ ...label, property: 'cursor' },
+				{ ...requiredIndicator, property: 'cursor' }
+			],
 		}
 	}),
 	draggableMixin,
@@ -43,38 +63,17 @@ overrides = `
 		display: inline-block;
 	}
 	vaadin-password-field {
-		margin: 0;
+		width: 100%;
 		padding: 0;
 	}
 	vaadin-password-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-password-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-password-field input:-webkit-autofill,
-	vaadin-password-field input:-webkit-autofill::first-line,
-	vaadin-password-field input:-webkit-autofill:hover,
-	vaadin-password-field input:-webkit-autofill:active,
-	vaadin-password-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
-		box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-password-field > label,
-	vaadin-password-field::part(input-field) {
-		cursor: pointer;
-		color: var(${PasswordField.cssVarList.color});
-	}
-	vaadin-password-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-password-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${PasswordField.cssVarList.color});
+		background: transparent;
 	}
-	vaadin-password-field[readonly]::part(input-field)::after {
-		border: 0 solid;
+	vaadin-password-field::part(input-field)::after {
+		opacity: 0;
+	}	
+	vaadin-password-field::before {
+		height: initial;
 	}
 `;
 

package/src/components/descope-phone-field/PhoneField.js

@@ -7,7 +7,6 @@ import {
 	draggableMixin,
 	proxyInputMixin
 } from '../../mixins';
-
 import TextField from '../descope-text-field/TextField';
 import ComboBox from '../descope-combo-box/ComboBox';
 
@@ -54,6 +53,7 @@ const customMixin = (superclass) =>
 	};
 
 const {
+	host,
 	inputWrapper,
 	countryCodeInput,
 	phoneInput,
@@ -61,6 +61,7 @@ const {
 	requiredIndicator,
 	separator
 } = {
+	host: { selector: () => ':host' },
 	inputWrapper: { selector: '::part(input-field)' },
 	phoneInput: { selector: () => 'descope-text-field' },
 	countryCodeInput: { selector: () => 'descope-combo-box' },
@@ -72,7 +73,7 @@ const {
 const PhoneField = compose(
 	createStyleMixin({
 		mappings: {
-			componentWidth: { selector: () => ':host', property: 'width' },
+			componentWidth: { ...host, property: 'width' },
 
 			wrapperBorderStyle: [
 				{ ...inputWrapper, property: 'border-style' },

package/src/components/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -162,7 +162,7 @@ class PhoneFieldInternal extends BaseInputClass {
 		});
 
 		this.handleFocusEventsDispatching(this.inputs)
-		this.handleInputEventDispatching(this.inputs)
+		this.handleInputEventDispatching()
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {

package/src/index.js

@@ -17,6 +17,7 @@ import './components/descope-text-area';
 import './components/descope-text-field';
 import './components/descope-image';
 import './components/descope-phone-field';
+import './components/descope-new-password';
 
 export {
 	globalsThemeToStyle,

package/src/mixins/createProxy.js

@@ -17,7 +17,7 @@ export const createProxy = ({
 		#dispatchFocus = createDispatchEvent.bind(this, 'focus')
 
 		constructor() {
-			super().attachShadow({ mode: 'open' }).innerHTML = `
+			super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
 			<style id="create-proxy">${isFunction(style) ? style() : style
 				}</style>
 			<${wrappedEleName}>
@@ -27,8 +27,6 @@ export const createProxy = ({
 		`;
 		}
 
-		focus = () => this.baseElement.focus()
-
 		init() {
 			super.init?.();
 
@@ -40,30 +38,10 @@ export const createProxy = ({
 				this.#dispatchFocus()
 			})
 
-			this.addEventListener('focus', (e) => {
-				// if we got a focus event we want to focus the proxy element
-				if (e.isTrusted) {
-					this.focus();
-				}
-			})
 
 			// this is needed for components that uses props, such as combo box
 			forwardProps(this, this.baseElement, includeForwardProps)
 
-			// `onkeydown` is set on `baseElement` support proper tab-index navigation
-			// this support is needed since both proxy host and element catch `focus`/`blur` event
-			// which causes faulty behavior.
-			// we need this to happen only when the proxy component is in the light DOM, 
-			// otherwise it will focus the nested proxy element
-			this.baseElement.onkeydown = (e) => {
-				if (e.shiftKey && e.keyCode === 9 && this.getRootNode() === document) {
-					this.removeAttribute('tabindex');
-					// We want to defer the action of setting the tab index back
-					// so it will happen after focusing the previous element
-					setTimeout(() => this.setAttribute('tabindex', '0'), 0);
-				}
-			};
-
 			syncAttrs(this.baseElement, this, {
 				excludeAttrs: excludeAttrsSync,
 				includeAttrs: includeAttrsSync

package/src/mixins/index.js

@@ -4,7 +4,6 @@ export { createProxy } from './createProxy';
 export { proxyInputMixin } from './proxyInputMixin';
 export { componentNameValidationMixin } from './componentNameValidationMixin';
 export { hoverableMixin } from './hoverableMixin';
-export { focusMixin } from './focusMixin'
 export { inputValidationMixin } from './inputValidationMixin'
 export { portalMixin } from './portalMixin'
 export { changeMixin } from './changeMixin'

package/src/mixins/inputEventsDispatchingMixin.js

@@ -1,54 +1,71 @@
 import { createDispatchEvent } from "../helpers/mixinsHelpers";
 
 export const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
-  handleFocusEventsDispatching(focusableElements = []) {
-    let blurTimerId
-
-    // in order to simulate blur on the input
-    // we are checking if focus on one of the other elements happened immediately after blur
-    // if not, the component is no longer focused and we should dispatch blur
-    focusableElements.forEach(ele => {
-      ele?.addEventListener('blur', (e) => {
+  init() {
+    this.#blockNativeEvents();
+
+    super.init?.();
+  }
+
+  // we want to block the native (trusted) events and control when these events are being dispatched
+  #blockNativeEvents() {
+    ['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
+      this.addEventListener(event, (e) => {
+        e.isTrusted && e.target === this && e.stopImmediatePropagation()
+      })
+    })
+  }
+
+  handleFocusEventsDispatching(inputs) {
+    let timerId
+
+    // in order to simulate blur & focusout on root input element
+    // we are checking if focus on one of the inner elements happened immediately after blur
+    // if not, the component is no longer focused and we should dispatch blur & focusout
+    inputs?.forEach(input => {
+      input?.addEventListener('focusout', (e) => {
         e.stopImmediatePropagation();
-        blurTimerId = setTimeout(() => {
-          blurTimerId = null
+        timerId = setTimeout(() => {
+          timerId = null
+
           createDispatchEvent.call(this, 'blur');
           createDispatchEvent.call(this, 'focusout', { bubbles: true });
         });
       })
 
-      // in order to simulate focus on the input
-      // we are holding a blur timer id and clearing it on blur
-      // if there is a timer id, it means that there was no blur on the input, so it's still focused
-      // otherwise, it was not focused before, and we need to dispatch a focus event
-      ele?.addEventListener('focus', (e) => {
+      // in order to simulate focus & focusin on the root input element
+      // we are holding a timer id and clearing it on focusin
+      // if there is a timer id, it means that the root input is still focused
+      // otherwise, it was not focused before, and we should dispatch focus & focusin
+      const onFocus = (e) => {
         e.stopImmediatePropagation();
-        clearTimeout(blurTimerId)
-        if (!blurTimerId) {
+        clearTimeout(timerId)
+        if (!timerId) {
           createDispatchEvent.call(this, 'focus');
           createDispatchEvent.call(this, 'focusin', { bubbles: true });
         }
-      })
+      }
+
+      // some components are not dispatching focusin but only focus
+      input?.addEventListener('focusin', onFocus)
+      input?.addEventListener('focus', onFocus)
     })
   }
 
   // we want to block the input events from propagating in case the value of the root input wasn't change
   // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
   // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
-  handleInputEventDispatching(inputElements) {
+  handleInputEventDispatching() {
     let previousRootComponentValue = this.value
 
-    inputElements.forEach(input => {
-      input.addEventListener('input', (e) => {
-        // we are comparing the previous value to the new one,
-        // and if they have the same value, we are blocking the input event
-        if (previousRootComponentValue === this.value) {
-          e.stopImmediatePropagation();
-        } else {
-          previousRootComponentValue = this.value
-        }
-      });
+    this.addEventListener('input', (e) => {
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
+      if (previousRootComponentValue === this.value) {
+        e.stopImmediatePropagation();
+      } else {
+        previousRootComponentValue = this.value
+      }
     });
-
   }
-}
+}

package/src/mixins/inputValidationMixin.js

@@ -68,7 +68,7 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
 
   #setValidity() {
     const validity = this.getValidity()
-    this.#internals.setValidity(validity, this.getErrorMessage(validity))
+    this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget)
   }
 
   get validationMessage() {
@@ -91,9 +91,13 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     return this.#internals.validity
   }
 
+  get validationTarget () {
+    return this.inputElement
+  }
+
   setCustomValidity(errorMessage) {
     if (errorMessage) {
-      this.#internals.setValidity({ customError: true }, errorMessage)
+      this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget)
     } else {
       this.#internals.setValidity({})
       this.#setValidity()