@descope/web-components-ui 1.0.135 → 1.0.148

package/src/helpers/mixinsHelpers.js

@@ -1,10 +1,9 @@
-
 // create a dispatch event function that also calls to the onevent function in case  it's set
 // usage example:
 // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
 // this will dispatch a new event when called, but also call to "onsomething"
 export function createDispatchEvent(eventName, options = {}) {
-  const event = new Event(eventName, options)
+  const event = new Event(eventName, options);
 
   this[`on${eventName}`]?.(event); // in case we got an event callback as property
   this.dispatchEvent(event);
@@ -14,22 +13,34 @@ export function createDispatchEvent(eventName, options = {}) {
 // usage example:
 // createEventListener.call(this,'change', this.onChange, { element? , ...options })
 export function createEventListener(event, callback, { element, ...options } = {}) {
-  const timerId = setTimeout(() => console.warn(this.localName, 'is not using "lifecycleEventsMixin", events will not be removed automatically on disconnect'), 2000)
-
-  this.addEventListener('connected', () => {
-    clearTimeout(timerId);
-  }, { once: true })
+  const timerId = setTimeout(
+    () =>
+      // eslint-disable-next-line no-console
+      console.warn(
+        this.localName,
+        'is not using "lifecycleEventsMixin", events will not be removed automatically on disconnect'
+      ),
+    2000
+  );
+
+  this.addEventListener(
+    'connected',
+    () => {
+      clearTimeout(timerId);
+    },
+    { once: true }
+  );
 
   const targetEle = element || this;
   const boundCallback = callback.bind(this);
 
   const onDisconnect = () => {
     targetEle.removeEventListener(event, boundCallback);
-  }
+  };
 
-  this.addEventListener('disconnected', onDisconnect, { once: true })
+  this.addEventListener('disconnected', onDisconnect, { once: true });
 
   targetEle.addEventListener(event, boundCallback, options);
 
-  return onDisconnect
+  return onDisconnect;
 }

package/src/helpers/themeHelpers/colorsHelpers.js

@@ -3,30 +3,30 @@ import Color from 'color';
 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 isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), percentage)
+    .saturate(1)
+    .hex();
 };
 
 export const genColor = (color) => {
-	const mainColor = new Color(color.main || 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)
-	};
+  return {
+    main: mainColor.hex(),
+    dark: color.dark || genDark(mainColor),
+    light: color.light || genLight(mainColor),
+    contrast: color.contrast || genContrast(mainColor),
+  };
 };
 
 export const genColors = (colors) => {
-	return Object.keys(colors).reduce((acc, colorName) => {
-		const currentColor = colors[colorName];
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
 
-		return Object.assign(acc, {
-			[colorName]: genColor(currentColor)
-		});
-	}, {});
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
 };

package/src/helpers/themeHelpers/componentsThemeManager.js

@@ -1,4 +1,3 @@
-
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
 
@@ -9,8 +8,8 @@ class ComponentsThemeManager {
   #callbacks = new Set();
 
   #notify() {
-    this.#callbacks.forEach(cb => cb?.());
-  };
+    this.#callbacks.forEach((cb) => cb?.());
+  }
 
   get currentThemeName() {
     return this.#currentThemeName;
@@ -28,8 +27,10 @@ class ComponentsThemeManager {
   onCurrentThemeChange(cb) {
     this.#callbacks.add(cb);
 
-    return () => { this.#callbacks.delete(cb); };
-  };
+    return () => {
+      this.#callbacks.delete(cb);
+    };
+  }
 
   set themes(themes) {
     this.#themes = themes;
@@ -37,4 +38,4 @@ class ComponentsThemeManager {
   }
 }
 
-export const componentsThemeManager = new ComponentsThemeManager()
+export const componentsThemeManager = new ComponentsThemeManager();

package/src/helpers/themeHelpers/index.js

@@ -7,160 +7,150 @@ import { getComponentName, getCssVarName } from '../componentHelpers';
 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));
-		}
-	}, {});
+  return Object.entries(theme).reduce((acc, [key, val]) => {
+    if (val?.constructor !== Object) {
+      return merge(acc, getTransformation(path.concat(key), val));
+    }
+    return merge(acc, transformTheme(val, [...path, key], getTransformation));
+  }, {});
 };
 
 const stringifyArray = (strArr) =>
-	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
 const getCssVarValue = (val) => {
-	switch (true) {
-		case Array.isArray(val):
-			return stringifyArray(val)
-		case isUrl(val):
-			return `url(${val})`
-		default:
-			return val
-	}
-}
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
 
 export const themeToCSSVarsObj = (theme) =>
-	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: getCssVarValue(val)
-	}));
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
 
 export const getThemeRefs = (theme, prefix) =>
-	transformTheme(theme, [], (path) =>
-		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-	);
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
 
 export const getThemeVars = (theme, prefix) =>
-	transformTheme(theme, [], (path) =>
-		set({}, path, getVarName(prefix ? [prefix, ...path] : path))
-	);
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
 
 export const globalsThemeToStyle = (theme, themeName = '') => {
-	const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-		(acc, entry) => (acc += `${entry.join(':')};\n`),
-		''
-	);
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
 
-	if (!themeName) return style
+  if (!themeName) return style;
 
-	return `*[data-theme="${themeName}"] {${style}}`
+  return `*[data-theme="${themeName}"] {${style}}`;
 };
 
 const componentsThemeToStyleObj = (componentsTheme) =>
-	transformTheme(componentsTheme, [], (path, val) => {
-		const [component, ...restPath] = path;
-		const property = restPath.pop();
-		const componentName = getComponentName(component);
-
-		if (property === 'undefined') {
-			console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`)
-		}
-
-		// we need a support for portal components theme (e.g. overlay)
-		// this allows us to generate those themes under different sections
-		// if the theme has root level attribute that starts with #
-		// we are generating a new theme
-		let themeName = BASE_THEME_SECTION
-
-		if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-			themeName = restPath.shift();
-		}
-
-		// 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 += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
-
-			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 += `[${kebabCase(section)}="${restPath
-				.splice(idx + 1, 1)
-				.join('')}"]`);
-		}, '');
-
-		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
-
-		return {
-			[componentName]: {
-				[themeName]: {
-					[selector]: {
-						[property]: getCssVarValue(val)
-					}
-				}
-			}
-		};
-	});
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // 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}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+
+      const nextSection = restPath[idx + 1];
+
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+        );
+        return acc;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+    }, '');
+
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+    return {
+      [componentName]: {
+        [themeName]: {
+          [selector]: {
+            [property]: getCssVarValue(val),
+          },
+        },
+      },
+    };
+  });
 
+const componentsThemeToStyle = (componentsTheme) =>
+  Object.entries(componentsTheme).reduce(
+    (acc, [selector, vars]) =>
+      `${acc}${selector} { \n${Object.entries(vars)
+        .map(([key, val]) => `${key}: ${val}`)
+        .join(';\n')} \n}\n\n`,
+    ''
+  );
 
 export const createComponentsTheme = (componentsTheme) => {
-	const styleObj = componentsThemeToStyleObj(componentsTheme);
-
-	return Object.keys(styleObj).reduce(
-		(acc, componentName) => {
-			const componentThemes = styleObj[componentName];
-
-			return Object.assign(acc, {
-				[componentName]: Object.keys(componentThemes)
-					.reduce((acc, theme) =>
-						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
-						{})
-			})
-		},
-		{}
-	);
-}
-
-const componentsThemeToStyle = (componentsTheme) =>
-	Object.entries(componentsTheme).reduce(
-		(acc, [selector, vars]) =>
-		(acc += `${selector} { \n${Object.entries(
-			vars
-		)
-			.map(([key, val]) => `${key}: ${val}`)
-			.join(';\n')} \n}\n\n`),
-		''
-	);
+  const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+  return Object.keys(styleObj).reduce((acc, componentName) => {
+    const componentThemes = styleObj[componentName];
+
+    return Object.assign(acc, {
+      [componentName]: Object.keys(componentThemes).reduce(
+        (res, theme) =>
+          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+        {}
+      ),
+    });
+  }, {});
+};
 
 export const themeToStyle = ({ globals, components }, themeName) => ({
-	globals: globalsThemeToStyle(globals, themeName),
-	components: createComponentsTheme(components)
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
 });
 
 const useVar = (varName) => `var(${varName})`;
 
 export const createHelperVars = (theme, prefix) => {
-	const res = transformTheme(theme, [], (path, value) => {
-		const modifiedPath = [...path];
-		const property = modifiedPath.splice(-1);
-		const varName = getCssVarName(prefix, property);
+  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) };
+    const vars = { [property]: varName };
+    const useVars = { [property]: useVar(varName) };
 
-		return { theme, useVars, vars };
-	});
+    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
+  });
 
-	return [res.theme, res.useVars, res.vars];
+  return [res.theme, res.useVars, res.vars];
 };
 
-export { componentsThemeManager } from './componentsThemeManager'
+export { componentsThemeManager } from './componentsThemeManager';

package/src/helpers/themeHelpers/resetHelpers.js

@@ -1,22 +1,10 @@
-export const resetInputOverrides = (name, cssVarList) => `
-    ${resetInputContainer(name)}
-    ${resetInputCursor(name)}
-    ${resetInputPlaceholder(name)}
-    ${resetInputField(name)}
-    ${resetInputAutoFill(name, cssVarList)}
-    ${resetInputFieldInvalidBackgroundColor(name)}
-    ${resetInitialHeight(name)}
-    ${resetInputElement(name)}
-    ${resetInputFieldunderlayingBorder(name)}
-`;
-
 export const useHostExternalPadding = (cssVarList) => `
     :host {
-        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))        
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
     }
 `;
 
-export const resetInputFieldunderlayingBorder = (name) => `
+export const resetInputFieldUnderlayingBorder = (name) => `
     ${name}::part(input-field)::after {
         border: none;
     }
@@ -66,7 +54,7 @@ export const resetInputPlaceholder = (name, ele = 'input') => `
     ${name}[disabled] > ${ele}:placeholder-shown,
 	${name}[readonly] > ${ele}:placeholder-shown {
 		opacity: 1;
-	}    
+	}
 `;
 
 export const resetInputAutoFill = (name, cssVarList) => `
@@ -77,7 +65,7 @@ export const resetInputAutoFill = (name, cssVarList) => `
     ${name} input:-webkit-autofill:focus {
         -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
         box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
-    } 
+    }
 `;
 
 export const resetInputFieldDefaultWidth = () => `
@@ -98,3 +86,15 @@ export const resetInputFieldInvalidBackgroundColor = (name) => `
         background: none;
     }
 `;
+
+export const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
+    ${resetInitialHeight(name)}
+    ${resetInputElement(name)}
+    ${resetInputFieldUnderlayingBorder(name)}
+`;

package/src/index.cjs.js

@@ -4,8 +4,8 @@ export * from './helpers/themeHelpers';
 export * from './helpers/themeHelpers/colorsHelpers';
 export { defaultTheme, themeVars } from './theme';
 
-export { CheckboxClass } from './components/boolean-fields/descope-checkbox/CheckboxClass'
-export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle/SwitchToggleClass'
+export { CheckboxClass } from './components/boolean-fields/descope-checkbox/CheckboxClass';
+export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
 export { ButtonClass } from './components/descope-button/ButtonClass';
 export { LoaderLinearClass } from './components/descope-loader-linear/LoaderLinearClass';
 export { LoaderRadialClass } from './components/descope-loader-radial/LoaderRadialClass';
@@ -23,4 +23,4 @@ export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
 export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
 export { ImageClass } from './components/descope-image/ImageClass';
 export { PhoneFieldClass } from './components/descope-phone-field/PhoneFieldClass';
-export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
+export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';

package/src/index.d.ts

@@ -1,10 +1,10 @@
 declare module '@descope/web-components-ui';
 
 export {
-	globalsThemeToStyle,
-	createComponentsTheme,
-	themeToStyle,
-	componentsThemeManager
+  globalsThemeToStyle,
+  createComponentsTheme,
+  themeToStyle,
+  componentsThemeManager,
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { defaultTheme, themeVars } from './theme';
@@ -29,23 +29,24 @@ export { TextFieldClass } from './components/descope-text-field';
 export { ImageClass } from './components/descope-image';
 export { PhoneFieldClass } from './components/descope-phone-field';
 export { NewPasswordClass } from './components/descope-new-password';
+export { UploadFileClass } from './components/descope-upload-file';
 
 export type Theme = {
-	globals: {
-		colors: Record<string, string>;
-		fonts: Record<string, any>;
-		typography: Record<string, any>;
-		shadow: Record<string, string>;
-		spacing: Record<string, string>;
-	};
-	components: {
-		button: Record<string, any>;
-		textField: Record<string, any>;
-		logo: Record<string, any>;
-		container: Record<string, any>;
-		link: Record<string, any>;
-		button: Record<string, any>;
-		text: Record<string, any>;
-		inputWrapper: Record<string, any>;
-	};
+  globals: {
+    colors: Record<string, string>;
+    fonts: Record<string, any>;
+    typography: Record<string, any>;
+    shadow: Record<string, string>;
+    spacing: Record<string, string>;
+  };
+  components: {
+    button: Record<string, any>;
+    textField: Record<string, any>;
+    logo: Record<string, any>;
+    container: Record<string, any>;
+    link: Record<string, any>;
+    button: Record<string, any>;
+    text: Record<string, any>;
+    inputWrapper: Record<string, any>;
+  };
 };

package/src/index.js

@@ -19,12 +19,13 @@ export * from './components/descope-text-field';
 export * from './components/descope-image';
 export * from './components/descope-phone-field';
 export * from './components/descope-new-password';
+export * from './components/descope-upload-file';
 
 export {
-	globalsThemeToStyle,
-	createComponentsTheme,
-	themeToStyle,
-	componentsThemeManager
+  globalsThemeToStyle,
+  createComponentsTheme,
+  themeToStyle,
+  componentsThemeManager,
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
 export { defaultTheme, themeVars } from './theme';

package/src/index.umd.js

@@ -1,25 +1,26 @@
-const { componentsThemeManager } = require("./helpers/themeHelpers/componentsThemeManager");
+const { componentsThemeManager } = require('./helpers/themeHelpers/componentsThemeManager');
 
 const components = import.meta.webpackContext('./components', {
-	recursive: true,
-	regExp: /index.js$/,
-	mode: 'lazy',
-	chunkName: '[request]',
-	prefetch: true
+  recursive: true,
+  regExp: /index.js$/,
+  mode: 'lazy',
+  chunkName: '[request]',
+  prefetch: true,
 });
 
 // all components must be in a folder with the component name, and have an index.js file
 // e.g. ./descope-button/index.js
 module.exports = components.keys().reduce((acc, key) => {
-	const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
+  // eslint-disable-next-line no-useless-escape
+  const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
 
-	if (componentName.endsWith('-internal')) {
-		return acc;
-	}
+  if (componentName.endsWith('-internal')) {
+    return acc;
+  }
 
-	acc[componentName] = () => components(key);
+  acc[componentName] = () => components(key);
 
-	return acc;
+  return acc;
 }, {});
 
-module.exports.componentsThemeManager = componentsThemeManager
+module.exports.componentsThemeManager = componentsThemeManager;

package/src/mixins/changeMixin.js

@@ -1,21 +1,22 @@
-import { createDispatchEvent } from "../helpers/mixinsHelpers";
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
 
-export const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
-  #dispatchChange = createDispatchEvent.bind(this, 'change')
+export const changeMixin = (superclass) =>
+  class ChangeMixinClass extends superclass {
+    #dispatchChange = createDispatchEvent.bind(this, 'change');
 
-  init() {
-    super.init?.();
-    this.prevValue = this.value
+    init() {
+      super.init?.();
+      this.prevValue = this.value;
 
-    this.addEventListener('change', (e) => {
-      e.stopPropagation();
-    })
+      this.addEventListener('change', (e) => {
+        e.stopPropagation();
+      });
 
-    this.addEventListener('blur', () => {
-      if (this.value !== this.prevValue) {
-        this.#dispatchChange()
-        this.prevValue = this.value
-      }
-    })
-  }
-}
+      this.addEventListener('blur', () => {
+        if (this.value !== this.prevValue) {
+          this.#dispatchChange();
+          this.prevValue = this.value;
+        }
+      });
+    }
+  };