@descope/web-components-ui 1.0.100 → 1.0.102

package/dist/index.esm.js

@@ -1,7 +1,6 @@
 import '@vaadin/button';
 import '@vaadin/checkbox';
 import '@vaadin/text-field';
-import '@vaadin/date-picker';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
 import '@vaadin/password-field';
@@ -350,7 +349,10 @@ const createStyleMixin =
 				);
 
 				if (value) style?.setProperty(varName, value);
-				else style?.removeProperty(varName);
+				else { 
+					style?.removeProperty(varName);
+					this.removeAttribute(attrName);
+				}
 			}
 
 			#updateOverridesStyle(attrs = []) {
@@ -499,6 +501,27 @@ const hoverableMixin = (superclass) =>
 		}
 	};
 
+const booleanAttributesList = [
+  'readonly',
+  'focused',
+  'invalid',
+  'has-label',
+  'required',
+  'disabled',
+  'checked',
+  'has-helper',
+  'has-value',
+  'step-buttons-visible',
+  'hover',
+  'has-error-message',
+  'focus-ring',
+  'opened',
+  'active'
+];
+
+const isBooleanAttribute = (attr) => {
+  return booleanAttributesList.includes(attr)
+};
 // we want all the valueless attributes to have "true" value
 // and all the falsy attribute to be removed
 const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
@@ -509,10 +532,14 @@ const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAt
       attrs.forEach(attr => {
         const attrVal = this.getAttribute(attr);
 
-        if (attrVal === '') {
-          this.setAttribute(attr, 'true');
-        } else if (attrVal === 'false') {
-          this.removeAttribute(attr);
+        if (isBooleanAttribute(attr)) {
+          if (attrVal === '') {
+            this.setAttribute(attr, 'true');
+          } else if (attrVal === 'false') {
+            this.removeAttribute(attr);
+          }
+        } else if (!attrVal) {
+          console.warn(`attribute "${attr}" has no value, should it be added to the boolean attributes list?`);
         }
       }), {});
   }
@@ -1062,7 +1089,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
   }
 };
 
-const componentName$o = getComponentName('button');
+const componentName$n = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1136,7 +1163,7 @@ const Button = compose(
 			${editorOverrides}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$o
+		componentName: componentName$n
 	})
 );
 
@@ -1169,7 +1196,7 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$o, Button);
+customElements.define(componentName$n, Button);
 
 const createBaseInputClass = (...args) => compose(
   inputValidationMixin,
@@ -1178,7 +1205,7 @@ const createBaseInputClass = (...args) => compose(
   inputEventsDispatchingMixin
 )(createBaseClass(...args));
 
-const componentName$n = getComponentName('boolean-field-internal');
+const componentName$m = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = [
 	'disabled',
@@ -1187,7 +1214,7 @@ const forwardAttributes$1 = [
 	'readonly'
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$m, baseSelector: 'div' });
 
 class BooleanInputInternal extends BaseInputClass$3 {
 	constructor() {
@@ -1251,14 +1278,14 @@ const booleanFieldMixin = (superclass) =>
 
             const template = document.createElement('template');
             template.innerHTML = `
-				<${componentName$n} 
+				<${componentName$m} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$n}>
+				></${componentName$m}>
 			`;
 
             this.baseElement.appendChild(template.content.cloneNode(true));
-            this.inputElement = this.shadowRoot.querySelector(componentName$n);
+            this.inputElement = this.shadowRoot.querySelector(componentName$m);
             this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
             forwardAttrs(this, this.inputElement, {
@@ -1336,7 +1363,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$m = getComponentName('checkbox');
+const componentName$l = getComponentName('checkbox');
 
 const {
 	host: host$9,
@@ -1420,15 +1447,15 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$m
+		componentName: componentName$l
 	})
 );
 
-customElements.define(componentName$n, BooleanInputInternal);
+customElements.define(componentName$m, BooleanInputInternal);
 
-customElements.define(componentName$m, Checkbox);
+customElements.define(componentName$l, Checkbox);
 
-const componentName$l = getComponentName('switch-toggle');
+const componentName$k = getComponentName('switch-toggle');
 
 const {
 	host: host$8,
@@ -1535,17 +1562,17 @@ const SwitchToggle = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$l
+		componentName: componentName$k
 	})
 );
 
-customElements.define(componentName$l, SwitchToggle);
+customElements.define(componentName$k, SwitchToggle);
 
-const componentName$k = getComponentName('loader-linear');
+const componentName$j = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$k;
+		return componentName$j;
 	}
 	constructor() {
 		super();
@@ -1603,11 +1630,11 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$k, LoaderLinear);
+customElements.define(componentName$j, LoaderLinear);
 
-const componentName$j = getComponentName('loader-radial');
+const componentName$i = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1653,11 +1680,11 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$j, LoaderRadial);
+customElements.define(componentName$i, LoaderRadial);
 
-const componentName$i = getComponentName('container');
+const componentName$h = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1715,23 +1742,7 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$i, Container);
-
-const componentName$h = getComponentName('date-picker');
-
-const DatePicker = compose(
-	draggableMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		componentName: componentName$h,
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-date-picker',
-		style: ``
-	})
-);
-
-customElements.define(componentName$h, DatePicker);
+customElements.define(componentName$h, Container);
 
 const componentName$g = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
@@ -2429,6 +2440,7 @@ overrides$2 = `
 
 	vaadin-text-field input {
 		-webkit-mask-image: none;
+		min-height: 0;
 	}
 
 	vaadin-text-field > label,
@@ -2439,7 +2451,6 @@ overrides$2 = `
 		cursor: text;
 	}
 	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
 		content: "*";
 		color: var(${TextField.cssVarList.color});
 	}
@@ -2709,6 +2720,9 @@ const PasswordField = compose(
 			vaadin-password-field {
 				width: 100%;
 			}
+			vaadin-password-field::part(input-field) {
+				padding: 0;
+			}
 			vaadin-password-field > input {
 				min-height: 0;
 			}
@@ -2918,7 +2932,13 @@ const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclas
 	}
 };
 
-const { host: host$2, input, placeholder, toggle, label: label$1 } = {
+const {
+	host: host$2,
+	input,
+	placeholder,
+	toggle,
+	label: label$1
+} = {
 	host: { selector: () => ':host' },
 	input: { selector: '::part(input-field)' },
 	placeholder: { selector: '> input:placeholder-shown' },
@@ -2938,7 +2958,7 @@ const ComboBox = compose(
 			height: input,
 			padding: input,
 
-			backgroundColor: input,
+			inputBackgroundColor: { ...input, property: 'background-color' },
 			boxShadow: input,
 
 			borderColor: input,
@@ -3003,6 +3023,15 @@ const ComboBox = compose(
 			border-radius: 0;
 			padding: 0;
 		}
+		vaadin-combo-box::part(input-field)::after {
+			opacity: 0;
+		}
+		vaadin-combo-box[readonly]::part(input-field)::after {
+			border: none;
+		}
+		vaadin-combo-box[readonly] > input:placeholder-shown {
+			opacity: 1;
+		}		
 		`,
 		// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
 		// with the same name. Including it will cause Vaadin to calculate NaN size,
@@ -4260,6 +4289,7 @@ const commonAttrs$1 = [
 	'size',
 	'bordered',
 	'invalid',
+	'readonly',
 ];
 const countryAttrs = ['country-input-placeholder', 'default-code'];
 const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
@@ -4448,6 +4478,10 @@ const componentName$2 = getComponentName('phone-field');
 
 const customMixin$1 = (superclass) =>
 	class PhoneFieldClass extends superclass {
+		static get CountryCodes() {
+			return CountryCodes;
+		}
+
 		constructor() {
 			super();
 		}
@@ -4546,6 +4580,10 @@ const PhoneField = compose(
 				selector: 'descope-combo-box',
 				property: comboVars.overlayItemBackgroundColor
 			},
+
+			outlineStyle: inputWrapper,
+			outlineWidth: [inputWrapper, { property: 'padding' }],
+			outlineColor: inputWrapper,
 		},
 	}),
 	draggableMixin,
@@ -4564,9 +4602,15 @@ const PhoneField = compose(
 				display: inline-flex;
 			}
 			vaadin-text-field {
-				padding: 0;
 				width: 100%;
 				height: 100%;
+				box-sizing: border-box;
+			}
+			vaadin-text-field[focus-ring]::part(input-field) {
+				box-shadow: none;
+			}
+			vaadin-text-field::before {
+				height: 0;
 			}
 			vaadin-text-field::part(input-field) {
 				padding: 0;
@@ -4598,6 +4642,7 @@ const PhoneField = compose(
 				flex-grow: 1;
 				min-height: 0;
 				height: 100%;
+				${textVars.outlineWidth}: 0;
 				${textVars.borderWidth}: 0;
 				${textVars.borderRadius}: 0;
 			}
@@ -4607,6 +4652,9 @@ const PhoneField = compose(
 			vaadin-text-field[readonly] > input:placeholder-shown {
 				opacity: 1;
 			}
+			vaadin-text-field::part(input-field)::after {
+				border: none;
+			}
 		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$2
@@ -4676,7 +4724,7 @@ const NewPassword = compose(
 				selector: PasswordField.componentName,
 				property: PasswordField.cssVarList.inputTextColor
 			},
-			inputsGap: {...internalInputsWrapper, property: 'gap'}
+			inputsGap: { ...internalInputsWrapper, property: 'gap' }
 		}
 	}),
 	draggableMixin,
@@ -4707,6 +4755,7 @@ const overrides = `
 		background: transparent;
 		overflow: hidden;
 		box-shadow: none;
+		padding: 0;
 	}
 	vaadin-text-field::part(input-field)::after {
 		background: transparent;
@@ -5262,7 +5311,7 @@ const mode = {
 	surface: globalRefs$f.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -5414,7 +5463,7 @@ const passwordField = {
 	[vars$e.wrapperBorderStyle]: 'solid',
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
-	[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
+	[vars$e.wrapperBorderRadius]: globalRefs$d.radius.xs,
 	[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
 
 	[vars$e.outlineWidth]: '2px',
@@ -5496,7 +5545,7 @@ const textArea = {
 	[vars$d.borderRadius]: globalRefs$c.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
-	[vars$d.borderColor]: globalRefs$c.colors.surface.main,
+	[vars$d.borderColor]: 'transparent',
 	[vars$d.outlineWidth]: '2px',
 	[vars$d.outlineStyle]: 'solid',
 	[vars$d.outlineColor]: 'transparent',
@@ -5514,6 +5563,10 @@ const textArea = {
 		[vars$d.cursor]: 'not-allowed'
 	},
 
+	_bordered: {
+		[vars$d.borderColor]: globalRefs$c.colors.surface.main,
+	},
+
 	_invalid: {
 		[vars$d.labelColor]: globalRefs$c.colors.error.main,
 		[vars$d.outlineColor]: globalRefs$c.colors.error.main
@@ -5789,7 +5842,6 @@ const vars$8 = Text.cssVarList;
 
 const text = {
 	[vars$8.lineHeight]: '1em',
-	[vars$8.display]: 'inline-block',
 	[vars$8.textAlign]: 'left',
 	[vars$8.color]: globalRefs$8.colors.surface.dark,
 	variant: {
@@ -5850,7 +5902,6 @@ const text = {
 	},
 	_fullWidth: {
 		[vars$8.width]: '100%',
-		[vars$8.display]: 'block'
 	},
 	_italic: {
 		[vars$8.fontStyle]: 'italic'
@@ -6097,6 +6148,7 @@ const comboBox = {
 	[vars$2.placeholderColor]: globalRefs$2.colors.surface.main,
 	[vars$2.toggleColor]: globalRefs$2.colors.surface.contrast,
 	[vars$2.toggleCursor]: 'pointer',
+	[vars$2.inputBackgroundColor]: globalRefs$2.colors.surface.light,
 	size: {
 		xs: {
 			[vars$2.height]: '14px',
@@ -6124,6 +6176,11 @@ const comboBox = {
 			[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
 		}
 	},
+
+	_readonly: {
+		[vars$2.toggleCursor]: 'default',
+	},
+
 	_invalid: {
 		[vars$2.borderColor]: globalRefs$2.colors.error.main,
 		[vars$2.placeholderColor]: globalRefs$2.colors.error.light,
@@ -6157,31 +6214,26 @@ const phoneField = {
 		xs: {
 			[vars$1.inputHeight]: '14px',
 			[vars$1.fontSize]: '8px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`,
 			[vars$1.countryCodeDropdownWidth]: '200px',
 		},
 		sm: {
 			[vars$1.inputHeight]: '20px',
 			[vars$1.fontSize]: '10px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`,
 			[vars$1.countryCodeDropdownWidth]: '240px',
 		},
 		md: {
 			[vars$1.inputHeight]: '30px',
 			[vars$1.fontSize]: '14px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`,
 			[vars$1.countryCodeDropdownWidth]: '250px',
 		},
 		lg: {
 			[vars$1.inputHeight]: '40px',
 			[vars$1.fontSize]: '46px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`,
 			[vars$1.countryCodeDropdownWidth]: '250px',
 		},
 		xl: {
 			[vars$1.inputHeight]: '50px',
 			[vars$1.fontSize]: '25px',
-			[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`,
 			[vars$1.countryCodeDropdownWidth]: '400px',
 		}
 	},
@@ -6196,7 +6248,16 @@ const phoneField = {
 		[vars$1.wrapperBorderColor]: globalRefs$1.colors.surface.main
 	},
 
+	[vars$1.outlineStyle]: 'solid',
+	[vars$1.outlineWidth]: '0.1em',
+	[vars$1.outlineColor]: 'transparent',
+
+	_focused: {
+		[vars$1.outlineColor]: globalRefs$1.colors.surface.main
+	},
+
 	_invalid: {
+		[vars$1.outlineColor]: globalRefs$1.colors.error.light,
 		[vars$1.color]: globalRefs$1.colors.error.main,
 		[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
 		[vars$1.wrapperBorderColor]: globalRefs$1.colors.error.main
@@ -6275,5 +6336,5 @@ var components = {
 
 var index = { globals, components };
 
-export { componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
+export { Button, Checkbox, Container, Divider, EmailField, Image, Link, LoaderLinear, LoaderRadial, Logo, NewPassword, NumberField, Passcode, PasswordField, PhoneField, SwitchToggle, Text, TextArea, TextField, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
 //# sourceMappingURL=index.esm.js.map