@kodaris/krubble-components 1.0.63 → 1.0.64

package/dist/krubble-components.bundled.js

@@ -4613,6 +4613,7 @@ var __decorate$b = (undefined && undefined.__decorate) || function (decorators,
 class KRTableModel {
     constructor() {
         this.title = '';
+        this.description = '';
         this.actions = [];
         this.columns = [];
         this.displayedColumns = [];
@@ -4655,6 +4656,13 @@ let KRTable = class KRTable extends i$2 {
         this._columnWidthsLocked = false;
         this._model = new KRTableModel();
         this.def = { columns: [] };
+        /**
+         * Table layout variant.
+         * - 'default': Full-page table that fills parent height with centered search.
+         * - 'card': Embedded table that sizes itself to content, left-aligns search, and
+         *   reserves space for pageSize rows to prevent layout shift.
+         */
+        this.variant = 'default';
         this._handleClickOutside = (e) => {
             const path = e.composedPath();
             if (this._columnPickerOpen) {
@@ -4713,6 +4721,9 @@ let KRTable = class KRTable extends i$2 {
             if (this.def.title) {
                 this._model.title = this.def.title;
             }
+            if (this.def.description) {
+                this._model.description = this.def.description;
+            }
             if (this.def.actions) {
                 this._model.actions = this.def.actions;
             }
@@ -4727,6 +4738,7 @@ let KRTable = class KRTable extends i$2 {
             }
             if (typeof this.def.pageSize === 'number') {
                 this._model.pageSize = this.def.pageSize;
+                this._pageSize = this.def.pageSize;
             }
             if (this.def.rowClickable) {
                 this._model.rowClickable = this.def.rowClickable;
@@ -4784,6 +4796,7 @@ let KRTable = class KRTable extends i$2 {
         }
     }
     updated(changedProperties) {
+        this.classList.toggle('kr-table--card', this.variant === 'card');
         this._updateScrollFlags();
         this._syncSlottedContent();
     }
@@ -5081,6 +5094,9 @@ let KRTable = class KRTable extends i$2 {
         // Skip if already locked (prevents shifts on pagination changes)
         if (this._searchPositionLocked)
             return;
+        // In card mode, search is left-aligned via CSS — no position locking needed
+        if (this.variant === 'card')
+            return;
         const search = this.shadowRoot?.querySelector('.search');
         const searchField = search?.querySelector('.search-field');
         if (!search || !searchField)
@@ -5555,10 +5571,23 @@ let KRTable = class KRTable extends i$2 {
       </div>
     `;
     }
+    /** Renders the card title block (title + description) above the toolbar in card mode. */
+    _renderCardHeader() {
+        if (this.variant !== 'card')
+            return A;
+        if (!this._model.title && !this._model.description)
+            return A;
+        return b `
+      <div class="card-header">
+        ${this._model.title ? b `<h2 class="card-header__title">${this._model.title}</h2>` : A}
+        ${this._model.description ? b `<p class="card-header__description">${this._model.description}</p>` : A}
+      </div>
+    `;
+    }
     /**
      * Renders the header toolbar containing:
-     * - Title (left)
-     * - Search bar with view selector dropdown (center)
+     * - Title (left, default variant only)
+     * - Search bar with view selector dropdown (center, or left-aligned in card variant)
      * - Tools (right): page navigation, refresh button, column visibility picker, actions dropdown
      *
      * Hidden when there's no title, no actions, and data fits on one page.
@@ -5569,7 +5598,7 @@ let KRTable = class KRTable extends i$2 {
         }
         return b `
       <div class="header">
-        <div class="title">${this._model.title ?? ''}</div>
+        ${this._model.title && this.variant !== 'card' ? b `<div class="title">${this._model.title}</div>` : A}
         ${this._model.dataSource?.mode === 'db' && !this._model.columns.some(col => col.searchable) ? b `<div class="search"></div>` : b `
           <div class="search">
             <!-- TODO: Saved views dropdown
@@ -5947,8 +5976,13 @@ let KRTable = class KRTable extends i$2 {
     }
     /** Renders the scrollable data grid with column headers and rows. */
     _renderTable() {
+        const wrapperStyle = {};
+        if (this.variant === 'card') {
+            // Reserve space for header row + pageSize data rows to prevent layout shift
+            wrapperStyle['min-height'] = `${48 + (this._pageSize * 48)}px`;
+        }
         return b `
-      <div class="wrapper">
+      <div class="wrapper" style=${o$1(wrapperStyle)}>
         <div class="overlay-left"></div>
         <div class="overlay-right"></div>
         ${this._renderStatus()}
@@ -6016,6 +6050,7 @@ let KRTable = class KRTable extends i$2 {
             return b `<slot></slot>`;
         }
         return b `
+      ${this._renderCardHeader()}
       ${this._renderHeader()}
       ${this._renderTable()}
       ${this._renderFilterPanel()}
@@ -6054,7 +6089,7 @@ KRTable.styles = [krBaseCSS, i$5 `
     }
 
     .title {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 600;
       color: #000;
     }
@@ -6071,7 +6106,6 @@ KRTable.styles = [krBaseCSS, i$5 `
     .content {
       height: 100%;
       overflow: auto;
-      padding-bottom: 24px;
     }
 
     /* -------------------------------------------------------------------------
@@ -6085,6 +6119,11 @@ KRTable.styles = [krBaseCSS, i$5 `
       min-width: 0;
     }
 
+    /* In card mode, align search left instead of center */
+    :host(.kr-table--card) .search {
+      justify-content: flex-start;
+    }
+
     .search-field {
       width: 100%;
       max-width: 400px;
@@ -6879,6 +6918,48 @@ KRTable.styles = [krBaseCSS, i$5 `
       padding: 16px;
     }
 
+    /* Card variant — self-contained card with border, auto height, left-aligned search */
+    :host(.kr-table--card) {
+      height: auto;
+      /* overflow: visible; */
+      overflow: hidden;
+      /* border: 1px solid #e5e7eb; */
+      /* border-radius: 8px; */
+      border: 1px solid #c6c6cd;
+      border-radius: 12px;
+      background: #fff;
+    }
+
+    .card-header {
+      padding: 24px 24px 16px;
+    }
+
+    .card-header__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1f2937;
+      margin: 0;
+    }
+
+    .card-header__description {
+      font-size: 14px;
+      color: #1f2937;
+      margin: 12px 0 0;
+    }
+
+    :host(.kr-table--card) .header {
+      margin: 0 24px;
+    }
+
+    :host(.kr-table--card) .wrapper {
+      flex: none;
+      overflow: visible;
+    }
+
+    :host(.kr-table--card) .content {
+      height: auto;
+    }
+
   `];
 __decorate$b([
     r$1()
@@ -6928,6 +7009,9 @@ __decorate$b([
 __decorate$b([
     n$1({ type: Object })
 ], KRTable.prototype, "def", void 0);
+__decorate$b([
+    n$1({ type: String, reflect: true })
+], KRTable.prototype, "variant", void 0);
 KRTable = __decorate$b([
     t$1('kr-table')
 ], KRTable);