@cdmx/wappler_ag_grid 2.0.4 → 2.0.6

package/dmx-ag-grid.js

@@ -488,8 +488,16 @@ dmx.Component('ag-grid', {
     let exportToCSV = this.props.export_to_csv;
     let exportToPDF = this.props.export_to_pdf;
     let cellRenderer;
-    const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
-    this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
+    
+    // Set up theme mode
+    this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
+    
+    // Apply theme mode using dark_mode attribute
+    const themeContainer = this.$node.querySelector(`#${options.id}-grid`);
+    if (themeContainer) {
+      themeContainer.dataset.agThemeMode = options.dark_mode ? 'dark' : 'light';
+    }
+    
     let idFieldPresent = false;
     window.cellClickEvent = (columnName, value, idValue) => {
       this.set('fields', {"field": columnName, "data": value});
@@ -1049,41 +1057,14 @@ dmx.Component('ag-grid', {
       };
     }
     
-    // Custom HTML Tooltip Component
-    function CustomTooltipComponent() {}
     
+    //Tooltip Component
+    function CustomTooltipComponent() {}
     CustomTooltipComponent.prototype.init = function(params) {
-      const eGui = this.eGui = document.createElement('div');
-      eGui.classList.add('custom-tooltip');
-      
-      // Use the dark_mode option from grid configuration
-      const isDarkMode = params.context && params.context.dark_mode ? params.context.dark_mode : false;
-      
-      // Apply theme-aware styling
-      if (isDarkMode) {
-        eGui.style.backgroundColor = '#2d3748';
-        eGui.style.border = '1px solid #4a5568';
-        eGui.style.color = '#e2e8f0';
-      } else {
-        eGui.style.backgroundColor = 'white';
-        eGui.style.border = '1px solid #ccc';
-        eGui.style.color = '#333';
-      }
-      
-      eGui.style.borderRadius = '4px';
-      eGui.style.padding = '8px';
-      eGui.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
-      eGui.style.maxWidth = '300px';
-      eGui.style.fontSize = '13px';
-      eGui.style.zIndex = '9999';
-      
       const tooltipValue = params.value || params.valueFormatted || '';
-      // Check if the content contains HTML tags
-      if (typeof tooltipValue === 'string' && (tooltipValue.includes('<') && tooltipValue.includes('>'))) {
-        eGui.innerHTML = tooltipValue;
-      } else {
-        eGui.textContent = tooltipValue;
-      }
+      const eGui = this.eGui = document.createElement('div');
+      eGui.classList.add('ag-tooltip');
+      eGui.innerHTML = tooltipValue;
     };
     
     CustomTooltipComponent.prototype.getGui = function() {
@@ -1477,30 +1458,8 @@ dmx.Component('ag-grid', {
           ...(tooltipComponent ? {
             tooltipComponent: tooltipComponent,
             tooltipValueGetter: tooltipValueGetter
-          } : tooltipValueGetter && typeof tooltipValueGetter === 'function' ? (() => {
-            // Check if tooltip content contains HTML
-            const sampleParams = { data: rowData[0] || {}, value: '' };
-            const sampleTooltip = tooltipValueGetter(sampleParams);
-            const containsHtml = typeof sampleTooltip === 'string' && 
-              (sampleTooltip.includes('<') && sampleTooltip.includes('>'));
-            
-            return containsHtml ? {
-              tooltipComponent: 'CustomTooltipComponent',
-              tooltipValueGetter: tooltipValueGetter
-            } : {
-              tooltipValueGetter: tooltipValueGetter
-            };
-          })() : tooltipValueGetter && typeof tooltipValueGetter === 'object' && tooltipValueGetter.isHtml ? {
-            tooltipComponent: function(params) {
-              return {
-                getGui: function() {
-                  const element = document.createElement('div');
-                  element.innerHTML = tooltipValueGetter.htmlContent;
-                  element.className = 'ag-tooltip-custom';
-                  return element;
-                }
-              };
-            }
+          } : tooltipValueGetter && typeof tooltipValueGetter === 'function' ? {
+            tooltipValueGetter: tooltipValueGetter
           } : {}),
           cellStyle: applyCellStyle,
           ...(cwidths.hasOwnProperty(key) && {

package/package.json

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