@descope/web-components-ui 1.0.46 → 1.0.47

package/dist/index.esm.js

@@ -102,7 +102,7 @@ const createCssVarsList = (componentName, mappings) =>
 
 // match the host selector with the inner element selector
 // e.g. when we want to set the same size for the host & the inner element this can be useful
-const matchHostStyle = (mappingObj) => [
+const matchHostStyle = (mappingObj = {}) => [
 	mappingObj,
 	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
 ];
@@ -141,14 +141,14 @@ const createStyleMixin =
 			}
 
 			#updateAttrOverrideStyle(attrName, value) {
-				const style = this.#styleEle.sheet.cssRules[0].style;
+				const style = this.#styleEle.sheet?.cssRules[0].style;
 				const varName = getCssVarName(
 					superclass.componentName,
 					attrName.replace(/^st-/, '')
 				);
 
-				if (value) style.setProperty(varName, value);
-				else style.removeProperty(varName);
+				if (value) style?.setProperty(varName, value);
+				else style?.removeProperty(varName);
 			}
 
 			#createComponentStyle() {
@@ -336,6 +336,18 @@ const createProxy = ({
 	return ProxyElement;
 };
 
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return target[property] = v
+		},
+		get: function () {
+			return target[property]
+		},
+		configurable: true
+	});
+};
+
 const inputMixin = (superclass) =>
 	class InputMixinClass extends superclass {
 		static get formAssociated() {
@@ -355,6 +367,7 @@ const inputMixin = (superclass) =>
 		}
 
 		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
 			super.connectedCallback?.();
 
 			// this is needed in order to make sure the form input validation is working
@@ -362,13 +375,15 @@ const inputMixin = (superclass) =>
 				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');
+				this.baseEle.querySelector('input') ||
+				this.baseEle.querySelector('textarea');
 			if (!input) throw Error('no input was found');
 
+			// sync properties
+			propertyObserver(this, input, 'value');
+			this.setSelectionRange = input.setSelectionRange.bind(input);
+
 			this.checkValidity = () => input.checkValidity();
 			this.reportValidity = () => input.reportValidity();
 			this.validity = input.validity;
@@ -421,6 +436,9 @@ const componentName$b = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-button { margin: 0; }
 	vaadin-button::part(prefix) {
 		margin-left: 0;
@@ -453,9 +471,9 @@ const Button = compose(
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: [matchHostStyle()],
+			width: matchHostStyle(),
 			cursor: {},
-			padding: [matchHostStyle(), { selector: selectors$2.label }],
+			padding: [{ selector: selectors$2.label }],
 			textDecoration: { selector: selectors$2.label }
 		}
 	}),
@@ -517,7 +535,7 @@ let overrides$5 = ``;
 const textFieldMappings = {
 	color: { selector: selectors$1.input },
 	backgroundColor: { selector: selectors$1.input },
-	width: [matchHostStyle()],
+	width: matchHostStyle(),
 	color: { selector: selectors$1.input },
 	borderColor: [
 		{ selector: selectors$1.input },
@@ -560,6 +578,10 @@ const TextField = compose(
 );
 
 overrides$5 = `
+	:host {
+		display: inline-block;
+	}
+
 	vaadin-text-field {
 		margin: 0;
 		padding: 0;
@@ -643,6 +665,9 @@ const NumberField = compose(
 );
 
 overrides$4 = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-number-field {
 		margin: 0;
 		padding: 0;
@@ -705,6 +730,9 @@ const EmailField = compose(
 );
 
 overrides$3 = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-email-field {
 		margin: 0;
 		padding: 0;
@@ -774,6 +802,9 @@ const PasswordField = compose(
 );
 
 overrides$2 = `
+	:host {
+		display: inline-block;
+	}
 	vaadin-password-field {
 		margin: 0;
 		padding: 0;
@@ -828,7 +859,7 @@ const TextArea = compose(
 			resize: { selector: '> textarea' },
 			color: { selector: selectors.label },
 			cursor: {},
-			width: {},
+			width: matchHostStyle(),
 			backgroundColor: { selector: selectors.input },
 			borderWidth: { selector: selectors.input },
 			borderStyle: { selector: selectors.input },
@@ -852,6 +883,10 @@ const TextArea = compose(
 );
 
 overrides$1 = `
+	:host {
+		display: inline-block;
+	}
+
 	vaadin-text-area {
 		margin: 0;
 	}
@@ -920,7 +955,7 @@ const Container = compose(
 				{ property: 'padding-right' }
 			],
 
-			display: {},
+			display: {}, // maybe this should be hardcoded to flex
 			flexDirection: {},
 			justifyContent: {},
 			alignItems: {},
@@ -1379,7 +1414,7 @@ const componentName$2 = getComponentName('checkbox');
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: {},
+			width: matchHostStyle(),
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -1390,7 +1425,11 @@ const Checkbox = compose(
 	createProxy({
 		slots: [],
 		wrappedEleName: 'vaadin-checkbox',
-		style: ``,
+		style: `
+		:host {
+			display: inline-block;
+		}
+		`,
 		excludeAttrsSync: ['tabindex'],
 		componentName: componentName$2
 	})
@@ -1409,7 +1448,7 @@ let overrides = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: {},
+			width: matchHostStyle(),
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -1427,6 +1466,10 @@ const SwitchToggle = compose(
 );
 
 overrides = `
+	:host {
+		display: inline-block;
+	}
+	
 	:host {
 		--margin: 7px;
 		--width: var(${SwitchToggle.cssVarList.width});