@descope/web-components-ui 0.0.1

package/src/components/descope-enriched-text/EnrichedTextClass.js

@@ -0,0 +1,204 @@
+/* eslint-disable no-param-reassign */
+
+import MarkdownIt from 'markdown-it';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { disableRules } from './consts';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { decodeHTML } from './helpers';
+
+export const componentName = getComponentName('enriched-text');
+
+class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  #origLinkRenderer;
+
+  #origEmRenderer;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        line-height: 1em;
+        word-break: break-word;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        cursor: pointer;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
+    </style>
+    <div class="content"></div>
+    `;
+
+    this.#initProcessor();
+
+    observeChildren(this, this.#parseChildren.bind(this));
+  }
+
+  static get observedAttributes() {
+    return ['readonly', 'link-target-blank'];
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue === 'true');
+      }
+
+      if (attrName === 'link-target-blank') {
+        this.#initProcessor();
+      }
+    }
+  }
+
+  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
+  customUnderlineRenderer() {
+    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+  }
+
+  #customizeLinkRenderer() {
+    if (this.linkTargetBlank) {
+      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+        // Add a new `target` attribute, or replace the value of the existing one.
+        tokens[idx].attrSet('target', '_blank');
+        // Pass the token to the default renderer.
+        return this.#origLinkRenderer(tokens, idx, options, env, self);
+      };
+    } else {
+      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
+    }
+  }
+
+  #disableCustomRules() {
+    if (!this.processor) {
+      return;
+    }
+    this.processor.disable(disableRules);
+  }
+
+  #updateProcessorRules() {
+    this.#disableCustomRules();
+  }
+
+  #storeOrigRenderers() {
+    const defaultLinkRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+
+    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
+  }
+
+  #initProcessor() {
+    this.processor = new MarkdownIt('commonmark', { html: true });
+    this.#storeOrigRenderers();
+    this.#updateProcessorRules();
+    this.#customizeLinkRenderer();
+    this.customUnderlineRenderer();
+  }
+
+  get linkTargetBlank() {
+    return this.getAttribute('link-target-blank') === 'true';
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector('.content');
+  }
+
+  #parseChildren() {
+    if (!this.processor) {
+      return;
+    }
+
+    let html = decodeHTML(this.innerHTML);
+
+    if (!html?.trim() && this.isConnected) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+
+    try {
+      const tokens = this.processor.parse(html, { references: undefined });
+      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Not parsing invalid markdown token');
+    }
+
+    this.contentNode.innerHTML = html;
+  }
+
+  onReadOnlyChange(isReadOnly) {
+    if (isReadOnly) {
+      this.contentNode.setAttribute('inert', isReadOnly);
+    } else {
+      this.contentNode.removeAttribute('inert');
+    }
+  }
+}
+
+export const EnrichedTextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      fontWeightBold: [
+        { selector: () => ':host strong', property: 'font-weight' },
+        { selector: () => ':host b', property: 'font-weight' },
+      ],
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textAlign: {},
+      linkColor: { selector: 'a', property: 'color' },
+      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
+      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
+      minHeight: {},
+      minWidth: {},
+    },
+  }),
+  createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
+  draggableMixin,
+  componentNameValidationMixin
+)(EnrichedText);

package/src/components/descope-enriched-text/consts.js

@@ -0,0 +1,14 @@
+export const disableRules = [
+  'blockquote',
+  'list',
+  'image',
+  'table',
+  'code',
+  'hr',
+  'backticks',
+  'fence',
+  'reference',
+  'heading',
+  'lheading',
+  'html_block',
+];

package/src/components/descope-enriched-text/helpers.js

@@ -0,0 +1,5 @@
+export const decodeHTML = (html) => {
+  const textArea = document.createElement('textarea');
+  textArea.innerHTML = html;
+  return textArea.value;
+};

package/src/components/descope-enriched-text/index.js

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

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

@@ -0,0 +1,368 @@
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  componentNameValidationMixin,
+  createProxy,
+  createStyleMixin,
+  draggableMixin,
+} from '../../mixins';
+
+import { defaultRowDetailsRenderer, isValidDataType } from './helpers';
+
+export const componentName = getComponentName('grid');
+
+const GridMixin = (superclass) =>
+  class GridMixinClass extends superclass {
+    #columns;
+
+    init() {
+      super.init?.();
+      this.handleColumns();
+      this.forwardSelectedItemsChange();
+
+      // disable the grid sort
+      this.baseElement._mapSorters = () => {};
+
+      // there is an issue in vaadin that on some cases when trying to render the details panel, the row is null and this fn throwing
+      // so we override it to prevent the error
+      const origUpdateDetailsCellHeight = this.baseElement._updateDetailsCellHeight;
+      this.baseElement._updateDetailsCellHeight = (row) => {
+        if (!row) return;
+        origUpdateDetailsCellHeight.call(this.baseElement, row);
+      };
+
+      this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
+    }
+
+    // this renders the details panel content
+    // in order to open it, the descope-grid-item-details-column should be used
+    #rowDetailsRenderer = async (cell, _col, model) => {
+      // prevent details panel from being scrolled into view when clicked
+      cell.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);
+
+      const template = this.getRowDetailsTemplate(model.item);
+
+      // eslint-disable-next-line no-param-reassign
+      cell.innerHTML = '';
+      cell.append(template.content.cloneNode(true));
+    };
+
+    getRowDetailsTemplate(item) {
+      const itemLabelsMapping = this.#columns.reduce(
+        (acc, { path, header }) => (!path || !header ? acc : { ...acc, [path]: header }),
+        {}
+      );
+      const template =
+        this.rowDetailsRenderer?.(item, itemLabelsMapping) ??
+        defaultRowDetailsRenderer(item, itemLabelsMapping);
+
+      switch (true) {
+        case template instanceof HTMLTemplateElement:
+          return template;
+        case typeof template === 'string':
+          return Object.assign(document.createElement('template'), { innerHTML: template });
+        default:
+          throw new Error('rowDetailsRenderer should return a string or a template');
+      }
+    }
+
+    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 || {}) || ''),
+        ''
+      );
+    }
+
+    // there is an issue in vaadin-grid, when rowDetailsRenderer is set, it renders an empty details panel
+    reassignRowDetailsRenderer() {
+      this.baseElement.rowDetailsRenderer = null;
+      setTimeout(() => {
+        this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
+      }, 0);
+    }
+
+    renderColumns() {
+      const template = this.getColumnsTemplate();
+      if (template) {
+        this.reassignRowDetailsRenderer();
+        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)
+          );
+
+          const newSelectedItems = this.grid.selectedItems.filter((selectedItem) =>
+            itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
+          );
+
+          // we want to update the selected items only if there is a reason,
+          // to prevent redundant notifications
+          if (this.grid.selectedItems.length !== newSelectedItems.length) {
+            this.grid.selectedItems = newSelectedItems;
+          }
+        }
+      }
+    }
+
+    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,
+  headerRowCell,
+  contentRow,
+  firstRow,
+  sortIndicators,
+  activeSortIndicator,
+  selectedRow,
+  rowSeparator,
+  resizeHandle,
+  toggleDetailsPanelButton,
+  toggleDetailsPanelButtonOpened,
+  toggleDetailsPanelButtonClosed,
+  detailsPanel,
+  detailsPanelLabels,
+  selectedRowCell,
+  detailsPanelContent,
+} = {
+  host: { selector: () => 'vaadin-grid' },
+  headerRow: { selector: () => '::part(header-cell)' },
+  headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
+  contentRow: { selector: () => '::part(cell)' },
+  firstRow: { selector: () => '::part(first-header-row-cell)' },
+  selectedRow: { selector: () => '::part(selected-row)' },
+  selectedRowCell: { 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)' },
+  toggleDetailsPanelButton: { selector: () => 'vaadin-grid vaadin-icon.toggle-details-button' },
+  toggleDetailsPanelButtonOpened: {
+    selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.opened',
+  },
+  toggleDetailsPanelButtonClosed: {
+    selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.closed',
+  },
+  detailsPanel: { selector: () => 'vaadin-grid::part(details-cell)' },
+  detailsPanelLabels: { selector: () => 'vaadin-grid .row-details__label' },
+  detailsPanelContent: { selector: () => 'vaadin-grid .row-details' },
+};
+
+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' },
+      backgroundColor: [
+        { ...host, property: 'background-color' },
+        { ...contentRow, property: 'background-color' },
+      ],
+      sortIndicatorsColor: { ...sortIndicators, property: 'color' },
+      activeSortIndicator: { ...activeSortIndicator, property: 'color' },
+      borderColor: { ...host, property: 'border-color' },
+      borderWidth: { ...host, property: 'border-width' },
+      borderStyle: { ...host, property: 'border-style' },
+      borderRadius: { ...host, property: 'border-radius' },
+      selectedBackgroundColor: [
+        { ...selectedRow, property: 'background-color' },
+        { ...selectedRowCell, property: 'background-color' },
+      ],
+      headerRowTextColor: { ...headerRowCell, property: 'color' },
+      separatorColor: [
+        { ...firstRow, property: 'border-bottom-color' },
+        { ...rowSeparator, property: 'border-top-color' },
+      ],
+      resizeHandleColor: { ...resizeHandle, property: 'background-color' },
+      hostDirection: { ...host, property: 'direction', fallback: 'ltr' },
+      toggleDetailsPanelButtonSize: [
+        { ...toggleDetailsPanelButton, property: 'width' },
+        { ...toggleDetailsPanelButton, property: 'height' },
+      ],
+      toggleDetailsPanelButtonOpenedColor: { ...toggleDetailsPanelButtonOpened, property: 'color' },
+      toggleDetailsPanelButtonClosedColor: { ...toggleDetailsPanelButtonClosed, property: 'color' },
+      toggleDetailsPanelButtonCursor: { ...toggleDetailsPanelButton, property: 'cursor' },
+      detailsPanelBackgroundColor: { ...detailsPanel, property: 'background-color' },
+      detailsPanelBorderTopColor: { ...detailsPanel, property: 'border-top-color' },
+      detailsPanelLabelsColor: { ...detailsPanelLabels, property: 'color' },
+      detailsPanelLabelsFontSize: { ...detailsPanelLabels, property: 'font-size' },
+      detailsPanelItemsGap: { ...detailsPanelContent, property: 'grid-gap' },
+      detailsPanelPadding: { ...detailsPanelContent, property: 'padding' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  GridMixin
+)(
+  createProxy({
+    delegatesFocus: false,
+    slots: [''],
+    wrappedEleName: 'vaadin-grid',
+    style: () => `
+      /*css*/
+      vaadin-grid {
+        overflow: hidden;
+        height: 100%;
+        min-height: 300px;
+      }
+      vaadin-grid-cell-content {
+        display: flex;
+      }
+      vaadin-grid::part(selected-row-cell) {
+        background-image: none;
+        box-shadow: none;
+        background-color: inherit;
+      }
+      vaadin-grid::part(details-cell) {
+        border-top-style: dashed;
+        border-top-width: 1px;
+      }
+      vaadin-grid .row-details {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));
+        width: 100%;
+      }
+      vaadin-grid .row-details__item:has(.row-details__value.code) {
+        grid-column: 1 / -1;
+        order: 2;
+      }
+      vaadin-grid .row-details__value.text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre;
+      }
+      vaadin-grid .row-details__value.code {
+        margin-top: 5px;
+        max-height: 120px;
+        overflow: scroll;
+        font-size: 0.85em;
+      }
+      vaadin-grid vaadin-icon.toggle-details-button {
+        margin: auto;
+      }
+    /*!css*/
+		`,
+    excludeAttrsSync: ['columns', 'tabindex'],
+    componentName,
+  })
+);

package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-param-reassign */
+import { GridTextColumnClass } from '../descope-grid-text-column/GridTextColumnClass';
+
+export class GridCustomColumnClass extends GridTextColumnClass {
+  _defaultRenderer(cell, _col, model) {
+    const content = model.item[this.path] || '';
+
+    // we get a list of elements that can be used to render the content
+    // each element can have a "pattern" attribute which contains regex expression
+    // we are going over the elements, and when finding an element which is pattern matches the data,
+    // we are cloning this element, and injecting the data as its child
+    const contentEle = Array.from(this.children).find((child) => {
+      const pattern = child.getAttribute('data-pattern');
+      if (!pattern) return true;
+
+      const regEx = new RegExp(pattern);
+      return regEx.test(content);
+    });
+
+    if (!contentEle) {
+      this.__setTextContent(cell, model.item[this.path] || '');
+
+      return;
+    }
+
+    const newEle = contentEle.cloneNode(true);
+    newEle.textContent = content || '';
+    cell.innerHTML = '';
+    cell.append(newEle);
+  }
+}

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

@@ -0,0 +1,7 @@
+/* eslint-disable no-param-reassign */
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { GridCustomColumnClass } from './GridCustomColumnClass';
+
+export const componentName = getComponentName('grid-custom-column');
+
+customElements.define(componentName, GridCustomColumnClass);

package/src/components/descope-grid/descope-grid-item-details-column/GridItemDetailsColumnClass.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-param-reassign */
+import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
+
+export class GridItemDetailsColumnClass extends GridSortColumn {
+  get sortable() {
+    return this.getAttribute('sortable') === 'true';
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _defaultRenderer(cell, _col, model) {
+    const grid = _col._gridValue;
+    const itemIdx = grid.detailsOpenedItems?.indexOf(model.item) ?? -1;
+    const isOpened = itemIdx !== -1;
+
+    const toggleIcon = document.createElement('vaadin-icon');
+    toggleIcon.icon = isOpened ? 'vaadin:angle-up' : 'vaadin:angle-down';
+    toggleIcon.classList.add('toggle-details-button', isOpened ? 'opened' : 'closed');
+    cell.innerHTML = '';
+    cell.append(toggleIcon);
+
+    toggleIcon.onclick = () => {
+      grid.detailsOpenedItems = isOpened
+        ? grid.detailsOpenedItems.toSpliced(itemIdx, 1)
+        : [...grid.detailsOpenedItems, model.item];
+    };
+  }
+
+  _defaultHeaderRenderer(root, _column) {
+    if (this.sortable) {
+      super._defaultHeaderRenderer(root, _column);
+
+      return;
+    }
+
+    this.__setTextContent(root, this.__getHeader(this.header, this.path));
+  }
+}

package/src/components/descope-grid/descope-grid-item-details-column/index.js

@@ -0,0 +1,8 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { GridItemDetailsColumnClass } from './GridItemDetailsColumnClass';
+import '@vaadin/icon';
+import '@vaadin/icons';
+
+export const componentName = getComponentName('grid-item-details-column');
+
+customElements.define(componentName, GridItemDetailsColumnClass);