@descope/web-components-ui 1.35.0 → 1.37.0

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

@@ -1,98 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
-import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { compose } from '../../helpers';
-import { getComponentName } from '../../helpers/componentHelpers';
-import { createIcon } from './helpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
-
-export const componentName = getComponentName('icon');
-
-class RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {
-  static get observedAttributes() {
-    return ['src'];
-  }
-
-  #icon;
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<slot></slot>
-	`;
-
-    injectStyle(
-      `
-			:host > slot {
-				box-sizing: border-box;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				overflow: hidden;
-			}
-			:host {
-				display: inline-block;
-			}
-  `,
-      this
-    );
-  }
-
-  init() {
-    super.init?.();
-    this.toggleVisibility(this.src);
-  }
-
-  toggleVisibility(isVisible) {
-    this.style.display = isVisible ? '' : 'none';
-  }
-
-  get src() {
-    return this.getAttribute('src');
-  }
-
-  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
-  // with the value from the `st-fill` attribute
-  // eslint-disable-next-line class-methods-use-this
-  updateFillColor(node) {
-    // set fill to root node and all its relevant selectors
-    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
-
-    elementsToReplace.forEach((ele) => {
-      ele.setAttribute(
-        'fill',
-        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-      );
-    });
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (oldValue === newValue) return;
-
-    if (attrName === 'src') {
-      this.toggleVisibility(newValue);
-
-      createIcon(this.src).then((res) => {
-        this.innerHTML = '';
-        if (res) {
-          const clonedNode = res.cloneNode(true);
-          this.updateFillColor(clonedNode);
-          this.appendChild(clonedNode);
-        }
-      });
-    }
-  }
-}
-
-export const IconClass = compose(
-  createStyleMixin({
-    mappings: {
-      fill: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawIcon);

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;