globuswebcomponents 2.10.13 → 2.11.1

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' },
         ];
+        // = {
+        //   name: { key: 'customer' },
+        //   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: true,
             datePickerMode: 'range',
             inputPlaceholder: 'Transaction reference',
         };
@@ -96,16 +113,70 @@ export class GbTable {
             illustrationStyle: 'box',
             theme: 'light',
         };
+        //  = {
+        //   title: 'Filter',
+        //   fields: [
+        //     {
+        //       tag: 'gb-date-picker',
+        //       label: 'Post date',
+        //       key: { start: 'postStartDate', end: 'postEndDate' },
+        //       event: 'dateChange',
+        //     },
+        //     {
+        //       tag: 'gb-date-picker',
+        //       label: 'Value date',
+        //       key: { start: 'valueStartDate', end: 'valueEndDate' },
+        //       event: 'dateChange',
+        //     },
+        //     {
+        //       tag: 'gb-input-dropdown',
+        //       key: 'status',
+        //       event: 'dropdownItemSelected',
+        //       props: {
+        //         type: 'tags',
+        //         showLabel: true,
+        //         label: 'Status',
+        //         placeholder: 'Select a status',
+        //         items: ['Successful', 'Reversed'],
+        //       },
+        //     },
+        //     {
+        //       tag: 'gb-input-dropdown',
+        //       key: 'transactionType',
+        //       event: 'dropdownItemSelected',
+        //       props: {
+        //         type: 'default',
+        //         showLabel: true,
+        //         label: 'Transaction type',
+        //         placeholder: 'Select type',
+        //         items: ['Credit', 'Debit'],
+        //       },
+        //     },
+        //     {
+        //       tag: 'gb-slider',
+        //       key: 'amountRange',
+        //       event: 'thumbValueChanged',
+        //       props: {
+        //         showHeading: true,
+        //         heading: 'Amount range',
+        //       },
+        //     },
+        //   ],
+        //   initialValues: {
+        //     pageNumber: 0,
+        //     pageSize: 10,
+        //   },
+        // };
         this.showActionsColumn = true;
         this.rowActions = [
-        // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
         // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
+        // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
         // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
         ];
         this.dropdownOptions = [
         // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },
         // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
-        // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },
+        // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: false },
         ];
         this.stickyFirstColumn = false;
         this.stickyLastColumn = false;
@@ -128,14 +199,17 @@ export class GbTable {
         this.modalPosition = { x: 0, y: 0 };
         this.showFilterModalInternal = false;
         this.isFilterModalVisible = false;
+        this.isGridModalVisible = false;
         this.internalLoading = false;
+        this.currentTableLayout = 'list';
+        this.showGridCardModal = false;
+        this.appliedFilterValues = {};
         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 +299,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 +323,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 +440,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 +482,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 +539,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, _c;
+            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[this.gridCardConfig.name.key])))), h("div", { class: "profile_details" }, h("div", { class: "profile_name" }, h("p", { class: "text-lg-semi-bold" }, ((_a = this.gridCardConfig) === null || _a === void 0 ? void 0 : _a.name) ? row[this.gridCardConfig.name.key] : '')), (_c = (_b = this.gridCardConfig) === null || _b === void 0 ? void 0 : _b.badges) === null || _c === void 0 ? void 0 :
+                _c.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 +584,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));
@@ -502,28 +606,37 @@ export class GbTable {
             this.showFilterModalInternal = false;
         }, 300); // match CSS duration
     }
-    onApplyFilters(detail) {
+    onApplyFilters(e) {
         // console.log(detail.detail);
-        this.applyFilters.emit(detail.detail);
-        this.showFilterModalInternal = false;
+        const { filters } = e.detail; // ← destructure, don't store the whole thing
+        this.appliedFilterValues = Object.assign(Object.assign({}, this.appliedFilterValues), filters); // ← merge, not replace
+        this.applyFilters.emit(this.appliedFilterValues);
+        console.log(this.appliedFilterValues);
+        this.closeFilterModal();
+    }
+    get mergedFilterConfig() {
+        return Object.assign(Object.assign({}, this.filterConfig), { appliedValues: this.appliedFilterValues });
+    }
+    handleClearFilters() {
+        this.appliedFilterValues = {};
     }
     disconnectedCallback() {
         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: 'caf68eb2b46924d073d6dbc4eea4a48dcabe6f7c', class: `table_wrapper ${this.currentTableLayout}` }, h("div", { key: '330123b5eb565ca7d848f68fb9f8f5bd14c6afb4', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: 'b8a248e14024f048ceba5ec2167dbc132ee496d4', 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": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "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: 'dcc1a49c5dbd687dbabd408630b9061d51aff1c8', 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: '0f5ee0fd638b7e9dc084c9570ee7d79c2e20ac1a', class: "column-modal" }, h("div", { key: '484b817d9b9e8309da6ebe70cac77d476a12fda1', class: "modal_header" }, h("div", { key: '9c5d579488dec241008d9b2f53e1aa5207d2bb06', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '88dada4a289cc8d3ff5ae4740e058cdf5b2d0a4a', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '474eac6c80ce6bc0cee0e19c941cecf04a960a5a', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '9806900c4dca46e8d3ee1a7e86b6736a40dc0e03', class: "content_wrapper" }, h("div", { key: 'f312e74df83eeb9ab3392a3882fff4ba0c1400b6', 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: '0080f5cd42e2a6a43953c0ccf89a65d385c11706', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: 'd530bd6111a95767f4f1db19e8a12fb7ef372f09', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '7f23c3094898f0ce65311722a1979ad5eac3ca08', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
-            }, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
+            }, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
         // ✅ ALWAYS show loading when loading = true
         h("table", null, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { class: {
                 checkbox: true,
@@ -559,7 +672,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: '264d008d5a227653603e624f0d31c3756c9e1d70', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'dbfa962f33a445168e83f103f0da9abebe37ab2a', "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 +736,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 +756,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    name?: { key: string };\r\n    badges?: { key: string; label?: string }[];\r\n    button?: { icon: string; text: string; action: string };\r\n  }",
+                    "resolved": "{ name?: { key: string; }; 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 +789,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: true,\r\n    datePickerMode: 'range',\r\n    inputPlaceholder: 'Transaction reference',\r\n  }"
             },
             "paginationConfig": {
                 "type": "unknown",
@@ -792,7 +928,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },\r\n    // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },\r\n  ]"
+                "defaultValue": "[\r\n    // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },\r\n    // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },\r\n  ]"
             },
             "dropdownOptions": {
                 "type": "unknown",
@@ -816,7 +952,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },\r\n    // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },\r\n  ]"
+                "defaultValue": "[\r\n    // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },\r\n    // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: false },\r\n  ]"
             },
             "stickyFirstColumn": {
                 "type": "boolean",
@@ -959,7 +1095,11 @@ export class GbTable {
             "modalPosition": {},
             "showFilterModalInternal": {},
             "isFilterModalVisible": {},
-            "internalLoading": {}
+            "isGridModalVisible": {},
+            "internalLoading": {},
+            "currentTableLayout": {},
+            "showGridCardModal": {},
+            "appliedFilterValues": {}
         };
     }
     static get events() {
@@ -1053,6 +1193,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",
@@ -1079,8 +1249,8 @@ export class GbTable {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\r\n    filters: any;\r\n    pagination: any;\r\n  }",
-                    "resolved": "{ filters: any; pagination: any; }",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }];