@descope/web-components-ui 1.35.0 → 1.36.0

package/src/components/descope-icon/helpers.js

@@ -1,51 +0,0 @@
-import DOMPurify from 'dompurify';
-
-const getFileExtension = (path) => {
-  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
-  return match ? match[1] : null;
-};
-
-const base64Prefix = 'data:image/svg+xml;base64,';
-
-const isBase64Svg = (src) => src.startsWith(base64Prefix);
-
-const createImgEle = (src) => {
-  const ele = document.createElement('img');
-  ele.setAttribute('src', src);
-  return ele;
-};
-
-const createSvgEle = (text) => {
-  // we want to purify the SVG to avoid XSS attacks
-  const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
-
-  const parser = new DOMParser();
-  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
-  return ele;
-};
-
-export const createIcon = async (src) => {
-  try {
-    let ele;
-    if (isBase64Svg(src)) {
-      // handle base64 source
-      const svgXml = atob(src.slice(base64Prefix.length));
-      ele = createSvgEle(svgXml);
-    } else if (getFileExtension(src) === 'svg') {
-      // handle urls
-      const fetchedSrc = await fetch(src);
-      const text = await fetchedSrc.text();
-      ele = createSvgEle(text);
-    } else {
-      // handle binary
-      ele = createImgEle(src);
-    }
-
-    ele.style.setProperty('max-width', '100%');
-    ele.style.setProperty('max-height', '100%');
-
-    return ele;
-  } catch {
-    return null;
-  }
-};

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

@@ -1,5 +0,0 @@
-import { componentName, IconClass } from './IconClass';
-
-customElements.define(componentName, IconClass);
-
-export { IconClass, componentName };

package/src/theme/components/button.js

@@ -1,133 +0,0 @@
-import globals from '../globals';
-import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
-import { componentName, ButtonClass } from '../../components/descope-button/ButtonClass';
-
-const globalRefs = getThemeRefs(globals);
-const compVars = ButtonClass.cssVarList;
-
-const mode = {
-  primary: globalRefs.colors.primary,
-  secondary: globalRefs.colors.secondary,
-  success: globalRefs.colors.success,
-  error: globalRefs.colors.error,
-  surface: globalRefs.colors.surface,
-};
-
-const [helperTheme, helperRefs, helperVars] = createHelperVars({ mode }, componentName);
-
-const button = {
-  ...helperTheme,
-
-  [compVars.fontFamily]: globalRefs.fonts.font1.family,
-
-  [compVars.cursor]: 'pointer',
-  [compVars.hostHeight]: '3em',
-  [compVars.hostWidth]: 'auto',
-  [compVars.hostDirection]: globalRefs.direction,
-
-  [compVars.borderRadius]: globalRefs.radius.sm,
-  [compVars.borderWidth]: globalRefs.border.xs,
-  [compVars.borderStyle]: 'solid',
-  [compVars.borderColor]: 'transparent',
-
-  [compVars.labelSpacing]: '0.25em',
-
-  [compVars.textAlign]: 'center', // default text align center
-  textAlign: {
-    right: { [compVars.textAlign]: 'right' },
-    left: { [compVars.textAlign]: 'left' },
-    center: { [compVars.textAlign]: 'center' },
-  },
-
-  [compVars.verticalPadding]: '1em',
-  [compVars.horizontalPadding]: '0.875em',
-
-  [compVars.outlineWidth]: globals.border.sm,
-  [compVars.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars.outlineStyle]: 'solid',
-  [compVars.outlineColor]: 'transparent',
-
-  [compVars.iconSize]: '1.5em',
-
-  size: {
-    xs: { [compVars.fontSize]: '12px' },
-    sm: { [compVars.fontSize]: '14px' },
-    md: { [compVars.fontSize]: '16px' },
-    lg: { [compVars.fontSize]: '18px' },
-  },
-
-  _square: {
-    [compVars.hostHeight]: '3em',
-    [compVars.hostWidth]: '3em',
-    [compVars.verticalPadding]: '0',
-  },
-
-  _fullWidth: {
-    [compVars.hostWidth]: '100%',
-  },
-
-  _loading: {
-    [compVars.cursor]: 'wait',
-    [compVars.labelTextColor]: helperRefs.main,
-  },
-
-  _disabled: {
-    [helperVars.main]: globalRefs.colors.surface.light,
-    [helperVars.dark]: globalRefs.colors.surface.dark,
-    [helperVars.light]: globalRefs.colors.surface.light,
-    [helperVars.contrast]: globalRefs.colors.surface.main,
-    [compVars.iconColor]: globalRefs.colors.surface.main,
-  },
-
-  variant: {
-    contained: {
-      [compVars.labelTextColor]: helperRefs.contrast,
-      [compVars.backgroundColor]: helperRefs.main,
-      _hover: {
-        [compVars.backgroundColor]: helperRefs.dark,
-        _loading: {
-          [compVars.backgroundColor]: helperRefs.main,
-        },
-      },
-      _active: {
-        [compVars.backgroundColor]: helperRefs.main,
-      },
-    },
-
-    outline: {
-      [compVars.labelTextColor]: helperRefs.main,
-      [compVars.borderColor]: helperRefs.main,
-      _hover: {
-        [compVars.labelTextColor]: helperRefs.dark,
-        [compVars.borderColor]: helperRefs.dark,
-      },
-      _active: {
-        [compVars.labelTextColor]: helperRefs.main,
-        [compVars.borderColor]: helperRefs.main,
-      },
-    },
-
-    link: {
-      [compVars.labelTextColor]: helperRefs.main,
-      [compVars.horizontalPadding]: '0.125em',
-      _hover: {
-        [compVars.labelTextColor]: helperRefs.dark,
-        [compVars.labelTextDecoration]: 'underline',
-      },
-      _active: {
-        [compVars.labelTextColor]: helperRefs.main,
-      },
-    },
-  },
-
-  _focused: {
-    [compVars.outlineColor]: helperRefs.light,
-  },
-};
-
-export default button;
-
-export const vars = {
-  ...compVars,
-  ...helperVars,
-};

package/src/theme/components/icon.js

@@ -1,7 +0,0 @@
-import { IconClass } from '../../components/descope-icon/IconClass';
-
-export const vars = IconClass.cssVarList;
-
-const icon = {};
-
-export default icon;