@descope/web-components-ui 1.0.222 → 1.0.224

package/src/components/descope-grid/GridClass.js

@@ -0,0 +1,226 @@
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+} from '../../mixins';
+
+import { isValidDataType } from './helpers';
+
+export const componentName = getComponentName('grid');
+
+const GridMixin = (superclass) =>
+  class GridMixinClass extends superclass {
+    #columns;
+
+    init() {
+      super.init?.();
+      this.handleColumns();
+      this.forwardSelectedItemsChange();
+    }
+
+    forwardSelectedItemsChange() {
+      this.baseElement.addEventListener('selected-items-changed', (e) => {
+        this.dispatchEvent(
+          new CustomEvent('selected-items-changed', {
+            bubbles: true,
+            composed: true,
+            detail: e.detail,
+          })
+        );
+      });
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (attrName === 'columns') {
+        this.setColumnsDataFromAttr();
+      }
+    }
+
+    handleColumns() {
+      if (this.columnsAttr) {
+        this.setColumnsDataFromAttr();
+      } else if (this.children.length) {
+        this.setColumnsFromChildren();
+      }
+    }
+
+    setColumnsFromChildren() {
+      this.#columns = Array.from(this.children).map((child) => {
+        return {
+          path: child.getAttribute('path'),
+          header: child.getAttribute('header'),
+          type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
+
+          attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
+            const attrVal = child.getAttribute(attrName);
+
+            if (attrVal) {
+              acc[attrName] = attrVal;
+            }
+
+            return acc;
+          }, {}),
+        };
+      });
+    }
+
+    get columnsAttr() {
+      return this.getAttribute('columns');
+    }
+
+    setColumnsDataFromAttr() {
+      try {
+        const data = JSON.parse(this.columnsAttr);
+        if (isValidDataType(data)) {
+          this.columns = data;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('could not parse data string from attribute "columns" -', e.message);
+      }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    #renderColumn = ({ path, header, type, attrs }) => {
+      const colAttrs = Object.entries(attrs)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ');
+
+      const tagName = `descope-grid-${type}-column`;
+
+      return `<${tagName} header="${header}" path="${path}" ${colAttrs}></${tagName}>`;
+    };
+
+    get renderColumn() {
+      return this.#renderColumn;
+    }
+
+    set renderColumn(renderFn) {
+      this.#renderColumn = renderFn;
+      this.renderColumns();
+    }
+
+    getColumnsTemplate() {
+      return this.#columns?.reduce?.(
+        (acc, item) => acc + (this.renderColumn?.(item || {}) || ''),
+        ''
+      );
+    }
+
+    renderColumns() {
+      const template = this.getColumnsTemplate();
+      if (template) this.innerHTML = template;
+    }
+
+    get grid() {
+      return this.shadowRoot.querySelector('vaadin-grid');
+    }
+
+    get data() {
+      return this.grid.items;
+    }
+
+    set data(data) {
+      if (isValidDataType(data) && this.grid.items !== data) {
+        this.grid.items = data;
+
+        if (this.grid.selectedItems) {
+          const itemsIds = new Set(
+            this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
+          );
+          this.grid.selectedItems = this.grid.selectedItems.filter((selectedItem) =>
+            itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
+          );
+        }
+      }
+    }
+
+    get columns() {
+      return this.#columns;
+    }
+
+    set columns(data) {
+      this.#columns = data;
+      this.renderColumns();
+    }
+
+    get paths() {
+      return this.columns.map((col) => col.path);
+    }
+
+    get uniqueColumnId() {
+      return this.getAttribute('unique-column-id');
+    }
+  };
+
+const {
+  host,
+  headerRow,
+  contentRow,
+  firstRow,
+  sortIndicators,
+  activeSortIndicator,
+  selectedRow,
+  rowSeparator,
+  resizeHandle,
+} = {
+  host: { selector: () => 'vaadin-grid' },
+  headerRow: { selector: () => '::part(header-cell)' },
+  contentRow: { selector: () => '::part(cell)' },
+  firstRow: { selector: () => '::part(first-header-row-cell)' },
+  selectedRow: { selector: () => '::part(selected-row-cell)' },
+  sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
+  activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
+  rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
+  resizeHandle: { selector: () => '::part(resize-handle)' },
+};
+
+export const GridClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostHeight: { selector: () => ':host', property: 'height' },
+      hostMinHeight: { selector: () => ':host', property: 'min-height' },
+      fontFamily: [{ ...headerRow }, { ...contentRow }],
+      fontSize: [{ ...headerRow }, { ...contentRow }],
+      fontWeight: { ...contentRow },
+      valueTextColor: { ...contentRow, property: 'color' },
+      sortIndicatorsColor: { ...sortIndicators, property: 'color' },
+      activeSortIndicator: { ...activeSortIndicator, property: 'color' },
+      inputBorderColor: { ...host, property: 'border-color' },
+      inputBorderWidth: { ...host, property: 'border-width' },
+      inputBorderStyle: { ...host, property: 'border-style' },
+      inputBorderRadius: { ...host, property: 'border-radius' },
+      selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
+      selectedTextColor: { ...selectedRow, property: 'color' },
+      separatorColor: [
+        { ...firstRow, property: 'border-bottom-color' },
+        { ...rowSeparator, property: 'border-top-color' },
+      ],
+      resizeHandleColor: { ...resizeHandle, property: 'background-color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  GridMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-grid',
+    style: () => `
+      vaadin-grid {
+        overflow: hidden;
+        height: 100%;
+        min-height: 300px;
+      }
+		`,
+    excludeAttrsSync: ['columns', 'tabindex'],
+    componentName,
+  })
+);

package/src/components/descope-grid/descope-grid-selection-column/index.js

@@ -0,0 +1,68 @@
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-param-reassign */
+import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
+import '../../boolean-fields/descope-checkbox';
+import { getComponentName } from '../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('grid-selection-column');
+
+const createCheckboxEle = () => {
+  const checkbox = document.createElement('descope-checkbox');
+
+  checkbox.setAttribute('bordered', 'true');
+  checkbox.setAttribute('size', 'xs');
+
+  return checkbox;
+};
+
+const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
+
+export class GridSelectionColumnClass extends GridSelectionColumn {
+  onInput(grid) {
+    if (grid.selectedItems.length === grid.items?.length) {
+      grid.selectedItems = [];
+    } else {
+      grid.selectedItems = grid.items;
+    }
+  }
+
+  _headerRenderer(cell) {
+    const grid = cell.parentNode;
+
+    let checkbox = cell.querySelector('descope-checkbox');
+    if (!checkbox) {
+      checkbox = createCheckboxEle();
+
+      checkbox.addEventListener('input', () => {
+        const isAllItemsSelected = getIsAllItemsSelected(grid);
+        if (isAllItemsSelected) {
+          grid.selectedItems = [];
+        } else {
+          grid.selectedItems = grid.items;
+        }
+      });
+
+      cell.appendChild(checkbox);
+    }
+
+    checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
+  }
+
+  _defaultRenderer(cell, col, model) {
+    const grid = cell.parentNode;
+
+    let checkbox = cell.querySelector('descope-checkbox');
+    if (!checkbox) {
+      checkbox = createCheckboxEle();
+      cell.appendChild(checkbox);
+    }
+
+    checkbox.onchange = () => {
+      checkbox.checked ? grid.selectItem(model.item) : grid.deselectItem(model.item);
+    };
+
+    checkbox.setAttribute('checked', model.selected);
+  }
+}
+
+customElements.define(componentName, GridSelectionColumnClass);

package/src/components/descope-grid/descope-grid-status-column/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-param-reassign */
+import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
+import { getComponentName } from '../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('grid-status-column');
+class GridStatusColumnClass extends GridColumn {
+  _defaultRenderer(cell, _col, model) {
+    const grid = cell.parentNode;
+    const size = grid.getAttribute('size');
+
+    const contentAttr = this.getAttribute('status');
+    if (!contentAttr) {
+      cell.innerHTML = model.item[this.path];
+      return;
+    }
+
+    const [active, inactive] = contentAttr.split(',');
+
+    const label = model.item[this.path] ? active : inactive;
+    const mode = model.item[this.path] ? 'success' : 'error';
+
+    cell.innerHTML = `<descope-button
+    st-host-height="2.5em"
+    mode="${mode}"
+    variant="outline"
+    size="${size}">
+      ${label}
+    </descope-button>`;
+  }
+}
+
+customElements.define(componentName, GridStatusColumnClass);
+
+export { GridStatusColumnClass };

package/src/components/descope-grid/descope-grid-text-column/index.js

@@ -0,0 +1,11 @@
+import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
+import '../../descope-button';
+import { getComponentName } from '../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('grid-text-column');
+
+class GridTextColumnClass extends GridColumn {}
+
+customElements.define(componentName, GridTextColumnClass);
+
+export { GridTextColumnClass };

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

@@ -0,0 +1,9 @@
+export const isValidDataType = (data) => {
+  const isValid = Array.isArray(data);
+  if (!isValid) {
+    // eslint-disable-next-line no-console
+    console.error('data must be an array, received:', data);
+  }
+
+  return isValid;
+};

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

@@ -0,0 +1,10 @@
+import '@vaadin/grid';
+import './descope-grid-text-column';
+import './descope-grid-status-column';
+import './descope-grid-selection-column';
+
+import { componentName, GridClass } from './GridClass';
+
+customElements.define(componentName, GridClass);
+
+export { GridClass };

package/src/components/descope-modal/ModalClass.js

@@ -0,0 +1,109 @@
+import { compose } from '../../helpers';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+  portalMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('modal');
+
+const customMixin = (superclass) =>
+  class ModalMixinClass extends superclass {
+    get opened() {
+      return this.getAttribute('opened') === 'true';
+    }
+
+    handleOpened() {
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      if (this.opened) {
+        this.style.display = '';
+      } else {
+        this.style.display = 'none';
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.style.display = 'none';
+
+      // vaadin-dialog might not be loaded in time
+      // in order to make sure it's loaded before this block is running
+      // we are wrapping it with setTimeout
+      setTimeout(() => {
+        // we want to sync descope-modal content through vaadin-dialog into the overlay
+        // so we are adding a slot to the overlay, which allows us to forward the content from
+        // vaadin-dialog to vaadin-dialog-overlay
+        this.baseElement.shadowRoot
+          .querySelector('vaadin-dialog-overlay')
+          .appendChild(document.createElement('slot'));
+
+        this.#overrideOverlaySettings();
+
+        // we need to always open the modal in `opened=false`
+        // to prevent it from rendering outside the dialog
+        // first, we have to run `overrideOverlaySettings` to setup
+        // the component.
+        this.handleOpened();
+      });
+    }
+
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
+
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+        this.baseElement.setAttribute('style', 'display:flex!important;');
+      };
+      overlay._detachOverlay = () => {
+        this.baseElement.style.display = 'none';
+      };
+      overlay._enterModalState = () => {};
+
+      overlay.close = () => false;
+    }
+  };
+
+export const ModalClass = compose(
+  createStyleMixin({
+    mappings: {
+      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
+      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
+      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
+    },
+  }),
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      hostDisplay: {
+        selector: () => ':host(.descope-modal)',
+        property: 'display',
+        important: true,
+      },
+      backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
+      width: { selector: () => '::part(overlay)', property: 'width' },
+      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
+    },
+    forward: {
+      include: false,
+      attributes: ['opened'],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-dialog',
+    style: () => ``,
+    excludeAttrsSync: ['tabindex', 'opened'],
+    componentName,
+  })
+);

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

@@ -0,0 +1,6 @@
+import '@vaadin/dialog';
+import { componentName, ModalClass } from './ModalClass';
+
+customElements.define(componentName, ModalClass);
+
+export { ModalClass };

package/src/index.cjs.js

@@ -29,3 +29,4 @@ export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
 export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
 export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
 export { ButtonSelectionGroupItemClass } from './components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
+export { ModalClass } from './components/descope-modal/ModalClass';

package/src/index.js

@@ -24,6 +24,7 @@ export * from './components/descope-recaptcha';
 export * from './components/descope-upload-file';
 export * from './components/descope-button-selection-group';
 export * from './components/descope-button-selection-group/descope-button-selection-group-item';
+export * from './components/descope-grid';
 
 export {
   globalsThemeToStyle,

package/src/mixins/createStyleMixin/helpers.js

@@ -55,11 +55,11 @@ export const createStyle = (componentName, baseSelector, mappings) => {
 
     const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
+    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property, important }) => {
       style.add(
         createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
         isFunction(property) ? property() : property,
-        createCssVarFallback(cssVarName)
+        createCssVarFallback(cssVarName) + (important ? '!important' : '')
       );
     });
   });

package/src/mixins/createStyleMixin/index.js

@@ -142,10 +142,10 @@ export const createStyleMixin =
         (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
       }
 
-      init() {
+      async init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
-          this.#rootElement = this.#getRootElement?.(this) || this.shadowRoot;
+          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
 
           this.#addClassName(componentName);
 

package/src/mixins/portalMixin.js

@@ -13,7 +13,27 @@ const DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
+const withWaitForShadowRoot = (getRootElementFn) => (that) =>
+  new Promise((res) => {
+    const MAX_RETRIES = 20;
+    const ele = getRootElementFn(that);
+    let counter = 0;
+
+    const check = () => {
+      if (counter > MAX_RETRIES) {
+        // eslint-disable-next-line no-console
+        console.error('could not get shadow root for element', ele);
+        res(ele);
+        return;
+      }
+
+      counter++;
+
+      if (!ele.shadowRoot) setTimeout(check);
+      else res(ele.shadowRoot);
+    };
+    check();
+  });
 
 export const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -43,17 +63,17 @@ export const portalMixin =
           const baseEle = that.shadowRoot.querySelector(that.baseSelector);
           const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
 
-          return portal.shadowRoot || portal;
+          return portal;
         };
 
         super({
-          getRootElement,
+          getRootElement: withWaitForShadowRoot(getRootElement),
           componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
           themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
           baseSelector: ':host',
         });
 
-        this.#portalEle = getDomNode(getRootElement(this));
+        this.#portalEle = getRootElement(this);
       }
 
       #handleHoverAttribute() {

package/src/theme/components/grid.js

@@ -0,0 +1,38 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { GridClass } from '../../components/descope-grid/GridClass';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = GridClass.cssVarList;
+
+export const grid = {
+  [vars.hostWidth]: '100%',
+  [vars.hostHeight]: '100%',
+  [vars.hostMinHeight]: '400px',
+
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+
+  [vars.sortIndicatorsColor]: globalRefs.colors.primary.main,
+  [vars.activeSortIndicator]: globalRefs.colors.primary.main,
+  [vars.resizeHandleColor]: globalRefs.colors.surface.main,
+
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputBorderColor]: 'transparent',
+
+  [vars.separatorColor]: refs.borderColor,
+
+  [vars.valueTextColor]: globalRefs.colors.surface.contrast,
+  [vars.selectedBackgroundColor]: globalRefs.colors.primary.main,
+  [vars.selectedTextColor]: globalRefs.colors.primary.contrast,
+
+  _bordered: {
+    [vars.inputBorderColor]: refs.borderColor,
+  },
+};
+
+export default grid;
+export { vars };

package/src/theme/components/index.js

@@ -23,6 +23,8 @@ import * as inputWrapper from './inputWrapper';
 import * as uploadFile from './uploadFile';
 import * as buttonSelectionGroupItem from './buttonSelectionGroup/buttonSelectionGroupItem';
 import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGroup';
+import * as modal from './modal';
+import * as grid from './grid';
 
 const components = {
   button,
@@ -51,6 +53,8 @@ const components = {
   uploadFile,
   buttonSelectionGroupItem,
   buttonSelectionGroup,
+  modal,
+  grid,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/modal.js

@@ -0,0 +1,16 @@
+import { ModalClass } from '../../components/descope-modal/ModalClass';
+
+const compVars = ModalClass.cssVarList;
+
+const modal = {
+  [compVars.hostWidth]: '400px',
+  [compVars.hostHeight]: '400px',
+  [compVars.overlayShadow]: 'none',
+  [compVars.overlayWidth]: '700px',
+};
+
+export default modal;
+
+export const vars = {
+  ...compVars,
+};