@descope/web-components-ui 1.0.79 → 1.0.81

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

@@ -172,6 +172,9 @@ class PasscodeInternal extends BaseInputClass {
 
 			forwardAttrs(this, input, { includeAttrs: forwardAttributes })
 		})
+
+		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,19 @@ overrides = `
 		display: inline-block;
 	}
 	vaadin-password-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-password-field::part(input-field) {
-		overflow: hidden;
+		width: 100%;
 	}
-	vaadin-password-field[readonly] > input:placeholder-shown {
-		opacity: 1;
+	vaadin-password-field > input {
+		min-height: 0;
 	}
-	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

@@ -1,5 +1,5 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import { getComponentName, simulateInputFocusEvents } from '../../../helpers/componentHelpers';
+import { getComponentName } from '../../../helpers/componentHelpers';
 import CountryCodes from '../CountryCodes';
 import { comboBoxItem } from '../helpers';
 
@@ -160,6 +160,9 @@ class PhoneFieldInternal extends BaseInputClass {
 				.join('');
 			e.target.value = sanitizedInput;
 		});
+
+		this.handleFocusEventsDispatching(this.inputs)
+		this.handleInputEventDispatching()
 	}
 
 	attributeChangedCallback(attrName, oldValue, newValue) {

package/src/components/descope-switch-toggle/SwitchToggle.js

@@ -15,7 +15,7 @@ let overrides = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: {selector: () => ':host'},
+			width: { selector: () => ':host' },
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),

package/src/components/descope-switch-toggle/index.js

@@ -3,4 +3,4 @@ import SwitchToggle, { componentName } from './SwitchToggle';
 
 customElements.define(componentName, SwitchToggle);
 
-export { SwitchToggle };
+export { SwitchToggle };

package/src/helpers/componentHelpers.js

@@ -89,13 +89,13 @@ export const forwardProps = (src, target, props = []) => {
 	const config = props.reduce((acc, prop) => Object.assign(acc, {
 		[prop]: {
 			get() {
-				return target[prop]
+				return src[prop]
 			},
 			set(v) {
-				target[prop] = v
+				src[prop] = v
 			}
 		}
 	}), {})
 
-	Object.defineProperties(src, config)
+	Object.defineProperties(target, config)
 }

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,29 +38,8 @@ 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);
-				}
-			};
+			forwardProps(this.baseElement, this, includeForwardProps);
 
 			syncAttrs(this.baseElement, this, {
 				excludeAttrs: excludeAttrsSync,

package/src/mixins/inputEventsDispatchingMixin.js

@@ -3,8 +3,6 @@ import { createDispatchEvent } from "../helpers/mixinsHelpers";
 export const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
   init() {
     this.#blockNativeEvents();
-    this.#handleFocusEventsDispatching();
-    this.#handleInputEventDispatching();
 
     super.init?.();
   }
@@ -18,29 +16,28 @@ export const inputEventsDispatchingMixin = (superclass) => class InputEventsDisp
     })
   }
 
-  #handleFocusEventsDispatching() {
+  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
-    this.addEventListener('focusout', (e) => {
-      if (e.isTrusted) {
+    inputs?.forEach(input => {
+      input?.addEventListener('focusout', (e) => {
         e.stopImmediatePropagation();
         timerId = setTimeout(() => {
           timerId = null
+
           createDispatchEvent.call(this, 'blur');
           createDispatchEvent.call(this, 'focusout', { bubbles: true });
         });
-      }
-    })
+      })
 
-    // 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
-    this.addEventListener('focusin', (e) => {
-      if (e.isTrusted) {
+      // 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(timerId)
         if (!timerId) {
@@ -48,13 +45,17 @@ export const inputEventsDispatchingMixin = (superclass) => class InputEventsDisp
           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() {
+  handleInputEventDispatching() {
     let previousRootComponentValue = this.value
 
     this.addEventListener('input', (e) => {
@@ -66,6 +67,5 @@ export const inputEventsDispatchingMixin = (superclass) => class InputEventsDisp
         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()