@descope/web-components-ui 1.0.102 → 1.0.104

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,8 @@ const customMixin = (superclass) =>
 					'label',
 					'has-confirm',
 					'invalid',
+					'readonly',
+					'draggable'
 				]
 			});
 		}
@@ -58,17 +60,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 +89,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 +110,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,9 @@ const commonAttrs = [
 	'full-width',
 	'maxlength',
 	'invalid',
+	'readonly',
+	'draggable'
+
 ];
 
 const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
@@ -80,7 +83,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

@@ -18,27 +18,37 @@ const {
 	inputElementPlaceholder,
 	revealButton,
 	revealButtonIcon,
+	revealButtonIconOutline,
 	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' },
+	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
+	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' },
 			wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
+
+			revealButtonOutlineBoxShadow: [
+				{
+					...revealButtonIconOutline,
+					property: 'box-shadow'
+				}
+			],
+
 			labelTextColor: [
 				{ ...label, property: 'color' },
 				{ ...requiredIndicator, property: 'color' }
@@ -56,10 +66,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 +86,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-password-field/passwordDraggableMixin.js

@@ -10,11 +10,12 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
 		this.addEventListener('mousedown', (e) => {
 			if (this.isDraggable & this.isReadOnly) {
 				const inputEle = this.baseElement.querySelector('input');
-
 				const prevType = inputEle.getAttribute('type')
+
 				inputEle.setAttribute('type', 'text');
+				setTimeout(() => inputEle.focus());
 
-				const onComplete = () => {
+				const onComplete = (e) => {
 					inputEle.setAttribute('type', prevType)
 
 					e.target.removeEventListener('mouseup', onComplete)

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