globuswebcomponents 2.8.11 → 2.8.12

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

@@ -1,27 +1,13 @@
-import { h } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 import { StateEnum } from "../../models/reusableModels";
 export class GbTable {
     constructor() {
         this.columns = [
-            { key: 'id', label: '#', width: '70px' },
-            { key: 'date', label: 'Date' },
-            { key: 'name', label: 'Name' },
+            { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
+            { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },
+            { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, mobile: { position: 'top_right' } },
             { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            // { key: 'role', label: 'Role' },
-            { key: 'level', label: 'Level' },
-            { key: 'customer', label: 'Customer' },
-            { key: 'amount', label: 'Amount' },
+            { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
             {
                 key: 'status',
                 label: 'Status',
@@ -33,6 +19,7 @@ export class GbTable {
                     icon: 'dot',
                 }),
                 cellSlots: row => h("p", null, row.status),
+                mobile: { position: 'bottom_right' },
             },
             // {
             //   key: '',
@@ -49,51 +36,73 @@ export class GbTable {
             // },
         ];
         this.data = [
-            {
-                id: '#3057',
-                date: 'Jan 3, 2022',
-                name: 'Emmanuel Kadiri',
-                role: 'Frontend developer',
-                level: 'Today',
-                customer: 'John Doe',
-                amount: '$120.00',
-                status: 'Completed',
-            },
-            {
-                id: '#3058',
-                date: 'Jan 4, 2022',
-                customer: 'Sarah Johnson',
-                amount: '$85.50',
-                status: 'Pending',
-            },
-            {
-                id: '#3059',
-                date: 'Jan 5, 2022',
-                customer: 'Michael Brown',
-                amount: '$230.75',
-                status: 'Cancelled',
-            },
-            {
-                id: '#3060',
-                date: 'Jan 6, 2022',
-                customer: 'Emily Davis',
-                amount: '$59.99',
-                status: 'Completed',
-            },
-            {
-                id: '#3061',
-                date: 'Jan 7, 2022',
-                customer: 'Daniel Wilson',
-                amount: '$410.00',
-                status: 'Pending',
-            },
+            { id: '#3001', date: 'Jan 1, 2022', name: 'Emma Johnson', role: 'Frontend Developer', level: 'Today', customer: 'John Doe', amount: '$120.00', status: 'Completed' },
+            { id: '#3002', date: 'Jan 2, 2022', name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
+            { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
+            { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
+            { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
+            { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },
+            { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },
+            { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },
+            { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },
+            { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },
+            { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },
+            { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },
+            { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },
+            { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },
+            { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },
+            { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },
+            { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },
+            { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },
+            { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },
+            { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },
+            { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },
+            { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },
+            { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },
+            { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },
+            { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },
+            { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },
+            { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },
+            { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },
+            { 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' },
         ];
+        this.tableHeaderConfig = {
+            tableHeading: false,
+            tableHeadingLabel: 'Suspicious outflows',
+            showDateFilter: true,
+            showFilter: true,
+            showColumnOptions: true,
+            showSearch: true,
+            showExport: true,
+            showRefreshButton: true,
+        };
+        this.paginationConfig = {
+            entriesDropdownMenuPosition: 'top',
+        };
+        this.showActionsColumn = true;
         this.rowActions = [{ label: 'View', action: 'view', disabled: true }];
-        this.stickyFirstColumn = false;
+        this.stickyFirstColumn = true;
         this.stickyLastColumn = true;
-        // @Prop() entriesDropdownPosition: 'top' | 'bottom' = 'top';
         this.actionsType = 'none';
+        this.showCheckbox = true;
+        this.paginationMode = 'internal';
+        this.currentPage = 1;
+        this.pageSize = 10;
+        this.internalCurrentPage = 1;
         this.openRowIndex = null;
+        this.sortDirection = 'asc';
+        this.selectedRowIds = new Set();
+        this.breakpoint = 'desktop';
+        this.isMobile = false;
+        this.actionButtonRefs = [];
+    }
+    componentWillLoad() {
+        this.checkViewport();
+        window.addEventListener('resize', this.checkViewport);
+    }
+    checkViewport() {
+        this.isMobile = window.innerWidth <= 768;
     }
     handleAction(action, row) {
         this.rowActionClick.emit({ action, row });
@@ -112,11 +121,131 @@ export class GbTable {
     emitPaginationDetails({ detail }) {
         this.pageItemSelected.emit(detail);
     }
-    toggleDropdown(index) {
-        console.log('testing', index);
-        this.openRowIndex = this.openRowIndex === index ? null : index;
+    async toggleDropdown(rowIndex) {
+        if (this.openRowIndex === rowIndex) {
+            this.openRowIndex = null;
+            return;
+        }
+        const buttonInstance = this.actionButtonRefs[rowIndex];
+        const nativeBtn = await (buttonInstance === null || buttonInstance === void 0 ? void 0 : buttonInstance.getNativeButton());
+        this.currentAnchorEl = nativeBtn !== null && nativeBtn !== void 0 ? nativeBtn : undefined;
+        this.openRowIndex = rowIndex;
     }
-    render() {
+    onSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key) {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortKey = col.key;
+            this.sortDirection = 'asc';
+        }
+    }
+    get sortedData() {
+        if (!this.sortKey)
+            return this.data;
+        const col = this.columns.find(c => c.key === this.sortKey);
+        if (!col)
+            return this.data;
+        return [...this.data].sort((a, b) => {
+            let valA = a[this.sortKey];
+            let valB = b[this.sortKey];
+            // Null safety
+            if (valA == null)
+                return 1;
+            if (valB == null)
+                return -1;
+            let result = 0;
+            switch (col.sortType) {
+                case 'number': {
+                    const numA = Number(String(valA).replace(/[^0-9.-]+/g, ''));
+                    const numB = Number(String(valB).replace(/[^0-9.-]+/g, ''));
+                    result = numA - numB;
+                    break;
+                }
+                case 'date': {
+                    const timeA = new Date(valA).getTime();
+                    const timeB = new Date(valB).getTime();
+                    result = timeA - timeB;
+                    break;
+                }
+                case 'string':
+                default: {
+                    result = String(valA).localeCompare(String(valB), undefined, {
+                        sensitivity: 'base',
+                    });
+                    break;
+                }
+            }
+            return this.sortDirection === 'asc' ? result : -result;
+        });
+    }
+    get allSelected() {
+        return this.sortedData.length > 0 && this.selectedRowIds.size === this.sortedData.length;
+    }
+    get isIndeterminate() {
+        return this.selectedRowIds.size > 0 && this.selectedRowIds.size < this.sortedData.length;
+    }
+    toggleAll() {
+        if (this.allSelected) {
+            this.selectedRowIds = new Set();
+        }
+        else {
+            this.selectedRowIds = new Set(this.sortedData.map(row => row.id));
+        }
+        this.emitSelection();
+    }
+    toggleRow(row) {
+        const updated = new Set(this.selectedRowIds);
+        if (updated.has(row.id)) {
+            updated.delete(row.id);
+        }
+        else {
+            updated.add(row.id);
+        }
+        this.selectedRowIds = updated;
+        this.emitSelection();
+    }
+    emitSelection() {
+        const selected = this.sortedData.filter(row => this.selectedRowIds.has(row.id));
+        this.selectionChanged.emit(selected);
+    }
+    get displayedData() {
+        if (this.paginationMode === 'external') {
+            return this.sortedData;
+        }
+        const start = (this.currentPage - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        return this.sortedData.slice(start, end);
+    }
+    handlePageChange({ detail }) {
+        if (this.paginationMode === 'internal') {
+            this.currentPage = detail.pageNumber;
+            this.pageSize = detail.pageSize;
+        }
+        else {
+            this.pageItemSelected.emit(detail);
+        }
+    }
+    onDataChange(newValue, _oldValue) {
+        if (!newValue)
+            return;
+        this.data = newValue;
+    }
+    onTotalItemsChange(newValue, _oldValue) {
+        if (!newValue || newValue < 1)
+            return;
+        this.totalItems = Number(newValue);
+    }
+    renderHeaderIcons(col) {
+        return (h(Fragment, null, col.sortable && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: {
+                transform: this.sortKey === col.key && this.sortDirection === 'desc' ? 'rotate(180deg)' : 'rotate(0deg)',
+                opacity: this.sortKey === col.key ? '1' : '0.4',
+                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: "var(--color-icon, #4B5565)", "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")))));
+    }
+    renderDesktopView() {
         // compute table min-width to force horizontal scroll when > 5 columns
         const defaultColWidth = 160;
         let totalWidth = 0;
@@ -130,14 +259,48 @@ export class GbTable {
             }
         });
         const tableStyle = this.columns.length > 5 ? { minWidth: `${totalWidth}px` } : {};
-        return (h("div", { key: '1b40de961abd0306a040b5b61fa1d7390be8090e', class: `table_wrapper` }, h("div", { key: '61ad6c2d09cfc4c80d6e4b9de962bc4e6cff493c', class: `table_scroll ${this.columns.length > 5 ? 'scrollable' : ''}` }, h("table", { key: '041ab139368befa86a6d4c2afe582b77344ea941', style: tableStyle, class: `${this.columns.length > 5 ? 'scrollable' : ''}` }, h("thead", { key: '550962945520529a84de9ffedb6ebd1533e95776' }, h("tr", { key: 'd616251d1d53e05fea13ae70a492b0339e4ae356', class: "table_head_row" }, this.columns.map((col, index) => (h("th", { style: { width: col.width }, class: {
-                sticky_left: this.stickyFirstColumn && index === 0,
-            } }, h("p", { class: "head_text text-xs-medium" }, col.label)))), this.rowActions && (h("th", { key: 'e011c576724b5a36801534ae2854ee57492202ca', class: {
+        return (h("div", { class: `table_scroll` }, h("table", { style: tableStyle }, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { style: { width: '15px' }, class: {
+                sticky_left: this.stickyFirstColumn,
+            } }, h("gb-checkbox", { type: "checkbox", checked: this.allSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.columns.map((col, index) => {
+            var _a;
+            const align = (_a = col.align) !== null && _a !== void 0 ? _a : 'left';
+            return (h("th", { style: { width: col.width, cursor: col.sortable ? 'pointer' : 'default', textAlign: col.align || 'left' }, onClick: () => this.onSort(col), class: {
+                    table_header: true,
+                    sticky_left: this.stickyFirstColumn && index === 0,
+                    sortable: col.sortable,
+                } }, h("div", { class: `table_head_content align-${align}` }, align === 'right' && h("div", { class: "table_head_icons" }, this.renderHeaderIcons(col)), h("p", { class: `head_text text-xs-medium` }, col.label), align === 'left' && h("div", { class: "table_head_icons" }, this.renderHeaderIcons(col)))));
+        }), this.showActionsColumn && (h("th", { class: {
                 sticky_right: this.stickyLastColumn,
-            }, style: { width: '50px' } }, h("div", { key: 'ceaca7c706808da56bc1e6db35a2fcaf91845367', class: "empty_div" }))))), h("tbody", { key: '000c8bed9f3c13bc5a75024f12b97b15f01c0bfa' }, this.data.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.columns.map((col, index) => (h("td", { class: `table_detail ${this.columns.length > 5 ? 'scrollable' : ''} ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''}` }, this.renderCell(col, row)))), this.rowActions && (h("td", { style: { width: '50px' }, class: `table_detail actions-cell ${this.stickyLastColumn ? 'sticky_right' : ''}` }, h("gb-button", { id: `gb-table-trigger-${rowIndex}`, class: "dropdown_button", hierarchy: "tertiary_gray", size: "sm", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) }), this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: "bottom-end", open: true }, h("div", { class: "dropdown_wrapper" }, this.rowActions.map(action => (h("gb-input-dropdown-menu-item", { type: "default", state: action.disabled ? StateEnum.Disabled : StateEnum.Default, "icon-leading": action.icon ? true : false, "icon-leading-swap": action.icon, onClick: () => {
+            }, style: { width: '50px' } }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, h("td", { class: "table_detail", style: { width: '50px' } }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), this.columns.map((col, index) => (h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''}` }, this.renderCell(col, row)))), this.showActionsColumn && (h("td", { style: { width: '50px' }, class: `table_detail actions-cell ${this.stickyLastColumn ? 'sticky_right' : ''}` }, h(Fragment, null, h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "sm", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) }), this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: "bottom-end", anchorEl: this.currentAnchorEl, open: true }, h("div", { class: "dropdown_wrapper" }, this.rowActions.map(action => (h("gb-input-dropdown-menu-item", { type: "default", state: action.disabled ? StateEnum.Disabled : StateEnum.Default, "icon-leading": action.icon ? true : false, "icon-leading-swap": action.icon, onClick: () => {
                 this.handleAction(action.action, row);
                 this.openRowIndex = null;
-            } }, h("p", { slot: "name" }, action.label))))))))))))))), h("gb-pagination", { key: '2cdf2789b9927fdffc4e6e0e1b78be3a77d7898a', type: "card_default", "current-page": "19", "total-pages": "20", breakpoint: "desktop", shape: "circle", onPageItemSelected: this.emitPaginationDetails.bind(this) })));
+            } }, h("p", { slot: "name" }, action.label)))))))))))))))));
+    }
+    validateMobilePositions() {
+        const positions = this.columns.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);
+        }
+    }
+    renderMobileView() {
+        return (h("div", { class: "mobile_wrapper" }, this.displayedData.map(row => {
+            const topLeft = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_left'; });
+            const topRight = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_right'; });
+            const bottomLeft = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_left'; });
+            const bottomRight = this.columns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_right'; });
+            return (h("div", { class: "mobile-card" }, h("div", { class: "mobile-row mobile-top" }, h("div", { class: "mobile-cell" }, topLeft && this.renderCell(topLeft, row)), h("div", { class: "mobile-cell right" }, topRight && this.renderCell(topRight, row))), h("div", { class: "mobile-row mobile-bottom" }, h("div", { class: "mobile-cell" }, bottomLeft && this.renderCell(bottomLeft, row)), bottomRight && this.renderCell(bottomRight, row))));
+        })));
+    }
+    emitSearchValue({ detail }) {
+        this.inputValueChanged.emit(detail);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.checkViewport);
+    }
+    render() {
+        const totalPages = this.paginationMode === 'internal' ? Math.ceil(this.sortedData.length / this.pageSize) : Math.ceil((this.totalItems || 0) / this.pageSize);
+        return (h("div", { key: '499bac31da3885b57d9469666f921c78978ec8ff', class: `table_wrapper` }, h("gb-table-header", { key: 'e629b21f83e27889f453f77cf0e2402eb5f552df', "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, onInputValueChanged: this.emitSearchValue.bind(this) }), h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView()), h("gb-pagination", { key: 'e808a7c942fefd7b1c70707315a50926b841aee5', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.pageSize, "current-page": this.paginationMode === 'internal' ? this.internalCurrentPage : this.currentPage, "total-pages": totalPages, onPageItemSelected: this.handlePageChange.bind(this) })));
     }
     static get is() { return "gb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -175,7 +338,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { key: 'id', label: '#', width: '70px' },\r\n    { key: 'date', label: 'Date' },\r\n    { key: 'name', label: 'Name' },\r\n    { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    // { key: 'role', label: 'Role' },\r\n    { key: 'level', label: 'Level' },\r\n    { key: 'customer', label: 'Customer' },\r\n    { key: 'amount', label: 'Amount' },\r\n    {\r\n      key: 'status',\r\n      label: 'Status',\r\n      cellComponent: 'gb-badge',\r\n      cellProps: row => ({\r\n        color: row.status === 'Completed' ? 'success' : 'error',\r\n        type: 'badge_modern',\r\n        size: 'sm',\r\n        icon: 'dot',\r\n      }),\r\n      cellSlots: row => <p>{row.status}</p>,\r\n    },\r\n    // {\r\n    //   key: '',\r\n    //   label: '',\r\n    //   cellComponent: 'gb-button',\r\n    //   width: '50px',\r\n    //   cellProps: () => ({\r\n    //     hierarchy: 'tertiary_gray',\r\n    //     size: 'sm',\r\n    //     icon: 'only',\r\n    //     iconLeading: true,\r\n    //     iconLeadingSwap: 'assets/more-horizontal.svg',\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', mobile: { position: 'bottom_left' } },\r\n    { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, mobile: { position: 'top_right' } },\r\n    { key: 'role', label: 'Role' },\r\n    { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },\r\n    {\r\n      key: 'status',\r\n      label: 'Status',\r\n      cellComponent: 'gb-badge',\r\n      cellProps: row => ({\r\n        color: row.status === 'Completed' ? 'success' : 'error',\r\n        type: 'badge_modern',\r\n        size: 'sm',\r\n        icon: 'dot',\r\n      }),\r\n      cellSlots: row => <p>{row.status}</p>,\r\n      mobile: { position: 'bottom_right' },\r\n    },\r\n    // {\r\n    //   key: '',\r\n    //   label: '',\r\n    //   cellComponent: 'gb-button',\r\n    //   width: '50px',\r\n    //   cellProps: () => ({\r\n    //     hierarchy: 'tertiary_gray',\r\n    //     size: 'sm',\r\n    //     icon: 'only',\r\n    //     iconLeading: true,\r\n    //     iconLeadingSwap: 'assets/more-horizontal.svg',\r\n    //   }),\r\n    // },\r\n  ]"
             },
             "data": {
                 "type": "unknown",
@@ -193,7 +356,65 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      id: '#3057',\r\n      date: 'Jan 3, 2022',\r\n      name: 'Emmanuel Kadiri',\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    {\r\n      id: '#3058',\r\n      date: 'Jan 4, 2022',\r\n      customer: 'Sarah Johnson',\r\n      amount: '$85.50',\r\n      status: 'Pending',\r\n    },\r\n    {\r\n      id: '#3059',\r\n      date: 'Jan 5, 2022',\r\n      customer: 'Michael Brown',\r\n      amount: '$230.75',\r\n      status: 'Cancelled',\r\n    },\r\n    {\r\n      id: '#3060',\r\n      date: 'Jan 6, 2022',\r\n      customer: 'Emily Davis',\r\n      amount: '$59.99',\r\n      status: 'Completed',\r\n    },\r\n    {\r\n      id: '#3061',\r\n      date: 'Jan 7, 2022',\r\n      customer: 'Daniel Wilson',\r\n      amount: '$410.00',\r\n      status: 'Pending',\r\n    },\r\n  ]"
+                "defaultValue": "[\r\n    { id: '#3001', date: 'Jan 1, 2022', name: 'Emma Johnson', role: 'Frontend Developer', level: 'Today', customer: 'John Doe', amount: '$120.00', status: 'Completed' },\r\n    { id: '#3002', date: 'Jan 2, 2022', 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  ]"
+            },
+            "tableHeaderConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n    tableHeading: boolean;\r\n    tableHeadingLabel: string;\r\n    showDateFilter: boolean;\r\n    showFilter: boolean;\r\n    showColumnOptions: boolean;\r\n    showSearch: boolean;\r\n    showExport: boolean;\r\n    showRefreshButton: boolean;\r\n  }",
+                    "resolved": "{ tableHeading: boolean; tableHeadingLabel: string; showDateFilter: boolean; showFilter: boolean; showColumnOptions: boolean; showSearch: boolean; showExport: boolean; showRefreshButton: boolean; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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: true,\r\n  }"
+            },
+            "paginationConfig": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pagination-config",
+                "defaultValue": "{\r\n    entriesDropdownMenuPosition: 'top',\r\n  }"
+            },
+            "showActionsColumn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-actions-column",
+                "defaultValue": "true"
             },
             "rowActions": {
                 "type": "unknown",
@@ -237,7 +458,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "sticky-first-column",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "stickyLastColumn": {
                 "type": "boolean",
@@ -278,12 +499,117 @@ export class GbTable {
                 "reflect": false,
                 "attribute": "actions-type",
                 "defaultValue": "'none'"
+            },
+            "showCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-checkbox",
+                "defaultValue": "true"
+            },
+            "paginationMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'internal' | 'external'",
+                    "resolved": "\"external\" | \"internal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pagination-mode",
+                "defaultValue": "'internal'"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "totalItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-items"
             }
         };
     }
     static get states() {
         return {
-            "openRowIndex": {}
+            "internalCurrentPage": {},
+            "openRowIndex": {},
+            "sortKey": {},
+            "sortDirection": {},
+            "selectedRowIds": {},
+            "breakpoint": {},
+            "isMobile": {}
         };
     }
     static get events() {
@@ -317,6 +643,72 @@ export class GbTable {
                     "resolved": "{ pageSize: any; pageNumber: number; }",
                     "references": {}
                 }
+            }, {
+                "method": "selectionChanged",
+                "name": "selectionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                }
+            }, {
+                "method": "inputValueChanged",
+                "name": "inputValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dateChange",
+                "name": "dateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "onDataChange"
+            }, {
+                "propName": "totalItems",
+                "methodName": "onTotalItemsChange"
+            }, {
+                "propName": "columns",
+                "methodName": "validateMobilePositions"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "checkViewport",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }