@descope/web-components-ui 1.0.113 → 1.0.115

package/src/index.d.ts

@@ -0,0 +1,50 @@
+declare module '@descope/web-components-ui';
+
+export {
+	globalsThemeToStyle,
+	createComponentsTheme,
+	themeToStyle,
+	componentsThemeManager
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
+export { defaultTheme, themeVars } from './theme';
+
+export { ButtonClass } from './components/descope-button';
+export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
+export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';
+export { LoaderLinearClass } from './components/descope-loader-linear';
+export { LoaderRadialClass } from './components/descope-loader-radial';
+export { ContainerClass } from './components/descope-container';
+export { DividerClass } from './components/descope-divider';
+export { EmailFieldClass } from './components/descope-email-field';
+export { LinkClass } from './components/descope-link';
+export { LogoClass } from './components/descope-logo';
+export { NumberFieldClass } from './components/descope-number-field';
+export { PasscodeClass } from './components/descope-passcode';
+export { PasswordFieldClass } from './components/descope-password-field';
+export { TextClass } from './components/descope-text';
+export { TextAreaClass } from './components/descope-text-area';
+export { TextFieldClass } from './components/descope-text-field';
+export { ImageClass } from './components/descope-image';
+export { PhoneFieldClass } from './components/descope-phone-field';
+export { NewPasswordClass } from './components/descope-new-password';
+
+export type Theme = {
+	globals: {
+		colors: Record<string, string>;
+		fonts: Record<string, any>;
+		typography: Record<string, any>;
+		shadow: Record<string, string>;
+		spacing: Record<string, string>;
+	};
+	components: {
+		button: Record<string, any>;
+		textField: Record<string, any>;
+		logo: Record<string, any>;
+		container: Record<string, any>;
+		link: Record<string, any>;
+		button: Record<string, any>;
+		text: Record<string, any>;
+		inputWrapper: Record<string, any>;
+	};
+};

package/src/index.js

@@ -26,4 +26,4 @@ export {
 	componentsThemeManager
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
-export { default as defaultTheme } from './theme';
+export { defaultTheme, themeVars } from './theme';

package/src/mixins/createStyleMixin/index.js

@@ -6,14 +6,15 @@ import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st'
 
-
 export const createStyleMixin =
-	({ mappings = {} }) => (superclass) =>
-		class CustomStyleMixinClass extends superclass {
+	({ mappings = {}, componentNameOverride = '' }) => (superclass) => {
+		const componentName = componentNameOverride || superclass.componentName;
+
+		return class CustomStyleMixinClass extends superclass {
 			static get cssVarList() {
 				return {
 					...superclass.cssVarList,
-					...createCssVarsList(superclass.componentName, {
+					...createCssVarsList(componentName, {
 						...mappings,
 					})
 				};
@@ -52,30 +53,32 @@ export const createStyleMixin =
 				this.#createOverridesStyle();
 			}
 
-			get componentTheme() {
-				return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+			get #componentTheme() {
+				return componentsThemeManager.currentTheme?.[componentName] || ''
 			}
 
 			#onComponentThemeChange() {
-				this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection]
+				this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection]
 			}
 
 			#createComponentTheme() {
 				this.#themeStyleEle = document.createElement('style');
-				this.#themeStyleEle.id = 'style-mixin-theme';
+				this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
 				this.#rootElement.prepend(this.#themeStyleEle);
 				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this))
 				this.#onComponentThemeChange()
 			}
 
 			#createOverridesStyle() {
-				this.#overrideStyleEle = document.createElement('style');
-				this.#overrideStyleEle.id = 'style-mixin-overrides';
+				if (this.#styleAttributes.length) {
+					this.#overrideStyleEle = document.createElement('style');
+					this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
 
-				const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+					const classSpecifier = createClassSelectorSpecifier(componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
 
-				this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-				this.#rootElement.append(this.#overrideStyleEle);
+					this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+					this.#rootElement.append(this.#overrideStyleEle);
+				}
 			}
 
 			#setAttrOverride(attrName, value) {
@@ -83,37 +86,44 @@ export const createStyleMixin =
 				if (!style) return;
 
 				const varName = getCssVarName(
-					superclass.componentName,
+					componentName,
 					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
 				);
 
 				if (value) style?.setProperty(varName, value);
-				else { 
+				else {
 					style?.removeProperty(varName);
 					this.removeAttribute(attrName)
 				}
 			}
 
 			#updateOverridesStyle(attrs = []) {
+				let shouldUpdate = false;
+
 				for (const attr of attrs) {
 					if (this.#styleAttributes.includes(attr)) {
 						this.#setAttrOverride(attr, this.getAttribute(attr));
+						shouldUpdate = true;
 					}
 				}
 
-				// we are rewriting the style back to the style tag
-				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
+				if (shouldUpdate) {
+					// we are rewriting the style back to the style tag
+					this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText
+				}
 			}
 
 			#createMappingStyle() {
-				const themeStyle = document.createElement('style');
-				themeStyle.id = 'style-mixin-mappings'
-				themeStyle.innerHTML = createStyle(
-					kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
-					this.#baseSelector,
-					mappings
-				);
-				this.#rootElement.prepend(themeStyle);
+				if (Object.keys(mappings).length) {
+					const themeStyle = document.createElement('style');
+					themeStyle.id = `style-mixin-mappings__${componentName}`
+					themeStyle.innerHTML = createStyle(
+						kebabCaseJoin(componentName, this.#componentNameSuffix),
+						this.#baseSelector,
+						mappings
+					);
+					this.#rootElement.prepend(themeStyle);
+				}
 			}
 
 			#addClassName(className) {
@@ -123,7 +133,7 @@ export const createStyleMixin =
 			init() {
 				super.init?.();
 				if (this.shadowRoot.isConnected) {
-					this.#addClassName(superclass.componentName)
+					this.#addClassName(componentName)
 
 					// this is instead attributeChangedCallback because we cannot use static methods in this case
 					observeAttributes(this, this.#updateOverridesStyle.bind(this), {})
@@ -135,4 +145,5 @@ export const createStyleMixin =
 
 				this.#disconnectThemeManager?.();
 			}
-		};
+		}
+	};

package/src/mixins/inputValidationMixin.js

@@ -53,13 +53,16 @@ export const inputValidationMixin = (superclass) => class InputValidationMixinCl
       stepMismatch,
       tooShort,
       tooLong,
+      rangeOverflow,
+      rangeUnderflow,
+      badInput,
       customError
     } = flags;
     switch (true) {
       case valueMissing:
         return this.getAttribute(errorAttributes.valueMissing) ||
           this.defaultErrorMsgValueMissing
-      case patternMismatch || typeMismatch || stepMismatch:
+      case patternMismatch || typeMismatch || stepMismatch || rangeOverflow || rangeUnderflow || badInput:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
       case tooShort:

package/src/mixins/proxyInputMixin.js

@@ -1,5 +1,7 @@
-import { forwardAttrs } from "../helpers/componentHelpers";
+import { compose } from "../helpers";
+import { forwardAttrs, getComponentName } from "../helpers/componentHelpers";
 import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createStyleMixin } from "./createStyleMixin";
 import { inputValidationMixin } from "./inputValidationMixin";
 
 const errorAttrs = ['invalid', 'required'];
@@ -30,7 +32,7 @@ const getNestedInput = (ele) => {
 	}
 }
 
-export const proxyInputMixin = (superclass) =>
+const proxyInputMixin = (superclass) =>
 	class ProxyInputMixinClass extends inputValidationMixin(superclass) {
 		static get observedAttributes() {
 			return [...superclass.observedAttributes || [], ...errorAttrs];
@@ -131,6 +133,12 @@ export const proxyInputMixin = (superclass) =>
 			propertyObserver(this, this.inputElement, 'selectionStart');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
 
-			forwardAttrs(this, this.inputElement, {includeAttrs: ['inputmode']})
+			forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] })
 		}
 	};
+
+const composedProxyInputMixin = compose(
+	proxyInputMixin,
+	createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }))
+
+export { composedProxyInputMixin as proxyInputMixin }

package/src/theme/components/button.js

@@ -3,7 +3,7 @@ import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
 import { componentName, ButtonClass } from '../../components/descope-button/ButtonClass';
 
 const globalRefs = getThemeRefs(globals);
-const vars = ButtonClass.cssVarList;
+const compVars = ButtonClass.cssVarList;
 
 const mode = {
 	primary: globalRefs.colors.primary,
@@ -13,7 +13,7 @@ const mode = {
 	surface: globalRefs.colors.surface
 };
 
-const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -21,68 +21,84 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme,
 
-	[vars.cursor]: 'pointer',
+	[compVars.fontFamily]: globalRefs.fonts.font1.family,
 
-	[vars.borderRadius]: globalRefs.radius.sm,
-	[vars.borderWidth]: '2px',
-	[vars.borderStyle]: 'solid',
-	[vars.borderColor]: 'transparent',
+	[compVars.cursor]: 'pointer',
 
-	[vars.gap]: '0.25em',
+	[compVars.borderRadius]: globalRefs.radius.sm,
+	[compVars.borderWidth]: '2px',
+	[compVars.borderStyle]: 'solid',
+	[compVars.borderColor]: 'transparent',
 
-	[vars.verticalPadding]: `calc(var(${vars.fontSize}) / ${verticalPaddingRatio})`,
-	[vars.horizontalPadding]: `calc(var(${vars.fontSize}) / ${horizontalPaddingRatio})`,
+	[compVars.labelSpacing]: '0.25em',
+
+	[compVars.verticalPadding]: `calc(var(${compVars.fontSize}) / ${verticalPaddingRatio})`,
+	[compVars.horizontalPadding]: `calc(var(${compVars.fontSize}) / ${horizontalPaddingRatio})`,
+
+	[compVars.outlineWidth]: globals.border.sm,
+	[compVars.outlineOffset]: '1px',
+	[compVars.outlineStyle]: 'solid',
+	[compVars.outlineColor]: 'transparent',
 
 	size: {
-		xs: { [vars.fontSize]: '12px' },
-		sm: { [vars.fontSize]: '14px' },
-		md: { [vars.fontSize]: '18px' },
-		lg: { [vars.fontSize]: '22px' },
-		xl: { [vars.fontSize]: '26px' }
+		xs: { [compVars.fontSize]: '8px' },
+		sm: { [compVars.fontSize]: '10px' },
+		md: { [compVars.fontSize]: '14px' },
+		lg: { [compVars.fontSize]: '20px' },
+		xl: { [compVars.fontSize]: '25px' }
 	},
 
 	_fullWidth: {
-		[vars.width]: '100%'
+		[compVars.hostWidth]: '100%'
 	},
 
 	_loading: {
-		[vars.cursor]: 'wait'
+		[compVars.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars.color]: helperRefs.contrast,
-			[vars.backgroundColor]: helperRefs.main,
+			[compVars.labelTextColor]: helperRefs.contrast,
+			[compVars.backgroundColor]: helperRefs.main,
 			_hover: {
-				[vars.backgroundColor]: helperRefs.dark
+				[compVars.backgroundColor]: helperRefs.dark
 			},
 			_active: {
-				[vars.backgroundColor]: helperRefs.dark
+				[compVars.backgroundColor]: helperRefs.dark
 			}
 		},
 
 		outline: {
-			[vars.color]: helperRefs.main,
-			[vars.borderColor]: 'currentColor',
+			[compVars.labelTextColor]: helperRefs.main,
+			[compVars.borderColor]: 'currentColor',
 			_hover: {
-				[vars.color]: helperRefs.dark,
+				[compVars.labelTextColor]: helperRefs.dark,
 			},
 			_active: {
-				[vars.color]: helperRefs.light,
+				[compVars.labelTextColor]: helperRefs.light,
 			}
 		},
 
 		link: {
-			[vars.color]: helperRefs.main,
+			[compVars.labelTextColor]: helperRefs.main,
 			_hover: {
-				[vars.color]: helperRefs.main,
-				[vars.textDecoration]: 'underline'
+				[compVars.labelTextColor]: helperRefs.main,
+				[compVars.labelTextDecoration]: 'underline'
 			},
 			_active: {
-				[vars.color]: helperRefs.dark
+				[compVars.labelTextColor]: helperRefs.dark
 			}
 		}
+	},
+
+	_focused: {
+		[compVars.outlineColor]: globals.colors.surface.main,
 	}
 };
 
 export default button;
+
+export const vars = {
+	...compVars,
+	...helperVars
+};

package/src/theme/components/checkbox.js

@@ -1,64 +1,36 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
+import { refs } from './inputWrapper';
 
 const globalRefs = getThemeRefs(globals);
 const vars = CheckboxClass.cssVarList;
 
 const checkbox = {
-	[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
-	[vars.cursor]: 'pointer',
-
-	[vars.checkboxRadius]: globalRefs.radius.xs,
-	[vars.checkboxSize]: '2em',
-
-	[vars.labelTextColor]: globalRefs.colors.surface.contrast,
-	[vars.labelMargin]: '0.5em',
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars.labelFontWeight]: '400',
-
-	size: {
-		xs: {
-			[vars.labelFontSize]: '8px',
-		},
-		sm: {
-			[vars.labelFontSize]: '10px',
-		},
-		md: {
-			[vars.labelFontSize]: '14px',
-		},
-		lg: {
-			[vars.labelFontSize]: '20px',
-		},
-		xl: {
-			[vars.labelFontSize]: '25px',
-		}
-	},
-
-	_fullWidth: {
-		[vars.width]: '100%',
-	},
+	[vars.labelSpacing]: '0.5em',
+	[vars.inputOutlineWidth]: refs.outlineWidth,
+	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.inputOutlineColor]: refs.outlineColor,
+	[vars.inputOutlineStyle]: refs.outlineStyle,
+	[vars.inputBorderRadius]: refs.borderRadius,
+	[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
+	[vars.inputSize]: '2em',
 
 	_checked: {
-		[vars.checkboxBackgroundColor]: globalRefs.colors.primary.main,
-		[vars.checkmarkTextColor]: globalRefs.colors.primary.contrast,
+		[vars.inputBackgroundColor]: globalRefs.colors.primary.main,
+		[vars.inputValueTextColor]: globalRefs.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
+		[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
 	},
-
-	_focused: {
-		[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;
+export { vars }

package/src/theme/components/comboBox.js

@@ -1,55 +1,44 @@
 import globals from '../globals';
 import { ComboBoxClass } from '../../components/descope-combo-box/ComboBoxClass';
 import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
 
 const globalRefs = getThemeRefs(globals);
-
 const vars = ComboBoxClass.cssVarList;
 
 export const comboBox = {
-	[vars.borderColor]: globalRefs.colors.surface.main,
-	[vars.borderWidth]: '1px',
-	[vars.borderStyle]: 'solid',
-	[vars.cursor]: 'pointer',
-	[vars.padding]: '0',
-	[vars.placeholderColor]: globalRefs.colors.surface.main,
-	[vars.toggleColor]: globalRefs.colors.surface.contrast,
-	[vars.toggleCursor]: 'pointer',
-	[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
-	[vars.padding]: `0 ${globalRefs.spacing.xs}`,
-
-	[vars.height]: '2em',
-
-	size: {
-		xs: {
-			[vars.fontSize]: '8px',
-		},
-		sm: {
-			[vars.fontSize]: '10px',
-		},
-		md: {
-			[vars.fontSize]: '14px',
-		},
-		lg: {
-			[vars.fontSize]: '20px',
-		},
-		xl: {
-			[vars.fontSize]: '25px',
-		}
-	},
+	[vars.hostWidth]: refs.width,
+	[vars.fontSize]: refs.fontSize,
+	[vars.fontFamily]: refs.fontFamily,
+	[vars.labelTextColor]: refs.labelTextColor,
+	[vars.inputBorderColor]: refs.borderColor,
+	[vars.inputBorderWidth]: refs.borderWidth,
+	[vars.inputBorderStyle]: refs.borderStyle,
+	[vars.inputBorderRadius]: refs.borderRadius,
+	[vars.inputOutlineColor]: refs.outlineColor,
+	[vars.inputOutlineOffset]: refs.outlineOffset,
+	[vars.inputOutlineWidth]: refs.outlineWidth,
+	[vars.inputOutlineStyle]: refs.outlineStyle,
+	[vars.labelRequiredIndicator]: refs.requiredIndicator,
+	[vars.inputValueTextColor]: refs.valueTextColor,
+	[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+	[vars.inputBackgroundColor]: refs.backgroundColor,
+	[vars.inputHeight]: refs.inputHeight,
+	[vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
+	[vars.inputDropdownButtonCursor]: 'pointer',
 
 	_readonly: {
-		[vars.toggleCursor]: 'default',
+		[vars.inputDropdownButtonCursor]: 'default'
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs.colors.error.main,
-		[vars.placeholderColor]: globalRefs.colors.error.light,
-		[vars.toggleColor]: globalRefs.colors.error.main,
+		[vars.inputDropdownButtonColor]: globalRefs.colors.error.main
 	},
+
 	// [vars.overlayCursor]: 'pointer',
 	// [vars.overlayBackground]: globalRefs.colors.surface.light,
 	// [vars.overlayBorder]: `2px solid red`,
 };
 
 export default comboBox;
+export { vars }