globuswebcomponents 2.10.13 → 2.11.0

package/dist/collection/components/gb-table/gb-table.css

@@ -2813,10 +2813,13 @@
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
+  background: var(--color-background-card, #ffffff);
+}
+
+.table_wrapper.list {
   border-radius: var(--rounded-md);
   border: 0.7px solid var(--color-border-subtler, #e3e8ef);
   box-shadow: var(--shadow-xs);
-  background: var(--color-background-card, #ffffff);
 }
 
 /* .table_wrapper table th:first-child,
@@ -2834,6 +2837,12 @@ gb-table-header {
   background: var(--color-background-card, #ffffff);
 }
 
+.table-header.grid {
+  overflow-y: visible;
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
 .table_scroll {
   width: 100%;
   overflow-x: auto; /* horizontal scroll */
@@ -3010,7 +3019,9 @@ table .table_detail.has_border.sticky_left::after {
   display: flex;
   justify-content: flex-end; /* align modal to right */
   opacity: 0;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
   z-index: 1000;
 }
 
@@ -3032,7 +3043,129 @@ table .table_detail.has_border.sticky_left::after {
   opacity: 0;
 }
 
-/* Dropdown wrapper styles moved to global/dropdown-portal.css to support portal rendering */
+/* Grid View Styles */
+.table_grid_wrapper {
+  display: flex;
+  padding: var(--spacing-5) 0;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 1.5rem var(--spacing-6);
+  align-self: stretch;
+  flex-wrap: wrap;
+  opacity: 1;
+}
+
+.table_grid_card {
+  position: relative;
+  display: flex;
+  min-width: 21.25rem;
+  max-width: 21.875rem;
+  padding: var(--spacing-none);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-none);
+  flex: 1 0 0;
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-background-card, #ffffff);
+  overflow: hidden;
+}
+
+.grid_card_profile {
+  display: flex;
+  padding: 0 var(--spacing-5);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+}
+
+.grid_card_profile_content {
+  display: flex;
+  padding: var(--spacing-5) var(--spacing-none);
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  align-self: stretch;
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
+.profile_details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.profile_name p {
+  color: var(--color-text-bold, #202939);
+}
+
+.profile_badges {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  align-self: stretch;
+}
+
+.grid_card_buttons {
+  display: flex;
+  padding: var(--spacing-5);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4);
+  align-self: stretch;
+}
+
+.btn {
+  flex: 1 0 0;
+}
+
+.grid_dropdown_modal_overlay {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: var(--color-blanket-subtler, rgba(33, 44, 101, 0.4));
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+  opacity: 0;
+}
+
+.grid_dropdown_modal_overlay.open {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.grid_dropdown_modal_overlay.closing {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.grid_dropdown_modal {
+  width: 12.1875rem;
+  height: 100%;
+  border-radius: var(--rounded-sm) 0 0 var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-background-card, #ffffff);
+  transition: transform 0.3s ease-in-out;
+}
+
+.grid_card_modal_close_button {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+}
 
 /* Mobile Table View Styles */
 .mobile_wrapper {

package/dist/collection/components/gb-table/gb-table.js

@@ -6,9 +6,17 @@ export class GbTable {
         this.columns = [
         // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
         // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
-        // { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
+        // {
+        //   key: 'name',
+        //   label: 'Name',
+        //   sortable: true,
+        //   sortType: 'string',
+        //   helpIcon: true,
+        //   supportingText: row => row.role,
+        //   mobile: { position: 'top_right' },
+        // },
         // { key: 'role', label: 'Role' },
-        // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: (row) => ({color: row.amount > 200 ? 'green' : ''}) },
+        // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },
         // {
         //   key: 'status',
         //   label: 'Status',
@@ -67,6 +75,14 @@ export class GbTable {
         // { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },
         // { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },
         ];
+        // = {
+        //   badges: [
+        //     { key: 'role', label: 'Role' },
+        //     { key: 'amount', label: 'Amount' },
+        //   ],
+        //   button: 
+        //     { icon: 'assets/sent.svg', text: 'Send Money', action: 'send_money' },
+        // };
         this.tableHeaderConfig = {
             tableHeading: false,
             tableHeadingLabel: 'Suspicious outflows',
@@ -76,6 +92,7 @@ export class GbTable {
             showSearch: true,
             showExport: true,
             showRefreshButton: false,
+            showLayoutToggle: false,
             datePickerMode: 'range',
             inputPlaceholder: 'Transaction reference',
         };
@@ -128,14 +145,16 @@ export class GbTable {
         this.modalPosition = { x: 0, y: 0 };
         this.showFilterModalInternal = false;
         this.isFilterModalVisible = false;
+        this.isGridModalVisible = false;
         this.internalLoading = false;
+        this.currentTableLayout = 'grid';
+        this.showGridCardModal = false;
         this.isDraggingModal = false;
         this.dragOffset = { x: 0, y: 0 };
         this.actionButtonRefs = [];
         this.draggedIndex = null;
         this.handlePageChange = ({ detail }) => {
             const { pageNumber, pageSize } = detail;
-            // console.log(detail);
             // Update these state variables to trigger a re-render
             this.internalPageSize = pageSize;
             this.internalCurrentPage = pageNumber;
@@ -225,8 +244,8 @@ export class GbTable {
         }
         const value = this.getCellValue(col, row);
         const resolvedClass = typeof col.cellClass === 'function' ? col.cellClass(row) : ((_d = col.cellClass) !== null && _d !== void 0 ? _d : '');
-        const resolvedStyle = typeof col.cellStyle === 'function' ? col.cellStyle(row) : (_e = col.cellStyle) !== null && _e !== void 0 ? _e : {};
-        return h("p", { class: `body_text text-sm-regular ${resolvedClass}`, style: resolvedStyle }, value);
+        const resolvedStyle = typeof col.cellStyle === 'function' ? col.cellStyle(row) : ((_e = col.cellStyle) !== null && _e !== void 0 ? _e : {});
+        return (h("p", { class: `body_text text-sm-regular ${resolvedClass}`, style: resolvedStyle }, value));
     }
     getCellValue(col, row) {
         if (col.value) {
@@ -249,6 +268,20 @@ export class GbTable {
         // Calculate available space for dropdown positioning
         requestAnimationFrame(() => this.calculateDropdownPlacement(nativeBtn, this.dropdownRef));
     }
+    openGridModal(rowIndex) {
+        this.openRowIndex = rowIndex;
+        this.isGridModalVisible = true;
+        requestAnimationFrame(() => {
+            this.isGridModalVisible = true;
+        });
+    }
+    closeGridModal() {
+        this.openRowIndex = null;
+        this.isGridModalVisible = false;
+        setTimeout(() => {
+            this.showFilterModalInternal = false;
+        }, 300);
+    }
     calculateDropdownPlacement(buttonElement, dropdownElement) {
         if (!buttonElement || !dropdownElement)
             return;
@@ -352,15 +385,11 @@ export class GbTable {
         this.selectionChanged.emit(selected);
     }
     get displayedData() {
-        // console.log('sortedData length:', this.sortedData.length);
-        // console.log('mode:', this.paginationConfig?.paginationMode);
-        // console.log('page:', this.internalCurrentPage, 'size:', this.internalPageSize);
         if (!this.paginationConfig || this.paginationConfig.paginationMode === 'external') {
             return this.sortedData;
         }
         const start = (this.internalCurrentPage - 1) * this.internalPageSize;
         const end = start + this.internalPageSize;
-        // console.log('slice:', start, end);
         return this.sortedData.slice(start, end);
     }
     get totalPages() {
@@ -398,6 +427,21 @@ export class GbTable {
                 transition: 'transform 0.2s ease',
             } }, h("path", { d: "M7.99998 13.3332V2.6665M7.99998 13.3332C8.87837 13.3332 11.3333 9.99993 11.3333 9.99993M7.99998 13.3332C7.12158 13.3332 4.66663 9.9999 4.66663 9.9999", stroke: this.sortKey === col.key ? 'var(--color-icon, #4B5565)' : 'var(--color-icon-disabled, #808c9e)', "stroke-linecap": "round", "stroke-linejoin": "round" }))), col.helpIcon && (h("gb-help-tooltip", { "show-supporting-text": "true" }, h("p", { slot: "label" }, "This is a label"), h("p", { slot: "supporting_text" }, "This is a supporting text")))));
     }
+    validateMobilePositions(newCols) {
+        const positions = this.internalColumns.map(c => { var _a; return (_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position; }).filter(Boolean);
+        const duplicates = positions.filter((item, index) => positions.indexOf(item) !== index);
+        if (duplicates.length) {
+            console.warn('[gb-table] Duplicate mobile positions detected:', duplicates);
+        }
+        this.initializeColumns(newCols);
+    }
+    emitRowData(row) {
+        this.rowClicked.emit(row);
+    }
+    generateNameInitials(name) {
+        const splitNames = name.split(' ');
+        return splitNames.map((nm) => nm.charAt(0));
+    }
     renderDesktopView() {
         // compute table min-width to force horizontal scroll when > 5 columns
         const defaultColWidth = 160;
@@ -440,16 +484,15 @@ export class GbTable {
                 this.openRowIndex = null;
             } })))))))))))))))));
     }
-    validateMobilePositions(newCols) {
-        const positions = this.internalColumns.map(c => { var _a; return (_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position; }).filter(Boolean);
-        const duplicates = positions.filter((item, index) => positions.indexOf(item) !== index);
-        if (duplicates.length) {
-            console.warn('[gb-table] Duplicate mobile positions detected:', duplicates);
-        }
-        this.initializeColumns(newCols);
-    }
-    emitRowData(row) {
-        this.rowClicked.emit(row);
+    renderGridView() {
+        return (h("div", { class: `table_grid_wrapper` }, this.displayedData.map((row, rowIndex) => {
+            var _a, _b;
+            return (h("div", { class: "table_grid_card" }, h("div", { class: "grid_card_profile" }, h("div", { class: "grid_card_profile_content" }, h("div", { class: "profile_avatar" }, h("gb-avatar", { size: "lg", "show-border": "false" }, h("h1", { slot: "initials" }, this.generateNameInitials(row.name)))), h("div", { class: "profile_details" }, h("div", { class: "profile_name" }, h("p", { class: "text-lg-semi-bold" }, row.name)), (_b = (_a = this.gridCardConfig) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 :
+                _b.map(badge => (h("gb-badge", { size: "lg", type: "badge_modern", color: "gray" }, h("p", null, row[badge.key]))))))), h("div", { class: "grid_card_buttons" }, h("div", { class: "btn" }, h("gb-button", { size: "md", hierarchy: "secondary_gray", icon: "default", "icon-leading": this.gridCardConfig.button.icon ? true : false, iconLeadingSwap: this.gridCardConfig.button.icon, onClick: () => this.handleAction(this.gridCardConfig.button.action, row) }, h("p", null, this.gridCardConfig.button.text))), h("gb-button", { size: "md", hierarchy: "secondary_gray", iconLeading: true, "icon-leading-swap": "assets/more-vertical.svg", icon: "only", onClick: () => this.openGridModal(rowIndex) })), this.openRowIndex === rowIndex && this.isGridModalVisible && (h("div", { class: `grid_dropdown_modal_overlay ${this.isGridModalVisible ? 'open' : 'closing'}` }, h("gb-button-close", { size: "sm", color: "gray", class: "grid_card_modal_close_button", onClick: () => this.closeGridModal() }), h("div", { class: "grid_dropdown_modal" }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
+                    this.handleAction(action.action, row);
+                    this.openRowIndex = null;
+                } }))))))));
+        })));
     }
     renderMobileView() {
         return (h("div", { class: "mobile_wrapper" }, this.displayedData.map(row => {
@@ -486,6 +529,12 @@ export class GbTable {
     exportButtonClicked(detail) {
         this.exportClicked.emit(detail.detail);
     }
+    onRefreshButtonClicked() {
+        this.refreshButtonClicked.emit();
+    }
+    switchTableLayout(layout) {
+        this.currentTableLayout = layout.detail;
+    }
     toggleColumn(event, columnKey) {
         const isVisible = event.detail;
         this.internalColumns = this.internalColumns.map(col => (col.key === columnKey ? Object.assign(Object.assign({}, col), { visible: isVisible }) : col));
@@ -511,16 +560,16 @@ export class GbTable {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: 'db94ba1f0c6df50a9912269e5868410965a1731d', class: `table_wrapper` }, h("gb-table-header", { key: 'baf7efe46da8fd6644265c151e2e2b180207c9ce', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: '7b0cf14209c88a9906e7f9d76b4b754d2b57367a', class: "dialog", style: {
+        return (h("div", { key: '41ad992da9a1e72bb4e51e11ebdc023e35d106e0', class: `table_wrapper ${this.currentTableLayout}` }, h("div", { key: '3148992bee2f378ad2fd6eb0671cfabb8899f01a', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: 'acb4db2dadac69c07cd3fbb4f89b2e99c6f15773', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e) })), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: 'eca151da1e38ecc34a71c4d7bcacabdcb00c6071', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '732916316e147ce1dc1ca6b1376812bd1c972820', class: "column-modal" }, h("div", { key: '721fb6a9b5fe32fcdc0da5603b556782dabbd48c', class: "modal_header" }, h("div", { key: 'd568e6b262c020615250a0cf074ab0eeab57585d', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '3f5d07af3cdc6733f8df0b15ec8b6a883a6251f3', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '527eaf24a973964cb2b208e1a58dc3da52c2ee0e', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '9833cb5a3245b9627e3575dc72d257b89ea6d410', class: "content_wrapper" }, h("div", { key: '7d3f5bbcf994e95d1256fcd6d0d4a0ede0313e48', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
+            } }, h("div", { key: '6f62f43f483fb8b885e8303babdcd83292d6bd32', class: "column-modal" }, h("div", { key: '03d472af316fcde5b822afc1890838e24e0dba51', class: "modal_header" }, h("div", { key: '5123652fa43deee4bb9e9e67e8d26b403bc61e50', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '6d46d6055141c1190c5de0b2dfaa9776c75b6538', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: 'b4c9145bb503fe300b108806736d55289b5627eb', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '5a5ea49521013490ba1ce6135a522898ab030d9b', class: "content_wrapper" }, h("div", { key: '67f2b4079b44a0e1d531f362a59d282ea4a5d1ba', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
                 if (this.draggedIndex !== null && this.draggedIndex !== index) {
                     this.reorderColumns(this.draggedIndex, index);
                 }
                 this.draggedIndex = null;
             } }, h("div", { class: "label_and_dragger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M8 6H8.00635M8 12H8.00635M8 18H8.00635M15.9937 6H16M15.9937 12H16M15.9937 18H16", stroke: "var(--color-icon, #4B5565)", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { class: "label text-md-regular" }, col.label)), h("gb-toggle", { size: "sm", state: StateEnum.Default, position: "right", pressed: col.visible, text: false, onToggleClicked: e => {
                 this.toggleColumn(e, col.key);
-            } })))), h("div", { key: 'bef112827b7898c2a27a5a0ecada4ce1df9e5151', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '5415a76c52c1f80d681cd613c91c6acdf5d424aa', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '1c7e3d27495749c2dd4c0155d2f2ffe9f7568e52', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
+            } })))), h("div", { key: '2bde3fa7dd53d65aea236e17de915fc13c1e7dbd', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: '40274e799964875925b319c3492cd6188ba22991', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '4b800135ff21992f7bf40e58d0a870a5bbbacb7f', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
@@ -559,7 +608,13 @@ export class GbTable {
         // ✅ No loading + no data = empty state
         h("div", { class: "empty_state_wrapper" }, h("gb-empty-state", { size: "sm", "main-text": this.emptyStateConfig.mainText, "supporting-text": this.emptyStateConfig.supportingText, color: this.emptyStateConfig.color, theme: this.emptyStateConfig.theme, "primary-button-icon-leading-swap": "assets/plus.svg", "illustration-icon": this.emptyStateConfig.illustrationIcon, background: true, "background-type": "grid", icon: "illustration", "illustration-style": "cloud" }))) : (
         // ✅ Has data + not loading
-        h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '162a6f2d43f693d8a4a6dd44940ee3e1b7a9b49f', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
+        h(Fragment, null, this.isMobile
+            ? this.renderMobileView()
+            : this.currentTableLayout === 'list'
+                ? this.renderDesktopView()
+                : this.currentTableLayout === 'grid'
+                    ? this.renderGridView()
+                    : null)), this.paginationConfig && this.data.length > 0 && (h("div", { key: 'd851476487e72f2a021ed12f9aa0a66918c7e955', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'ecc8b64e633faa0b85c2099ca412378c8681c2b2', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) })))));
     }
     static get is() { return "gb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -617,7 +672,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n    // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n    // { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: (row) => ({color: row.amount > 200 ? 'green' : ''}) },\r\n    // {\r\n    //   key: 'status',\r\n    //   label: 'Status',\r\n    //   cellComponent: 'gb-badge',\r\n    //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),\r\n    //   cellSlots: {\r\n    //     default: {\r\n    //       tag: 'p',\r\n    //       content: row => row.status,\r\n    //     },\r\n    //   },\r\n    // },\r\n  ]"
+                "defaultValue": "[\r\n    // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n    // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   supportingText: row => row.role,\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\r\n    // {\r\n    //   key: 'status',\r\n    //   label: 'Status',\r\n    //   cellComponent: 'gb-badge',\r\n    //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),\r\n    //   cellSlots: {\r\n    //     default: {\r\n    //       tag: 'p',\r\n    //       content: row => row.status,\r\n    //     },\r\n    //   },\r\n    // },\r\n  ]"
             },
             "data": {
                 "type": "unknown",
@@ -637,6 +692,23 @@ export class GbTable {
                 "setter": false,
                 "defaultValue": "[\r\n    // {\r\n    //   id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n    //   date: 'Jan 1, 2022',\r\n    //   name: 'Emma Johnson',\r\n    //   role: 'Frontend Developer',\r\n    //   level: 'Today',\r\n    //   customer: 'John Doe',\r\n    //   amount: '$120.00',\r\n    //   status: 'Completed',\r\n    // },\r\n    // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n    // { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },\r\n    // { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },\r\n    // { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },\r\n    // { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },\r\n    // { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },\r\n    // { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },\r\n    // { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },\r\n    // { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },\r\n    // { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },\r\n    // { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },\r\n    // { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },\r\n    // { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },\r\n    // { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },\r\n    // { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },\r\n    // { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },\r\n    // { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },\r\n    // { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },\r\n    // { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },\r\n    // { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },\r\n    // { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },\r\n    // { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },\r\n    // { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },\r\n    // { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },\r\n    // { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },\r\n    // { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },\r\n    // { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },\r\n    // { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },\r\n    // { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },\r\n  ]"
             },
+            "gridCardConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n    badges?: { key: string; label?: string }[];\r\n    button?: { icon: string; text: string; action: string };\r\n  }",
+                    "resolved": "{ badges?: { key: string; label?: string; }[]; button?: { icon: string; text: string; action: string; }; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "tableHeaderConfig": {
                 "type": "unknown",
                 "mutable": false,
@@ -653,7 +725,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\r\n    tableHeading: false,\r\n    tableHeadingLabel: 'Suspicious outflows',\r\n    showDateFilter: true,\r\n    showFilter: true,\r\n    showColumnOptions: true,\r\n    showSearch: true,\r\n    showExport: true,\r\n    showRefreshButton: false,\r\n    datePickerMode: 'range',\r\n    inputPlaceholder: 'Transaction reference',\r\n  }"
+                "defaultValue": "{\r\n    tableHeading: false,\r\n    tableHeadingLabel: 'Suspicious outflows',\r\n    showDateFilter: true,\r\n    showFilter: true,\r\n    showColumnOptions: true,\r\n    showSearch: true,\r\n    showExport: true,\r\n    showRefreshButton: false,\r\n    showLayoutToggle: false,\r\n    datePickerMode: 'range',\r\n    inputPlaceholder: 'Transaction reference',\r\n  }"
             },
             "paginationConfig": {
                 "type": "unknown",
@@ -959,7 +1031,10 @@ export class GbTable {
             "modalPosition": {},
             "showFilterModalInternal": {},
             "isFilterModalVisible": {},
-            "internalLoading": {}
+            "isGridModalVisible": {},
+            "internalLoading": {},
+            "currentTableLayout": {},
+            "showGridCardModal": {}
         };
     }
     static get events() {
@@ -1053,6 +1128,36 @@ export class GbTable {
                     "resolved": "{ dataType: string; exportType: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "refreshButtonClicked",
+                "name": "refreshButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "layoutButtonClicked",
+                "name": "layoutButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }, {
                 "method": "rowClicked",
                 "name": "rowClicked",