@descope/web-components-ui 1.0.236 → 1.0.238

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) => {
@@ -7056,6 +7087,7 @@ const GridMixin = (superclass) =>
 const {
   host,
   headerRow,
+  headerRowCell,
   contentRow,
   firstRow,
   sortIndicators,
@@ -7066,6 +7098,7 @@ const {
 } = {
   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-cell)' },
@@ -7086,6 +7119,10 @@ const GridClass = compose(
       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' },
       inputBorderColor: { ...host, property: 'border-color' },
@@ -7094,6 +7131,7 @@ const GridClass = compose(
       inputBorderRadius: { ...host, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       selectedTextColor: { ...selectedRow, property: 'color' },
+      headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
         { ...firstRow, property: 'border-bottom-color' },
         { ...rowSeparator, property: 'border-top-color' },
@@ -8782,12 +8820,13 @@ const grid = {
   [vars$3.hostWidth]: '100%',
   [vars$3.hostHeight]: '100%',
   [vars$3.hostMinHeight]: '400px',
+  [vars$3.backgroundColor]: globalRefs$2.colors.surface.light,
 
   [vars$3.fontSize]: refs.fontSize,
   [vars$3.fontFamily]: refs.fontFamily,
 
-  [vars$3.sortIndicatorsColor]: globalRefs$2.colors.primary.main,
-  [vars$3.activeSortIndicator]: globalRefs$2.colors.primary.main,
+  [vars$3.sortIndicatorsColor]: globalRefs$2.colors.surface.main,
+  [vars$3.activeSortIndicator]: globalRefs$2.colors.surface.dark,
   [vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
 
   [vars$3.inputBorderWidth]: refs.borderWidth,
@@ -8795,11 +8834,11 @@ const grid = {
   [vars$3.inputBorderRadius]: refs.borderRadius,
   [vars$3.inputBorderColor]: 'transparent',
 
-  [vars$3.separatorColor]: refs.borderColor,
+  [vars$3.headerRowTextColor]: globalRefs$2.colors.surface.dark,
+  [vars$3.separatorColor]: globalRefs$2.colors.surface.main,
 
   [vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
-  [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.main,
-  [vars$3.selectedTextColor]: globalRefs$2.colors.primary.contrast,
+  [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.contrast,
 
   _bordered: {
     [vars$3.inputBorderColor]: refs.borderColor,
@@ -8937,9 +8976,9 @@ const notification = {
   [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
   [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
-  [vars$2.verticalPadding]: '0.45em',
-  [vars$2.horizontalPadding]: '1em',
-  [vars$2.borderRadius]: globalRefs$1.radius.md,
+  [vars$2.verticalPadding]: '0.625em',
+  [vars$2.horizontalPadding]: '1.5em',
+  [vars$2.borderRadius]: globalRefs$1.radius.xs,
 
   _bordered: {
     [vars$2.borderWidth]: globalRefs$1.border.sm,
@@ -9010,7 +9049,7 @@ const BadgeClass = compose(
       fontFamily: {},
       fontSize: {},
       fontWeight: {},
-
+      textTransform: {},
       verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
       horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
 
@@ -9045,7 +9084,7 @@ const badge = {
   [vars$1.horizontalPadding]: '0.5em',
 
   [vars$1.borderWidth]: globalRefs.border.xs,
-  [vars$1.borderRadius]: globalRefs.radius.sm,
+  [vars$1.borderRadius]: globalRefs.radius.xs,
   [vars$1.borderColor]: 'transparent',
   [vars$1.borderStyle]: 'solid',
 
@@ -9080,9 +9119,9 @@ const badge = {
       },
     },
     error: {
-      [vars$1.borderColor]: globalRefs.colors.error.light,
+      [vars$1.textColor]: globalRefs.colors.error.main,
       _bordered: {
-        [vars$1.textColor]: globalRefs.colors.error.main,
+        [vars$1.borderColor]: globalRefs.colors.error.light,
       },
     },
     success: {