@descope/web-components-ui 1.0.364 → 1.0.366

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

@@ -0,0 +1,140 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { ListItemClass } from './ListItemClass';
+
+export const componentName = getComponentName('list');
+
+class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper' }) {
+  static get observedAttributes() {
+    return ['variant'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+	    /*css*/
+      .wrapper {
+        overflow: auto;
+        display: grid;
+        max-height: 100%;
+        width: 100%;
+      }
+
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+      slot[name="empty-state"] {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+      }
+
+      :host slot[name="empty-state"] {
+        display: none;
+      }
+      :host([empty]) slot[name="empty-state"] {
+        display: flex;
+      }
+      ::slotted(:not([slot])) {
+        width: 100%;
+      }
+      /*!css*/
+		</style>
+
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+  }
+
+  get items() {
+    return this.shadowRoot.querySelector('slot').assignedElements();
+  }
+
+  #handleEmptyState() {
+    if (this.items.length === 0) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'list';
+  }
+
+  #handleItemsVariant() {
+    this.items.forEach((item) => {
+      let listItem = item;
+      if (listItem.localName !== ListItemClass.componentName) {
+        listItem = item.querySelector(ListItemClass.componentName);
+      }
+
+      const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
+      listItem.setAttribute('variant', listItemVariant);
+    });
+  }
+
+  init() {
+    super.init?.();
+
+    // we want new items to get the size
+    observeChildren(this, () => {
+      this.#handleEmptyState();
+      this.#handleItemsVariant();
+    });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+    if (newValue === oldValue) return;
+
+    if (name === 'variant') {
+      this.#handleItemsVariant();
+    }
+  }
+}
+
+export const ListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      maxHeight: { selector: () => ':host' },
+      minHeight: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontFamily: {},
+      gap: {},
+
+      backgroundColor: {},
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+      gridTemplateColumns: {},
+      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
+      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
+      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
+      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
+      emptyStateTextFontFamily: {
+        selector: () => 'slot[name="empty-state"]',
+        property: 'font-family',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawList);

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

@@ -0,0 +1,56 @@
+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';
+
+export const componentName = getComponentName('list-item');
+
+const customMixin = (superclass) =>
+  class ListItemMixinClass extends superclass {
+    constructor() {
+      super();
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        /*css*/
+        slot {
+            width: 100%;
+            display: flex;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+
+        /*!css*/
+      </style>
+      <slot></slot>
+    `;
+    }
+  };
+
+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

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

package/src/index.cjs.js

@@ -47,3 +47,6 @@ export { PolicyValidationClass } from './components/descope-policy-validation/Po
 export { CodeSnippetClass } from './components/descope-code-snippet/CodeSnippetClass';
 export { RadioGroupClass } from './components/descope-radio-group/RadioGroupClass';
 export { RadioButtonClass } from './components/descope-radio-group/RadioButtonClass';
+export { ListClass } from './components/descope-list/ListClass';
+export { ListItemClass } from './components/descope-list/ListItemClass';
+export { AppsListClass } from './components/descope-apps-list/AppsListClass';

package/src/mixins/activableMixin.js

@@ -0,0 +1,14 @@
+export const activeableMixin = (superclass) =>
+  class ActiveableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.setAttribute('active', 'true');
+        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
+          once: true,
+        });
+      });
+    }
+  };

package/src/mixins/createDynamicDataMixin.js

@@ -0,0 +1,84 @@
+import { observeAttributes } from '../helpers/componentHelpers';
+
+const defaultValidateSchema = () => true;
+const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
+
+const createTemplate = (templateString) => {
+  const template = document.createElement('template');
+  template.innerHTML = templateString;
+
+  return template;
+};
+
+const getTemplateContent = (templateOrString) => {
+  if (typeof templateOrString === 'string') {
+    return createTemplate(templateOrString).content;
+  }
+
+  if (templateOrString instanceof HTMLTemplateElement) {
+    return templateOrString.content;
+  }
+
+  // eslint-disable-next-line no-console
+  console.error('Invalid template', templateOrString);
+  return null;
+};
+
+export const createDynamicDataMixin =
+  ({
+    itemRenderer = defaultItemRenderer,
+    validateSchema = defaultValidateSchema,
+    slotName,
+    rerenderAttrsList = [],
+  }) =>
+  (superclass) =>
+    class DynamicDataMixinClass extends superclass {
+      #data = [];
+
+      // eslint-disable-next-line class-methods-use-this
+      #validateSchema(data) {
+        if (!validateSchema) return true;
+
+        const validation = validateSchema(data);
+        if (validation === true) return true;
+
+        // eslint-disable-next-line no-console
+        console.error('Data schema validation failed', validation || '');
+
+        return false;
+      }
+
+      #removeOldItems() {
+        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
+        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
+      }
+
+      #renderItems() {
+        this.#removeOldItems();
+        this.data.forEach((item, index) => {
+          const content = getTemplateContent(itemRenderer(item, index, this));
+          this.baseElement.appendChild(content?.cloneNode(true));
+        });
+      }
+
+      set data(value) {
+        if (this.#validateSchema(value)) {
+          this.#data = value;
+          this.#renderItems();
+        }
+      }
+
+      get data() {
+        return this.#data;
+      }
+
+      init() {
+        super.init?.();
+
+        if (rerenderAttrsList.length) {
+          observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
+        } else {
+          this.#renderItems();
+        }
+      }
+    };

package/src/mixins/createProxy.js

@@ -26,7 +26,7 @@ export const createProxy = ({
         .map(
           (
             slot // when slot is an empty string, we will create the default slot (without a name)
-          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
+          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
         )
         .join('')}
 			</${wrappedEleName}>

package/src/theme/components/appsList.js

@@ -0,0 +1,36 @@
+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/button.js

@@ -47,6 +47,9 @@ const button = {
   [compVars.outlineStyle]: 'solid',
   [compVars.outlineColor]: 'transparent',
 
+  [compVars.iconSize]: '1.5em',
+  [compVars.iconColor]: 'currentColor',
+
   size: {
     xs: { [compVars.fontSize]: '12px' },
     sm: { [compVars.fontSize]: '14px' },

package/src/theme/components/index.js

@@ -41,6 +41,9 @@ import * as icon from './icon';
 import * as codeSnippet from './codeSnippet';
 import * as radioGroup from './radioGroup/radioGroup';
 import * as radioButton from './radioGroup/radioButton';
+import * as list from './list/list';
+import * as listItem from './list/listItem';
+import * as appsList from './appsList';
 
 const components = {
   button,
@@ -87,6 +90,9 @@ const components = {
   codeSnippet,
   radioGroup,
   radioButton,
+  list,
+  listItem,
+  appsList,
 };
 
 const theme = Object.keys(components).reduce(

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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,41 @@
+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;