@descope/web-components-ui 1.0.236 → 1.0.237

package/dist/index.esm.js

@@ -6797,37 +6797,63 @@ const ButtonSelectionGroupItemClass = compose(
 
 customElements.define(componentName$8, ButtonSelectionGroupItemClass);
 
-const componentName$7 = getComponentName('grid-text-column');
+class GridTextColumnClass extends GridSortColumn {
+  get sortable() {
+    return this.getAttribute('sortable') === 'true';
+  }
+
+  _defaultHeaderRenderer(root, _column) {
+    if (this.sortable) {
+      super._defaultHeaderRenderer(root, _column);
+
+      return;
+    }
 
-class GridTextColumnClass extends GridSortColumn {}
+    // eslint-disable-next-line no-param-reassign
+    root.innerHTML = this.__getHeader(this.header, this.path);
+  }
+}
+
+const componentName$7 = getComponentName('grid-text-column');
 
 customElements.define(componentName$7, GridTextColumnClass);
 
 /* eslint-disable no-param-reassign */
 
-const componentName$6 = getComponentName('grid-status-column');
-class GridStatusColumnClass extends GridSortColumn {
+class GridCustomColumnClass extends GridTextColumnClass {
   _defaultRenderer(cell, _col, model) {
-    const contentAttr = this.getAttribute('status');
-    if (!contentAttr) {
+    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('pattern');
+      if (!pattern) return true;
+
+      const regEx = new RegExp(pattern);
+      return regEx.test(content);
+    });
+
+    if (!contentEle) {
       cell.innerHTML = model.item[this.path];
+
       return;
     }
 
-    const [active, inactive] = contentAttr.split(',');
-    const label = model.item[this.path] ? active : inactive;
-
-    cell.innerHTML = `<div style="padding:0 0.25em; border-radius:4px; background:${
-      model.item[this.path] ? 'lightgreen' : 'pink'
-    };">${label}</div>`;
+    const newEle = contentEle.cloneNode(true);
+    newEle.innerHTML = content;
+    cell.innerHTML = '';
+    cell.append(newEle);
   }
 }
 
-customElements.define(componentName$6, GridStatusColumnClass);
+/* eslint-disable no-param-reassign */
 
-/* eslint-disable class-methods-use-this */
+const componentName$6 = getComponentName('grid-custom-column');
 
-const componentName$5 = getComponentName('grid-selection-column');
+customElements.define(componentName$6, GridCustomColumnClass);
 
 const createCheckboxEle = () => {
   const checkbox = document.createElement('descope-checkbox');
@@ -6841,8 +6867,10 @@ const createCheckboxEle = () => {
 const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
 
 class GridSelectionColumnClass extends GridSelectionColumn {
+  // eslint-disable-next-line class-methods-use-this
   _onHeaderRendererOrBindingChanged() {}
 
+  // eslint-disable-next-line class-methods-use-this
   _headerRenderer(cell) {
     const grid = cell.parentNode;
 
@@ -6865,6 +6893,7 @@ class GridSelectionColumnClass extends GridSelectionColumn {
     checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
   }
 
+  // eslint-disable-next-line class-methods-use-this
   _defaultRenderer(cell, col, model) {
     const grid = cell.parentNode;
 
@@ -6882,6 +6911,8 @@ class GridSelectionColumnClass extends GridSelectionColumn {
   }
 }
 
+const componentName$5 = getComponentName('grid-selection-column');
+
 customElements.define(componentName$5, GridSelectionColumnClass);
 
 const isValidDataType = (data) => {
@@ -9010,7 +9041,7 @@ const BadgeClass = compose(
       fontFamily: {},
       fontSize: {},
       fontWeight: {},
-
+      textTransform: {},
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
       horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],