@descope/web-components-ui 1.0.35

package/dist/index.esm.js

@@ -0,0 +1,703 @@
+import '@vaadin/button';
+import '@vaadin/text-field';
+import '@vaadin/date-picker';
+import merge from 'lodash.merge';
+import set from 'lodash.set';
+import Color from 'color';
+
+const DESCOPE_PREFIX = 'descope';
+
+const kebabCase = str => str
+.replace(/([a-z])([A-Z])/g, "$1-$2")
+.replace(/[\s_.]+/g, '-')
+.toLowerCase();
+
+const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
+
+const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+
+const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+
+const createCssSelector = (wrappedComponentName = '', relativeSelectorOrSelectorFn = '') => 
+  typeof relativeSelectorOrSelectorFn === 'function' ? 
+    relativeSelectorOrSelectorFn(wrappedComponentName) : 
+    `${wrappedComponentName}${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`
+      , '')
+  }
+}
+
+const normalizeConfig = (attr, config) => {
+  const defaultMapping = { selector: '', property: kebabCase(attr) };
+
+  if (!config || !Object.keys(config).length) return [defaultMapping];
+
+  if (Array.isArray(config)) return config.map(entry => Object.assign({}, defaultMapping, entry));
+
+  return [Object.assign({}, defaultMapping, config)];
+};
+
+const createStyle = (componentName, wrappedComponentName, mappings) => {
+  const style = new StyleBuilder();
+
+  Object.keys(mappings).forEach((attr) => {
+    const attrConfig = normalizeConfig(attr, mappings[attr]);
+
+    const cssVarName = getCssVarName(componentName, attr);
+
+    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
+      style.add(
+        createCssSelector(wrappedComponentName, relativeSelectorOrSelectorFn),
+        property,
+        createCssVarFallback(cssVarName)
+      );
+    });
+  });
+
+  return style.toString();
+};
+
+const createCssVarsList = (componentName, mappings) =>
+  Object.keys(mappings).reduce(
+    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+    {}
+  );
+
+const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
+
+const createStyleMixin = ({  mappings = {} }) => (superclass) => {
+  return class CustomStyleMixinClass extends superclass {
+    static get cssVarList() {
+      return createCssVarsList(superclass.componentName, mappings)
+    }
+  
+    constructor() {
+      super();
+
+      this.#createComponentStyle();
+    }
+
+    #createComponentStyle() {
+      const themeStyle = document.createElement('style');
+      themeStyle.id = 'style-mixin';
+      themeStyle.innerHTML = createStyle(this.componentName, this.wrappedComponentName, mappings);
+      this.shadowRoot.prepend(themeStyle);
+    }
+  }
+};
+
+const draggableMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+
+    #styleEle = null;
+
+    static get observedAttributes() {
+      const superAttrs = superclass.observedAttributes || [];
+      return [...superAttrs, 'draggable']
+    }
+
+    constructor() {
+      super();
+
+      this.#styleEle = document.createElement('style');
+      this.#styleEle.innerText = `${this.wrappedComponentName} { cursor: inherit }`;
+    }
+
+    #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');
+      }
+    }
+  };
+
+const observeAttributes = (ele, callback, excludeAttrs) => {
+  // 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);
+      }
+    }
+  });
+
+  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 syncAttrs = (ele1, ele2, excludeAttrs) => {
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
+};
+
+const createProxy = ({ componentName, wrappedEleName, slots = [], style, excludeAttrsSync = [] }) => {
+
+	const template = `
+		${style ? `<style id="create-proxy">${style}</style>` : ''}
+		<${wrappedEleName}>
+		<slot></slot>
+		${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join("")}
+		</${wrappedEleName}>
+	`;
+
+	class ProxyElement extends HTMLElement {
+		static get componentName() {
+			return componentName;
+		}
+
+		constructor() {
+			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}"`)
+			}
+		}
+
+		connectedCallback() {
+			if (this.shadowRoot.isConnected) {
+				this.#checkComponentName();
+
+				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();
+				};
+
+				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
+				// this support is needed since both proxy host and element catch `focus`/`blur` event
+				// which causes faulty behaviour.
+				this.proxyElement.onkeydown = (e) => {
+					if (e.shiftKey && e.keyCode === 9) {
+						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);
+					}
+				};
+
+				this.mouseoverCbRef = () => {
+					this.proxyElement.setAttribute('hover', '');
+					this.proxyElement.addEventListener('mouseleave', () =>
+						this.proxyElement.removeAttribute('hover'), { once: true });
+				};
+
+				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
+
+				// sync events
+				this.addEventListener = this.proxyElement.addEventListener;
+
+				syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
+			}
+		}
+
+		disconnectedCallback() {
+			this.proxyElement.removeEventListener('mouseover', this.mouseoverCbRef);
+		}
+
+		attributeChangedCallback() {
+			if (!this.proxyElement) {
+				return;
+			}
+		}
+	}
+
+	return ProxyElement;
+};
+
+const inputMixin = (superclass) =>
+  class InputMixinClass extends superclass {
+		static get formAssociated() {
+			return true;
+		}
+    
+    #internals
+
+    constructor() {
+      super();
+
+      this.#internals = this.attachInternals();
+
+      // this is needed in order to make sure the form input validation is working
+      if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', 0);
+      }
+    }
+
+    formAssociatedCallback() {
+      this.setValidity?.();
+    }
+
+    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
+      const input = this.proxyElement.querySelector('input');
+      if (!input) throw Error('no input was found')
+
+      this.checkValidity = () => input.checkValidity();
+      this.reportValidity = () => input.reportValidity();
+      this.validity = input.validity;
+
+      this.setValidity = () => {
+        this.#internals.setValidity(input.validity, input.validationMessage);
+      };
+
+      input.oninput = () => {
+        this.value = input.value;
+        this.setValidity();
+      };
+
+    }
+  };
+
+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 Button = compose(
+  createStyleMixin({
+    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+    mappings: {
+      'backgroundColor': {},
+      'borderRadius': {},
+      'color': { selector: '::part(label)' },
+      'borderColor': {},
+      'borderStyle': {},
+      'borderWidth': {},
+      'fontSize': {},
+      'height': {},
+      'width': matchHostStyle({}),
+      'cursor': {},
+      'padding': {},
+    },
+  }),
+  draggableMixin,
+)(
+  createProxy({
+    slots: ["prefix", "suffix"],
+    wrappedEleName: "vaadin-button",
+    style: `${editorOverrides}`,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$3
+  })
+);
+
+customElements.define(componentName$3, Button);
+
+const componentName$2 = getComponentName("text-field");
+
+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
+)(
+  createProxy({
+    slots: ["prefix", "suffix"],
+    wrappedEleName: "vaadin-text-field",
+    style: ``,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$2
+  })
+);
+
+customElements.define(componentName$2, TextField);
+
+const template = document.createElement('template');
+
+const componentName$1 = getComponentName("combo");
+
+template.innerHTML = `
+  <descope-button></descope-button>
+  <descope-text-field></descope-text-field>
+`;
+
+class Combo extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).appendChild(
+      template.content.cloneNode(true)
+    );
+  }
+}
+
+customElements.define(componentName$1, Combo);
+
+const componentName = getComponentName("date-picker");
+
+const DatePicker = compose(
+	draggableMixin
+)(
+	createProxy({
+		componentName,
+		slots: ["prefix", "suffix"],
+		wrappedEleName: "vaadin-date-picker",
+		style: ``,
+	})
+);
+
+customElements.define(componentName, DatePicker);
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+const transformTheme = (theme, path, getTransformation) => {
+	return Object.entries(theme).reduce((acc, [key, val]) => {
+		if (val?.constructor !== Object) {
+			return merge(acc, getTransformation(path.concat(key), val));
+		} else {
+			return merge(acc, transformTheme(val, [...path, key], getTransformation));
+		}
+	}, {});
+};
+
+const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ");
+
+const themeToCSSVarsObj = (theme) =>
+	transformTheme(theme, [], (path, val) => ({
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+	}));
+
+const getThemeRefs = (theme, prefix) =>
+	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+
+const globalsThemeToStyle = (theme, themeName = '') => `
+*[data-theme="${themeName}"] {
+	${Object.entries(themeToCSSVarsObj(theme)).reduce(
+	(acc, entry) => (acc += `${entry.join(":")};\n`), ''
+)}
+}
+`;
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+	transformTheme(componentsTheme, [], (path, val) => {
+		const [component, ...restPath] = path;
+		const property = restPath.pop();
+
+		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
+		// starts with underscore -> attribute selector
+
+		const attrsSelector = restPath.reduce((acc, section, idx) => {
+			if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
+
+			const nextSection = restPath[idx + 1];
+
+			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+				console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`);
+				return acc;
+			}
+
+			return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
+		}, '');
+
+		let selector = `${getComponentName(component)}${attrsSelector}`;
+
+		return {
+			[selector]: {
+				[getVarName([component, property])]: val
+			}
+		}
+	});
+
+const componentsThemeToStyle = (componentsTheme, themeName = '') =>
+	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
+		(acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
+		''
+	);
+
+const themeToStyle = ({ globals, components }, themeName) => `
+${globalsThemeToStyle(globals, themeName)}
+${componentsThemeToStyle(components, themeName)}
+`;
+
+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) => {
+	const isDark = c.isDark();
+	return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
+};
+
+const genColor = (color) => {
+	const mainColor = new Color(color.main || color);
+
+	return {
+		main: mainColor.hex(),
+		dark: color.dark || genDark(mainColor),
+		light: color.light || genLight(mainColor),
+		contrast: color.contrast || genContrast(mainColor),
+	}
+};
+
+const genColors = (colors) => {
+	return Object.keys(colors).reduce((acc, colorName) => {
+		const currentColor = colors[colorName];
+
+		return Object.assign(acc, {
+			[colorName]: genColor(currentColor),
+		})
+	}, {});
+};
+
+const colors = genColors({
+	surface: {
+		main: 'lightgray',
+		light: '#e1e1e1'
+	},
+	primary: "#0082B5",
+	secondary: "#7D14EB",
+	success: "green",
+	error: "red",
+});
+
+const typography = {
+	h1: {
+		font: ["Courier New", "Arial", "sans-serif"],
+		weight: "700",
+		size: "48px",
+	},
+	h2: {
+		font: ["Courier New", "sans-serif"],
+		weight: "500",
+		size: "38px",
+	},
+	h3: {
+		font: ["Courier New", "sans-serif"],
+		weight: "300",
+		size: "28px",
+	},
+};
+
+const spacing = {
+	xs: '2px',
+	sm: '4px',
+	md: '8px',
+	lg: '16px',
+	xl: '32px',
+};
+
+const border = {
+	sm: "1px",
+	md: "2px",
+	lg: "3px",
+};
+
+const radius = {
+	sm: "5px",
+	md: "25px",
+	lg: "50px",
+};
+
+const shadow = {
+	color: colors.primary.main,
+	size: {
+		sm: `0 0 10px`,
+	},
+};
+
+var globals = {
+	colors,
+	typography,
+	spacing,
+	border,
+	radius,
+	shadow,
+};
+
+const globalRefs$1 = getThemeRefs(globals);
+
+const mode = {
+	primary: {
+		main: globalRefs$1.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,
+};
+
+const colorRef = getThemeRefs(mode.primary, 'button');
+
+const button = {
+	borderRadius: globalRefs$1.radius.lg,
+	cursor: 'pointer',
+	
+	size: {
+		xs: {
+			height: '10px',
+			fontSize: '10px',
+			padding: `0 ${globalRefs$1.spacing.xs}`
+		},
+		sm: {
+			height: '20px',
+			fontSize: '10px',
+			padding: `0 ${globalRefs$1.spacing.sm}`
+		},
+		md: {
+			height: '30px',
+			fontSize: '14px',
+			padding: `0 ${globalRefs$1.spacing.md}`
+		},
+		lg: {
+			height: '40px',
+			fontSize: '20px',
+			padding: `0 ${globalRefs$1.spacing.lg}`
+		},
+		xl: {
+			height: '50px',
+			fontSize: '25px',
+			padding: `0 ${globalRefs$1.spacing.xl}`
+		},
+	},
+
+	_fullwidth: {
+		width: '100%'
+	},
+
+	mode,
+
+	variant: {
+		contained: {
+			color: colorRef.contrast,
+			backgroundColor: colorRef.main,
+			_hover: {
+				backgroundColor: colorRef.dark,
+			},
+		},
+		outline: {
+			color: colorRef.main,
+			borderColor: colorRef.main,
+			borderWidth: '2px',
+			borderStyle: 'solid',
+			_hover: {
+				color: colorRef.dark,
+				borderColor: colorRef.dark,
+				_error: {
+					color: 'red',
+				}
+			}
+		},
+		link: {
+			color: colorRef.main,
+		},
+	}
+};
+
+const globalRefs = getThemeRefs(globals);
+
+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,
+  _invalid: {
+    backgroundColor: globalRefs.colors.error.light,
+    borderColor: globalRefs.colors.error.dark,
+  },
+
+  size: {
+    sm: {
+      height: '20px',
+      fontSize: '10px',
+      padding: `0 ${globalRefs.spacing.xs}`
+    },
+    md: {
+      height: '30px',
+      fontSize: '14px',
+      padding: `0 ${globalRefs.spacing.sm}`
+    },
+    lg: {
+      height: '40px',
+      fontSize: '20px',
+      padding: `0 ${globalRefs.spacing.sm}`
+    },
+    xl: {
+      height: '50px',
+      fontSize: '25px',
+      padding: `0 ${globalRefs.spacing.md}`
+    },
+  },
+
+  _fullwidth: {
+    width: '100%'
+  },
+};
+
+var components = {
+    button,
+    textField
+};
+
+var index = { globals, components };
+
+export { componentsThemeToStyle, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
+//# sourceMappingURL=index.esm.js.map