@descope/web-components-ui 1.0.39 → 1.0.41

package/src/components/descope-text-field/TextField.js

@@ -1,35 +1,105 @@
-import { getComponentName, createStyleMixin, draggableMixin, createProxy, inputMixin, compose, componentNameValidationMixin } from "../../componentsHelpers";
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	createProxy,
+	inputMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
 
-export const componentName = getComponentName("text-field")
+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' }
+};
 
 const TextField = compose(
-  createStyleMixin({
-    mappings: {
-      'placeholderColor': { selector: '> input:placeholder-shown', property: 'color' },
-      'color': {},
-      'borderColor': { selector: '::part(input-field)' },
-      'borderWidth': { selector: '::part(input-field)' },
-      'borderStyle': { selector: '::part(input-field)' },
-      'borderRadius': { selector: '::part(input-field)' },
-      'boxShadow': { selector: '::part(input-field)' },
-      'height': { selector: '::part(input-field)' },
-      'padding': { selector: '::part(input-field)' },
-      'backgroundColor': { selector: '::part(input-field)' },
-      'labelColor': { selector: '::part(label)', property: 'color' },
-    },
-  }),
-  draggableMixin,
-  inputMixin,
-  componentNameValidationMixin
+	createStyleMixin({
+		mappings: textFieldMappings
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
 )(
-  createProxy({
-    slots: ["prefix", "suffix"],
-    wrappedEleName: "vaadin-text-field",
-    style: ``,
-    excludeAttrsSync: ['tabindex'],
-    componentName
-  })
+	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
+export default TextField;

package/src/components/descope-text-field/index.js

@@ -1,6 +1,6 @@
-import "@vaadin/text-field";
-import TextField, { componentName } from "./TextField";
+import '@vaadin/text-field';
+import TextField, { componentName } from './TextField';
 
 customElements.define(componentName, TextField);
 
-export { TextField }
+export { TextField };

package/src/componentsHelpers/componentNameValidationMixin.js

@@ -1,21 +1,25 @@
 export const componentNameValidationMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-    #checkComponentName() {
-      const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
+	class DraggableMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
 
-      if (!superclass.componentName) {
-        throw Error(`component name is not defined on super class, make sure you have a static get for "componentName"`)
-      }
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
 
-      if (currentComponentName !== superclass.componentName) {
-        throw Error(`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`)
-      }
-    }
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
+			}
+		}
 
-    connectedCallback() {
-      super.connectedCallback?.();
-      if (this.shadowRoot.isConnected) {
-        this.#checkComponentName()
-      }
-    }
-  }
+		connectedCallback() {
+			super.connectedCallback?.();
+			if (this.shadowRoot.isConnected) {
+				this.#checkComponentName();
+			}
+		}
+	};

package/src/componentsHelpers/createProxy/helpers.js

@@ -1,33 +1,37 @@
-
 const observeAttributes = (ele, callback, excludeAttrs) => {
-  // sync all attrs on init
-  callback(...Array.from(ele.attributes).map(attr => attr.name));
+	// sync all attrs on init
+	callback(...Array.from(ele.attributes).map((attr) => attr.name));
 
-  const observer = new MutationObserver((mutationsList) => {
-    for (const mutation of mutationsList) {
-      if (mutation.type === "attributes" && !excludeAttrs.includes(mutation.attributeName)) {
-        callback(mutation.attributeName);
-      }
-    }
-  });
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (
+				mutation.type === 'attributes' &&
+				!excludeAttrs.includes(mutation.attributeName)
+			) {
+				callback(mutation.attributeName);
+			}
+		}
+	});
 
-  observer.observe(ele, { attributes: true });
-}
+	observer.observe(ele, { attributes: true });
+};
 
-const createSyncAttrsCb = (srcEle, targetEle) => (...attrNames) => {
-  attrNames.forEach(attrName => {
-    const srcAttrVal = srcEle.getAttribute(attrName);
-    if (srcAttrVal !== null) {
-      if (targetEle.getAttribute(attrName) !== srcAttrVal) {
-        targetEle.setAttribute(attrName, srcAttrVal);
-      }
-    } else {
-      targetEle.removeAttribute(attrName);
-    }
-  })
-}
+const createSyncAttrsCb =
+	(srcEle, targetEle) =>
+	(...attrNames) => {
+		attrNames.forEach((attrName) => {
+			const srcAttrVal = srcEle.getAttribute(attrName);
+			if (srcAttrVal !== null) {
+				if (targetEle.getAttribute(attrName) !== srcAttrVal) {
+					targetEle.setAttribute(attrName, srcAttrVal);
+				}
+			} else {
+				targetEle.removeAttribute(attrName);
+			}
+		});
+	};
 
 export const syncAttrs = (ele1, ele2, excludeAttrs) => {
-  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs)
-  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs)
-}
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
+};

package/src/componentsHelpers/createProxy/index.js

@@ -1,12 +1,17 @@
-import { syncAttrs } from "./helpers";
-
-export const createProxy = ({ componentName, wrappedEleName, slots = [], style, excludeAttrsSync = [] }) => {
+import { syncAttrs } from './helpers';
 
+export const createProxy = ({
+	componentName,
+	wrappedEleName,
+	slots = [],
+	style,
+	excludeAttrsSync = []
+}) => {
 	const template = `
-		${style ? `<style id="create-proxy">${style}</style>` : ''}
+		<style id="create-proxy"></style>
 		<${wrappedEleName}>
 		<slot></slot>
-		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join("")}
+		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
 		</${wrappedEleName}>
 	`;
 
@@ -16,21 +21,23 @@ export const createProxy = ({ componentName, wrappedEleName, slots = [], style,
 		}
 
 		constructor() {
-			super().attachShadow({ mode: "open" }).innerHTML = template;
+			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
-			this.componentName = this.hostElement.tagName.toLowerCase()
-			this.baseSelector = wrappedEleName
+			this.componentName = this.hostElement.tagName.toLowerCase();
+			this.baseSelector = wrappedEleName;
+			this.shadowRoot.getElementById('create-proxy').innerHTML =
+				typeof style === 'function' ? style() : style;
 		}
 
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
 				this.setAttribute('tabindex', '0');
-				
+
 				// we want to focus on the proxy element when focusing our WC
 				this.onfocus = (e) => {
-					this.proxyElement.focus()
-				}
+					this.proxyElement.focus();
+				};
 
 				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
 				// this support is needed since both proxy host and element catch `focus`/`blur` event
@@ -40,15 +47,18 @@ export const createProxy = ({ componentName, wrappedEleName, slots = [], style,
 						this.removeAttribute('tabindex');
 						// We want to defer the action of setting the tab index back
 						// so it will happen after focusing the previous element
-						setTimeout(() => this.setAttribute('tabindex', '0'), 0)
+						setTimeout(() => this.setAttribute('tabindex', '0'), 0);
 					}
-				}
+				};
 
 				this.mouseoverCbRef = () => {
 					this.proxyElement.setAttribute('hover', '');
-					this.proxyElement.addEventListener('mouseleave', () =>
-						this.proxyElement.removeAttribute('hover'), { once: true })
-				}
+					this.proxyElement.addEventListener(
+						'mouseleave',
+						() => this.proxyElement.removeAttribute('hover'),
+						{ once: true }
+					);
+				};
 
 				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
 
@@ -60,7 +70,7 @@ export const createProxy = ({ componentName, wrappedEleName, slots = [], style,
 		}
 
 		disconnectedCallback() {
-			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef)
+			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef);
 		}
 
 		attributeChangedCallback() {

package/src/componentsHelpers/createStyleMixin/helpers.js

@@ -1,68 +1,86 @@
-import { getCssVarName, kebabCase } from "../../helpers"
+import { getCssVarName, kebabCase } from '../../helpers';
 
-const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+const createCssVarFallback = (first, ...rest) =>
+	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
 
-const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') => 
-  typeof relativeSelectorOrSelectorFn === 'function' ? 
-    relativeSelectorOrSelectorFn(baseSelector) : 
-    `${baseSelector}${relativeSelectorOrSelectorFn}`;
+const createCssSelector = (
+	baseSelector = '',
+	relativeSelectorOrSelectorFn = ''
+) =>
+	typeof relativeSelectorOrSelectorFn === 'function'
+		? relativeSelectorOrSelectorFn(baseSelector)
+		: `${baseSelector}${relativeSelectorOrSelectorFn}`;
 
 class StyleBuilder {
-  constructor() {
-    this.styleMap = new Map()
-  }
-
-  add(selector, property, value) {
-    if (!this.styleMap.has(selector)) {
-      this.styleMap.set(selector, [])
-    }
-
-    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }])
-  }
-
-  toString() {
-    return Array.from(this.styleMap.entries()).reduce((style, [selector, propValArr]) =>
-      style += `${selector} { \n${propValArr.map(({ property, value }) => `${property}: ${value}`).join(';\n')} \n}\n\n`
-      , '')
-  }
+	constructor() {
+		this.styleMap = new Map();
+	}
+
+	add(selector, property, value) {
+		if (!this.styleMap.has(selector)) {
+			this.styleMap.set(selector, []);
+		}
+
+		this.styleMap.set(selector, [
+			...this.styleMap.get(selector),
+			{ property, value }
+		]);
+	}
+
+	toString() {
+		return Array.from(this.styleMap.entries()).reduce(
+			(style, [selector, propValArr]) =>
+				(style += `${selector} { \n${propValArr
+					.map(({ property, value }) => `${property}: ${value}`)
+					.join(';\n')} \n}\n\n`),
+			''
+		);
+	}
 }
 
 const normalizeConfig = (attr, config) => {
-  const defaultMapping = { selector: '', property: kebabCase(attr) }
+	const defaultMapping = { selector: '', property: kebabCase(attr) };
 
-  if (!config || !Object.keys(config).length) return [defaultMapping];
+	if (!config || !Object.keys(config).length) return [defaultMapping];
 
-  if (Array.isArray(config)) return config.map(entry => Object.assign({}, defaultMapping, entry));
+	if (Array.isArray(config))
+		return config.map((entry) => Object.assign({}, defaultMapping, entry));
 
-  return [Object.assign({}, defaultMapping, config)];
-}
+	return [Object.assign({}, defaultMapping, config)];
+};
 
 export const createStyle = (componentName, baseSelector, mappings) => {
-  const style = new StyleBuilder();
+	const style = new StyleBuilder();
 
-  Object.keys(mappings).forEach((attr) => {
-    const attrConfig = normalizeConfig(attr, mappings[attr])
+	Object.keys(mappings).forEach((attr) => {
+		const attrConfig = normalizeConfig(attr, mappings[attr]);
 
-    const cssVarName = getCssVarName(componentName, attr)
+		const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
-      style.add(
-        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-        property,
-        createCssVarFallback(cssVarName)
-      )
-    })
-  })
+		attrConfig.forEach(
+			({ selector: relativeSelectorOrSelectorFn, property }) => {
+				style.add(
+					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+					property,
+					createCssVarFallback(cssVarName)
+				);
+			}
+		);
+	});
 
-  return style.toString();
-}
+	return style.toString();
+};
 
 export const createCssVarsList = (componentName, mappings) =>
-  Object.keys(mappings).reduce(
-    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
-    {}
-  )
+	Object.keys(mappings).reduce(
+		(acc, attr) =>
+			Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+		{}
+	);
 
 // 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
-export const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
+export const matchHostStyle = (mappingObj) => [
+	mappingObj,
+	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
+];

package/src/componentsHelpers/createStyleMixin/index.js

@@ -1,58 +1,67 @@
 import { getCssVarName, kebabCaseJoin } from '../../helpers';
 import { createStyle, createCssVarsList } from './helpers';
 
-export const createStyleMixin = ({  mappings = {} }) => (superclass) => {
-  const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key))
-  return class CustomStyleMixinClass extends superclass {
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || []
-      return [...superAttrs, ...styleAttributes]
-    }
-
-    static get cssVarList() {
-      return createCssVarsList(superclass.componentName, mappings)
-    }
-
-    #styleEle = null;
-
-    constructor() {
-      super();
-
-      this.#createComponentStyle()
-      this.#createAttrOverrideStyle()
-    }
-
-    #createAttrOverrideStyle() {
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.id = 'style-mixin-overrides'
-
-      this.#styleEle.innerText = '* {}'
-      this.shadowRoot.prepend(this.#styleEle);
-    }
-
-    #updateAttrOverrideStyle(attrName, value) {
-      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)
-    }
-
-    #createComponentStyle() {
-      const themeStyle = document.createElement('style');
-      themeStyle.id = 'style-mixin-component'
-      themeStyle.innerHTML = createStyle(superclass.componentName, this.baseSelector, mappings)
-      this.shadowRoot.prepend(themeStyle);
-    }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-      if (styleAttributes.includes(attrName)) {
-        this.#updateAttrOverrideStyle(attrName, newValue)
-      }
-    }
-  }
-}
+export const createStyleMixin =
+	({ mappings = {} }) =>
+	(superclass) => {
+		const styleAttributes = Object.keys(mappings).map((key) =>
+			kebabCaseJoin('st', key)
+		);
+		return class CustomStyleMixinClass extends superclass {
+			static get observedAttributes() {
+				const superAttrs = superclass.observedAttributes || [];
+				return [...superAttrs, ...styleAttributes];
+			}
+
+			static get cssVarList() {
+				return createCssVarsList(superclass.componentName, mappings);
+			}
+
+			#styleEle = null;
+
+			constructor() {
+				super();
+
+				this.#createComponentStyle();
+				this.#createAttrOverrideStyle();
+			}
+
+			#createAttrOverrideStyle() {
+				this.#styleEle = document.createElement('style');
+				this.#styleEle.id = 'style-mixin-overrides';
+
+				this.#styleEle.innerText = '* {}';
+				this.shadowRoot.prepend(this.#styleEle);
+			}
+
+			#updateAttrOverrideStyle(attrName, value) {
+				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);
+			}
+
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-component';
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					this.baseSelector,
+					mappings
+				);
+				this.shadowRoot.prepend(themeStyle);
+			}
+
+			attributeChangedCallback(attrName, oldValue, newValue) {
+				super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+				if (styleAttributes.includes(attrName)) {
+					this.#updateAttrOverrideStyle(attrName, newValue);
+				}
+			}
+		};
+	};

package/src/componentsHelpers/draggableMixin.js

@@ -1,32 +1,31 @@
 export const draggableMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
+	class DraggableMixinClass extends superclass {
+		#styleEle = null;
 
-    #styleEle = null;
+		static get observedAttributes() {
+			const superAttrs = superclass.observedAttributes || [];
+			return [...superAttrs, 'draggable'];
+		}
 
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || []
-      return [...superAttrs, 'draggable']
-    }
+		constructor() {
+			super();
 
-    constructor() {
-      super();
+			this.#styleEle = document.createElement('style');
+			this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
+		}
 
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
-    }
+		#handleDraggableStyle(isDraggable) {
+			if (isDraggable) {
+				this.shadowRoot.appendChild(this.#styleEle);
+			} else {
+				this.#styleEle.remove();
+			}
+		}
 
-    #handleDraggableStyle(isDraggable) {
-      if (isDraggable) {
-        this.shadowRoot.appendChild(this.#styleEle)
-      } else {
-        this.#styleEle.remove();
-      }
-    }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-      if (attrName === 'draggable') {
-        this.#handleDraggableStyle(newValue === 'true')
-      }
-    }
-  }
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			if (attrName === 'draggable') {
+				this.#handleDraggableStyle(newValue === 'true');
+			}
+		}
+	};