@descope/web-components-ui 1.0.74 → 1.0.76

package/src/mixins/portalMixin.js

@@ -15,7 +15,12 @@ const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
-export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
+export const portalMixin = ({
+  name,
+  selector,
+  mappings = {},
+  forward: { attributes = [], include = true } = {}
+}) => (superclass) => {
   const eleDisplayName = name || sanitizeSelector(selector)
 
   const BaseClass = createStyleMixin({
@@ -58,9 +63,9 @@ export const portalMixin = ({ name, selector, mappings = {} }) => (superclass) =
 
     init() {
       super.init?.();
-      forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] })
+      forwardAttrs(this, this.#portalEle, { [include ? 'includeAttrs' : 'excludeAttrs']: attributes })
 
       this.#handleHoverAttribute();
     }
   }
-}
+}

package/src/mixins/proxyInputMixin.js

@@ -1,7 +1,7 @@
 import { createDispatchEvent } from "../helpers/mixinsHelpers";
 import { inputValidationMixin } from "./inputValidationMixin";
 
-const errorAttrs = ['invalid', 'has-error-message'];
+const errorAttrs = ['invalid', 'required'];
 
 const propertyObserver = (src, target, property) => {
 	Object.defineProperty(src, property, {

package/src/theme/components/button.js

@@ -83,10 +83,7 @@ const button = {
 		},
 		link: {
 			[vars.color]: helperRefs.main,
-			[vars.padding]: 0,
-			[vars.margin]: 0,
 			[vars.lineHeight]: helperRefs.height,
-			[vars.borderRadius]: 0,
 			_hover: {
 				[vars.color]: helperRefs.main,
 				[vars.textDecoration]: 'underline'

package/src/theme/components/comboBox.js

@@ -1,6 +1,5 @@
 import globals from '../globals';
 import ComboBox from '../../components/descope-combo-box/ComboBox';
-import { textField } from './textField';
 import { getThemeRefs } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
@@ -8,18 +7,49 @@ const globalRefs = getThemeRefs(globals);
 const vars = ComboBox.cssVarList;
 
 export const comboBox = {
-	...textField(ComboBox.cssVarList),
+	[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',
 	size: {
 		xs: {
-			[vars.width]: '30px'
+			[vars.height]: '14px',
+			[vars.fontSize]: '8px',
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`
+		},
+		sm: {
+			[vars.height]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.sm}`
+		},
+		md: {
+			[vars.height]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs.spacing.md}`
+		},
+		lg: {
+			[vars.height]: '40px',
+			[vars.fontSize]: '20px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`
+		},
+		xl: {
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`
 		}
 	},
-	[vars.borderColor]: 'green',
-	[vars.borderWidth]: '0',
-	[vars.cursor]: 'pointer',
-	[vars.padding]: '0',
-	// [vars.overlayBackground]: 'blue',
-	// [vars.overlayBorder]: '3px solid red',
+	_invalid: {
+		[vars.borderColor]: globalRefs.colors.error.main,
+		[vars.placeholderColor]: globalRefs.colors.error.light,
+		[vars.toggleColor]: globalRefs.colors.error.main,
+	},
+	// [vars.overlayCursor]: 'pointer',
+	// [vars.overlayBackground]: globalRefs.colors.surface.light,
+	// [vars.overlayBorder]: `2px solid red`,
 };
 
 export default comboBox;

package/src/theme/components/index.js

@@ -15,6 +15,7 @@ import passcode from './passcode';
 import { loaderRadial, loaderLinear } from './loader';
 import comboBox from './comboBox';
 import image from './image';
+import phoneField from './phoneField';
 
 export default {
 	button,
@@ -34,5 +35,6 @@ export default {
 	loaderRadial,
 	loaderLinear,
 	comboBox,
-	image
+	image,
+	phoneField
 };

package/src/theme/components/passcode.js

@@ -1,8 +1,41 @@
 import Passcode from '../../components/descope-passcode/Passcode';
-import { textField } from './textField';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import globals from '../globals';
+
+const vars = Passcode.cssVarList
+const globalRefs = getThemeRefs(globals);
 
 const passcode = {
-	...textField(Passcode.cssVarList),
-};
+	[vars.backgroundColor]: globalRefs.colors.surface.light,
+	[vars.outlineWidth]: '2px',
+	[vars.outlineColor]: globalRefs.colors.primary.main,
+	[vars.padding]: '0',
+	[vars.textAlign]: 'center',
+	[vars.borderColor]: 'transparent',
+	[vars.digitsGap]: '4px',
+	[vars.focusedValidDigitFieldBorderColor]: globalRefs.colors.primary.main,
+
+	_hideCursor: {
+		[vars.caretColor]: 'transparent',
+	},
+
+	_disabled: {
+		[vars.backgroundColor]: globalRefs.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%'
+	},
+
+	_bordered: {
+		[vars.borderColor]: globalRefs.colors.surface.main
+	},
+
+	_invalid: {
+		[vars.borderColor]: globalRefs.colors.error.main,
+		[vars.color]: globalRefs.colors.error.main,
+		[vars.outlineColor]: globalRefs.colors.error.light,
+	},
+}
 
 export default passcode;

package/src/theme/components/phoneField.js

@@ -0,0 +1,74 @@
+import globals from '../globals';
+import PhoneField from '../../components/descope-phone-field/PhoneField';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+const vars = PhoneField.cssVarList;
+
+const phoneField = {
+	[vars.wrapperBorderStyle]: 'solid',
+	[vars.wrapperBorderWidth]: '1px',
+	[vars.wrapperBorderColor]: 'transparent',
+	[vars.wrapperBorderRadius]: globalRefs.radius.sm,
+	[vars.placeholderColor]: globalRefs.colors.surface.main,
+
+	[vars.padding]: '0',
+
+	[vars.phoneInputWidth]: '15em',
+	[vars.countryCodeInputWidth]: '7em',
+
+	size: {
+		xs: {
+			[vars.inputHeight]: '14px',
+			[vars.fontSize]: '8px',
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`,
+			[vars.countryCodeDropdownWidth]: '200px',
+		},
+		sm: {
+			[vars.inputHeight]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.sm}`,
+			[vars.countryCodeDropdownWidth]: '240px',
+		},
+		md: {
+			[vars.inputHeight]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs.spacing.md}`,
+			[vars.countryCodeDropdownWidth]: '250px',
+		},
+		lg: {
+			[vars.inputHeight]: '40px',
+			[vars.fontSize]: '46px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`,
+			[vars.countryCodeDropdownWidth]: '250px',
+		},
+		xl: {
+			[vars.inputHeight]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`,
+			[vars.countryCodeDropdownWidth]: '400px',
+		}
+	},
+
+	_fullWidth: {
+		[vars.componentWidth]: '100%',
+		[vars.phoneInputWidth]: '100%',
+		[vars.countryCodeDropdownWidth]: '100%',
+	},
+
+	_bordered: {
+		[vars.wrapperBorderColor]: globalRefs.colors.surface.main
+	},
+
+	_invalid: {
+		[vars.color]: globalRefs.colors.error.main,
+		[vars.placeholderColor]: globalRefs.colors.error.light,
+		[vars.wrapperBorderColor]: globalRefs.colors.error.main
+	},
+
+	// '@overlay': {
+	// 	overlayItemBackgroundColor: 'red'
+	// }
+};
+
+export default phoneField;

package/src/theme/components/textArea.js

@@ -15,13 +15,16 @@ const textArea = {
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
+	[vars.outlineWidth]: '2px',
+	[vars.outlineStyle]: 'solid',
+
 
 	_bordered: {
 		[vars.borderColor]: globalRefs.colors.surface.main
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
+		[vars.outlineColor]: globalRefs.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -33,7 +36,7 @@ const textArea = {
 	},
 
 	_invalid: {
-		[vars.outline]: `2px solid ${globalRefs.colors.error.main}`
+		[vars.outlineColor]: globalRefs.colors.error.main
 	}
 };
 

package/src/theme/components/textField.js

@@ -25,7 +25,7 @@ export const textField = (vars) => ({
 		},
 		lg: {
 			[vars.height]: '40px',
-			[vars.fontSize]: '16px',
+			[vars.fontSize]: '20px',
 			[vars.padding]: `0 ${globalRefs.spacing.lg}`
 		},
 		xl: {
@@ -36,7 +36,7 @@ export const textField = (vars) => ({
 	},
 
 	[vars.color]: globalRefs.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs.colors.surface.main,
 
 	[vars.backgroundColor]: globalRefs.colors.surface.light,
 
@@ -56,7 +56,9 @@ export const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
+		[vars.outlineWidth]: '2px',
+		[vars.outlineStyle]: 'solid',
+		[vars.outlineColor]: globalRefs.colors.surface.main
 	},
 
 	_bordered: {
@@ -66,6 +68,7 @@ export const textField = (vars) => ({
 	_invalid: {
 		[vars.borderColor]: globalRefs.colors.error.main,
 		[vars.color]: globalRefs.colors.error.main,
+		[vars.outlineColor]: globalRefs.colors.error.light,
 		[vars.placeholderColor]: globalRefs.colors.error.light
 	}
 });