@descope/web-components-ui 1.0.38 → 1.0.40

package/src/theme/components/button.js

@@ -3,58 +3,60 @@ 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,
-}
+};
 
-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: {
-			[vars.height]: '10px',
-			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs.spacing.xs}`
+			[vars.height]: "10px",
+			[vars.fontSize]: "10px",
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`,
 		},
 		sm: {
-			[vars.height]: '20px',
-			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs.spacing.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}`
+			[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}`
+			[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.height]: "50px",
+			[vars.fontSize]: "25px",
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`,
 		},
 	},
 
-	_fullWidth: {
-		[vars.width]: '100%'
+	[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: {
@@ -64,24 +66,33 @@ const button = {
 			_hover: {
 				[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",
+			},
 		},
-	}
+	},
 };
 
 export default button;

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.inputBorderColor]: 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;

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

@@ -2,8 +2,9 @@ import { genColors } from "../themeHelpers/processColors";
 
 export const colors = genColors({
 	surface: {
-		main: 'lightgray',
-		light: '#e1e1e1'
+		main: "lightgray",
+		light: "#fff",
+		dark: "#000",
 	},
 	primary: "#0082B5",
 	secondary: "#7D14EB",
@@ -30,11 +31,11 @@ const typography = {
 };
 
 const spacing = {
-	xs: '2px',
-	sm: '4px',
-	md: '8px',
-	lg: '16px',
-	xl: '32px',
+	xs: "2px",
+	sm: "4px",
+	md: "8px",
+	lg: "16px",
+	xl: "32px",
 };
 
 const border = {

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)}}]);