@kodaris/krubble-components 1.0.13 → 1.0.14

package/dist/krubble.bundled.js

@@ -2299,6 +2299,28 @@ let KRTable = class KRTable extends i$2 {
     }
     updated(changedProperties) {
         this._updateScrollFlags();
+        this._syncSlottedContent();
+    }
+    /** Syncs light DOM content for cells with custom render functions */
+    _syncSlottedContent() {
+        const columns = this.getDisplayedColumns().filter(col => col.render);
+        if (!columns.length)
+            return;
+        // Clear old slotted content
+        this.querySelectorAll('[slot^="cell-"]').forEach(el => el.remove());
+        // Create new slotted content
+        this._data.forEach((row, rowIndex) => {
+            columns.forEach(col => {
+                const result = col.render(row);
+                const content = typeof result === 'string' ? result : '';
+                if (content) {
+                    const el = document.createElement('span');
+                    el.slot = `cell-${rowIndex}-${col.id}`;
+                    el.innerHTML = content;
+                    this.appendChild(el);
+                }
+            });
+        });
     }
     // ----------------------------------------------------------------------------
     // Public Interface
@@ -2541,12 +2563,11 @@ let KRTable = class KRTable extends i$2 {
     // ----------------------------------------------------------------------------
     // Rendering
     // ----------------------------------------------------------------------------
-    _renderCellContent(column, row) {
+    _renderCellContent(column, row, rowIndex) {
         const value = row[column.id];
         if (column.render) {
-            const result = column.render(row);
-            // If render returns a string, treat it as HTML
-            return typeof result === 'string' ? o$2(result) : result;
+            // Use slot to project content from light DOM so external styles apply
+            return b `<slot name="cell-${rowIndex}-${column.id}"></slot>`;
         }
         if (value === null || value === undefined) {
             return '';
@@ -2774,7 +2795,7 @@ let KRTable = class KRTable extends i$2 {
                     ></div>` : A}</div>
               `)}
             </div>
-            ${this._data.map(row => b `
+            ${this._data.map((row, rowIndex) => b `
               <div class="row">
                 ${this.getDisplayedColumns().map((col, i) => b `
                   <div
@@ -2782,7 +2803,7 @@ let KRTable = class KRTable extends i$2 {
                     style=${o$1(this._getCellStyle(col, i))}
                     data-column-id=${col.id}
                   >
-                    ${this._renderCellContent(col, row)}
+                    ${this._renderCellContent(col, row, rowIndex)}
                   </div>
                 `)}
               </div>
@@ -2841,8 +2862,8 @@ KRTable.styles = [krBaseCSS, i$5 `
     }
 
     .title {
-      font-size: 20px;
-      font-weight: 400;
+      font-size: 18px;
+      font-weight: 600;
       color: #000;
     }