@cdmx/wappler_ag_grid 2.0.6 → 2.0.8

package/README.md

@@ -86,6 +86,17 @@ The overrides for the "Custom" theme can be applied in the ag-theme-custom.css f
 
 To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-custom.css and include it in your layout file.
 
+**Important CSS Fix for Custom Theme:**
+When using the custom theme, you may notice that the magnification lens icon on filter search overlaps with the text while typing. To fix this issue, add the following CSS to your custom theme file:
+
+```css
+.ag-input-wrapper:before {
+    content: unset !important;
+}
+```
+
+This CSS rule removes the pseudo-element that creates the overlapping magnification lens icon, ensuring proper text visibility during filter input.
+
 
 ## AG Grid Options
 1. **Minimum Width**: The minimum width of the column. (Default: 150)

package/dmx-ag-grid.js

@@ -489,10 +489,10 @@ dmx.Component('ag-grid', {
     let exportToPDF = this.props.export_to_pdf;
     let cellRenderer;
     
-    // Set up theme mode
-    this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
+    const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
+    this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
     
-    // Apply theme mode using dark_mode attribute
+    // Apply theme mode using data attribute
     const themeContainer = this.$node.querySelector(`#${options.id}-grid`);
     if (themeContainer) {
       themeContainer.dataset.agThemeMode = options.dark_mode ? 'dark' : 'light';
@@ -1109,7 +1109,7 @@ dmx.Component('ag-grid', {
         else if (Array.isArray(options.tooltip_config)) {
           for (const config of options.tooltip_config) {
             if (config.field === key && config.tooltip === "yes") {
-                return value;
+              return value;
             }
           }
         }
@@ -1204,6 +1204,35 @@ dmx.Component('ag-grid', {
 
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
+          const baseFilterOptions = [
+            'equals',
+            'notEqual',
+            'lessThan',
+            'lessThanOrEqual',
+            'greaterThan',
+            'greaterThanOrEqual',
+            'inRange'
+          ];
+          
+          filterParams = {
+            filterOptions: [
+              ...baseFilterOptions,
+              {
+                displayKey: 'contains',
+                displayName: 'Contains',
+                predicate: (filterValue, cellValue) => {
+                  return cellValue.toString().includes(filterValue.toString());
+                }
+              },
+              {
+                displayKey: 'doesNotContain',
+                displayName: 'Does not Contain',
+                predicate: (filterValue, cellValue) => {
+                  return !cellValue.toString().includes(filterValue.toString());
+                }
+              }
+            ]
+          };
           if (options.numeric_column_align){
             type = 'numericColumn';
           }
@@ -1314,14 +1343,14 @@ dmx.Component('ag-grid', {
             // Check if there's a matching change in jsDataChanges
             const matchingJsChange = options.js_data_changes.find(change => change.field === key);
             if (matchingJsChange) {
-                              cellRenderer = function (params) {
-                  // Don't apply custom renderer to pinned bottom rows (totals)
-                  if (params.node && params.node.rowPinned === 'bottom') {
-                    return "-";
-                  }
-                  if (typeof window[matchingJsChange.function] === 'function') {
-                    const cellValue = window[matchingJsChange.function](params.data);
-                    return cellValue;
+              cellRenderer = function (params) {
+                // Don't apply custom renderer to pinned bottom rows (totals)
+                if (params.node && params.node.rowPinned === 'bottom') {
+                  return "-";
+                }
+                if (typeof window[matchingJsChange.function] === 'function') {
+                  const cellValue = window[matchingJsChange.function](params.data); 
+                  return cellValue;
                 }
               }
             }
@@ -1917,8 +1946,8 @@ dmx.Component('ag-grid', {
             filter: customFilter.filter
           };
         });
-        gridInstance.setFilterModel(filterModel);
-        gridInstance.onFilterChanged();
+          gridInstance.setFilterModel(filterModel);
+          gridInstance.onFilterChanged();
       }
 
     const gridElement = document.getElementById(options.id+'-grid');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "2.0.6",
+    "version": "2.0.8",
     "type": "module",
     "description": "App Connect module for AG Grid v34 - Advanced data grid with enhanced editing, filtering, and tree data capabilities.",
     "license": "MIT",