@descope/web-components-ui 1.0.101 → 1.0.103

package/src/components/descope-email-field/EmailField.js

@@ -35,6 +35,8 @@ const EmailField = compose(
 overrides = `
 	:host {
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
 	vaadin-email-field {
 		margin: 0;
@@ -44,8 +46,12 @@ overrides = `
 	vaadin-email-field::before {
 		height: 0;
 	}
+	vaadin-email-field > input {
+		-webkit-mask-image: none;
+	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-email-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -58,14 +64,6 @@ overrides = `
 		-webkit-text-fill-color: var(${EmailField.cssVarList.color});
 		box-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;
 	}
-	vaadin-email-field > label,
-	vaadin-email-field::part(input-field) {
-		cursor: pointer;
-		color: var(${EmailField.cssVarList.color});
-	}
-	vaadin-email-field::part(input-field):focus {
-		cursor: text;
-	}
 	vaadin-email-field[required]::part(required-indicator)::after {
 		content: "*";
 		color: var(${EmailField.cssVarList.color});

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

@@ -7,7 +7,7 @@ import {
 	createProxy,
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
-import PasswordField from "../descope-password-field/PasswordField";
+import PasswordField from '../descope-password-field/PasswordField';
 
 export const componentName = getComponentName('new-password');
 
@@ -46,6 +46,7 @@ const customMixin = (superclass) =>
 					'label',
 					'has-confirm',
 					'invalid',
+					'readonly'
 				]
 			});
 		}
@@ -58,17 +59,16 @@ const { host, internalInputsWrapper } = {
 const NewPassword = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [
+				host,
+				{
+					selector: PasswordField.componentName,
+					property: PasswordField.cssVarList.fontSize
+				}
+			],
 			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' }
+			inputsGap: { ...internalInputsWrapper, property: 'gap' },
 		}
 	}),
 	draggableMixin,
@@ -88,6 +88,8 @@ const overrides = `
 	:host {
 		--vaadin-field-default-width: auto;
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
 	vaadin-text-field {
 		padding: 0;
@@ -107,16 +109,16 @@ const overrides = `
 	}
 	descope-new-password-internal {
 		-webkit-mask-image: none;
-		padding: 0;
 		min-height: 0;
 		width: 100%;
-		height: 100%;		
+		height: 100%;
+		padding: 0;
 	}
 	descope-new-password-internal > .wrapper {
 		width: 100%;
 		height: 100%;
 		display: flex;
-    flex-direction: column;
+   		flex-direction: column;
 	}
 	descope-password-field {
 		display: block;

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

@@ -17,6 +17,7 @@ const commonAttrs = [
 	'full-width',
 	'maxlength',
 	'invalid',
+	'readonly'
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -80,7 +81,7 @@ class NewPasswordInternal extends BaseInputClass {
 			}
 		});
 
-		super.init();
+		super.init?.();
 		this.renderInputs(this.hasConfirm);
 	}
 

package/src/components/descope-number-field/NumberField.js

@@ -35,13 +35,19 @@ const NumberField = compose(
 overrides = `
 	:host {
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
 	vaadin-number-field {
 		margin: 0;
 		padding: 0;
+		width: 100%;
+	}
+	vaadin-number-field > input {
+		-webkit-mask-image: none;
 	}
 	vaadin-number-field::part(input-field) {
-		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-number-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -54,16 +60,7 @@ overrides = `
 		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
 		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
 	}
-	vaadin-number-field > label,
-	vaadin-number-field::part(input-field) {
-		cursor: pointer;
-		color: var(${NumberField.cssVarList.color});
-	}
-	vaadin-number-field::part(input-field):focus {
-		cursor: text;
-	}
 	vaadin-number-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 		color: var(${NumberField.cssVarList.color});
 	}

package/src/components/descope-passcode/Passcode.js

@@ -13,8 +13,16 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('passcode');
 
+const observedAttributes = [
+	'digits'
+];
+
 const customMixin = (superclass) =>
 	class PasscodeClass extends superclass {
+		static get observedAttributes() {
+			return observedAttributes.concat(superclass.observedAttributes || []);
+		}
+
 		constructor() {
 			super();
 		}
@@ -42,6 +50,14 @@ const customMixin = (superclass) =>
 
 			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] })
 		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+			if (attrName === 'digits') {
+				this.style.setProperty('--passcode-digits-count', newValue);
+			}
+		}
 	};
 
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
@@ -50,7 +66,7 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
 const { digitField, label, requiredIndicator, internalWrapper, focusedDigitField } = {
 	focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
 	digitField: { selector: () => TextField.componentName },
-	label: { selector: '> label' },
+	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
 	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
 }
@@ -75,10 +91,7 @@ const Passcode = compose(
 			textAlign: { ...digitField, property: textVars.textAlign },
 			caretColor: { ...digitField, property: textVars.caretColor },
 			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedDigitFieldBorderColor: [
-				{ ...focusedDigitField, property: textVars.borderColor },
-				{ ...focusedDigitField, property: textVars.outlineColor }
-			]
+			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.outlineColor }
 		},
 	}),
 	draggableMixin,
@@ -90,68 +103,71 @@ const Passcode = compose(
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
-    :host {
-      --vaadin-field-default-width: auto;
-			display: inline-block;
-    }
-	:host::after {
-		background-color: transparent;
-	}
-	:host::part(input-field)::after {
-		background-color: transparent;
-	}
-
-    descope-passcode-internal {
-		-webkit-mask-image: none;
-		padding: 0;
-		width: 100%;
-		height: 100%;
-		min-height: initial;
-    }
-
-	descope-passcode-internal .wrapper {
-		box-sizing: border-box;
-		min-height: initial;
-		height: 100%;
-		justify-content: center;
-    }
-
-	descope-passcode-internal descope-text-field {
-		width: var(${textVars.height})			
-	}
-
-    vaadin-text-field::part(input-field) {
-		background-color: transparent;
-		padding: 0;
-		overflow: hidden;
-		-webkit-mask-image: none;
-    }
-
-	vaadin-text-field {
-		margin: 0;
-		padding: 0;
-		width: 100%
-	}
-
-	vaadin-text-field::before {
-		height: 0;
-	}
-
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
-
-	vaadin-text-field[required]::part(required-indicator)::after {
-		content: "*";
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-    `,
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+				max-width: 100%;
+				min-width: calc(var(--passcode-digits-count) * 2em);
+			}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
+
+			descope-passcode-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				min-height: initial;
+			}
+
+			descope-passcode-internal .wrapper {
+				box-sizing: border-box;
+				min-height: initial;
+				height: 100%;
+				justify-content: space-between;
+			}
+
+			descope-passcode-internal descope-text-field {
+				min-width: 2em;
+				max-width: var(${textVars.height});
+			}
+
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
+
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%
+			}
+
+			vaadin-text-field::before {
+				height: 0;
+			}
+
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+
+			vaadin-text-field::part(input-field):focus {
+				cursor: text;
+			}
+
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+    	`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})

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

@@ -1,6 +1,5 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
-import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
 import { getSanitizedCharacters, focusElement } from './helpers';
 
 export const componentName = getComponentName('passcode-internal');
@@ -28,9 +27,6 @@ class PasscodeInternal extends BaseInputClass {
 		return componentName;
 	}
 
-	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
-	#dispatchFocus = createDispatchEvent.bind(this, 'focus')
-
 	constructor() {
 		super();
 
@@ -53,7 +49,8 @@ class PasscodeInternal extends BaseInputClass {
 		<descope-text-field
 			data-id=${idx}
 			type="tel"
-			autocomplete="off"
+			autocomplete="one-time-code"
+			inputMode="numeric"
 		></descope-text-field>
 	`)
 
@@ -108,8 +105,7 @@ class PasscodeInternal extends BaseInputClass {
 
 		super.init?.();
 
-		this.renderInputs()
-
+		this.renderInputs();
 	}
 
 	getInputIdx(inputEle) {

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

@@ -21,20 +21,20 @@ const {
 	label,
 	requiredIndicator
 } = {
-	host: () => ':host',
+	host: { selector: () => ':host' },
 	inputWrapper: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
 	revealButton: { selector: 'vaadin-password-field-button' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
-	label: { selector: '> label' },
+	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
 }
 
 const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
-			width: { selector: host },
+			width: host,
 			wrapperBorderStyle: { ...inputWrapper, property: 'border-style' },
 			wrapperBorderWidth: { ...inputWrapper, property: 'border-width' },
 			wrapperBorderColor: { ...inputWrapper, property: 'border-color' },
@@ -56,10 +56,10 @@ const PasswordField = compose(
 				{ ...label, property: 'cursor' },
 				{ ...requiredIndicator, property: 'cursor' }
 			],
-			outlineColor: { ...inputWrapper },
-			outlineStyle: { ...inputWrapper },
+			outlineColor: inputWrapper,
+			outlineStyle: inputWrapper,
 			outlineWidth: [
-				{ ...inputWrapper },
+				inputWrapper,
 				// we need to make sure there is enough space for the outline
 				{ property: 'padding' }
 			],
@@ -76,32 +76,36 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: `
 			:host {
-				display: inline-flex;
+				display: inline-block;
+				min-width: 10em;
+				max-width: 100%;
 			}
 			vaadin-password-field {
 				width: 100%;
+				box-sizing: border-box;
 			}
 			vaadin-password-field::part(input-field) {
 				padding: 0;
 			}
 			vaadin-password-field > input {
 				min-height: 0;
+				-webkit-mask-image: none;
 			}
-
 			vaadin-password-field[readonly] > input:placeholder-shown {
 				opacity: 1;
 			}
-
-			vaadin-password-field::part(input-field)::after {
-				opacity: 0;
-			}	
 			vaadin-password-field::before {
 				height: initial;
 			}
-
+			vaadin-password-field::part(input-field)::after {
+				opacity: 0;
+			}	
 			vaadin-password-field[required]::part(required-indicator)::after {
 				content: "*";
 			}
+			[readonly] vaadin-password-field-button {
+				pointer-events: none;
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName

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

@@ -78,6 +78,18 @@ const {
 const PhoneField = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [
+				host, inputWrapper,
+				{
+					selector: TextField.componentName,
+					property: TextField.cssVarList.fontSize
+				},
+				{
+					selector: ComboBox.componentName,
+					property: ComboBox.cssVarList.fontSize
+				}
+			],
+
 			componentWidth: { ...host, property: 'width' },
 
 			wrapperBorderStyle: [
@@ -137,6 +149,8 @@ const PhoneField = compose(
 			:host {
 				--vaadin-field-default-width: auto;
 				display: inline-block;
+				max-width: 100%;
+				min-width: 15em;
 			}
 			div {
 				display: inline-flex;
@@ -163,7 +177,7 @@ const PhoneField = compose(
 				padding: 0;
 				min-height: 0;
 				width: 100%;
-				height: 100%;	
+				height: 100%;
 			}
 			descope-phone-field-internal > div {
 				width: 100%;

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

@@ -102,7 +102,7 @@ class PhoneFieldInternal extends BaseInputClass {
 				this.inputs[0].focus()
 		})
 
-		super.init();
+		super.init?.();
 		this.initInputs();
 		this.setComboBoxDescriptor();
 	}
@@ -115,7 +115,10 @@ class PhoneFieldInternal extends BaseInputClass {
 			// Vaadin resets the input's value. We use setTimeout in order to make sure this happens
 			// after the reset.
 			if (countryData) {
-				setTimeout(() => this.countryCodeInput.value = countryData);
+				setTimeout(() => {
+					this.countryCodeInput.selectedItem = this.countryCodeInput.items.find(node => node['data-id'] === countryCode);
+				});
+
 			}
 		}
 	}

package/src/components/descope-text-area/TextArea.js

@@ -31,6 +31,7 @@ let overrides = ``;
 const TextArea = compose(
 	createStyleMixin({
 		mappings: {
+			fontSize: [host, textArea],
 			resize: textArea,
 			color: textArea,
 			cursor: {},
@@ -45,10 +46,10 @@ const TextArea = compose(
 			borderStyle: input,
 			borderColor: input,
 			borderRadius: input,
-			outlineWidth: input,
+			outlineWidth: [input, { property: 'padding' }],
 			outlineStyle: input,
 			outlineColor: input,
-			outlineOffset: [input, { property: 'padding' }],
+			outlineOffset: input,
 		}
 	}),
 	draggableMixin,
@@ -67,8 +68,9 @@ const TextArea = compose(
 overrides = `
 	:host {
 		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
 	}
-
 	vaadin-text-area {
 		margin: 0;
 		width: 100%;
@@ -76,10 +78,7 @@ overrides = `
 	}
 	vaadin-text-area > label,
 	vaadin-text-area::part(input-field) {
-		cursor: pointer;
-	}
-	vaadin-text-area[focused]::part(input-field) {
-		cursor: text;
+		padding: 0;
 	}
 	vaadin-text-area[required]::part(required-indicator)::after {
 		content: "*";

package/src/components/descope-text-field/TextField.js

@@ -57,10 +57,12 @@ overrides = `
 	:host {
 		display: inline-block;
 		--vaadin-field-default-width: auto;
+		max-width: 100%;
+		min-width: 10em;
+
 	}
 	vaadin-text-field {
 		margin: 0;
-		padding: 0;
 		width: 100%;
 		height: 100%;
 		box-sizing: border-box;
@@ -83,18 +85,11 @@ overrides = `
 		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
 	}
 
-	vaadin-text-field input {
+	vaadin-text-field > input {
 		-webkit-mask-image: none;
 		min-height: 0;
 	}
 
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		color: var(${TextField.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
 	vaadin-text-field[required]::part(required-indicator)::after {
 		content: "*";
 		color: var(${TextField.cssVarList.color});
@@ -103,7 +98,6 @@ overrides = `
 		opacity: 0 !important;
 	}
 
-
 	vaadin-text-field::before {
 		height: unset;
 	}

package/src/components/descope-text-field/textFieldMappings.js

@@ -9,6 +9,7 @@ const selectors = {
 
 export default {
 	backgroundColor: { selector: selectors.inputWrapper },
+	labelTextColor: { selector: selectors.label, property: 'color' },
 	color: { selector: selectors.inputWrapper },
 	width: { selector: selectors.host },
 	borderColor: [

package/src/helpers/themeHelpers/index.js

@@ -96,7 +96,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 			[componentName]: {
 				[themeName]: {
 					[selector]: {
-						[property]: val
+						[property]: getCssVarValue(val)
 					}
 				}
 			}

package/src/mixins/createStyleMixin/index.js

@@ -88,7 +88,10 @@ export const createStyleMixin =
 				);
 
 				if (value) style?.setProperty(varName, value);
-				else style?.removeProperty(varName);
+				else { 
+					style?.removeProperty(varName);
+					this.removeAttribute(attrName)
+				}
 			}
 
 			#updateOverridesStyle(attrs = []) {

package/src/mixins/inputValidationMixin.js

@@ -46,20 +46,29 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
   }
 
   getErrorMessage(flags) {
+    const {
+      valueMissing,
+      patternMismatch,
+      typeMismatch,
+      stepMismatch,
+      tooShort,
+      tooLong,
+      customError
+    } = flags;
     switch (true) {
-      case flags.valueMissing:
+      case valueMissing:
         return this.getAttribute(errorAttributes.valueMissing) ||
           this.defaultErrorMsgValueMissing
-      case flags.patternMismatch || flags.typeMismatch:
+      case patternMismatch || typeMismatch || stepMismatch:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
-      case flags.tooShort:
+      case tooShort:
         return this.getAttribute(errorAttributes.tooShort) ||
           this.defaultErrorMsgTooShort
-      case flags.tooLong:
+      case tooLong:
         return this.getAttribute(errorAttributes.tooLong) ||
           this.defaultErrorMsgTooLong
-      case flags.customError:
+      case customError:
         return this.validationMessage
       default:
         return ''
@@ -91,7 +100,7 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
     return this.#internals.validity
   }
 
-  get validationTarget () {
+  get validationTarget() {
     return this.inputElement
   }