@descope/web-components-ui 1.0.35 → 1.0.37

package/dist/index.esm.js

@@ -14,14 +14,14 @@ const kebabCase = str => str
 
 const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`;
 
 const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
 
-const createCssSelector = (wrappedComponentName = '', relativeSelectorOrSelectorFn = '') => 
+const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') => 
   typeof relativeSelectorOrSelectorFn === 'function' ? 
-    relativeSelectorOrSelectorFn(wrappedComponentName) : 
-    `${wrappedComponentName}${relativeSelectorOrSelectorFn}`;
+    relativeSelectorOrSelectorFn(baseSelector) : 
+    `${baseSelector}${relativeSelectorOrSelectorFn}`;
 
 class StyleBuilder {
   constructor() {
@@ -53,7 +53,7 @@ const normalizeConfig = (attr, config) => {
   return [Object.assign({}, defaultMapping, config)];
 };
 
-const createStyle = (componentName, wrappedComponentName, mappings) => {
+const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
 
   Object.keys(mappings).forEach((attr) => {
@@ -63,7 +63,7 @@ const createStyle = (componentName, wrappedComponentName, mappings) => {
 
     attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
       style.add(
-        createCssSelector(wrappedComponentName, relativeSelectorOrSelectorFn),
+        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
         property,
         createCssVarFallback(cssVarName)
       );
@@ -79,26 +79,63 @@ 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) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
 
 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';
-      themeStyle.innerHTML = createStyle(this.componentName, this.wrappedComponentName, mappings);
+      themeStyle.id = 'style-mixin-component';
+      themeStyle.innerHTML = createStyle(superclass.componentName, baseSelector, mappings);
       this.shadowRoot.prepend(themeStyle);
     }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (styleAttributes.includes(attrName)) {
+        this.#updateAttrOverrideStyle(attrName, newValue);
+      }
+    }
   }
 };
 
@@ -116,7 +153,7 @@ const draggableMixin = (superclass) =>
       super();
 
       this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `${this.wrappedComponentName} { cursor: inherit }`;
+      this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
     }
 
     #handleDraggableStyle(isDraggable) {
@@ -128,7 +165,7 @@ const draggableMixin = (superclass) =>
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
       if (attrName === 'draggable') {
         this.#handleDraggableStyle(newValue === 'true');
       }
@@ -187,19 +224,11 @@ const createProxy = ({ componentName, wrappedEleName, slots = [], style, exclude
 			super().attachShadow({ mode: "open" }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
 			this.componentName = this.hostElement.tagName.toLowerCase();
-			this.wrappedComponentName = wrappedEleName;
-		}
-
-		#checkComponentName() {
-			if (this.componentName !== componentName) {
-				throw Error(`component name mismatch, expected "${componentName}", current "${actualComponentName}"`)
-			}
+			this.baseSelector = wrappedEleName;
 		}
 
 		connectedCallback() {
 			if (this.shadowRoot.isConnected) {
-				this.#checkComponentName();
-
 				this.proxyElement = this.shadowRoot.querySelector(wrappedEleName);
 				this.setAttribute('tabindex', '0');
 				
@@ -273,7 +302,7 @@ const inputMixin = (superclass) =>
     }
 
     connectedCallback() {
-      super.connectedCallback();
+      super.connectedCallback?.();
 
       // 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
@@ -296,13 +325,35 @@ const inputMixin = (superclass) =>
     }
   };
 
+const componentNameValidationMixin = (superclass) =>
+  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 (currentComponentName !== superclass.componentName) {
+        throw Error(`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`)
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+      if (this.shadowRoot.isConnected) {
+        this.#checkComponentName();
+      }
+    }
+  };
+
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const componentName$3 = getComponentName("button");
+const componentName$4 = getComponentName("button");
 
 const Button = compose(
   createStyleMixin({
@@ -322,19 +373,20 @@ const Button = compose(
     },
   }),
   draggableMixin,
+  componentNameValidationMixin
 )(
   createProxy({
     slots: ["prefix", "suffix"],
     wrappedEleName: "vaadin-button",
     style: `${editorOverrides}`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$3
+    componentName: componentName$4
   })
 );
 
-customElements.define(componentName$3, Button);
+customElements.define(componentName$4, Button);
 
-const componentName$2 = getComponentName("text-field");
+const componentName$3 = getComponentName("text-field");
 
 const TextField = compose(
   createStyleMixin({
@@ -353,22 +405,23 @@ const TextField = compose(
     },
   }),
   draggableMixin,
-  inputMixin
+  inputMixin,
+  componentNameValidationMixin
 )(
   createProxy({
     slots: ["prefix", "suffix"],
     wrappedEleName: "vaadin-text-field",
     style: ``,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2
+    componentName: componentName$3
   })
 );
 
-customElements.define(componentName$2, TextField);
+customElements.define(componentName$3, TextField);
 
 const template = document.createElement('template');
 
-const componentName$1 = getComponentName("combo");
+const componentName$2 = getComponentName("combo");
 
 template.innerHTML = `
   <descope-button></descope-button>
@@ -385,22 +438,79 @@ class Combo extends HTMLElement {
   }
 }
 
-customElements.define(componentName$1, Combo);
+customElements.define(componentName$2, Combo);
 
-const componentName = getComponentName("date-picker");
+const componentName$1 = getComponentName("date-picker");
 
 const DatePicker = compose(
-	draggableMixin
+	draggableMixin,
+	componentNameValidationMixin
 )(
 	createProxy({
-		componentName,
+		componentName: componentName$1,
 		slots: ["prefix", "suffix"],
 		wrappedEleName: "vaadin-date-picker",
 		style: ``,
 	})
 );
 
-customElements.define(componentName, DatePicker);
+customElements.define(componentName$1, DatePicker);
+
+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';
+  }
+}
+
+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);
+
+customElements.define(componentName, Container);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -441,7 +551,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		// starts with underscore -> attribute selector
 
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
+			if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
 
 			const nextSection = restPath[idx + 1];
 
@@ -450,14 +560,14 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 				return acc;
 			}
 
-			return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
+			return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
 		}, '');
 
 		let selector = `${getComponentName(component)}${attrsSelector}`;
 
 		return {
 			[selector]: {
-				[getVarName([component, property])]: val
+				[property]: val
 			}
 		}
 	});
@@ -473,6 +583,24 @@ ${globalsThemeToStyle(globals, themeName)}
 ${componentsThemeToStyle(components, themeName)}
 `;
 
+const useVar = varName => `var(${varName})`;
+
+const createHelperVars = (theme, prefix) => {
+	const res = transformTheme(theme, [], (path, value) => {
+		const modifiedPath = [...path];
+		const property = modifiedPath.splice(-1);
+		const varName = getCssVarName(prefix, property);
+
+		const vars = { [property]: varName };
+		const theme = set({}, [...modifiedPath, varName], value);
+		const useVars = { [property]: useVar(varName) };
+
+		return { theme, useVars, vars }
+	});
+
+	return [res.theme, res.useVars, res.vars]
+};
+
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
@@ -554,6 +682,8 @@ const shadow = {
 	color: colors.primary.main,
 	size: {
 		sm: `0 0 10px`,
+		md: `0 0 20px`,
+		lg: `0 0 30px`,
 	},
 };
 
@@ -566,135 +696,227 @@ var globals = {
 	shadow,
 };
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
+const vars$2 = Button.cssVarList;
 
 const mode = {
 	primary: {
-		main: globalRefs$1.colors.primary.main,
+		main: globalRefs$2.colors.primary.main,
 		dark: 'darkblue',
 		light: 'lightblue',
 		contrast: 'white'
 	},
-	secondary: globalRefs$1.colors.secondary,
-	success: globalRefs$1.colors.success,
-	error: globalRefs$1.colors.error,
-	surface: globalRefs$1.colors.surface,
+	secondary: globalRefs$2.colors.secondary,
+	success: globalRefs$2.colors.success,
+	error: globalRefs$2.colors.error,
+	surface: globalRefs$2.colors.surface,
 };
 
-const colorRef = getThemeRefs(mode.primary, 'button');
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$4);
 
 const button = {
-	borderRadius: globalRefs$1.radius.lg,
-	cursor: 'pointer',
-	
+	...helperTheme$1,
+	[vars$2.borderRadius]: globalRefs$2.radius.lg,
+	[vars$2.cursor]: 'pointer',
+
 	size: {
 		xs: {
-			height: '10px',
-			fontSize: '10px',
-			padding: `0 ${globalRefs$1.spacing.xs}`
+			[vars$2.height]: '10px',
+			[vars$2.fontSize]: '10px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.xs}`
 		},
 		sm: {
-			height: '20px',
-			fontSize: '10px',
-			padding: `0 ${globalRefs$1.spacing.sm}`
+			[vars$2.height]: '20px',
+			[vars$2.fontSize]: '10px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.sm}`
 		},
 		md: {
-			height: '30px',
-			fontSize: '14px',
-			padding: `0 ${globalRefs$1.spacing.md}`
+			[vars$2.height]: '30px',
+			[vars$2.fontSize]: '14px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.md}`
 		},
 		lg: {
-			height: '40px',
-			fontSize: '20px',
-			padding: `0 ${globalRefs$1.spacing.lg}`
+			[vars$2.height]: '40px',
+			[vars$2.fontSize]: '20px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.lg}`
 		},
 		xl: {
-			height: '50px',
-			fontSize: '25px',
-			padding: `0 ${globalRefs$1.spacing.xl}`
+			[vars$2.height]: '50px',
+			[vars$2.fontSize]: '25px',
+			[vars$2.padding]: `0 ${globalRefs$2.spacing.xl}`
 		},
 	},
 
-	_fullwidth: {
-		width: '100%'
+	_fullWidth: {
+		[vars$2.width]: '100%'
 	},
 
-	mode,
-
 	variant: {
 		contained: {
-			color: colorRef.contrast,
-			backgroundColor: colorRef.main,
+			[vars$2.color]: helperRefs$1.contrast,
+			[vars$2.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				backgroundColor: colorRef.dark,
+				[vars$2.backgroundColor]: helperRefs$1.dark,
 			},
 		},
 		outline: {
-			color: colorRef.main,
-			borderColor: colorRef.main,
-			borderWidth: '2px',
-			borderStyle: 'solid',
+			[vars$2.color]: helperRefs$1.main,
+			[vars$2.borderColor]: helperRefs$1.main,
+			[vars$2.borderWidth]: '2px',
+			[vars$2.borderStyle]: 'solid',
 			_hover: {
-				color: colorRef.dark,
-				borderColor: colorRef.dark,
+				[vars$2.color]: helperRefs$1.dark,
+				[vars$2.borderColor]: helperRefs$1.dark,
 				_error: {
-					color: 'red',
+					[vars$2.color]: 'red',
 				}
 			}
 		},
 		link: {
-			color: colorRef.main,
+			[vars$2.color]: helperRefs$1.main,
 		},
 	}
 };
 
-const globalRefs = getThemeRefs(globals);
+const globalRefs$1 = getThemeRefs(globals);
+
+const vars$1 = TextField.cssVarList;
 
 const textField = {
-  borderRadius: globalRefs.radius.lg,
-  color: globalRefs.colors.surface.contrast,
-  backgroundColor: globalRefs.colors.surface.light,
-  borderWidth: globalRefs.border.small,
-  borderStyle: 'solid',
-  borderColor: globalRefs.colors.surface.dark,
-  labelColor: globalRefs.colors.surface.contrast,
-  placeholderColor: globalRefs.colors.surface.dark,
+  [vars$1.borderRadius]: globalRefs$1.radius.lg,
+  [vars$1.color]: globalRefs$1.colors.surface.contrast,
+  [vars$1.backgroundColor]: globalRefs$1.colors.surface.light,
+  [vars$1.borderWidth]: globalRefs$1.border.small,
+  [vars$1.borderStyle]: 'solid',
+  [vars$1.borderColor]: globalRefs$1.colors.surface.dark,
+  [vars$1.labelColor]: globalRefs$1.colors.surface.contrast,
+  [vars$1.placeholderColor]: globalRefs$1.colors.surface.dark,
   _invalid: {
-    backgroundColor: globalRefs.colors.error.light,
-    borderColor: globalRefs.colors.error.dark,
+    [vars$1.backgroundColor]: globalRefs$1.colors.error.light,
+    [vars$1.borderColor]: globalRefs$1.colors.error.dark,
   },
 
   size: {
     sm: {
-      height: '20px',
-      fontSize: '10px',
-      padding: `0 ${globalRefs.spacing.xs}`
+      [vars$1.height]: '20px',
+      [vars$1.fontSize]: '10px',
+      [vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`
     },
     md: {
-      height: '30px',
-      fontSize: '14px',
-      padding: `0 ${globalRefs.spacing.sm}`
+      [vars$1.height]: '30px',
+      [vars$1.fontSize]: '14px',
+      [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
     },
     lg: {
-      height: '40px',
-      fontSize: '20px',
-      padding: `0 ${globalRefs.spacing.sm}`
+      [vars$1.height]: '40px',
+      [vars$1.fontSize]: '20px',
+      [vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
     },
     xl: {
-      height: '50px',
-      fontSize: '25px',
-      padding: `0 ${globalRefs.spacing.md}`
+      [vars$1.height]: '50px',
+      [vars$1.fontSize]: '25px',
+      [vars$1.padding]: `0 ${globalRefs$1.spacing.md}`
     },
   },
 
-  _fullwidth: {
-    width: '100%'
+  _fullWidth: {
+    [vars$1.width]: '100%'
   },
 };
 
+const globalRefs = getThemeRefs(globals);
+
+const vars = Container.cssVarList;
+
+const verticalAlignment = {
+	start: { verticalAlignment: 'start' },
+	center: { verticalAlignment: 'center' },
+	end: { verticalAlignment: 'end' },
+};
+
+const horizontalAlignment = {
+	start: { horizontalAlignment: 'start' },
+	center: { horizontalAlignment: 'center' },
+	end: { horizontalAlignment: 'end' },
+};
+
+const [helperTheme, helperVars, helperRefs] =
+	createHelperVars({ verticalAlignment, horizontalAlignment }, 'container');
+
+const container = {
+	...helperTheme,
+	[vars.display]: 'flex',
+	verticalPadding: {
+		sm: { [vars.verticalPadding]: '5px' },
+		md: { [vars.verticalPadding]: '10px' },
+		lg: { [vars.verticalPadding]: '20px' },
+	},
+	horizontalPadding: {
+		sm: { [vars.horizontalPadding]: '5px' },
+		md: { [vars.horizontalPadding]: '10px' },
+		lg: { [vars.horizontalPadding]: '20px' },
+	},
+	direction: {
+		row: {
+			[vars.flexDirection]: 'row',
+			[vars.alignItems]: helperRefs.verticalAlignment,
+			[vars.justifyContent]: helperRefs.horizontalAlignment,
+			horizontalAlignment: {
+				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+			}
+		},
+
+		column: {
+			[vars.flexDirection]: 'column',
+			[vars.alignItems]: helperRefs.horizontalAlignment,
+			[vars.justifyContent]: helperRefs.verticalAlignment,
+			verticalAlignment: {
+				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+			}
+		},
+	},
+
+	spaceBetween: {
+		sm: {
+			[vars.gap]: '10px'
+		},
+		md: {
+			[vars.gap]: '20px'
+		},
+		lg: {
+			[vars.gap]: '30px'
+		}
+	},
+
+	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}` 
+		},
+	},
+
+	borderRadius: {
+		sm: { 
+			[vars.borderRadius]: globalRefs.radius.sm
+		},
+		md: { 
+			[vars.borderRadius]: globalRefs.radius.md
+		},
+		lg: { 
+			[vars.borderRadius]: globalRefs.radius.lg
+		},
+	}
+};
+
 var components = {
     button,
-    textField
+    textField,
+    container
 };
 
 var index = { globals, components };