@cdmx/wappler_ag_grid 2.1.6 → 2.1.7

package/README.md

@@ -2,6 +2,35 @@
 
 **Major Update:** This release upgrades AG Grid to v35.1.0, bringing continued performance improvements and new features.
 
+## 🔒 What's New in v2.1.7
+
+**Content Security Policy compliance.** The status toggle column (rendered when a grid has a
+`status` field and `row_status_event` is enabled) previously emitted an inline
+`onclick="handleStatusToggle(...)"` attribute per row. Inline event handlers are blocked by any
+CSP without `'unsafe-inline'` in `script-src`, and they cannot be allowed by hash because the
+attribute interpolates per-row data — so under a locked-down policy the toggle rendered normally
+but silently stopped firing `row_status_enabled` / `row_status_disabled`.
+
+The renderer now emits `data-status-col` / `data-status-value` / `data-status-id` attributes, and
+a single delegated `click` listener on the grid container dispatches the events. Behaviour is
+unchanged; no configuration or view changes are required.
+
+- **No inline event handlers** are emitted anywhere in the grid, so `script-src` needs neither
+  `'unsafe-inline'` nor per-row hashes.
+- The three runtime `<style>` blocks (cell centering, sticky horizontal scrollbar, pagination
+  layout) are static and unchanged, and can be allowed by hash in `style-src`:
+  ```
+  'sha256-rW177u2hd7RHx4qSlJmD1nI6607/SZ01lrewgfHuj/M='   cell centering
+  'sha256-Et0Yl8993s0IRJOeeDT++DYDRSXLRDRvbgCj9zG2J9A='   sticky horizontal scrollbar
+  'sha256-6oQ3cIavZD3cp6igHrAN3HjrosWY41/7+bYLY+je9F0='   pagination panel
+  ```
+  These must be recomputed if that CSS text is ever edited.
+- Toggle values are now attribute-escaped rather than interpolated into a JavaScript string
+  literal, closing a quote-breakout in the previous renderer.
+
+Regression coverage lives in `tests/04-selection.html` (`window.__statusCheck`), which asserts the
+grid emits zero `[onclick]` attributes and that the toggle still dispatches its events.
+
 ## 🚀 What's New in v2.1.1
 
 1. **🔥 AG Grid v35.1.0** - Latest version with all community features

package/dmx-ag-grid.js

@@ -648,6 +648,18 @@ dmx.Component('ag-grid', {
         this.dispatchEvent('row_status_disabled')
       }
     };
+    // ponytail: delegated — checkboxCellRenderer emits no inline onclick (CSP script-src).
+    // Delegation rather than per-input binding because AG Grid virtualizes rows.
+    if (themeContainer) {
+      themeContainer.removeEventListener('click', this._statusToggleHandler);
+      this._statusToggleHandler = (event) => {
+        const input = event.target.closest('.switch-input[data-status-id]');
+        if (input) {
+          window.handleStatusToggle(event, input.dataset.statusCol, input.dataset.statusValue, input.dataset.statusId);
+        }
+      };
+      themeContainer.addEventListener('click', this._statusToggleHandler);
+    }
     function clickCellRenderer(params) {
       const idValue = params.data.id;
       const columnName = params.colDef.field;
@@ -696,13 +708,14 @@ dmx.Component('ag-grid', {
       }
         // Assuming `value` is a boolean representing the status
         const checked = value==true ? "checked" : "";
+        const attr = (v) => String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
         return `
         <div class="col pt-2 pb-1 ps-1 pe-1 d-flex justify-content-center">
           <label class="switch switch-success">
-            <input 
+            <input
               type="checkbox" class="switch-input"
               ${checked}
-              onclick="handleStatusToggle(event, '${columnName}', '${value}', '${idValue}')"
+              data-status-col="${attr(columnName)}" data-status-value="${attr(value)}" data-status-id="${attr(idValue)}"
             />
             <span class="switch-toggle-slider" role="status">
             </span>

package/package.json

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

package/tests/04-selection.html

@@ -28,6 +28,7 @@
 
 <main class="test-main">
   <dmx-test-data id="rows" source="employees"></dmx-test-data>
+  <dmx-test-data id="statusData" source="statusRows"></dmx-test-data>
   <dmx-event-log id="evLog"></dmx-event-log>
 
   <section class="feature">
@@ -69,6 +70,29 @@
     </div>
   </section>
 
+  <section class="feature">
+    <h2>Status toggle column</h2>
+    <p class="desc">
+      Data has a <code>status</code> field, so <code>row_status_event=true</code> renders
+      <code>checkboxCellRenderer</code>. The toggle must dispatch its event via a delegated
+      listener and emit <strong>no inline <code>onclick</code></strong> — inline handlers are
+      blocked by a CSP without <code>'unsafe-inline'</code> in <code>script-src</code>.
+      The puppeteer runner reads <code>window.__statusCheck</code>.
+    </p>
+    <div class="grid-wrap">
+      <dmx-ag-grid
+        id="statusGrid"
+        dmx-bind:data="statusData.value"
+        grid_theme="ag-theme-alpine"
+        dmx-bind:row_status_event="true"
+        dmx-bind:pagination="false"
+        dmx-on:row_status_enabled="evLog.add('row_status_enabled')"
+        dmx-on:row_status_disabled="evLog.add('row_status_disabled')">
+      </dmx-ag-grid>
+    </div>
+    <pre class="log" id="status-check"></pre>
+  </section>
+
   <section class="feature">
     <h2>Single-row selection</h2>
     <p class="desc"><code>row_selection="singleRow"</code> — clicking a row replaces selection.</p>
@@ -88,6 +112,44 @@
     const c = TestKit.grid('selGrid');
     console.log('selectedRows', c && c.get('selectedRows'));
   }
+  // Status-toggle assertions — exposed as window.__statusCheck for the runners.
+  // Guards the CSP fix: checkboxCellRenderer must emit data-status-* attributes and no
+  // inline onclick, with a delegated listener still dispatching row_status_*.
+  function runStatusChecks(tries) {
+    tries = tries || 0;
+    if (document.body.dataset.gridsReady !== 'true') return setTimeout(() => runStatusChecks(tries), 200);
+    const root = document.querySelector('#statusGrid-grid');
+    const input = root && root.querySelector('.switch-input');
+    if (!input) {
+      if (tries > 25) return publish({ toggle_rendered: { expect: true, actual: false } });
+      return setTimeout(() => runStatusChecks(tries + 1), 200);
+    }
+
+    const checks = {
+      // First row is status:true, so it renders checked — clicking it disables.
+      toggle_rendered:    { expect: true, actual: true },
+      no_inline_onclick:  { expect: 0,    actual: root.querySelectorAll('[onclick]').length },
+      toggle_has_dataset: { expect: true, actual: !!(input.dataset.statusId && input.dataset.statusCol) }
+    };
+
+    const log = dmx.app.get('evLog');
+    input.click();
+    setTimeout(() => {
+      const last = log && log.last;
+      checks.toggle_dispatches = { expect: 'row_status_disabled', actual: (last && last.name) || null };
+      publish(checks);
+    }, 150);
+  }
+
+  function publish(checks) {
+    const failed = Object.entries(checks).filter(([_, v]) => v.actual !== v.expect);
+    window.__statusCheck = { checks, ok: failed.length === 0, failed: failed.map(([k]) => k) };
+    document.getElementById('status-check').textContent = Object.entries(checks)
+      .map(([k, v]) => (v.actual === v.expect ? '✓' : '✗') + ' ' + k + ' — expected ' + v.expect + ', got ' + v.actual)
+      .join('\n');
+  }
+  runStatusChecks();
+
   (function pollLog() {
     if (!window.dmx || !dmx.app) return setTimeout(pollLog, 100);
     const log = dmx.app.get('evLog');

package/tests/data/sample-data.js

@@ -48,5 +48,16 @@
     { id: 112, customer: 'Wayne Ent.',  region: 'NA',  product: 'Gadget',   qty: 11, unit_price: 99.99,  total: 1099.89,order_date: '2025-05-04' }
   ];
 
-  window.SampleData = { employees, orders, departments };
+  // Rows carrying a `status` field — the only shape that makes dmx-ag-grid render
+  // checkboxCellRenderer (needs a `status` column plus row_status_event). Kept separate
+  // from `employees` so the other scenarios don't grow a stray column.
+  const statusRows = [
+    { id: 1, name: 'Alpha',   department: 'Engineering', status: true  },
+    { id: 2, name: 'Bravo',   department: 'Sales',       status: false },
+    { id: 3, name: 'Charlie', department: 'Marketing',   status: true  },
+    { id: 4, name: 'Delta',   department: 'HR',          status: false },
+    { id: 5, name: 'Echo',    department: 'Finance',     status: true  }
+  ];
+
+  window.SampleData = { employees, orders, departments, statusRows };
 })();

package/tests/run-all-puppeteer.cjs

@@ -13,7 +13,7 @@ const PAGES = [
   { file: '01-basic-render.html',     grids: ['basicGrid'] },
   { file: '02-themes-locale.html',    grids: ['g_alpine','g_balham','g_material','g_quartz','g_custom','g_dark','g_he','g_ru','g_es'] },
   { file: '03-editing.html',          grids: ['cellEdit','rowEdit','selectEdit'] },
-  { file: '04-selection.html',        grids: ['selGrid','singleSel'] },
+  { file: '04-selection.html',        grids: ['selGrid','singleSel','statusGrid'], pageAssertion: '__statusCheck' },
   { file: '05-action-buttons.html',   grids: ['actGrid'] },
   { file: '06-export.html',           grids: ['expGrid','noExp'] },
   { file: '07-import.html',           grids: ['importGrid'], expectEmpty: true },

package/tests/run-all.cjs

@@ -16,7 +16,7 @@ const PAGES = [
   { file: '01-basic-render.html',     grids: ['basicGrid'] },
   { file: '02-themes-locale.html',    grids: ['g_alpine','g_balham','g_material','g_quartz','g_custom','g_dark','g_he','g_ru','g_es'] },
   { file: '03-editing.html',          grids: ['cellEdit','rowEdit','selectEdit'] },
-  { file: '04-selection.html',        grids: ['selGrid','singleSel'] },
+  { file: '04-selection.html',        grids: ['selGrid','singleSel','statusGrid'] },
   { file: '05-action-buttons.html',   grids: ['actGrid'] },
   { file: '06-export.html',           grids: ['expGrid','noExp'] },
   { file: '07-import.html',           grids: ['importGrid'], expectEmpty: true },