@descope/web-components-ui 1.110.0 → 1.112.0

package/src/components/descope-list/ListItemClass.js

@@ -1,58 +0,0 @@
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
-import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { compose } from '../../helpers';
-import { getComponentName } from '../../helpers/componentHelpers';
-import { activeableMixin } from '../../mixins/activableMixin';
-import { injectStyle } from '@descope-ui/common/components-helpers';
-
-export const componentName = getComponentName('list-item');
-
-const customMixin = (superclass) =>
-  class ListItemMixinClass extends superclass {
-    constructor() {
-      super();
-
-      this.attachShadow({ mode: 'open' }).innerHTML = `
-      <slot></slot>
-    `;
-
-      injectStyle(
-        `
-      slot {
-          width: 100%;
-          display: flex;
-          overflow: hidden;
-          box-sizing: border-box;
-      }
-      :host {
-        display: block;
-      }
-        `,
-        this
-      );
-    }
-  };
-
-export const ListItemClass = compose(
-  createStyleMixin({
-    mappings: {
-      padding: {},
-      backgroundColor: {},
-      borderColor: {},
-      borderStyle: {},
-      borderWidth: {},
-      borderRadius: {},
-      outline: {},
-      cursor: {},
-      gap: {},
-      maxWidth: { selector: () => ':host' },
-      alignItems: {},
-      flexDirection: {},
-      transition: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customMixin,
-  activeableMixin
-)(createBaseClass({ componentName, baseSelector: 'slot' }));

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

@@ -1,7 +0,0 @@
-import { componentName as listComponentName, ListClass } from './ListClass';
-import { componentName as listItemComponentName, ListItemClass } from './ListItemClass';
-
-customElements.define(listComponentName, ListClass);
-customElements.define(listItemComponentName, ListItemClass);
-
-export { ListClass, listComponentName as componentName };

package/src/theme/components/appsList.js

@@ -1,36 +0,0 @@
-import { AppsListClass } from '../../components/descope-apps-list/AppsListClass';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-import globals from '../globals';
-
-export const vars = AppsListClass.cssVarList;
-const globalRefs = getThemeRefs(globals);
-
-const defaultHeight = '400px';
-
-const appsList = {
-  [vars.itemsFontWeight]: 'normal',
-  [vars.itemsTextAlign]: 'start',
-  [vars.hostDirection]: globalRefs.direction,
-  [vars.maxHeight]: defaultHeight,
-
-  _empty: {
-    [vars.minHeight]: defaultHeight,
-  },
-
-  size: {
-    xs: {
-      [vars.itemsFontSize]: '14px',
-    },
-    sm: {
-      [vars.itemsFontSize]: '14px',
-    },
-    md: {
-      [vars.itemsFontSize]: '16px',
-    },
-    lg: {
-      [vars.itemsFontSize]: '20px',
-    },
-  },
-};
-
-export default appsList;

package/src/theme/components/list/list.js

@@ -1,56 +0,0 @@
-import globals from '../../globals';
-import { getThemeRefs, createHelperVars, useVar } from '../../../helpers/themeHelpers';
-import { ListClass, componentName } from '../../../components/descope-list/ListClass';
-
-const globalRefs = getThemeRefs(globals);
-
-const compVars = ListClass.cssVarList;
-
-const [helperTheme, helperRefs, helperVars] = createHelperVars(
-  { shadowColor: '#00000020' },
-  componentName
-);
-
-const { shadowColor } = helperRefs;
-
-const list = {
-  ...helperTheme,
-
-  [compVars.hostWidth]: '100%',
-  [compVars.backgroundColor]: globalRefs.colors.surface.main,
-  [compVars.fontFamily]: globalRefs.fonts.font1.family,
-  [compVars.borderColor]: globalRefs.colors.surface.light,
-  [compVars.borderStyle]: 'solid',
-  [compVars.borderWidth]: globalRefs.border.xs,
-  [compVars.borderRadius]: globalRefs.radius.sm,
-  [compVars.gap]: globalRefs.spacing.md,
-  [compVars.verticalPadding]: globalRefs.spacing.lg,
-  [compVars.horizontalPadding]: globalRefs.spacing.lg,
-  [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
-  [compVars.maxHeight]: '100%',
-  [compVars.hostDirection]: globalRefs.direction,
-  [compVars.minItemsWidth]: '150px',
-
-  _empty: {
-    [compVars.minHeight]: '150px',
-    [compVars.emptyStateTextColor]: globalRefs.colors.surface.dark,
-    [compVars.emptyStateTextFontFamily]: globalRefs.fonts.font1.family,
-  },
-
-  variant: {
-    tiles: {
-      [compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
-        compVars.minItemsWidth
-      )}, 100%), 1fr))`,
-      [compVars.maxItemsWidth]: '200px',
-      [compVars.itemsHorizontalAlign]: 'center',
-    },
-  },
-};
-
-export default list;
-
-export const vars = {
-  ...compVars,
-  ...helperVars,
-};

package/src/theme/components/list/listItem.js

@@ -1,41 +0,0 @@
-import globals from '../../globals';
-import { getThemeRefs } from '../../../helpers/themeHelpers';
-import { ListItemClass } from '../../../components/descope-list/ListItemClass';
-
-const globalRefs = getThemeRefs(globals);
-
-export const vars = ListItemClass.cssVarList;
-
-const list = {
-  [vars.backgroundColor]: globalRefs.colors.surface.main,
-  [vars.padding]: globalRefs.spacing.lg,
-  [vars.gap]: globalRefs.spacing.md,
-  [vars.borderStyle]: 'solid',
-  [vars.borderWidth]: globalRefs.border.xs,
-  [vars.borderColor]: globalRefs.colors.surface.main,
-  [vars.borderRadius]: globalRefs.radius.sm,
-  [vars.cursor]: 'pointer',
-  [vars.alignItems]: 'center',
-  [vars.flexDirection]: 'row',
-  [vars.transition]: 'border-color 0.2s, background-color 0.2s',
-
-  variant: {
-    tile: {
-      [vars.alignItems]: 'flex-start',
-      [vars.flexDirection]: 'column',
-      [vars.borderColor]: globalRefs.colors.surface.light,
-    },
-  },
-
-  _hover: {
-    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
-  },
-
-  _active: {
-    [vars.backgroundColor]: globalRefs.colors.surface.main,
-    [vars.borderColor]: globalRefs.colors.primary.light,
-    [vars.outline]: `1px solid ${globalRefs.colors.primary.light}`,
-  },
-};
-
-export default list;