@descope/web-components-ui 1.0.39 → 1.0.41

package/src/theme/components/textField.js

@@ -1,53 +1,77 @@
-import globals from "../globals";
-import { getThemeRefs } from "../../themeHelpers";
+import globals from '../globals';
+import { getThemeRefs } from '../../themeHelpers';
 import TextField from '../../components/descope-text-field/TextField';
 
 const globalRefs = getThemeRefs(globals);
 
 const vars = TextField.cssVarList;
 
-const textField = {
-  [vars.borderRadius]: globalRefs.radius.lg,
-  [vars.color]: globalRefs.colors.surface.contrast,
-  [vars.backgroundColor]: globalRefs.colors.surface.light,
-  [vars.borderWidth]: globalRefs.border.small,
-  [vars.borderStyle]: 'solid',
-  [vars.borderColor]: globalRefs.colors.surface.dark,
-  [vars.labelColor]: globalRefs.colors.surface.contrast,
-  [vars.placeholderColor]: globalRefs.colors.surface.dark,
-  _invalid: {
-    [vars.backgroundColor]: globalRefs.colors.error.light,
-    [vars.borderColor]: globalRefs.colors.error.dark,
-  },
-
-  size: {
-    sm: {
-      [vars.height]: '20px',
-      [vars.fontSize]: '10px',
-      [vars.padding]: `0 ${globalRefs.spacing.xs}`
-    },
-    md: {
-      [vars.height]: '30px',
-      [vars.fontSize]: '14px',
-      [vars.padding]: `0 ${globalRefs.spacing.sm}`
-    },
-    lg: {
-      [vars.height]: '40px',
-      [vars.fontSize]: '20px',
-      [vars.padding]: `0 ${globalRefs.spacing.sm}`
-    },
-    xl: {
-      [vars.height]: '50px',
-      [vars.fontSize]: '25px',
-      [vars.padding]: `0 ${globalRefs.spacing.md}`
-    },
-  },
-
-  _fullWidth: {
-    [vars.width]: '100%'
-  },
-};
-
-export default textField
+export const textField = (vars) => ({
+	size: {
+		xs: {
+			[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]: '16px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`
+		},
+		xl: {
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`
+		}
+	},
 
+	[vars.color]: globalRefs.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs.colors.surface.contrast,
 
+	[vars.backgroundColor]: globalRefs.colors.surface.light,
+
+	[vars.borderWidth]: '1px',
+	[vars.borderStyle]: 'solid',
+	[vars.borderColor]: 'transparent',
+	[vars.borderWidthReadOnly]: '0',
+	[vars.borderRadius]: globalRefs.radius.sm,
+
+	_borderoffset: {
+		[vars.outlineOffset]: '2px'
+	},
+
+	_invalid: {
+		[vars.borderColor]: globalRefs.colors.error.main,
+		[vars.color]: globalRefs.colors.error.main
+	},
+
+	_disabled: {
+		[vars.color]: globalRefs.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs.colors.surface.light,
+		[vars.backgroundColor]: globalRefs.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%'
+	},
+
+	_focused: {
+		[vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
+	},
+
+	_bordered: {
+		[vars.borderColor]: globalRefs.colors.surface.main
+	}
+});
+
+export default textField(vars);

package/src/theme/globals.js

@@ -1,32 +1,33 @@
-import { genColors } from "../themeHelpers/processColors";
+import { genColors } from '../themeHelpers/processColors';
 
 export const colors = genColors({
 	surface: {
 		main: 'lightgray',
-		light: '#e1e1e1'
+		light: '#fff',
+		dark: '#000'
 	},
-	primary: "#0082B5",
-	secondary: "#7D14EB",
-	success: "green",
-	error: "red",
+	primary: '#0082B5',
+	secondary: '#7D14EB',
+	success: 'green',
+	error: 'red'
 });
 
 const typography = {
 	h1: {
-		font: ["Courier New", "Arial", "sans-serif"],
-		weight: "700",
-		size: "48px",
+		font: ['Courier New', 'Arial', 'sans-serif'],
+		weight: '700',
+		size: '48px'
 	},
 	h2: {
-		font: ["Courier New", "sans-serif"],
-		weight: "500",
-		size: "38px",
+		font: ['Courier New', 'sans-serif'],
+		weight: '500',
+		size: '38px'
 	},
 	h3: {
-		font: ["Courier New", "sans-serif"],
-		weight: "300",
-		size: "28px",
-	},
+		font: ['Courier New', 'sans-serif'],
+		weight: '300',
+		size: '28px'
+	}
 };
 
 const spacing = {
@@ -34,19 +35,19 @@ const spacing = {
 	sm: '4px',
 	md: '8px',
 	lg: '16px',
-	xl: '32px',
+	xl: '32px'
 };
 
 const border = {
-	sm: "1px",
-	md: "2px",
-	lg: "3px",
+	sm: '1px',
+	md: '2px',
+	lg: '3px'
 };
 
 const radius = {
-	sm: "5px",
-	md: "25px",
-	lg: "50px",
+	sm: '5px',
+	md: '25px',
+	lg: '50px'
 };
 
 const shadow = {
@@ -54,8 +55,8 @@ const shadow = {
 	size: {
 		sm: `0 0 10px`,
 		md: `0 0 20px`,
-		lg: `0 0 30px`,
-	},
+		lg: `0 0 30px`
+	}
 };
 
 export default {
@@ -64,5 +65,5 @@ export default {
 	spacing,
 	border,
 	radius,
-	shadow,
+	shadow
 };

package/src/theme/index.js

@@ -1,4 +1,4 @@
-import globals from "./globals"
+import globals from './globals';
 import components from './components';
 
-export default { globals, components }
+export default { globals, components };

package/src/themeHelpers/index.js

@@ -1,10 +1,10 @@
-import merge from "lodash.merge";
-import set from "lodash.set";
-import { DESCOPE_PREFIX } from "../constants";
-import { getCssVarName, kebabCase } from "../helpers";
-import { getComponentName } from "../componentsHelpers";
+import merge from 'lodash.merge';
+import set from 'lodash.set';
+import { DESCOPE_PREFIX } from '../constants';
+import { getCssVarName, kebabCase } from '../helpers';
+import { getComponentName } from '../componentsHelpers';
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
 const transformTheme = (theme, path, getTransformation) => {
 	return Object.entries(theme).reduce((acc, [key, val]) => {
@@ -16,79 +16,94 @@ const transformTheme = (theme, path, getTransformation) => {
 	}, {});
 };
 
-const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ")
+const stringifyArray = (strArr) =>
+	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
 export const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
 	}));
 
 export const getThemeRefs = (theme, prefix) =>
-	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+	transformTheme(theme, [], (path) =>
+		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+	);
 
 export const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-	(acc, entry) => (acc += `${entry.join(":")};\n`), ''
-)}
+		(acc, entry) => (acc += `${entry.join(':')};\n`),
+		''
+	)}
 }
-`
+`;
 
 const componentsThemeToStyleObj = (componentsTheme) =>
 	transformTheme(componentsTheme, [], (path, val) => {
-		const [component, ...restPath] = path
-		const property = restPath.pop()
+		const [component, ...restPath] = path;
+		const property = restPath.pop();
 
 		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 		// starts with underscore -> attribute selector
 
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
+			if (section.startsWith('_'))
+				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
 
 			const nextSection = restPath[idx + 1];
 
 			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-				console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`)
+				console.error(
+					'theme generator',
+					`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+				);
 				return acc;
 			}
 
-			return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+			return (acc += `[${kebabCase(section)}="${restPath
+				.splice(idx + 1, 1)
+				.join('')}"]`);
 		}, '');
 
-		let selector = `${getComponentName(component)}${attrsSelector}`
+		let selector = `${getComponentName(component)}${attrsSelector}`;
 
 		return {
 			[selector]: {
 				[property]: val
 			}
-		}
+		};
 	});
 
 export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
 	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
-		(acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
+		(acc, [selector, vars]) =>
+			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
+				vars
+			)
+				.map(([key, val]) => `${key}: ${val}`)
+				.join(';\n')} \n}\n\n`),
 		''
 	);
 
 export const themeToStyle = ({ globals, components }, themeName) => `
 ${globalsThemeToStyle(globals, themeName)}
 ${componentsThemeToStyle(components, themeName)}
-`
+`;
 
-const useVar = varName => `var(${varName})`
+const useVar = (varName) => `var(${varName})`;
 
 export const createHelperVars = (theme, prefix) => {
 	const res = transformTheme(theme, [], (path, value) => {
 		const modifiedPath = [...path];
-		const property = modifiedPath.splice(-1)
-		const varName = getCssVarName(prefix, property)
+		const property = modifiedPath.splice(-1);
+		const varName = getCssVarName(prefix, property);
 
-		const vars = { [property]: varName }
-		const theme = set({}, [...modifiedPath, varName], value)
-		const useVars = { [property]: useVar(varName) }
+		const vars = { [property]: varName };
+		const theme = set({}, [...modifiedPath, varName], value);
+		const useVars = { [property]: useVar(varName) };
 
-		return { theme, useVars, vars }
-	})
+		return { theme, useVars, vars };
+	});
 
-	return [res.theme, res.useVars, res.vars]
+	return [res.theme, res.useVars, res.vars];
 };

package/src/themeHelpers/processColors.js

@@ -1,10 +1,13 @@
-import Color from "color";
+import Color from 'color';
 
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
 	const isDark = c.isDark();
-	return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
+	return c
+		.mix(Color(isDark ? 'white' : 'black'), percentage)
+		.saturate(1)
+		.hex();
 };
 
 export const genColor = (color) => {
@@ -14,16 +17,16 @@ export const genColor = (color) => {
 		main: mainColor.hex(),
 		dark: color.dark || genDark(mainColor),
 		light: color.light || genLight(mainColor),
-		contrast: color.contrast || genContrast(mainColor),
-	}
-}
+		contrast: color.contrast || genContrast(mainColor)
+	};
+};
 
 export const genColors = (colors) => {
 	return Object.keys(colors).reduce((acc, colorName) => {
 		const currentColor = colors[colorName];
 
 		return Object.assign(acc, {
-			[colorName]: genColor(currentColor),
-		})
+			[colorName]: genColor(currentColor)
+		});
 	}, {});
 };

package/dist/umd/221.js

@@ -1,37 +0,0 @@
-/*! For license information please see 221.js.LICENSE.txt */
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[221],{6221:(t,e,a)=>{a(3787);var s=a(692),i=a(5128);(0,i.hC)("vaadin-text-field",s.J,{moduleId:"lumo-text-field-styles"}),a(3130);var l=a(4241),r=a(1402),n=a(4463),o=a(2743),d=a(3208),u=a(3690);const p=t=>class extends((0,u.L)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),t||this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}};var h=a(6729);const c=t=>class extends(p(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new h.v(this.inputElement,this._labelController))}};(0,i.hC)("vaadin-text-field",o.J,{moduleId:"vaadin-text-field-styles"});class m extends(c((0,i.Tb)((0,r.S)(l.H3)))){static get is(){return"vaadin-text-field"}static get template(){return l.dy`
-      <style>
-        [part='input-field'] {
-          flex-grow: 0;
-        }
-      </style>
-
-      <div class="vaadin-field-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
-        </div>
-
-        <vaadin-input-container
-          part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
-        >
-          <slot name="prefix" slot="prefix"></slot>
-          <slot name="input"></slot>
-          <slot name="suffix" slot="suffix"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-        </vaadin-input-container>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-      <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new n.f(this),this._tooltipController.setPosition("top"),this.addController(this._tooltipController)}}customElements.define(m.is,m)}}]);