secure-ui-components 0.2.2 → 0.2.4

package/dist/components/secure-table/secure-table.js

@@ -1,416 +1,52 @@
-/**
- * Secure Table Component
- *
- * A security-aware data table component with filtering, sorting, and pagination.
- *
- * Features:
- * - Real-time filtering/search across all columns
- * - Column sorting (ascending/descending)
- * - Pagination
- * - Security tier-based column masking
- * - XSS prevention via sanitization
- * - Audit logging for data access
- *
- * @example
- * <secure-table
- *   id="userTable"
- *   security-tier="sensitive"
- * ></secure-table>
- *
- * // Set data programmatically
- * const table = document.getElementById('userTable');
- * table.data = [
- *   { id: 1, name: 'John', email: 'john@example.com' },
- *   { id: 2, name: 'Jane', email: 'jane@example.com' }
- * ];
- * table.columns = [
- *   { key: 'id', label: 'ID', sortable: true },
- *   { key: 'name', label: 'Name', sortable: true, filterable: true },
- *   { key: 'email', label: 'Email', sortable: true, filterable: true, tier: 'sensitive' }
- * ];
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-import { SecurityTier } from '../../core/security-config.js';
-export class SecureTable extends SecureBaseComponent {
-    /**
-     * Data array for the table
-     * @private
-     */
-    #data = [];
-    /**
-     * Column configuration
-     * @private
-     */
-    #columns = [];
-    /**
-     * Filtered data after applying search
-     * @private
-     */
-    #filteredData = [];
-    /**
-     * Current filter/search term
-     * @private
-     */
-    #filterTerm = '';
-    /**
-     * Current sort configuration
-     * @private
-     */
-    #sortConfig = { column: null, direction: 'asc' };
-    /**
-     * Pagination state
-     * @private
-     */
-    #pagination = { currentPage: 1, pageSize: 10 };
-    /**
-     * Whether the component is using slotted server-rendered content
-     * @private
-     */
-    #usingSlottedContent = false;
-    constructor() {
-        super();
-    }
-    /**
-     * Required by abstract base class, but this component manages its own rendering
-     * via the private #render() method.
-     * @protected
-     */
-    render() {
-        return null;
-    }
-    /**
-     * Component lifecycle - called when added to DOM
-     */
-    connectedCallback() {
-        // Initialize security tier, config, and audit - but skip the base render
-        // lifecycle since the table manages its own innerHTML-based rendering for
-        // dynamic sort/filter/pagination updates.
-        this.initializeSecurity();
-        // Try to parse server-rendered content first (progressive enhancement)
-        const slottedTable = this.querySelector('table[slot="table"]');
-        const parsed = this.#parseSlottedTable();
-        if (parsed) {
-            this.#usingSlottedContent = true;
-            this.#columns = parsed.columns;
-            this.#data = parsed.data;
-            this.#filteredData = [...parsed.data];
-            // Remove the server-rendered table from light DOM now that data is extracted
-            if (slottedTable) {
-                slottedTable.remove();
-            }
-        }
-        this.#render();
-        this.audit('table_mounted', {
-            rowCount: this.#data.length,
-            columnCount: this.#columns.length,
-            usingSlottedContent: this.#usingSlottedContent
-        });
-    }
-    /**
-     * Parse server-rendered table from light DOM slot
-     * @private
-     */
-    #parseSlottedTable() {
-        const slottedTable = this.querySelector('table[slot="table"]');
-        if (!slottedTable)
-            return null;
-        try {
-            // Extract columns from <thead>
-            const headers = slottedTable.querySelectorAll('thead th');
-            if (headers.length === 0)
-                return null;
-            const columns = Array.from(headers).map(th => {
-                const key = th.getAttribute('data-key') || th.textContent.trim().toLowerCase().replace(/\s+/g, '_');
-                return {
-                    key: key,
-                    label: th.textContent.trim().replace(/\s+$/, ''), // Remove trailing spaces/badges
-                    sortable: th.hasAttribute('data-sortable') ? th.getAttribute('data-sortable') !== 'false' : true,
-                    filterable: th.hasAttribute('data-filterable') ? th.getAttribute('data-filterable') !== 'false' : undefined,
-                    tier: (th.getAttribute('data-tier') || undefined),
-                    width: th.getAttribute('data-width') || undefined,
-                    render: th.hasAttribute('data-render-html') ? this.#createRenderFunction(th) : undefined
-                };
-            });
-            // Extract data from <tbody>
-            const rows = slottedTable.querySelectorAll('tbody tr');
-            const data = Array.from(rows).map((tr, _rowIndex) => {
-                const cells = tr.querySelectorAll('td');
-                const row = Object.create(null);
-                cells.forEach((td, index) => {
-                    if (index < columns.length) {
-                        const column = columns[index];
-                        const dataKey = td.getAttribute('data-key') || column.key;
-                        // Guard against prototype pollution via attacker-controlled data-key attributes
-                        if (dataKey === '__proto__' || dataKey === 'constructor' || dataKey === 'prototype') {
-                            return;
-                        }
-                        // Store both text content and HTML if needed
-                        if (td.innerHTML.trim().includes('<')) {
-                            // Cell contains HTML (like forms, badges, etc.)
-                            row[dataKey] = td.textContent?.trim() ?? '';
-                            row[`${dataKey}_html`] = td.innerHTML.trim();
-                        }
-                        else {
-                            row[dataKey] = td.textContent?.trim() ?? '';
-                        }
-                    }
-                });
-                return row;
-            });
-            return { columns, data };
-        }
-        catch (error) {
-            console.error('SecureTable: Error parsing slotted table', error);
-            return null;
-        }
-    }
-    /**
-     * Create a render function for HTML content
-     * @private
-     */
-    #createRenderFunction(_th) {
-        return (value, row, columnKey) => {
-            const htmlKey = `${columnKey}_html`;
-            return (Object.hasOwn(row, htmlKey) ? row[htmlKey] : null) || this.#sanitize(value);
-        };
-    }
-    /**
-     * Set table data
-     */
-    set data(data) {
-        if (!Array.isArray(data)) {
-            return;
-        }
-        this.#data = data;
-        this.#filteredData = [...data];
-        this.#render();
-    }
-    /**
-     * Get table data
-     */
-    get data() {
-        return this.#data;
-    }
-    /**
-     * Set column configuration
-     */
-    set columns(columns) {
-        if (!Array.isArray(columns)) {
-            return;
-        }
-        this.#columns = columns;
-        this.#render();
-    }
-    /**
-     * Get column configuration
-     */
-    get columns() {
-        return this.#columns;
-    }
-    /**
-     * Apply filter to data
-     * @private
-     */
-    #applyFilter(term) {
-        this.#filterTerm = term.toLowerCase();
-        if (!this.#filterTerm) {
-            this.#filteredData = [...this.#data];
-        }
-        else {
-            this.#filteredData = this.#data.filter(row => {
-                return this.#columns.some(col => {
-                    if (col.filterable === false)
-                        return false;
-                    const value = String(row[col.key] ?? '').toLowerCase();
-                    return value.includes(this.#filterTerm);
-                });
-            });
-        }
-        this.#pagination.currentPage = 1; // Reset to first page
-        this.#updateTableContent();
-        this.audit('table_filtered', {
-            filterTerm: term,
-            resultCount: this.#filteredData.length
-        });
-    }
-    /**
-     * Apply sorting to data
-     * @private
-     */
-    #applySort(columnKey) {
-        if (this.#sortConfig.column === columnKey) {
-            // Toggle direction
-            this.#sortConfig.direction = this.#sortConfig.direction === 'asc' ? 'desc' : 'asc';
-        }
-        else {
-            this.#sortConfig.column = columnKey;
-            this.#sortConfig.direction = 'asc';
-        }
-        this.#filteredData.sort((a, b) => {
-            const aVal = Object.hasOwn(a, columnKey) ? a[columnKey] : undefined;
-            const bVal = Object.hasOwn(b, columnKey) ? b[columnKey] : undefined;
-            let comparison = 0;
-            if (aVal > bVal)
-                comparison = 1;
-            if (aVal < bVal)
-                comparison = -1;
-            return this.#sortConfig.direction === 'asc' ? comparison : -comparison;
-        });
-        this.#updateTableContent();
-        this.audit('table_sorted', {
-            column: columnKey,
-            direction: this.#sortConfig.direction
-        });
-    }
-    /**
-     * Change page
-     * @private
-     */
-    #goToPage(pageNumber) {
-        const totalPages = Math.ceil(this.#filteredData.length / this.#pagination.pageSize);
-        if (pageNumber < 1 || pageNumber > totalPages)
-            return;
-        this.#pagination.currentPage = pageNumber;
-        this.#updateTableContent();
-    }
-    /**
-     * Simple HTML sanitization to prevent XSS
-     * @private
-     */
-    #sanitize(str) {
-        if (str === null || str === undefined || str === '')
-            return '';
-        return String(str)
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#x27;');
-    }
-    /**
-     * Mask sensitive column values based on tier
-     * @private
-     */
-    #maskValue(value, tier) {
-        if (value === null || value === undefined || value === '')
-            return '-';
-        const strValue = String(value);
-        if (tier === SecurityTier.SENSITIVE && strValue.length > 4) {
-            return '\u2022'.repeat(strValue.length - 4) + strValue.slice(-4);
-        }
-        if (tier === SecurityTier.CRITICAL) {
-            return '\u2022'.repeat(strValue.length);
-        }
-        return this.#sanitize(strValue);
-    }
-    /**
-     * Render cell content with custom render function if available
-     * @private
-     */
-    #renderCell(value, row, column) {
-        // If column has custom render function, use it
-        if (typeof column.render === 'function') {
-            return column.render(value, row, column.key);
-        }
-        // Check if we have stored HTML content from server-rendered table
-        const htmlKey = `${column.key}_html`;
-        if (Object.hasOwn(row, htmlKey) && row[htmlKey]) {
-            // Don't mask HTML content, it's already rendered
-            return row[htmlKey];
-        }
-        // Otherwise, mask value based on security tier
-        return this.#maskValue(value, column.tier);
-    }
-    /**
-     * Generate the table body, thead, and pagination HTML
-     * @private
-     */
-    #renderTableContent() {
-        const totalPages = Math.ceil(this.#filteredData.length / this.#pagination.pageSize);
-        const startIndex = (this.#pagination.currentPage - 1) * this.#pagination.pageSize;
-        const endIndex = startIndex + this.#pagination.pageSize;
-        const pageData = this.#filteredData.slice(startIndex, endIndex);
-        let tableHtml;
-        let paginationHtml;
-        if (pageData.length === 0 || this.#columns.length === 0) {
-            const emptyHeading = this.#columns.length === 0 ? 'No columns configured' : 'No results found';
-            const emptyBody = this.#columns.length === 0 ? 'Set the columns property to configure the table' : 'Try adjusting your search term';
-            tableHtml = `
+import{SecureBaseComponent as p}from"../../core/base-component.js";import{SecurityTier as g}from"../../core/security-config.js";class b extends p{#s=[];#n=[];#e=[];#r="";#a={column:null,direction:"asc"};#t={currentPage:1,pageSize:10};#h=!1;constructor(){super()}render(){return null}connectedCallback(){this.initializeSecurity();const t=this.querySelector('table[slot="table"]'),e=this.#g();e&&(this.#h=!0,this.#n=e.columns,this.#s=e.data,this.#e=[...e.data],t&&t.remove()),this.#o(),this.audit("table_mounted",{rowCount:this.#s.length,columnCount:this.#n.length,usingSlottedContent:this.#h})}#g(){const t=this.querySelector('table[slot="table"]');if(!t)return null;try{const e=t.querySelectorAll("thead th");if(e.length===0)return null;const n=Array.from(e).map(a=>({key:a.getAttribute("data-key")||a.textContent.trim().toLowerCase().replace(/\s+/g,"_"),label:a.textContent.trim().replace(/\s+$/,""),sortable:a.hasAttribute("data-sortable")?a.getAttribute("data-sortable")!=="false":!0,filterable:a.hasAttribute("data-filterable")?a.getAttribute("data-filterable")!=="false":void 0,tier:a.getAttribute("data-tier")||void 0,width:a.getAttribute("data-width")||void 0,render:a.hasAttribute("data-render-html")?this.#p(a):void 0})),s=t.querySelectorAll("tbody tr"),r=Array.from(s).map((a,i)=>{const o=a.querySelectorAll("td"),c=Object.create(null);return o.forEach((l,d)=>{if(d<n.length){const u=n[d],h=l.getAttribute("data-key")||u.key;if(h==="__proto__"||h==="constructor"||h==="prototype")return;l.innerHTML.trim().includes("<")?(c[h]=l.textContent?.trim()??"",c[`${h}_html`]=l.innerHTML.trim()):c[h]=l.textContent?.trim()??""}}),c});return{columns:n,data:r}}catch(e){return console.error("SecureTable: Error parsing slotted table",e),null}}#p(t){return(e,n,s)=>{const r=`${s}_html`;return(Object.hasOwn(n,r)?n[r]:null)||this.#i(e)}}set data(t){Array.isArray(t)&&(this.#s=t,this.#e=[...t],this.#o())}get data(){return this.#s}set columns(t){Array.isArray(t)&&(this.#n=t,this.#o())}get columns(){return this.#n}#b(t){this.#r=t.toLowerCase(),this.#r?this.#e=this.#s.filter(e=>this.#n.some(n=>n.filterable===!1?!1:String(e[n.key]??"").toLowerCase().includes(this.#r))):this.#e=[...this.#s],this.#t.currentPage=1,this.#c(),this.audit("table_filtered",{filterTerm:t,resultCount:this.#e.length})}#f(t){this.#a.column===t?this.#a.direction=this.#a.direction==="asc"?"desc":"asc":(this.#a.column=t,this.#a.direction="asc"),this.#e.sort((e,n)=>{const s=Object.hasOwn(e,t)?e[t]:void 0,r=Object.hasOwn(n,t)?n[t]:void 0;let a=0;return s>r&&(a=1),s<r&&(a=-1),this.#a.direction==="asc"?a:-a}),this.#c(),this.audit("table_sorted",{column:t,direction:this.#a.direction})}#l(t){const e=Math.ceil(this.#e.length/this.#t.pageSize);t<1||t>e||(this.#t.currentPage=t,this.#c())}#i(t){return t==null||t===""?"":String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}#m(t,e){if(t==null||t==="")return"-";const n=String(t);return e===g.SENSITIVE&&n.length>4?"\u2022".repeat(n.length-4)+n.slice(-4):e===g.CRITICAL?"\u2022".repeat(n.length):this.#i(n)}#y(t,e,n){if(typeof n.render=="function")return n.render(t,e,n.key);const s=`${n.key}_html`;return Object.hasOwn(e,s)&&e[s]?e[s]:this.#m(t,n.tier)}#d(){const t=Math.ceil(this.#e.length/this.#t.pageSize),e=(this.#t.currentPage-1)*this.#t.pageSize,n=e+this.#t.pageSize,s=this.#e.slice(e,n);let r,a;if(s.length===0||this.#n.length===0){const i=this.#n.length===0?"No columns configured":"No results found",o=this.#n.length===0?"Set the columns property to configure the table":"Try adjusting your search term";r=`
         <div class="empty-state">
-          <div class="empty-state-icon" aria-hidden="true">\uD83D\uDD0D</div>
-          <h3>${this.#sanitize(emptyHeading)}</h3>
-          <p>${this.#sanitize(emptyBody)}</p>
-        </div>`;
-            paginationHtml = '';
-        }
-        else {
-            tableHtml = `
+          <div class="empty-state-icon" aria-hidden="true">\u{1F50D}</div>
+          <h3>${this.#i(i)}</h3>
+          <p>${this.#i(o)}</p>
+        </div>`,a=""}else r=`
         <div class="table-wrapper">
           <table class="data-table">
             <thead>
               <tr>
-                ${this.#columns.map(col => {
-                const isSorted = this.#sortConfig.column === col.key;
-                const sortArrow = isSorted ? (this.#sortConfig.direction === 'asc' ? '\u25B2' : '\u25BC') : '\u25B2';
-                const ariaSortAttr = col.sortable !== false
-                    ? `aria-sort="${isSorted ? (this.#sortConfig.direction === 'asc' ? 'ascending' : 'descending') : 'none'}"`
-                    : '';
-                return `
+                ${this.#n.map(i=>{const o=this.#a.column===i.key,c=o?this.#a.direction==="asc"?"\u25B2":"\u25BC":"\u25B2",l=i.sortable!==!1?`aria-sort="${o?this.#a.direction==="asc"?"ascending":"descending":"none"}"`:"";return`
                   <th
-                    class="${col.sortable !== false ? 'sortable' : ''} ${isSorted ? 'sorted' : ''}"
-                    data-column="${this.#sanitize(col.key)}"
-                    ${ariaSortAttr}
+                    class="${i.sortable!==!1?"sortable":""} ${o?"sorted":""}"
+                    data-column="${this.#i(i.key)}"
+                    ${l}
                   >
-                    ${this.#sanitize(col.label)}
-                    ${col.sortable !== false ? `<span class="sort-indicator" aria-hidden="true">${sortArrow}</span>` : ''}
-                    ${col.tier ? `<span class="security-badge" aria-hidden="true">${this.#sanitize(col.tier)}</span>` : ''}
-                  </th>`;
-            }).join('')}
+                    ${this.#i(i.label)}
+                    ${i.sortable!==!1?`<span class="sort-indicator" aria-hidden="true">${c}</span>`:""}
+                    ${i.tier?`<span class="security-badge" aria-hidden="true">${this.#i(i.tier)}</span>`:""}
+                  </th>`}).join("")}
               </tr>
             </thead>
             <tbody>
-              ${pageData.map(row => `
+              ${s.map(i=>`
                 <tr>
-                  ${this.#columns.map(col => `
-                    <td>${this.#renderCell(row[col.key], row, col)}</td>
-                  `).join('')}
+                  ${this.#n.map(o=>`
+                    <td>${this.#y(i[o.key],i,o)}</td>
+                  `).join("")}
                 </tr>
-              `).join('')}
+              `).join("")}
             </tbody>
           </table>
-        </div>`;
-            paginationHtml = totalPages > 1 ? `
+        </div>`,a=t>1?`
         <div class="pagination">
           <div class="pagination-info">
-            Showing ${startIndex + 1}-${Math.min(endIndex, this.#filteredData.length)} of ${this.#filteredData.length} results
+            Showing ${e+1}-${Math.min(n,this.#e.length)} of ${this.#e.length} results
           </div>
           <div class="pagination-controls">
-            <button class="pagination-button" id="prevBtn" ${this.#pagination.currentPage === 1 ? 'disabled' : ''}>
+            <button class="pagination-button" id="prevBtn" ${this.#t.currentPage===1?"disabled":""}>
               \u2190 Previous
             </button>
-            ${this.#renderPageNumbers(totalPages)}
-            <button class="pagination-button" id="nextBtn" ${this.#pagination.currentPage === totalPages ? 'disabled' : ''}>
+            ${this.#v(t)}
+            <button class="pagination-button" id="nextBtn" ${this.#t.currentPage===t?"disabled":""}>
               Next \u2192
             </button>
           </div>
-        </div>` : '';
-        }
-        return { tableHtml, paginationHtml };
-    }
-    /**
-     * Full initial render of the table
-     * @private
-     */
-    #render() {
-        if (!this.shadowRoot)
-            return;
-        const { tableHtml, paginationHtml } = this.#renderTableContent();
-        // Styles injected as <link> elements inside innerHTML — loads from 'self' (CSP-safe).
-        // getBaseStylesheetUrl() uses import.meta.url from base-component.js so the path
-        // resolves correctly regardless of where secure-table.js is located.
-        this.shadowRoot.innerHTML = `
+        </div>`:"";return{tableHtml:r,paginationHtml:a}}#o(){if(!this.shadowRoot)return;const{tableHtml:t,paginationHtml:e}=this.#d();this.shadowRoot.innerHTML=`
       <link rel="stylesheet" href="${this.getBaseStylesheetUrl()}">
-      <link rel="stylesheet" href="${new URL('./secure-table.css', import.meta.url).href}">
+      <link rel="stylesheet" href="${new URL("./secure-table.css",import.meta.url).href}">
       <!-- Slot for server-rendered table (fallback when JS fails to load) -->
       <slot name="table"></slot>
 
@@ -420,149 +56,18 @@ export class SecureTable extends SecureBaseComponent {
             type="search"
             class="search-input"
             placeholder="Search across all columns..."
-            value="${this.#sanitize(this.#filterTerm)}"
+            value="${this.#i(this.#r)}"
             id="searchInput"
           />
         </div>
-        <div id="tableContent">${tableHtml}</div>
-        <div id="paginationContent">${paginationHtml}</div>
+        <div id="tableContent">${t}</div>
+        <div id="paginationContent">${e}</div>
       </div>
-    `;
-        // Attach event listeners
-        this.#attachEventListeners();
-    }
-    /**
-     * Partial update — only replaces table body and pagination, preserving search input focus.
-     * @private
-     */
-    #updateTableContent() {
-        if (!this.shadowRoot)
-            return;
-        const tableContainer = this.shadowRoot.getElementById('tableContent');
-        const paginationContainer = this.shadowRoot.getElementById('paginationContent');
-        if (!tableContainer) {
-            // Fallback to full render if containers don't exist yet
-            this.#render();
-            return;
-        }
-        const { tableHtml, paginationHtml } = this.#renderTableContent();
-        tableContainer.innerHTML = tableHtml;
-        if (paginationContainer) {
-            paginationContainer.innerHTML = paginationHtml;
-        }
-        // Re-attach listeners for table and pagination (search input listener is preserved)
-        this.#attachTableEventListeners();
-    }
-    /**
-     * Render page number buttons
-     * @private
-     */
-    #renderPageNumbers(totalPages) {
-        const maxButtons = 5;
-        let startPage = Math.max(1, this.#pagination.currentPage - Math.floor(maxButtons / 2));
-        const endPage = Math.min(totalPages, startPage + maxButtons - 1);
-        if (endPage - startPage < maxButtons - 1) {
-            startPage = Math.max(1, endPage - maxButtons + 1);
-        }
-        let buttons = '';
-        for (let i = startPage; i <= endPage; i++) {
-            buttons += `
+    `,this.#S()}#c(){if(!this.shadowRoot)return;const t=this.shadowRoot.getElementById("tableContent"),e=this.shadowRoot.getElementById("paginationContent");if(!t){this.#o();return}const{tableHtml:n,paginationHtml:s}=this.#d();t.innerHTML=n,e&&(e.innerHTML=s),this.#u()}#v(t){let n=Math.max(1,this.#t.currentPage-Math.floor(2.5));const s=Math.min(t,n+5-1);s-n<4&&(n=Math.max(1,s-5+1));let r="";for(let a=n;a<=s;a++)r+=`
         <button
-          class="pagination-button ${i === this.#pagination.currentPage ? 'active' : ''}"
-          data-page="${i}"
+          class="pagination-button ${a===this.#t.currentPage?"active":""}"
+          data-page="${a}"
         >
-          ${i}
+          ${a}
         </button>
-      `;
-        }
-        return buttons;
-    }
-    /**
-     * Attach all event listeners (called on full render only)
-     * @private
-     */
-    #attachEventListeners() {
-        // Search input — only attached once on full render, preserved across partial updates
-        const searchInput = this.shadowRoot.getElementById('searchInput');
-        if (searchInput) {
-            searchInput.addEventListener('input', (e) => {
-                this.#applyFilter(e.target.value);
-            });
-        }
-        // Table and pagination listeners
-        this.#attachTableEventListeners();
-    }
-    /**
-     * Attach event listeners for table headers and pagination (called on every update)
-     * @private
-     */
-    #attachTableEventListeners() {
-        // Column sorting
-        const headers = this.shadowRoot.querySelectorAll('th.sortable');
-        headers.forEach(th => {
-            th.addEventListener('click', () => {
-                const column = th.getAttribute('data-column');
-                if (!column)
-                    return;
-                this.#applySort(column);
-            });
-        });
-        // Pagination
-        const prevBtn = this.shadowRoot.getElementById('prevBtn');
-        const nextBtn = this.shadowRoot.getElementById('nextBtn');
-        if (prevBtn) {
-            prevBtn.addEventListener('click', () => {
-                this.#goToPage(this.#pagination.currentPage - 1);
-            });
-        }
-        if (nextBtn) {
-            nextBtn.addEventListener('click', () => {
-                this.#goToPage(this.#pagination.currentPage + 1);
-            });
-        }
-        // Page number buttons
-        const pageButtons = this.shadowRoot.querySelectorAll('.pagination-button[data-page]');
-        pageButtons.forEach(btn => {
-            btn.addEventListener('click', () => {
-                const page = parseInt(btn.getAttribute('data-page'), 10);
-                this.#goToPage(page);
-            });
-        });
-        // Action button delegation — dispatches 'table-action' CustomEvent on the host
-        // element when any [data-action] element inside the table is clicked.
-        // This allows page-level scripts to handle action buttons without needing
-        // access to the closed shadow DOM.
-        const tableContent = this.shadowRoot.getElementById('tableContent');
-        if (tableContent) {
-            tableContent.addEventListener('click', (e) => {
-                const target = e.target.closest('[data-action]');
-                if (!target)
-                    return;
-                const action = target.getAttribute('data-action');
-                // Collect all data-* attributes from the action element
-                const detail = Object.create(null);
-                detail['action'] = action;
-                for (const attr of Array.from(target.attributes)) {
-                    if (attr.name.startsWith('data-') && attr.name !== 'data-action') {
-                        // Convert data-user-id to userId style key
-                        const key = attr.name.slice(5).replace(/-([a-z])/g, (_match, c) => c.toUpperCase());
-                        // Guard against prototype pollution via data-__proto__ style attributes
-                        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
-                            continue;
-                        }
-                        detail[key] = attr.value;
-                    }
-                }
-                this.dispatchEvent(new CustomEvent('table-action', {
-                    bubbles: true,
-                    composed: true,
-                    detail
-                }));
-                this.audit('table_action', detail);
-            });
-        }
-    }
-}
-// Register the custom element
-customElements.define('secure-table', SecureTable);
-//# sourceMappingURL=secure-table.js.map
+      `;return r}#S(){const t=this.shadowRoot.getElementById("searchInput");t&&t.addEventListener("input",e=>{this.#b(e.target.value)}),this.#u()}#u(){this.shadowRoot.querySelectorAll("th.sortable").forEach(a=>{a.addEventListener("click",()=>{const i=a.getAttribute("data-column");i&&this.#f(i)})});const e=this.shadowRoot.getElementById("prevBtn"),n=this.shadowRoot.getElementById("nextBtn");e&&e.addEventListener("click",()=>{this.#l(this.#t.currentPage-1)}),n&&n.addEventListener("click",()=>{this.#l(this.#t.currentPage+1)}),this.shadowRoot.querySelectorAll(".pagination-button[data-page]").forEach(a=>{a.addEventListener("click",()=>{const i=parseInt(a.getAttribute("data-page"),10);this.#l(i)})});const r=this.shadowRoot.getElementById("tableContent");r&&r.addEventListener("click",a=>{const i=a.target.closest("[data-action]");if(!i)return;const o=i.getAttribute("data-action"),c=Object.create(null);c.action=o;for(const l of Array.from(i.attributes))if(l.name.startsWith("data-")&&l.name!=="data-action"){const d=l.name.slice(5).replace(/-([a-z])/g,(u,h)=>h.toUpperCase());if(d==="__proto__"||d==="constructor"||d==="prototype")continue;c[d]=l.value}this.dispatchEvent(new CustomEvent("table-action",{bubbles:!0,composed:!0,detail:c})),this.audit("table_action",c)})}}customElements.define("secure-table",b);export{b as SecureTable};