@descope/web-components-ui 1.0.39 → 1.0.41

package/src/componentsHelpers/index.js

@@ -1,12 +1,15 @@
-import { DESCOPE_PREFIX } from "../constants";
-import { kebabCaseJoin } from "../helpers";
+import { DESCOPE_PREFIX } from '../constants';
+import { kebabCaseJoin } from '../helpers';
 
-export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name)
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
-export const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
+export const compose =
+	(...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
 
-export { createStyleMixin } from './createStyleMixin'
-export { draggableMixin } from './draggableMixin'
-export { createProxy } from './createProxy'
-export { inputMixin } from './inputMixin'
-export { componentNameValidationMixin } from './componentNameValidationMixin'
+export { createStyleMixin } from './createStyleMixin';
+export { draggableMixin } from './draggableMixin';
+export { createProxy } from './createProxy';
+export { inputMixin } from './inputMixin';
+export { componentNameValidationMixin } from './componentNameValidationMixin';

package/src/componentsHelpers/inputMixin.js

@@ -1,46 +1,47 @@
 export const inputMixin = (superclass) =>
-  class InputMixinClass extends superclass {
+	class InputMixinClass extends superclass {
 		static get formAssociated() {
 			return true;
 		}
-    
-    #internals
 
-    constructor() {
-      super();
+		#internals;
 
-      this.#internals = this.attachInternals();
+		constructor() {
+			super();
 
-      // this is needed in order to make sure the form input validation is working
-      if (!this.hasAttribute('tabindex')) {
-        this.setAttribute('tabindex', 0);
-      }
-    }
-
-    formAssociatedCallback() {
-      this.setValidity?.();
-    }
-
-    connectedCallback() {
-      super.connectedCallback?.();
-
-      // vaadin does not expose all those validation attributes so we need to take it from the input
-      // https://github.com/vaadin/web-components/issues/1177
-      const input = this.proxyElement.querySelector('input')
-      if (!input) throw Error('no input was found')
-
-      this.checkValidity = () => input.checkValidity()
-      this.reportValidity = () => input.reportValidity()
-      this.validity = input.validity
-
-      this.setValidity = () => {
-        this.#internals.setValidity(input.validity, input.validationMessage);
-      }
+			this.#internals = this.attachInternals();
+		}
 
-      input.oninput = () => {
-        this.value = input.value
-        this.setValidity()
-      }
+		formAssociatedCallback() {
+			this.setValidity?.();
+		}
 
-    }
-  }
+		connectedCallback() {
+			super.connectedCallback?.();
+
+			// this is needed in order to make sure the form input validation is working
+			if (!this.hasAttribute('tabindex')) {
+				this.setAttribute('tabindex', 0);
+			}
+
+			// vaadin does not expose all those validation attributes so we need to take it from the input
+			// https://github.com/vaadin/web-components/issues/1177
+			const input =
+				this.proxyElement.querySelector('input') ||
+				this.proxyElement.querySelector('textarea');
+			if (!input) throw Error('no input was found');
+
+			this.checkValidity = () => input.checkValidity();
+			this.reportValidity = () => input.reportValidity();
+			this.validity = input.validity;
+
+			this.setValidity = () => {
+				this.#internals.setValidity(input.validity, input.validationMessage);
+			};
+
+			input.oninput = () => {
+				this.value = input.value;
+				this.setValidity();
+			};
+		}
+	};

package/src/constants.js

@@ -1 +1 @@
-export const DESCOPE_PREFIX = 'descope'
+export const DESCOPE_PREFIX = 'descope';

package/src/dev/index.js

@@ -1,6 +1,7 @@
-import theme from '../theme'
-import { themeToStyle } from "../themeHelpers";
+import theme from '../theme';
+import { themeToStyle } from '../themeHelpers';
 
 // this file is used for exposing stuff to the dev env only
 
-export const getDefaultThemeStyles = (themeName) => themeToStyle(theme, themeName)
+export const getDefaultThemeStyles = (themeName) =>
+	themeToStyle(theme, themeName);

package/src/helpers.js

@@ -1,8 +1,10 @@
-export const kebabCase = str => str
-.replace(/([a-z])([A-Z])/g, "$1-$2")
-.replace(/[\s_.]+/g, '-')
-.toLowerCase();
+export const kebabCase = (str) =>
+	str
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
+		.replace(/[\s_.]+/g, '-')
+		.toLowerCase();
 
-export const kebabCaseJoin = (...args) => kebabCase(args.join('-'))
+export const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-export const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`
+export const getCssVarName = (...args) =>
+	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;

package/src/index.cjs.js

@@ -1,3 +1,3 @@
 // CJS is used by screen-renderer-service, we cannot load vaadin there,
 // so we are exporting only the css generation stuff
-export * from './themeHelpers'
+export * from './themeHelpers';

package/src/index.js

@@ -1,9 +1,17 @@
-import "./components/descope-button";
-import "./components/descope-combo";
-import "./components/descope-text-field";
-import "./components/descope-date-picker";
-import "./components/descope-container";
+import './components/descope-button';
+import './components/descope-combo';
+import './components/descope-text-field';
+import './components/descope-number-field';
+import './components/descope-email-field';
+import './components/descope-password-field';
+import './components/descope-text-area';
+import './components/descope-date-picker';
+import './components/descope-container';
 
-export { globalsThemeToStyle, componentsThemeToStyle, themeToStyle } from './themeHelpers'
-export { genColor } from './themeHelpers/processColors'
-export { default as defaultTheme } from './theme'
+export {
+	globalsThemeToStyle,
+	componentsThemeToStyle,
+	themeToStyle
+} from './themeHelpers';
+export { genColor } from './themeHelpers/processColors';
+export { default as defaultTheme } from './theme';

package/src/index.umd.js

@@ -1,10 +1,16 @@
-const components = import.meta.webpackContext('./components', { recursive: true, regExp: /index.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
+const components = import.meta.webpackContext('./components', {
+	recursive: true,
+	regExp: /index.js$/,
+	mode: 'lazy',
+	chunkName: '[request]',
+	prefetch: true
+});
 
 // all components must be in a folder with the component name, and have an index.js file
 // e.g. ./descope-button/index.js
 module.exports = components.keys().reduce((acc, key) => {
-  const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1')
-  acc[componentName] = () => components(key)
+	const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
+	acc[componentName] = () => components(key);
 
-  return acc;
-}, {})
+	return acc;
+}, {});

package/src/theme/components/button.js

@@ -1,29 +1,22 @@
-import globals from "../globals";
-import { getThemeRefs, createHelperVars } from "../../themeHelpers";
-import Button, { componentName } from "../../components/descope-button/Button";
+import globals from '../globals';
+import { getThemeRefs, createHelperVars } from '../../themeHelpers';
+import Button, { componentName } from '../../components/descope-button/Button';
 
 const globalRefs = getThemeRefs(globals);
-const vars = Button.cssVarList
+const vars = Button.cssVarList;
 
 const mode = {
-	primary: {
-		main: globalRefs.colors.primary.main,
-		dark: 'darkblue',
-		light: 'lightblue',
-		contrast: 'white'
-	},
+	primary: globalRefs.colors.primary,
 	secondary: globalRefs.colors.secondary,
 	success: globalRefs.colors.success,
 	error: globalRefs.colors.error,
-	surface: globalRefs.colors.surface,
-}
+	surface: globalRefs.colors.surface
+};
 
-const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName)
+const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
 
 const button = {
 	...helperTheme,
-	[vars.borderRadius]: globalRefs.radius.lg,
-	[vars.cursor]: 'pointer',
 
 	size: {
 		xs: {
@@ -50,37 +43,55 @@ const button = {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
 			[vars.padding]: `0 ${globalRefs.spacing.xl}`
-		},
+		}
 	},
 
+	[vars.borderRadius]: globalRefs.radius.lg,
+	[vars.cursor]: 'pointer',
+	[vars.borderWidth]: '2px',
+	[vars.borderStyle]: 'solid',
+	[vars.borderColor]: 'transparent',
+
 	_fullWidth: {
 		[vars.width]: '100%'
 	},
+	_loading: {
+		[vars.cursor]: 'wait'
+	},
 
 	variant: {
 		contained: {
 			[vars.color]: helperRefs.contrast,
 			[vars.backgroundColor]: helperRefs.main,
 			_hover: {
-				[vars.backgroundColor]: helperRefs.dark,
+				[vars.backgroundColor]: helperRefs.dark
 			},
+			_loading: {
+				[vars.backgroundColor]: helperRefs.main
+			}
 		},
 		outline: {
 			[vars.color]: helperRefs.main,
 			[vars.borderColor]: helperRefs.main,
-			[vars.borderWidth]: '2px',
-			[vars.borderStyle]: 'solid',
 			_hover: {
 				[vars.color]: helperRefs.dark,
 				[vars.borderColor]: helperRefs.dark,
 				_error: {
-					[vars.color]: 'red',
+					[vars.color]: helperRefs.error
 				}
 			}
 		},
 		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/checkbox.js

@@ -0,0 +1,9 @@
+import Checkbox from '../../components/descope-checkbox/Checkbox';
+
+const vars = Checkbox.cssVarList;
+
+const checkbox = {
+	[vars.cursor]: 'pointer'
+};
+
+export default checkbox;

package/src/theme/components/container.js

@@ -1,38 +1,41 @@
-import globals from "../globals";
-import { getThemeRefs, createHelperVars } from "../../themeHelpers";
-import Container from "../../components/descope-container/Container";
+import globals from '../globals';
+import { getThemeRefs, createHelperVars } from '../../themeHelpers';
+import Container from '../../components/descope-container/Container';
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = Container.cssVarList
+const vars = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
 	center: { verticalAlignment: 'center' },
-	end: { verticalAlignment: 'end' },
-}
+	end: { verticalAlignment: 'end' }
+};
 
 const horizontalAlignment = {
 	start: { horizontalAlignment: 'start' },
 	center: { horizontalAlignment: 'center' },
-	end: { horizontalAlignment: 'end' },
-}
+	end: { horizontalAlignment: 'end' }
+};
 
-const [helperTheme, helperVars, helperRefs] =
-	createHelperVars({ verticalAlignment, horizontalAlignment }, 'container')
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+	{ verticalAlignment, horizontalAlignment },
+	'container'
+);
 
 const container = {
 	...helperTheme,
 	[vars.display]: 'flex',
+	[vars.backgroundColor]: globalRefs.colors.surface.main,
 	verticalPadding: {
 		sm: { [vars.verticalPadding]: '5px' },
 		md: { [vars.verticalPadding]: '10px' },
-		lg: { [vars.verticalPadding]: '20px' },
+		lg: { [vars.verticalPadding]: '20px' }
 	},
 	horizontalPadding: {
 		sm: { [vars.horizontalPadding]: '5px' },
 		md: { [vars.horizontalPadding]: '10px' },
-		lg: { [vars.horizontalPadding]: '20px' },
+		lg: { [vars.horizontalPadding]: '20px' }
 	},
 	direction: {
 		row: {
@@ -40,7 +43,7 @@ const container = {
 			[vars.alignItems]: helperRefs.verticalAlignment,
 			[vars.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
-				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' }
 			}
 		},
 
@@ -49,9 +52,11 @@ const container = {
 			[vars.alignItems]: helperRefs.horizontalAlignment,
 			[vars.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
-				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+				spaceBetween: {
+					[helperVars.verticalAlignment]: 'space-between'
+				}
 			}
-		},
+		}
 	},
 
 	spaceBetween: {
@@ -67,27 +72,27 @@ const container = {
 	},
 
 	shadow: {
-		sm: { 
-			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}` 
-		},		
-		md: { 
-			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}` 
-		},		
-		lg: { 
-			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}` 
+		sm: {
+			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
+		},
+		md: {
+			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
 		},
+		lg: {
+			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
+		}
 	},
 
 	borderRadius: {
-		sm: { 
+		sm: {
 			[vars.borderRadius]: globalRefs.radius.sm
 		},
-		md: { 
+		md: {
 			[vars.borderRadius]: globalRefs.radius.md
 		},
-		lg: { 
+		lg: {
 			[vars.borderRadius]: globalRefs.radius.lg
-		},
+		}
 	}
 };
 

package/src/theme/components/emailField.js

@@ -0,0 +1,8 @@
+import EmailField from '../../components/descope-email-field/EmailField';
+import { textField } from './textField';
+
+const emailField = {
+	...textField(EmailField.cssVarList)
+};
+
+export default emailField;

package/src/theme/components/index.js

@@ -1,9 +1,21 @@
-import button  from './button';
-import textField  from './textField';
-import container  from './container';
+import button from './button';
+import textField from './textField';
+import passwordField from './passwordField';
+import numberField from './numberField';
+import emailField from './emailField';
+import textArea from './textArea';
+import checkbox from './checkbox';
+import switchToggle from './switchToggle';
+import container from './container';
 
 export default {
-    button,
-    textField,
-    container
-}
+	button,
+	textField,
+	passwordField,
+	numberField,
+	emailField,
+	textArea,
+	checkbox,
+	switchToggle,
+	container
+};

package/src/theme/components/input.js

@@ -0,0 +1,106 @@
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+
+export const componentName = getComponentName('text-field');
+
+const selectors = {
+	label: '::part(label)',
+	input: '::part(input-field)',
+	readOnlyInput: '[readonly]::part(input-field)::after',
+	placeholder: '> input:placeholder-shown'
+};
+
+let overrides = ``;
+
+export const textFieldMappings = {
+	color: { selector: selectors.input },
+	backgroundColor: { selector: selectors.input },
+	width: [matchHostStyle()],
+	color: { selector: selectors.input },
+	borderColor: [
+		{ selector: selectors.input },
+		{ selector: selectors.readOnlyInput }
+	],
+	borderWidth: [
+		{ selector: selectors.input },
+		{ selector: selectors.readOnlyInput }
+	],
+	borderStyle: [
+		{ selector: selectors.input },
+		{ selector: selectors.readOnlyInput }
+	],
+	borderRadius: { selector: selectors.input },
+	boxShadow: { selector: selectors.input },
+	fontSize: {},
+	height: { selector: selectors.input },
+	padding: { selector: selectors.input },
+	outline: { selector: selectors.input },
+	outlineOffset: { selector: selectors.input },
+
+	placeholderColor: { selector: selectors.placeholder, property: 'color' }
+	// borderWidthReadOnly: [borderWidth('[readonly]::part(input-field)::after')]
+};
+
+const TextField = compose(
+	createStyleMixin({
+		mappings: textFieldMappings
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	vaadin-text-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-text-field::part(input-field) {
+		overflow: hidden;
+	}
+	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(${TextField.cssVarList.color});
+		box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-text-field > label,
+	vaadin-text-field::part(input-field) {
+		cursor: pointer;
+		color: var(${TextField.cssVarList.color});
+	}
+	vaadin-text-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-text-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${TextField.cssVarList.color});
+	}
+	vaadin-text-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+export default TextField;

package/src/theme/components/numberField.js

@@ -0,0 +1,8 @@
+import NumberField from '../../components/descope-number-field/NumberField';
+import { textField } from './textField';
+
+const numberField = {
+	...textField(NumberField.cssVarList)
+};
+
+export default numberField;

package/src/theme/components/passwordField.js

@@ -0,0 +1,11 @@
+import PasswordField from '../../components/descope-password-field/PasswordField';
+import { textField } from './textField';
+
+const vars = PasswordField.cssVarList;
+
+const passwordField = {
+	...textField(vars),
+	[vars.revealCursor]: 'pointer'
+};
+
+export default passwordField;

package/src/theme/components/switchToggle.js

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

package/src/theme/components/textArea.js

@@ -0,0 +1,44 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../themeHelpers';
+import TextArea from '../../components/descope-text-area/TextArea';
+
+const globalRefs = getThemeRefs(globals);
+const vars = TextArea.cssVarList;
+
+const textArea = {
+	[vars.color]: globalRefs.colors.primary.main,
+	[vars.backgroundColor]: globalRefs.colors.surface.light,
+	[vars.resize]: 'vertical',
+
+	[vars.borderRadius]: globalRefs.radius.sm,
+	[vars.borderWidth]: '1px',
+	[vars.borderStyle]: 'solid',
+	[vars.borderColor]: 'transparent',
+
+	_borderOffset: {
+		[vars.outlineOffset]: '2px'
+	},
+
+	_bordered: {
+		[vars.borderColor]: globalRefs.colors.surface.main
+	},
+
+	_focused: {
+		[vars.focusInputCursor]: 'text',
+		[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%'
+	},
+
+	_disabled: {
+		[vars.cursor]: 'not-allowed'
+	},
+
+	_invalid: {
+		[vars.outline]: `2px solid ${globalRefs.colors.error.main}`
+	}
+};
+
+export default textArea;