globuswebcomponents 2.8.11 → 2.9.0

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

@@ -1,38 +1,18 @@
-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',
-                cellComponent: 'gb-badge',
-                cellProps: row => ({
-                    color: row.status === 'Completed' ? 'success' : 'error',
-                    type: 'badge_modern',
-                    size: 'sm',
-                    icon: 'dot',
-                }),
-                cellSlots: row => h("p", null, row.status),
+                render: row => (h("gb-badge", { color: row.status === 'Completed' ? 'success' : 'error', type: "badge_modern", size: "sm", icon: "dot" }, h("p", null, row.status))),
+                mobile: { position: 'bottom_right' },
             },
             // {
             //   key: '',
@@ -50,50 +30,127 @@ export class GbTable {
         ];
         this.data = [
             {
-                id: '#3057',
-                date: 'Jan 3, 2022',
-                name: 'Emmanuel Kadiri',
-                role: 'Frontend developer',
+                id: '#3001',
+                date: 'Jan 1, 2022',
+                name: 'Emma Johnson',
+                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: '#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,
+            datePickerMode: 'single',
+        };
+        this.paginationConfig = {
+            paginationMode: 'internal',
+            entriesDropdownMenuPosition: 'top',
+            currentPage: 1,
+            pageSize: 10,
+            totalItems: null,
+        };
+        this.emptyStateConfig = {
+            mainText: 'No data available',
+            supportingText: 'Try adjusting your filters or check back later.',
+            color: 'gray',
+            illustrationIcon: 'assets/alert-circle.svg',
+            theme: 'light',
+        };
+        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: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
         ];
-        this.rowActions = [{ label: 'View', action: 'view', disabled: true }];
-        this.stickyFirstColumn = false;
+        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 },
+        ];
+        this.stickyFirstColumn = true;
         this.stickyLastColumn = true;
-        // @Prop() entriesDropdownPosition: 'top' | 'bottom' = 'top';
         this.actionsType = 'none';
+        this.showCheckbox = false;
+        // @Prop({ mutable: true }) currentPage?: number = 1;
+        // @Prop() pageSize: number = 10;
+        // @Prop() totalItems?: number;
+        this.internalCurrentPage = 1;
+        this.internalPageSize = 10;
         this.openRowIndex = null;
+        this.sortDirection = 'asc';
+        this.selectedRowIds = new Set();
+        this.breakpoint = 'desktop';
+        this.isMobile = false;
+        this.isScrollable = false;
+        this.actionButtonRefs = [];
+        this.handlePageChange = ({ detail }) => {
+            const { pageNumber, pageSize } = detail;
+            if (this.paginationConfig.paginationMode === 'internal') {
+                this.internalCurrentPage = pageNumber;
+                this.internalPageSize = pageSize;
+            }
+            else {
+                this.pageItemSelected.emit(detail);
+            }
+        };
+    }
+    componentWillRender() {
+        this.checkViewport();
+        window.addEventListener('resize', this.checkViewport.bind(this));
+    }
+    componentDidRender() {
+        requestAnimationFrame(() => this.checkScrollability());
+    }
+    checkViewport() {
+        this.isMobile = window.innerWidth <= 768;
+        this.checkScrollability();
+    }
+    checkScrollability() {
+        if (!this.scrollContainer)
+            return;
+        const { scrollWidth, clientWidth } = this.scrollContainer;
+        const newScrollable = scrollWidth > clientWidth;
+        if (newScrollable !== this.isScrollable) {
+            this.isScrollable = newScrollable; // only update if different
+        }
     }
     handleAction(action, row) {
         this.rowActionClick.emit({ action, row });
@@ -112,11 +169,132 @@ 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.paginationConfig) {
+            return this.sortedData;
+        }
+        if (this.paginationConfig.paginationMode === 'external') {
+            return this.sortedData; // parent already paginated it
+        }
+        const start = (this.internalCurrentPage - 1) * this.internalPageSize;
+        const end = start + this.internalPageSize;
+        return this.sortedData.slice(start, end);
+    }
+    get totalPages() {
+        if (!this.paginationConfig)
+            return 1;
+        const pageSize = this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize;
+        const totalItems = this.paginationConfig.paginationMode === 'external' ? this.paginationConfig.totalItems : this.sortedData.length;
+        return Math.ceil(totalItems / pageSize);
+    }
+    onDataChange(newValue, _oldValue) {
+        if (!newValue)
+            return;
+        this.data = newValue;
+    }
+    onTotalItemsChange(newValue, _oldValue) {
+        if (!newValue || newValue < 1)
+            return;
+        this.paginationConfig.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;
@@ -129,15 +307,63 @@ export class GbTable {
                 totalWidth += defaultColWidth;
             }
         });
-        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: {
+        // const tableStyle = this.columns.length > 5 ? { minWidth: `${totalWidth}px` } : {};
+        return (h("div", { class: `table_scroll`, ref: el => (this.scrollContainer = el) }, h("table", null, 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,
+                    has_border: this.isScrollable,
+                } }, 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: {
+                actions_cell: true,
                 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: () => {
+                has_border: this.isScrollable,
+            } }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (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(Fragment, null, col.render ? (h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, col.render(row))) : (h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row)))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (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) })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "sm", icon: "only", iconLeading: true, iconLeadingSwap: action.icon, onClick: () => this.handleAction(action.action, row) })))))), h(Fragment, null, 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.dropdownOptions.map(action => (
+        // <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}
+        // >
+        //   <p slot="name">{action.label}</p>
+        // </gb-input-dropdown-menu-item>
+        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;
-            } }, 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) })));
+            } })))))))))))))))));
+    }
+    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_wrapper", style: { paddingLeft: this.showCheckbox ? 'var(--spacing-4)' : '' } }, this.showCheckbox && (h("gb-checkbox", { style: { paddingTop: 'var(--spacing-6)' }, type: "checkbox", checked: this.selectedRowIds.has(row.id), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), h("div", { class: "mobile-card" }, h("div", { class: "mobile-row mobile-top" }, h("div", { class: "mobile-cell" }, h("p", { class: "top_left_text text-md-regular" }, topLeft && row[topLeft.key])), h("div", { class: "mobile-cell right" }, h("p", { class: "top_right_text text-md-semi-bold" }, topRight && row[topRight.key]))), h("div", { class: "mobile-row mobile-bottom" }, h("div", { class: "mobile-cell" }, h("p", { class: "bottom_left_text text-sm-regular" }, bottomLeft && row[bottomLeft.key])), h("div", { class: "mobile-cell right" }, bottomRight && this.renderCell(bottomRight, row))))));
+        })));
+    }
+    emitSearchValue(detail) {
+        this.inputValueChanged.emit(detail.detail);
+    }
+    emitDateChange(detail) {
+        this.dateChange.emit(detail.detail);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.checkViewport);
+    }
+    render() {
+        return (h("div", { key: 'd393c1812e06818c2a0dd266cfb8f1c849971b2c', class: `table_wrapper` }, h("gb-table-header", { key: '2398b782d79e6afccdd3047eb8b37cf23efbcbff', 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, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this) }), this.data.length === 0 ? (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" }))) : (h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '67b71bebffe1f1563520dd5eaac8cf0ffac6368a', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": 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"; }
@@ -175,7 +401,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      render: row => (\r\n        <gb-badge color={row.status === 'Completed' ? 'success' : 'error'} type=\"badge_modern\" size=\"sm\" icon=\"dot\">\r\n          <p>{row.status}</p>\r\n        </gb-badge>\r\n      ),\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 +419,92 @@ 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    {\r\n      id: '#3001',\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: '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    datePickerMode: 'single' | 'range';\r\n  }",
+                    "resolved": "{ tableHeading: boolean; tableHeadingLabel: string; showDateFilter: boolean; showFilter: boolean; showColumnOptions: boolean; showSearch: boolean; showExport: boolean; showRefreshButton: boolean; datePickerMode: \"single\" | \"range\"; }",
+                    "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    datePickerMode: 'single',\r\n  }"
+            },
+            "paginationConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n    paginationMode: 'internal' | 'external';\r\n    entriesDropdownMenuPosition: 'top' | 'bottom';\r\n    currentPage?: number;\r\n    pageSize?: number;\r\n    totalItems?: number;\r\n  }",
+                    "resolved": "{ paginationMode: \"external\" | \"internal\"; entriesDropdownMenuPosition: \"top\" | \"bottom\"; currentPage?: number; pageSize?: number; totalItems?: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\r\n    paginationMode: 'internal',\r\n    entriesDropdownMenuPosition: 'top',\r\n    currentPage: 1,\r\n    pageSize: 10,\r\n    totalItems: null,\r\n  }"
+            },
+            "emptyStateConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ mainText: string; supportingText?: string; color?: GeneralColors; illustrationIcon?: string; theme?: ThemeTypes; primaryButtonIcon?: string }",
+                    "resolved": "{ mainText: string; supportingText?: string; color?: GeneralColors; illustrationIcon?: string; theme?: ThemeTypes; primaryButtonIcon?: string; }",
+                    "references": {
+                        "GeneralColors": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralColors"
+                        },
+                        "ThemeTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ThemeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\r\n    mainText: 'No data available',\r\n    supportingText: 'Try adjusting your filters or check back later.',\r\n    color: 'gray',\r\n    illustrationIcon: 'assets/alert-circle.svg',\r\n    theme: 'light',\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",
@@ -210,6 +521,30 @@ export class GbTable {
                     }
                 },
                 "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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  ]"
+            },
+            "dropdownOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[]",
+                    "resolved": "DropdownOption[]",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
@@ -217,7 +552,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[{ label: 'View', action: 'view', disabled: true }]"
+                "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  ]"
             },
             "stickyFirstColumn": {
                 "type": "boolean",
@@ -237,7 +572,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "sticky-first-column",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "stickyLastColumn": {
                 "type": "boolean",
@@ -278,12 +613,40 @@ 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": "false"
             }
         };
     }
     static get states() {
         return {
-            "openRowIndex": {}
+            "internalCurrentPage": {},
+            "internalPageSize": {},
+            "openRowIndex": {},
+            "sortKey": {},
+            "sortDirection": {},
+            "selectedRowIds": {},
+            "breakpoint": {},
+            "isMobile": {},
+            "isScrollable": {}
         };
     }
     static get events() {
@@ -317,6 +680,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
             }];
     }
 }