@descope/web-components-ui 1.0.114 → 1.0.116

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

@@ -10,6 +10,7 @@ import {
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
 import CountryCodes from './CountryCodes';
+import { resetInputCursor, resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
@@ -59,27 +60,32 @@ const customMixin = (superclass) =>
 
 const {
 	host,
-	inputWrapper,
-	countryCodeInput,
-	phoneInput,
 	label,
 	requiredIndicator,
-	separator
+	inputField,
+	countryCodeInput,
+	phoneInput,
+	separator,
+	errorMessage,
+	helperText
 } = {
 	host: { selector: () => ':host' },
-	inputWrapper: { selector: '::part(input-field)' },
-	phoneInput: { selector: () => 'descope-text-field' },
-	countryCodeInput: { selector: () => 'descope-combo-box' },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	separator: { selector: 'descope-phone-field-internal .separator' }
+	inputField: { selector: '::part(input-field)' },
+	phoneInput: { selector: () => 'descope-text-field' },
+	countryCodeInput: { selector: () => 'descope-combo-box' },
+	separator: { selector: 'descope-phone-field-internal .separator' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 export const PhoneFieldClass = compose(
 	createStyleMixin({
 		mappings: {
 			fontSize: [
-				host, inputWrapper,
+				{ ...host, property: 'font-size' },
+				{ ...inputField, property: 'font-size' },
 				{
 					selector: TextFieldClass.componentName,
 					property: TextFieldClass.cssVarList.fontSize
@@ -89,53 +95,62 @@ export const PhoneFieldClass = compose(
 					property: ComboBoxClass.cssVarList.fontSize
 				}
 			],
+			fontFamily: [
+				label,
+				errorMessage,
+				helperText
+			],
+			hostWidth: [
+				{ ...host, property: 'width' },
+				{ ...phoneInput, property: 'width' },
+				{ ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' }
+			],
 
-			componentWidth: { ...host, property: 'width' },
-
-			wrapperBorderStyle: [
-				{ ...inputWrapper, property: 'border-style' },
+			inputBorderStyle: [
+				{ ...inputField, property: 'border-style' },
 				{ ...separator, property: 'border-left-style' }
 			],
-			wrapperBorderWidth: [
-				{ ...inputWrapper, property: 'border-width' },
+			inputBorderWidth: [
+				{ ...inputField, property: 'border-width' },
 				{ ...separator, property: 'border-left-width' }
 			],
-			wrapperBorderColor: [
-				{ ...inputWrapper, property: 'border-color' },
+			inputBorderColor: [
+				{ ...inputField, property: 'border-color' },
 				{ ...separator, property: 'border-left-color' }
 			],
-			wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
+			inputBorderRadius: { ...inputField, property: 'border-radius' },
 
-			inputHeight: { ...inputWrapper, property: 'height' },
+			inputHeight: { ...inputField, property: 'height' },
 
-			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.width },
+			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },
 			countryCodeDropdownWidth: {
 				...countryCodeInput,
 				property: '--vaadin-combo-box-overlay-width'
 			},
-
 			phoneInputWidth: { ...phoneInput, property: 'width' },
 
-			color: [
-				label,
-				requiredIndicator,
-				{ ...phoneInput, property: textVars.color },
-				{ ...countryCodeInput, property: comboVars.color }
+			labelTextColor: [
+				{ ...label, property: 'color' },
+				{ ...requiredIndicator, property: 'color' },
 			],
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
-			placeholderColor: {
-				...phoneInput,
-				property: textVars.placeholderColor
-			},
+			inputValueTextColor: [
+				{ ...phoneInput, property: textVars.inputValueTextColor },
+				{ ...countryCodeInput, property: comboVars.inputValueTextColor }
+			],
+
+			inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },
 
 			overlayItemBackgroundColor: {
 				selector: 'descope-combo-box',
 				property: comboVars.overlayItemBackgroundColor
 			},
 
-			outlineStyle: inputWrapper,
-			outlineWidth: [inputWrapper, { property: 'padding' }],
-			outlineColor: inputWrapper,
+			inputOutlineStyle: { ...inputField, property: 'outline-style' },
+			inputOutlineColor: { ...inputField, property: 'outline-color' },
+			inputOutlineWidth: { ...inputField, property: 'outline-width' },
+			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 		},
 	}),
 	draggableMixin,
@@ -147,10 +162,11 @@ export const PhoneFieldClass = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => `
 			:host {
-				--vaadin-field-default-width: auto;
 				display: inline-block;
 				max-width: 100%;
 				min-width: 15em;
+				box-sizing: border-box;
+				padding: calc(var(${PhoneFieldClass.cssVarList.inputOutlineWidth}) + var(${PhoneFieldClass.cssVarList.inputOutlineOffset}))
 			}
 			div {
 				display: inline-flex;
@@ -159,6 +175,7 @@ export const PhoneFieldClass = compose(
 				width: 100%;
 				height: 100%;
 				box-sizing: border-box;
+				padding: 0;
 			}
 			vaadin-text-field[focus-ring]::part(input-field) {
 				box-shadow: none;
@@ -190,18 +207,18 @@ export const PhoneFieldClass = compose(
 			descope-combo-box {
 				flex-shrink: 0;
 				height: 100%;
-				${comboVars.borderWidth}: 0;
+				${comboVars.inputOutlineWidth}: 0;
+				${comboVars.inputOutlineOffset}: 0;
+				${comboVars.inputBorderWidth}: 0;
+				${comboVars.inputBorderRadius}: 0;
 			}
 			descope-text-field {
 				flex-grow: 1;
 				min-height: 0;
 				height: 100%;
-				${textVars.outlineWidth}: 0;
-				${textVars.borderWidth}: 0;
-				${textVars.borderRadius}: 0;
-			}
-			vaadin-text-field[required]::part(required-indicator)::after {
-				content: "*";
+				${textVars.inputOutlineWidth}: 0;
+				${textVars.inputBorderWidth}: 0;
+				${textVars.inputBorderRadius}: 0;
 			}
 			vaadin-text-field[readonly] > input:placeholder-shown {
 				opacity: 1;
@@ -209,6 +226,9 @@ export const PhoneFieldClass = compose(
 			vaadin-text-field::part(input-field)::after {
 				border: none;
 			}
+
+			${resetInputFieldDefaultWidth()}
+			${resetInputCursor('vaadin-text-field')}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName

package/src/components/descope-text/TextClass.js

@@ -31,20 +31,20 @@ class RawText extends createBaseClass({ componentName, baseSelector: ':host > sl
 export const TextClass = compose(
 	createStyleMixin({
 		mappings: {
+			hostWidth: { selector: () => ':host', property: 'width' },
+			fontSize: { property: 'font-size' },
+			textColor: { property: 'color' },
+			textLineHeight: { property: 'line-height' },
+			textLetterSpacing: { property: 'letter-spacing' },
+			textShadow: {},
+			textAlign: {},
+			textTransform: {},
 			fontFamily: {},
-			lineHeight: {},
 			fontStyle: {},
-			fontSize: {},
 			fontWeight: {},
-			width: { selector: () => ':host' },
-			color: {},
-			letterSpacing: {},
-			textShadow: {},
 			borderWidth: {},
 			borderStyle: {},
 			borderColor: {},
-			textTransform: {},
-			textAlign: {},
 		},
 	}),
 	draggableMixin,

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

@@ -7,49 +7,61 @@ import {
 } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { resetInputContainer, resetInputCursor, resetInputField, resetInputPlaceholder } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('text-area');
 
 const {
 	host,
+	label,
 	placeholder,
-	input,
+	inputField,
 	textArea,
-	label,
-	requiredIndicator
+	requiredIndicator,
+	helperText,
+	errorMessage
 } = {
 	host: { selector: () => ':host' },
-	textArea: { selector: '> textarea' },
 	label: { selector: '::part(label)' },
-	input: { selector: '::part(input-field)' },
 	placeholder: { selector: 'textarea:placeholder-shown' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	inputField: { selector: '::part(input-field)' },
+	textArea: { selector: '> textarea' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
-let overrides = ``;
-
 export const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
-			fontSize: [host, textArea],
-			resize: textArea,
-			color: textArea,
-			cursor: {},
-			labelColor: [
+			hostWidth: { ...host, property: 'width' },
+			fontSize: [
+				{ ...host, property: 'font-size' },
+				{ ...textArea, property: 'font-size' }
+			],
+			fontFamily: [
+				{ ...label, property: 'font-family' },
+				{ ...inputField, property: 'font-family' },
+				{ ...helperText, property: 'font-family' },
+				{ ...errorMessage, property: 'font-family' }
+			],
+			labelTextColor: [
 				{ ...label, property: 'color' },
 				{ ...requiredIndicator, property: 'color' }
 			],
-			placeholderColor: { ...placeholder, property: 'color' },
-			width: host,
-			backgroundColor: input,
-			borderWidth: input,
-			borderStyle: input,
-			borderColor: input,
-			borderRadius: input,
-			outlineWidth: [input, { property: 'padding' }],
-			outlineStyle: input,
-			outlineColor: input,
-			outlineOffset: input,
+			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+			inputBackgroundColor: { ...inputField, property: 'background-color' },
+			inputValueTextColor: { ...textArea, property: 'color' },
+			inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+			inputBorderWidth: { ...inputField, property: 'border-width' },
+			inputBorderStyle: { ...inputField, property: 'border-style' },
+			inputBorderColor: { ...inputField, property: 'border-color' },
+			inputBorderRadius: { ...inputField, property: 'border-radius' },
+			inputOutlineStyle: { ...inputField, property: 'outline-Style' },
+			inputOutlineColor: { ...inputField, property: 'outline-color' },
+			inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+			inputOutlineWidth: { ...inputField, property: 'outline-width' },
+			inputResizeType: { ...textArea, property: 'resize' },
 		}
 	}),
 	draggableMixin,
@@ -59,32 +71,22 @@ export const TextAreaClass = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-text-area',
-		style: () => overrides,
+		style: () => `
+			:host {
+				display: inline-block;
+				min-width: 10em;
+				max-width: 100%;
+				padding: calc(var(${TextAreaClass.cssVarList.inputOutlineWidth}) + var(${TextAreaClass.cssVarList.inputOutlineOffset}));
+			}
+
+			${resetInputContainer('vaadin-text-area')}
+			${resetInputField('vaadin-text-area')}
+			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
+			${resetInputCursor('vaadin-text-area')}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
 
-overrides = `
-	:host {
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-text-area {
-		margin: 0;
-		width: 100%;
-		box-sizing: border-box;
-	}
-	vaadin-text-area > label,
-	vaadin-text-area::part(input-field) {
-		padding: 0;
-	}
-	vaadin-text-area[required]::part(required-indicator)::after {
-		content: "*";
-	}
-	vaadin-text-area[disabled] > textarea:placeholder-shown,
-	vaadin-text-area[readonly] > textarea:placeholder-shown {
-		opacity: 1;
-	}
-`;
+

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

@@ -8,11 +8,10 @@ import {
 import textFieldMappings from './textFieldMappings';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { resetInputFieldDefaultWidth, resetInputOverrides } from '../../helpers/themeHelpers/resetHelpers';
 
 export const componentName = getComponentName('text-field');
 
-let overrides = ``;
-
 const observedAttrs = ['type'];
 
 const customMixin = (superclass) =>
@@ -47,58 +46,17 @@ export const TextFieldClass = compose(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
-		style: () => overrides,
+		style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+				min-width: 10em;
+				padding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${TextFieldClass.cssVarList.inputOutlineOffset}));
+			}
+			${resetInputFieldDefaultWidth()}
+			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName
 	})
 );
-
-overrides = `
-	:host {
-		display: inline-block;
-		--vaadin-field-default-width: auto;
-		max-width: 100%;
-		min-width: 10em;
-
-	}
-	vaadin-text-field {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-		box-sizing: border-box;
-	}
-
-	vaadin-text-field::part(input-field) {
-		overflow: hidden;
-		padding: 0;
-	}
-	vaadin-text-field[disabled] > input:placeholder-shown,
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-text-field input:-webkit-autofill,
-	vaadin-text-field input:-webkit-autofill::first-line,
-	vaadin-text-field input:-webkit-autofill:hover,
-	vaadin-text-field input:-webkit-autofill:active,
-	vaadin-text-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
-	}
-
-	vaadin-text-field > input {
-		-webkit-mask-image: none;
-		min-height: 0;
-	}
-
-	vaadin-text-field[required]::part(required-indicator)::after {
-		content: "*";
-		color: var(${TextFieldClass.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field)::after {
-		opacity: 0 !important;
-	}
-
-	vaadin-text-field::before {
-		height: unset;
-	}
-`;

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

@@ -1,47 +1,75 @@
-const selectors = {
-	label: '::part(label)',
-	inputWrapper: '::part(input-field)',
-	readOnlyInput: '[readonly]::part(input-field)::after',
-	placeholder: '> input:placeholder-shown',
-	host: () => ':host',
-	input: 'input'
+const {
+	host,
+	label,
+	placeholder,
+	requiredIndicator,
+	inputField,
+	input,
+	readOnlyInput,
+	helperText,
+	errorMessage
+} = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	placeholder: { selector: '> input:placeholder-shown' },
+	inputField: { selector: '::part(input-field)' },
+	input: { selector: 'input' },
+	readOnlyInput: { selector: '[readonly]::part(input-field)::after' },
+	helperText: { selector: '::part(helper-text)' },
+	errorMessage: { selector: '::part(error-message)' }
 };
 
 export default {
-	backgroundColor: { selector: selectors.inputWrapper },
-	labelTextColor: { selector: selectors.label, property: 'color' },
-	color: { selector: selectors.inputWrapper },
-	width: { selector: selectors.host },
-	borderColor: [
-		{ selector: selectors.inputWrapper },
-		{ selector: selectors.readOnlyInput }
+	// we apply font-size also on the host so we can set its width with em
+	fontSize: [
+		{ property: 'font-size' },
+		{ ...host, property: 'font-size' }
 	],
-	borderWidth: [
-		{ selector: selectors.inputWrapper },
-		{ selector: selectors.readOnlyInput }
+	fontFamily: [
+		{ ...label, property: 'font-family' },
+		{ ...inputField, property: 'font-family' },
+		{ ...helperText, property: 'font-family' },
+		{ ...errorMessage, property: 'font-family' }
 	],
-	borderStyle: [
-		{ selector: selectors.inputWrapper },
-		{ selector: selectors.readOnlyInput }
+
+	hostWidth: { ...host, property: 'width' },
+
+	inputBackgroundColor: { ...inputField, property: 'background-color' },
+
+	labelTextColor: [
+		{ ...label, property: 'color' },
+		{ ...requiredIndicator, property: 'color' }
 	],
-	borderRadius: { selector: selectors.inputWrapper },
-	boxShadow: { selector: selectors.inputWrapper },
 
-	// we apply font-size also on the host so we can set its width with em
-	fontSize: [{}, { selector: selectors.host }],
-
-	height: { selector: selectors.inputWrapper },
-	padding: { selector: selectors.inputWrapper },
-	margin: { selector: selectors.inputWrapper },
-	caretColor: { selector: selectors.input },
-	outlineColor: { selector: selectors.inputWrapper },
-	outlineStyle: { selector: selectors.inputWrapper },
-	outlineWidth: [
-		{ selector: selectors.inputWrapper },
-		// we need to make sure there is enough space for the outline
-		{ property: 'padding' }
+	inputValueTextColor: { ...inputField, property: 'color' },
+	inputCaretTextColor: { ...input, property: 'color' },
+
+	labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
+	inputBorderColor: [
+		{ ...inputField, property: 'border-color' },
+		{ ...readOnlyInput, property: 'border-color' }
 	],
-	outlineOffset: { selector: selectors.inputWrapper },
-	textAlign: { selector: selectors.input },
-	placeholderColor: { selector: selectors.placeholder, property: 'color' }
+	inputBorderWidth: [
+		{ ...inputField, property: 'border-width' },
+		{ ...readOnlyInput, property: 'border-width' }
+	],
+	inputBorderStyle: [
+		{ ...inputField, property: 'border-style' },
+		{ ...readOnlyInput, property: 'border-style' }
+	],
+	inputBorderRadius: { ...inputField, property: 'border-radius' },
+
+	inputHeight: { ...inputField, property: 'height' },
+	inputPadding: { ...inputField, property: 'padding' },
+
+	inputOutlineColor: { ...inputField, property: 'outline-color' },
+	inputOutlineStyle: { ...inputField, property: 'outline-style' },
+	inputOutlineWidth: { ...inputField, property: 'outline-width' },
+	inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+
+	inputTextAlign: { ...input, property: 'text-align' },
+
+	inputPlaceholderColor: { ...placeholder, property: 'color' }
 };

package/src/helpers/themeHelpers/index.js

@@ -45,14 +45,16 @@ export const getThemeVars = (theme, prefix) =>
 		set({}, path, getVarName(prefix ? [prefix, ...path] : path))
 	);
 
-export const globalsThemeToStyle = (theme, themeName = '') => `
-*[data-theme="${themeName}"] {
-	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-	(acc, entry) => (acc += `${entry.join(':')};\n`),
-	''
-)}
-}
-`;
+export const globalsThemeToStyle = (theme, themeName = '') => {
+	const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+		(acc, entry) => (acc += `${entry.join(':')};\n`),
+		''
+	);
+
+	if(!themeName) return style
+
+	return `*[data-theme="${themeName}"] {${style}}`
+};
 
 const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {

package/src/helpers/themeHelpers/resetHelpers.js

@@ -0,0 +1,76 @@
+export const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+
+    ${name}::before {
+		height: unset;
+	}
+
+    ${name} > input {
+		-webkit-mask-image: none;
+		min-height: 0;
+	}
+
+    ${name}::part(input-field)::after {
+		opacity: 0 !important;
+    }
+`;
+
+export const resetInputContainer = (name) => `
+    ${name} {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputField = (name) => `
+    ${name}::part(input-field) {
+        overflow: hidden;
+        padding: 0;
+        box-shadow: none;
+    }
+`;
+
+export const resetInputCursor = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+
+export const resetInputPlaceholder = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}    
+`;
+
+export const resetInputAutoFill = (name, cssVarList) => `
+    ${name} input:-webkit-autofill,
+    ${name} input:-webkit-autofill::first-line,
+    ${name} input:-webkit-autofill:hover,
+    ${name} input:-webkit-autofill:active,
+    ${name} input:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
+        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
+    } 
+`;
+
+export const resetInputFieldDefaultWidth = () => `
+    :host {
+        --vaadin-field-default-width: auto;
+    }
+`;
+
+export const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;

package/src/index.d.ts

@@ -4,7 +4,7 @@ export {
 	globalsThemeToStyle,
 	createComponentsTheme,
 	themeToStyle,
-	componentsThemeManager,
+	componentsThemeManager
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { defaultTheme, themeVars } from './theme';
@@ -45,5 +45,6 @@ export type Theme = {
 		link: Record<string, any>;
 		button: Record<string, any>;
 		text: Record<string, any>;
+		inputWrapper: Record<string, any>;
 	};
 };