@descope/web-components-ui 1.0.114 → 1.0.116

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

@@ -8,16 +8,13 @@ import {
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { resetInputOverrides } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('email-field');
 
-let overrides = ``;
-
 export const EmailFieldClass = compose(
 	createStyleMixin({
-		mappings: {
-			...textFieldMappings
-		}
+		mappings: textFieldMappings
 	}),
 	draggableMixin,
 	proxyInputMixin,
@@ -26,49 +23,16 @@ export const EmailFieldClass = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides,
+		style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+				padding: calc(var(${EmailFieldClass.cssVarList.inputOutlineWidth}) + var(${EmailFieldClass.cssVarList.inputOutlineOffset}))
+			}
+			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
-
-overrides = `
-	:host {
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-email-field {
-		margin: 0;
-		width: 100%;
-		box-sizing: border-box;
-	}
-	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;
-	}
-	vaadin-email-field input:-webkit-autofill,
-	vaadin-email-field input:-webkit-autofill::first-line,
-	vaadin-email-field input:-webkit-autofill:hover,
-	vaadin-email-field input:-webkit-autofill:active,
-	vaadin-email-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-email-field[required]::part(required-indicator)::after {
-		content: "*";
-		color: var(${EmailFieldClass.cssVarList.color});
-	}
-	vaadin-email-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;

package/src/components/descope-link/LinkClass.js

@@ -57,13 +57,16 @@ const { anchor, text, host, wrapper } = selectors;
 export const LinkClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host,
+			hostWidth: { ...host, property: 'width' },
 			textAlign: wrapper,
-			color: [anchor, { ...text, property: TextClass.cssVarList.color }],
+			textColor: [
+				{ ...anchor, property: 'color' },
+				{ ...text, property: TextClass.cssVarList.textColor }
+			],
 			cursor: anchor,
-			borderBottomWidth: anchor,
-			borderBottomStyle: anchor,
-			borderBottomColor: anchor
+			textUnderlineWidth: { ...anchor, property: 'border-bottom-width' },
+			textUnderlineStyle: { ...anchor, property: 'border-bottom-style' },
+			textUnderlineColor: { ...anchor, property: 'border-bottom-color' }
 		},
 	}),
 	draggableMixin,

package/src/components/descope-loader-linear/LoaderLinearClass.js

@@ -32,7 +32,6 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
 				position: absolute;
 				left: 0;
 			}
-
 			:host > div {
 				width: 100%;
 			}
@@ -43,26 +42,31 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
 }
 
 const selectors = {
-	root: {},
 	after: { selector: '::after' },
 	host: { selector: () => ':host' }
 };
 
-const { root, after, host } = selectors;
+const { after, host } = selectors;
 
 export const LoaderLinearClass = compose(
 	createStyleMixin({
 		mappings: {
-			display: root,
-			width: host,
-			height: [root, after],
-			borderRadius: [root, after],
-			surfaceColor: [{ property: 'background-color' }],
-			barColor: [{ ...after, property: 'background-color' }],
+			hostDisplay: {},
+			hostWidth: { ...host, property: 'width' },
+			barHeight: [
+				{ property: 'height' },
+				{ ...after, property: 'height' }
+			],
+			barBorderRadius: [
+				{ property: 'border-radius' },
+				{ ...after, property: 'border-radius' }
+			],
+			barBackgroundColor: { property: 'background-color' },
+			barColor: { ...after, property: 'background-color' },
 			barWidth: { ...after, property: 'width' },
-			animationDuration: [root, after],
-			animationTimingFunction: [root, after],
-			animationIterationCount: [root, after]
+			animationDuration: [{}, after],
+			animationTimingFunction: [{}, after],
+			animationIterationCount: [{}, after]
 		}
 	}),
 	draggableMixin,

package/src/components/descope-loader-radial/LoaderRadialClass.js

@@ -35,17 +35,18 @@ class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':h
 export const LoaderRadialClass = compose(
 	createStyleMixin({
 		mappings: {
-			display: {},
-			width: {},
-			height: {},
-			spinnerWidth: { property: 'border-width' },
-			spinnerStyle: { property: 'border-style' },
-			spinnerRadius: { property: 'border-radius' },
-			spinnerTopColor: { property: 'border-top-color' },
-			spinnerBottomColor: { property: 'border-bottom-color' },
-			spinnerRightColor: { property: 'border-right-color' },
-			spinnerLeftColor: { property: 'border-left-color' },
-			color: {},
+			hostDisplay: { property: 'display' },
+			spinnerSize: [
+				{ property: 'width' },
+				{ property: 'height' }
+			],
+			spinnerBorderWidth: { property: 'border-width' },
+			spinnerBorderStyle: { property: 'border-style' },
+			spinnerBorderRadius: { property: 'border-radius' },
+			spinnerQuadrant1Color: { property: 'border-top-color' },
+			spinnerQuadrant2Color: { property: 'border-bottom-color' },
+			spinnerQuadrant3Color: { property: 'border-right-color' },
+			spinnerQuadrant4Color: { property: 'border-left-color' },
 			animationDuration: {},
 			animationTimingFunction: {},
 			animationIterationCount: {}

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

@@ -8,6 +8,7 @@ import {
 } from '../../mixins';
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
 import { PasswordFieldClass } from '../descope-password-field/PasswordFieldClass';
+import { resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('new-password');
 
@@ -53,9 +54,18 @@ const customMixin = (superclass) =>
 		}
 	};
 
-const { host, internalInputsWrapper } = {
+const {
+	host,
+	label,
+	internalInputsWrapper,
+	errorMessage,
+	helperText
+} = {
 	host: { selector: () => ':host' },
-	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
+	label: { selector: '::part(label)' },
+	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 }
 
 export const NewPasswordClass = compose(
@@ -68,9 +78,14 @@ export const NewPasswordClass = compose(
 					property: PasswordFieldClass.cssVarList.fontSize
 				}
 			],
-			componentWidth: { ...host, property: 'width' },
-			requiredContent: { ...host, property: 'content' },
-			inputsGap: { ...internalInputsWrapper, property: 'gap' },
+			fontFamily: [
+				label,
+				errorMessage,
+				helperText
+			],
+			hostWidth: { ...host, property: 'width' },
+			inputsRequiredIndicator: { ...host, property: 'content' },
+			spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
 		}
 	}),
 	draggableMixin,
@@ -80,53 +95,52 @@ export const NewPasswordClass = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides,
+		style: () => `
+		:host {
+			display: inline-block;
+			max-width: 100%;
+			min-width: 10em;
+			box-sizing: border-box;
+		}
+		${resetInputFieldDefaultWidth()}
+		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;
+			padding: 0;
+		}
+		vaadin-text-field::part(input-field)::after {
+			background: transparent;
+			opacity: 0;
+		}
+		descope-new-password-internal {
+			-webkit-mask-image: none;
+			min-height: 0;
+			width: 100%;
+			height: 100%;
+			padding: 0;
+		}
+		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;
+		},
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
-
-const overrides = `
-	:host {
-		--vaadin-field-default-width: auto;
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	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;
-		padding: 0;
-	}
-	vaadin-text-field::part(input-field)::after {
-		background: transparent;
-		opacity: 0;
-	}
-	descope-new-password-internal {
-		-webkit-mask-image: none;
-		min-height: 0;
-		width: 100%;
-		height: 100%;
-		padding: 0;
-	}
-	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;
-	}
-`;

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

@@ -117,7 +117,7 @@ class NewPasswordInternal extends BaseInputClass {
 			const styleTag = document.createElement('style');
 			styleTag.innerHTML = `
 				:host::part(required-indicator)::after {
-					content: var(${NewPasswordClass.cssVarList.requiredContent});
+					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
 				}
 				`;
 			input?.shadowRoot.appendChild(styleTag);

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

@@ -8,16 +8,13 @@ import {
 import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { resetInputOverrides } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('number-field');
 
-let overrides = ``;
-
 export const NumberFieldClass = compose(
 	createStyleMixin({
-		mappings: {
-			...textFieldMappings
-		}
+		mappings: textFieldMappings
 	}),
 	draggableMixin,
 	proxyInputMixin,
@@ -26,45 +23,16 @@ export const NumberFieldClass = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides,
+		style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${NumberFieldClass.cssVarList.inputOutlineOffset}));
+			}
+			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
-
-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) {
-		padding: 0;
-	}
-	vaadin-number-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-number-field input:-webkit-autofill,
-	vaadin-number-field input:-webkit-autofill::first-line,
-	vaadin-number-field input:-webkit-autofill:hover,
-	vaadin-number-field input:-webkit-autofill:active,
-	vaadin-number-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${NumberFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${NumberFieldClass.cssVarList.height}) var(${NumberFieldClass.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-number-field[required]::part(required-indicator)::after {
-		content: "*";
-		color: var(${NumberFieldClass.cssVarList.color});
-	}
-	vaadin-number-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;

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

@@ -5,11 +5,11 @@ import {
 	proxyInputMixin,
 	componentNameValidationMixin
 } from '../../mixins';
-import textFieldMappings from '../descope-text-field/textFieldMappings';
 import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass'
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { resetInputCursor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('passcode');
 
@@ -60,10 +60,15 @@ const customMixin = (superclass) =>
 		}
 	};
 
-const { borderStyle, borderWidth, ...restTextFieldMappings } =
-	textFieldMappings;
-
-const { digitField, label, requiredIndicator, internalWrapper, focusedDigitField } = {
+const {
+	host,
+	digitField,
+	label,
+	requiredIndicator,
+	internalWrapper,
+	focusedDigitField
+} = {
+	host: () => ':host',
 	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
 	digitField: { selector: () => TextFieldClass.componentName },
 	label: { selector: '::part(label)' },
@@ -76,22 +81,25 @@ const textVars = TextFieldClass.cssVarList
 export const PasscodeClass = compose(
 	createStyleMixin({
 		mappings: {
-			...restTextFieldMappings,
-			borderColor: { ...digitField, property: textVars.borderColor },
-			outlineColor: { ...digitField, property: textVars.outlineColor },
-			outlineWidth: [
-				{ ...digitField, property: textVars.outlineWidth },
-				// we want to leave enough space to the digits outline, 
-				// ideally, this would be part of the text field
-				{ ...internalWrapper, property: 'padding' }
+			hostWidth: { property: 'width' },
+			fontFamily: host,
+			labelTextColor: [
+				{ ...label, property: 'color' },
+				{ ...requiredIndicator, property: 'color' },
 			],
-			color: [restTextFieldMappings.color, label, requiredIndicator],
-			padding: { ...digitField, property: textVars.padding },
-			margin: { ...digitField, property: textVars.margin },
-			textAlign: { ...digitField, property: textVars.textAlign },
-			caretColor: { ...digitField, property: textVars.caretColor },
-			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.outlineColor }
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+			digitValueTextColor: {
+				selector: TextFieldClass.componentName,
+				property: textVars.inputValueTextColor
+			},
+			digitPadding: { ...digitField, property: textVars.inputPadding },
+			digitTextAlign: { ...digitField, property: textVars.inputTextAlign },
+			digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },
+			digitSpacing: { ...internalWrapper, property: 'gap' },
+			digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },
+			digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },
+
+			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor }
 		},
 	}),
 	draggableMixin,
@@ -104,11 +112,11 @@ export const PasscodeClass = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
 			:host {
-				--vaadin-field-default-width: auto;
 				display: inline-block;
 				max-width: 100%;
 				min-width: calc(var(--passcode-digits-count) * 2em);
 			}
+			${resetInputFieldDefaultWidth()}
 			:host::after {
 				background-color: transparent;
 			}
@@ -133,7 +141,7 @@ export const PasscodeClass = compose(
 
 			descope-passcode-internal descope-text-field {
 				min-width: 2em;
-				max-width: var(${textVars.height});
+				max-width: var(${textVars.inputHeight});
 			}
 
 			vaadin-text-field::part(input-field) {
@@ -157,16 +165,15 @@ export const PasscodeClass = compose(
 				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;
 			}
+
+			vaadin-text-field::part(input-field) {
+				box-shadow: none;
+			}
+
+			${resetInputCursor('vaadin-text-field')}
     	`,
 		excludeAttrsSync: ['tabindex'],
 		componentName

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

@@ -8,72 +8,70 @@ import {
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import passwordDraggableMixin from './passwordDraggableMixin';
+import { resetInputCursor } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('password-field');
 
 const {
 	host,
-	inputWrapper,
+	inputField,
 	inputElement,
 	inputElementPlaceholder,
-	revealButton,
 	revealButtonIcon,
-	revealButtonIconOutline,
 	label,
-	requiredIndicator
+	requiredIndicator,
+	errorMessage,
+	helperText
 } = {
 	host: { selector: () => ':host' },
-	inputWrapper: { selector: '::part(input-field)' },
+	inputField: { selector: '::part(input-field)' },
 	inputElement: { selector: '> input' },
 	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
-	revealButton: { selector: 'vaadin-password-field-button' },
 	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
-	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 }
 
 export const PasswordFieldClass = compose(
 	createStyleMixin({
 		mappings: {
-			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'
-				}
+			hostWidth: { ...host, property: 'width' },
+			fontSize: [
+				{ property: 'font-size' },
+				{ ...host, property: 'font-size' }
+			],
+			fontFamily: [
+				label,
+				inputField,
+				errorMessage,
+				helperText
 			],
+			inputHeight: { ...inputField, property: 'height' },
+			inputBackgroundColor: { ...inputField, property: 'background-color' },
+
+			inputBorderStyle: { ...inputField, property: 'border-style' },
+			inputBorderWidth: { ...inputField, property: 'border-width' },
+			inputBorderColor: { ...inputField, property: 'border-color' },
+			inputBorderRadius: { ...inputField, property: 'border-radius' },
+
+			inputOutlineColor: { ...inputField, property: 'outline-color' },
+			inputOutlineStyle: { ...inputField, property: 'outline-style' },
+			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+			inputOutlineWidth: { ...inputField, property: 'outline-width' },
 
 			labelTextColor: [
 				{ ...label, property: 'color' },
 				{ ...requiredIndicator, property: 'color' }
 			],
-			inputTextColor: [
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
+			inputValueTextColor: [
 				{ ...inputElement, property: 'color' },
 				{ ...revealButtonIcon, property: 'color' }
 			],
-			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
-			fontSize: [{}, host],
-			height: inputWrapper,
-			padding: inputWrapper,
-			pointerCursor: [
-				{ ...revealButton, property: 'cursor' },
-				{ ...label, property: 'cursor' },
-				{ ...requiredIndicator, property: 'cursor' }
-			],
-			outlineColor: inputWrapper,
-			outlineStyle: inputWrapper,
-			outlineWidth: [
-				inputWrapper,
-				// we need to make sure there is enough space for the outline
-				{ property: 'padding' }
-			],
-			backgroundColor: inputWrapper
+			inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 		}
 	}),
 	draggableMixin,
@@ -84,19 +82,25 @@ export const PasswordFieldClass = compose(
 	createProxy({
 		slots: ['suffix'],
 		wrappedEleName: 'vaadin-password-field',
-		style: `
+		style: () => `
 			:host {
 				display: inline-block;
 				min-width: 10em;
 				max-width: 100%;
+				box-sizing: border-box;				
+				padding: calc(var(${PasswordFieldClass.cssVarList.inputOutlineWidth}) + var(${PasswordFieldClass.cssVarList.inputOutlineOffset}));
 			}
 			vaadin-password-field {
 				width: 100%;
 				box-sizing: border-box;
+				padding: 0;
 			}
 			vaadin-password-field::part(input-field) {
 				padding: 0;
 			}
+			vaadin-password-field[focus-ring]::part(input-field) {
+				box-shadow: none;
+			}			
 			vaadin-password-field > input {
 				min-height: 0;
 				-webkit-mask-image: none;
@@ -109,13 +113,20 @@ export const PasswordFieldClass = compose(
 			}
 			vaadin-password-field::part(input-field)::after {
 				opacity: 0;
-			}	
-			vaadin-password-field[required]::part(required-indicator)::after {
-				content: "*";
 			}
+			vaadin-password-field-button {
+				cursor: pointer;
+			}
+
+			${resetInputCursor('vaadin-password-field')}
+
 			[readonly] vaadin-password-field-button {
 				pointer-events: none;
 			}
+
+			vaadin-password-field-button[focus-ring] {
+				box-shadow: 0 0 0 2px var(${PasswordFieldClass.cssVarList.inputOutlineColor});
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName