@descope/web-components-ui 1.0.79 → 1.0.80

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,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

@@ -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/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/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()

package/src/mixins/proxyInputMixin.js

@@ -64,21 +64,6 @@ export const proxyInputMixin = (superclass) =>
 			return this.inputElement.validity
 		}
 
-		reportValidityOnInternalInput() {
-			setTimeout(() => {
-				this.inputElement.focus();
-				this.inputElement.reportValidity()
-			})
-		}
-
-		// we want reportValidity to behave like form submission
-		reportValidity() {
-			if (!this.checkValidity()) {
-				this.setAttribute('invalid', 'true');
-				this.reportValidityOnInternalInput();
-			}
-		}
-
 		handleInternalInputErrorMessage() {
 			if (!this.inputElement.checkValidity()) {
 				this.inputElement.setCustomValidity(this.validationMessage)
@@ -120,30 +105,15 @@ export const proxyInputMixin = (superclass) =>
 				}
 			})
 
-			this.addEventListener('focus', (e) => {
-				// when clicking on the form submit button and the input is invalid, we want it to appear as invalid
-				// this is a best effort, we cannot identify it for sure without listening to the form submission event
-				// this will also be triggered when the focus is moving from the submit button to the input by pressing TAB key
-				if (e.relatedTarget?.form && e.relatedTarget?.form === this.form && e.relatedTarget?.nodeName === 'BUTTON') {
-					if (!this.checkValidity()) {
-						this.setAttribute('invalid', 'true');
-					}
-
-					if (this.hasAttribute('invalid')) {
-						this.reportValidityOnInternalInput()
-					}
+
+			this.addEventListener('invalid', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true');
 				}
+				this.#handleErrorMessage()
 			})
 
-			this.addEventListener('invalid', this.#handleErrorMessage)
-
-			this.handleInternalInputErrorMessage()
-
-			// this is needed in order to make sure the form input validation is working
-			// we do not want it to happen when the component is nested
-			if (!this.hasAttribute('tabindex') && this.getRootNode() === document) {
-				this.setAttribute('tabindex', 0);
-			}
+			this.handleInternalInputErrorMessage();
 
 			// sync properties
 			propertyObserver(this, this.inputElement, 'value');

package/src/theme/components/index.js

@@ -16,6 +16,7 @@ import { loaderRadial, loaderLinear } from './loader';
 import comboBox from './comboBox';
 import image from './image';
 import phoneField from './phoneField';
+import newPassword from './newPassword';
 
 export default {
 	button,
@@ -36,5 +37,6 @@ export default {
 	loaderLinear,
 	comboBox,
 	image,
-	phoneField
+	phoneField,
+	newPassword,
 };

package/src/theme/components/newPassword.js

@@ -0,0 +1,48 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import NewPassword from '../../components/descope-new-password/NewPassword';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = NewPassword.cssVarList;
+
+const newPassword = {
+	_required: {
+		[vars.requiredContent]: "'*'",
+	},
+
+	[vars.inputLabelTextColor]: globalRefs.colors.surface.contrast,
+	[vars.inputTextColor]: globalRefs.colors.surface.contrast,
+	[vars.placeholderTextColor]: globalRefs.colors.surface.main,
+	[vars.inputsGap]: '1em',
+
+	size: {
+		xs: {
+			[vars.fieldsMargin]: '0',
+		},
+		sm: {
+			[vars.fieldsMargin]: '0',
+		},
+		md: {
+			[vars.fieldsMargin]: '0.5em',
+		},
+		lg: {
+			[vars.fieldsMargin]: '1em',
+		},
+		xl: {
+			[vars.fieldsMargin]: '2em',
+		},
+	},
+
+	_fullWidth: {
+		[vars.componentWidth]: '100%'
+	},
+
+	_invalid: {
+		[vars.inputLabelTextColor]: globalRefs.colors.error.main,
+		[vars.inputTextColor]: globalRefs.colors.error.main,
+		[vars.placeholderTextColor]: globalRefs.colors.error.light,
+	}
+};
+
+export default newPassword;

package/src/theme/components/passwordField.js

@@ -1,11 +1,63 @@
 import PasswordField from '../../components/descope-password-field/PasswordField';
-import { textField } from './textField';
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
 
 const vars = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars),
-	[vars.revealCursor]: 'pointer'
+	[vars.wrapperBorderStyle]: 'solid',
+	[vars.wrapperBorderWidth]: '1px',
+	[vars.wrapperBorderColor]: 'transparent',
+	[vars.wrapperBorderRadius]: globalRefs.radius.sm,
+
+	[vars.labelTextColor]: globalRefs.colors.surface.contrast,
+	[vars.inputTextColor]: globalRefs.colors.surface.contrast,
+	[vars.placeholderTextColor]: globalRefs.colors.surface.main,
+
+	[vars.pointerCursor]: 'pointer',
+
+	[vars.padding]: `0`,
+
+	size: {
+		xs: {
+			[vars.height]: '14px',
+			[vars.fontSize]: '8px',
+		},
+		sm: {
+			[vars.height]: '20px',
+			[vars.fontSize]: '10px',
+		},
+		md: {
+			[vars.height]: '30px',
+			[vars.fontSize]: '14px',
+		},
+		lg: {
+			[vars.height]: '40px',
+			[vars.fontSize]: '20px',
+		},
+		xl: {
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+		}
+	},
+
+	_bordered: {
+		[vars.padding]: `0 0.5em`,
+		[vars.wrapperBorderColor]: globalRefs.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%'
+	},
+
+	_invalid: {
+		[vars.labelTextColor]: globalRefs.colors.error.main,
+		[vars.inputTextColor]: globalRefs.colors.error.main,
+		[vars.placeholderTextColor]: globalRefs.colors.error.light,
+		[vars.wrapperBorderColor]: globalRefs.colors.error.main
+	},
 };
 
 export default passwordField;