@descope/web-components-ui 1.0.40 → 1.0.42

package/src/components/descope-container/Container.js

@@ -1,57 +1,63 @@
-import { getComponentName, createStyleMixin, draggableMixin, compose, componentNameValidationMixin } from "../../componentsHelpers";
+import {
+	getComponentName,
+	createStyleMixin,
+	draggableMixin,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
 
-export const componentName = getComponentName("container");
+export const componentName = getComponentName('container');
 
 class RawContainer extends HTMLElement {
-  static get componentName() {
-    return componentName
-  }
-  constructor() {
-    super();
-    const template = document.createElement('template');
-    template.innerHTML = `<slot></slot>`;
-
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    this.baseSelector = ':host > slot'
-  }
+	static get componentName() {
+		return componentName;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `<slot></slot>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
 }
 
 const Container = compose(
-  createStyleMixin({
-    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
-    mappings: {
-      'height': {},
-      'width': {},
-
-      'verticalPadding': [
-        { property: 'padding-top' },
-        { property: 'padding-bottom' }
-      ],
-      'horizontalPadding': [
-        { property: 'padding-left' },
-        { property: 'padding-right' }
-      ],
-
-      'display': {},
-      'flexDirection': {},
-      'justifyContent': {},
-      'alignItems': {},
-      'gap': {},
-
-      'backgroundColor': {},
-      'borderRadius': {},
-
-      'borderColor': {},
-      'borderStyle': {},
-      'borderWidth': {},
-
-      'boxShadow': {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-)(RawContainer)
-
-export default Container
+	createStyleMixin({
+		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+		mappings: {
+			height: {},
+			width: {},
+
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
+
+			display: {},
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+
+			backgroundColor: {},
+			borderRadius: {},
+
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawContainer);
+
+export default Container;

package/src/components/descope-container/index.js

@@ -2,4 +2,4 @@ import Container, { componentName } from './Container';
 
 customElements.define(componentName, Container);
 
-export { Container }
+export { Container };

package/src/components/descope-date-picker/index.js

@@ -1,7 +1,13 @@
-import "@vaadin/date-picker";
-import { getComponentName, draggableMixin, createProxy, compose, componentNameValidationMixin } from "../../componentsHelpers";
+import '@vaadin/date-picker';
+import {
+	getComponentName,
+	draggableMixin,
+	createProxy,
+	compose,
+	componentNameValidationMixin
+} from '../../componentsHelpers';
 
-const componentName = getComponentName("date-picker");
+const componentName = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
@@ -9,12 +15,12 @@ const DatePicker = compose(
 )(
 	createProxy({
 		componentName,
-		slots: ["prefix", "suffix"],
-		wrappedEleName: "vaadin-date-picker",
-		style: ``,
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-date-picker',
+		style: ``
 	})
 );
 
 customElements.define(componentName, DatePicker);
 
-export { DatePicker }
+export { DatePicker };

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

@@ -1,5 +1,5 @@
-import "@vaadin/email-field";
-import EmailField, { componentName } from "./EmailField";
+import '@vaadin/email-field';
+import EmailField, { componentName } from './EmailField';
 
 customElements.define(componentName, EmailField);
 

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

@@ -1,5 +1,5 @@
-import "@vaadin/number-field";
-import NumberField, { componentName } from "./NumberField";
+import '@vaadin/number-field';
+import NumberField, { componentName } from './NumberField';
 
 customElements.define(componentName, NumberField);
 

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

@@ -1,5 +1,5 @@
-import "@vaadin/password-field";
-import PasswordField, { componentName } from "./PasswordField";
+import '@vaadin/password-field';
+import PasswordField, { componentName } from './PasswordField';
 
 customElements.define(componentName, PasswordField);
 

package/src/components/descope-switch-toggle/index.js

@@ -1,5 +1,5 @@
-import "@vaadin/checkbox";
-import SwitchToggle, { componentName } from "./SwitchToggle";
+import '@vaadin/checkbox';
+import SwitchToggle, { componentName } from './SwitchToggle';
 
 customElements.define(componentName, SwitchToggle);
 

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

@@ -1,5 +1,5 @@
-import "@vaadin/text-area";
-import TextArea, { componentName } from "./TextArea";
+import '@vaadin/text-area';
+import TextArea, { componentName } from './TextArea';
 
 customElements.define(componentName, TextArea);
 

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/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,79 @@
 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);
+				}
+			}
+
+    // we need to see if this is needed
+    // connectedCallback() {
+    //   super.connectedCallback?.();
+    //   if (this.shadowRoot.isConnected) {
+    //     Array.from(this.attributes).forEach(attr => {
+    //       if (styleAttributes.includes(attr.nodeName)) {
+    //         this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
+    //       }
+    //     });
+    //   }
+    // }
+		};
+	};

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');
+			}
+		}
+	};

package/src/constants.js

@@ -1 +1 @@
-export const DESCOPE_PREFIX = 'descope'
+export const DESCOPE_PREFIX = 'descope';