@descope/web-components-ui 1.0.79 → 1.0.81

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/checkbox.js

@@ -1,10 +1,80 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import Checkbox from '../../components/descope-checkbox/Checkbox';
 
+const globalRefs = getThemeRefs(globals);
 const vars = Checkbox.cssVarList;
 
 const checkbox = {
+	[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
+
+	[vars.labelFontSize]: '12px',
+	[vars.labelFontWeight]: '400',
+	[vars.labelTextColor]: globalRefs.colors.surface.contrast,
 	[vars.cursor]: 'pointer',
-	[vars.width]: 'fit-content'
+
+	[vars.checkboxWidth]: 'calc(1em - 2px)',
+	[vars.checkboxHeight]: 'calc(1em - 2px)',
+	[vars.labelMargin]: 'calc(1em + 5px)',
+
+	size: {
+		xs: {
+			[vars.labelFontSize]: '12px',
+			[vars.labelLineHeight]: '1.1em',
+			[vars.checkmarkSize]: '18px',
+			[vars.checkboxRadius]: globalRefs.radius.sm,
+		},
+		sm: {
+			[vars.labelFontSize]: '14px',
+			[vars.labelLineHeight]: '1.2em',
+			[vars.checkmarkSize]: '22px',
+			[vars.checkboxRadius]: globalRefs.radius.sm,
+		},
+		md: {
+			[vars.labelFontSize]: '16px',
+			[vars.labelLineHeight]: '1.35em',
+			[vars.checkmarkSize]: '26px',
+			[vars.checkboxRadius]: globalRefs.radius.sm,
+		},
+		lg: {
+			[vars.labelFontSize]: '20px',
+			[vars.labelLineHeight]: '1.5em',
+			[vars.checkmarkSize]: '34px',
+			[vars.checkboxRadius]: globalRefs.radius.sm,
+		},
+		xl: {
+			[vars.labelFontSize]: '20px',
+			[vars.labelLineHeight]: '1.75em',
+			[vars.checkmarkSize]: '38px',
+			[vars.checkboxRadius]: globalRefs.radius.sm,
+		}
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%',
+	},
+
+	_checked: {
+		[vars.checkboxBackgroundColor]: globalRefs.colors.primary.main,
+		[vars.checkmarkTextColor]: globalRefs.colors.primary.contrast,
+	},
+
+	_disabled: {
+		[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
+	},
+
+	_focusRing: {
+		[vars.checkboxOutlineWidth]: '2px',
+		[vars.checkboxOutlineOffset]: '1px',
+		[vars.checkboxOutlineColor]: globalRefs.colors.primary.main,
+		[vars.checkboxOutlineStyle]: 'solid'
+	},
+
+	_invalid: {
+		[vars.checkboxOutlineColor]: globalRefs.colors.error.main,
+		[vars.labelTextColor]: globalRefs.colors.error.main
+	},
+
 };
 
 export default checkbox;

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;

package/src/theme/components/switchToggle.js

@@ -2,9 +2,9 @@ import SwitchToggle from '../../components/descope-switch-toggle/SwitchToggle';
 
 const vars = SwitchToggle.cssVarList;
 
-const swtichToggle = {
-	[vars.width]: '70px',
-	[vars.cursor]: [{}, { selector: '> label' }]
+const switchToggle = {
+    [vars.width]: '70px',
+    [vars.cursor]: [{}, { selector: '> label' }]
 };
 
-export default swtichToggle;
+export default switchToggle;