@kodaris/krubble-components 1.0.13 → 1.0.14

package/dist/krubble.umd.js

@@ -2305,6 +2305,28 @@
       }
       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
@@ -2547,12 +2569,11 @@
       // ----------------------------------------------------------------------------
       // 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 '';
@@ -2780,7 +2801,7 @@
                     ></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
@@ -2788,7 +2809,7 @@
                     style=${o$1(this._getCellStyle(col, i))}
                     data-column-id=${col.id}
                   >
-                    ${this._renderCellContent(col, row)}
+                    ${this._renderCellContent(col, row, rowIndex)}
                   </div>
                 `)}
               </div>
@@ -2847,8 +2868,8 @@
     }
 
     .title {
-      font-size: 20px;
-      font-weight: 400;
+      font-size: 18px;
+      font-weight: 600;
       color: #000;
     }