globuswebcomponents 2.10.2 → 2.10.4

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

@@ -96,69 +96,7 @@ export class GbTable {
             illustrationStyle: 'box',
             theme: 'light',
         };
-        this.filterConfig = {
-            title: 'Filter',
-            enableDateRange: true,
-            showClearButton: true,
-            additionalFields: [
-                {
-                    tag: 'gb-input-dropdown',
-                    key: 'approvalStatus',
-                    event: 'dropdownItemSelected',
-                    props: {
-                        type: 'default',
-                        showLabel: true,
-                        label: 'Approval status',
-                        placeholder: 'Select approval status',
-                        items: ['Draft', 'Pending', 'Approved', 'Rejected'],
-                        destructive: false,
-                    },
-                    default: {
-                        value: [],
-                    },
-                },
-                {
-                    tag: 'gb-slider',
-                    key: 'amountRange',
-                    event: 'thumbValueChanged',
-                    props: {
-                        showHeading: true,
-                        heading: 'Amount range',
-                    },
-                    default: {
-                        leftControl: 50,
-                        rightControl: 100,
-                    },
-                },
-                {
-                    tag: 'gb-input-dropdown',
-                    key: 'disbursementStatus',
-                    event: 'dropdownItemSelected',
-                    props: {
-                        type: 'default',
-                        showLabel: true,
-                        label: 'Disbursement status',
-                        placeholder: 'Select disbursement status',
-                        items: ['Disbursed', 'Not Disbursed'],
-                    },
-                },
-                //   {
-                //     tag: 'gb-input-dropdown',
-                //     key: 'facilityCategory',
-                //     props: {
-                //       showLabel: true,
-                //       label: 'Facility category',
-                //       placeholder: 'Select facility category',
-                //       items: ['Retail', 'Commercial', 'Corporate'],
-                //     },
-                //   },
-            ],
-            initialValues: {
-                pageNumber: 1,
-                pageSize: 10,
-            },
-        };
-        this.showActionsColumn = false;
+        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' },
@@ -172,7 +110,7 @@ export class GbTable {
         this.stickyFirstColumn = false;
         this.stickyLastColumn = false;
         this.actionsType = 'none';
-        this.showCheckbox = true;
+        this.showCheckbox = false;
         this.tableHeadColor = 'gray';
         this.rowKey = 'id';
         this.internalCurrentPage = 1;
@@ -196,9 +134,9 @@ export class GbTable {
         this.draggedIndex = null;
         this.handlePageChange = ({ detail }) => {
             const { pageNumber, pageSize } = detail;
+            this.internalPageSize = pageSize;
             if (this.paginationConfig.paginationMode === 'internal') {
                 this.internalCurrentPage = pageNumber;
-                this.internalPageSize = pageSize;
             }
             else {
                 this.pageItemSelected.emit(detail);
@@ -230,6 +168,11 @@ export class GbTable {
     componentWillLoad() {
         this.initializeColumns(this.columns);
         this.internalLoading = this.loading;
+        // Initialize internal pagination state from config
+        if (this.paginationConfig) {
+            this.internalPageSize = this.paginationConfig.pageSize || 10;
+            this.internalCurrentPage = this.paginationConfig.currentPage || 1;
+        }
     }
     componentWillRender() {
         this.checkViewport();
@@ -239,7 +182,7 @@ export class GbTable {
         requestAnimationFrame(() => this.checkScrollability());
     }
     checkViewport() {
-        this.isMobile = window.innerWidth <= 768;
+        this.isMobile = window.innerWidth <= 900;
         this.checkScrollability();
     }
     checkScrollability() {
@@ -416,28 +359,39 @@ export class GbTable {
             return this.sortedData;
         }
         if (this.paginationConfig.paginationMode === 'external') {
-            return this.sortedData; // parent already paginated it
+            return this.sortedData;
         }
+        // Use internal state for slicing
         const start = (this.internalCurrentPage - 1) * this.internalPageSize;
         const end = start + this.internalPageSize;
         return this.sortedData.slice(start, end);
     }
     get totalPages() {
+        var _a;
         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);
+        const pageSize = this.internalPageSize || 1;
+        // For internal mode, use the local data length
+        // For external mode, rely on the provided totalItems prop
+        const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.data.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
+        return Math.max(1, Math.ceil(totalItems / pageSize));
     }
-    onDataChange(newValue, _oldValue) {
-        if (!newValue)
-            return;
-        this.data = newValue;
+    // Inside your GbTable class in gb-table.tsx
+    get paginatedData() {
+        var _a;
+        // If mode is external, return all data (parent handles slicing)
+        if (((_a = this.paginationConfig) === null || _a === void 0 ? void 0 : _a.paginationMode) !== 'internal') {
+            return this.data;
+        }
+        // If mode is internal, slice the array locally
+        const pageSize = this.paginationConfig.pageSize || 10;
+        const currentPage = this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage;
+        const startIndex = (currentPage - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        return this.data.slice(startIndex, endIndex);
     }
-    onTotalItemsChange(newValue, _oldValue) {
-        if (!newValue || newValue < 1)
-            return;
-        this.paginationConfig.totalItems = Number(newValue);
+    onDataChange() {
+        this.internalCurrentPage = 1;
     }
     onLoadingChange(newValue, _oldValue) {
         this.internalLoading = newValue;
@@ -498,6 +452,11 @@ export class GbTable {
         }
         this.initializeColumns(newCols);
     }
+    handlePaginationChange(newValue, oldValue) {
+        if (newValue.pageSize !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.pageSize)) {
+            this.internalCurrentPage = 1;
+        }
+    }
     emitRowData(row) {
         this.rowClicked.emit(row);
     }
@@ -561,16 +520,16 @@ export class GbTable {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: '410fa469f810ba42469b0af434d1a296b3f80ee5', class: `table_wrapper` }, h("gb-table-header", { key: 'dd04ea4e22d88bb4c6e2e22762e97a34df2c15d2', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: '0f9622994a4d44ee6e05c5e88b41ccbb264004df', class: "dialog", style: {
+        return (h("div", { key: 'a7017094eb354c176cf63851136a0d12aa53e1a7', class: `table_wrapper` }, h("gb-table-header", { key: 'cb87008b9ac9fc3797615d4197bddd0b04fd9cf6', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: '3a7ec9b88d9a9937ca3e5ec6f21624eb6b6ee123', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '40d85897ebb60e5d9c866226a3bc47ab0c59249e', class: "column-modal" }, h("div", { key: 'de6d609ecff8e8062dc245b224ec12cfaa478d6b', class: "modal_header" }, h("div", { key: 'c6de7754da86d99388e0d03b54de9f917b9bc15c', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'b22560ec5ac3e64aab9dda764b619e221e6332c8', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '44d5e861a86ae3e09fa342392aab8d2848b674ae', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '1f87107257cffb9176afca89ccbdd91f90ff4745', class: "content_wrapper" }, h("div", { key: '3ad5d12401605081df4ff9a59818e6c0b7d1bfaa', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
+            } }, h("div", { key: '43e3a7f3b4147da583f23c29aaf202a788210ca5', class: "column-modal" }, h("div", { key: '23ec5b8e3467a26d15b835d3be68215ccc736d60', class: "modal_header" }, h("div", { key: '8b016502f7667f82a058bccf1fbc55555f3ac5a7', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '15d3e3f86d30237a273b3c3d8bd6d9808b738f0b', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '851cad33c4c571fa2ed72c387c06bf0971b978c3', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: 'ee25b9e0a663c4eb2955319d6ea3629998eaed90', class: "content_wrapper" }, h("div", { key: 'f2c4ad671f9d458ecc6be80dcd294a1fc0220b0b', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
                 if (this.draggedIndex !== null && this.draggedIndex !== index) {
                     this.reorderColumns(this.draggedIndex, index);
                 }
                 this.draggedIndex = null;
             } }, h("div", { class: "label_and_dragger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M8 6H8.00635M8 12H8.00635M8 18H8.00635M15.9937 6H16M15.9937 12H16M15.9937 18H16", stroke: "var(--color-icon, #4B5565)", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { class: "label text-md-regular" }, col.label)), h("gb-toggle", { size: "sm", state: StateEnum.Default, position: "right", pressed: col.visible, text: false, onToggleClicked: e => {
                 this.toggleColumn(e, col.key);
-            } })))), h("div", { key: '3db0569c38add834acb923a6265e231c20b2c528', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '52977d71bf7b35b8b71438372065c4a14189c430', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'b13113f10d1eac46526000acf49878f4cb1e2a47', class: "filter_modal", onClose: e => {
+            } })))), h("div", { key: 'f084562968198517dcc432add17418bed2a7f570', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '563b6c8a328c136b7824aab09587443f567be9bf', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '62465613f3a1844219486b70c0bbbc0828ca80bf', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
@@ -609,7 +568,7 @@ export class GbTable {
         // ✅ No loading + no data = empty state
         h("div", { class: "empty_state_wrapper" }, h("gb-empty-state", { size: "sm", "main-text": this.emptyStateConfig.mainText, "supporting-text": this.emptyStateConfig.supportingText, color: this.emptyStateConfig.color, theme: this.emptyStateConfig.theme, "primary-button-icon-leading-swap": "assets/plus.svg", "illustration-icon": this.emptyStateConfig.illustrationIcon, background: true, "background-type": "grid", icon: "illustration", "illustration-style": "cloud" }))) : (
         // ✅ Has data + not loading
-        h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: 'f046e94681c0365b6acebeff99cac9d03bfe8d0f', "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) }))));
+        h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '64c5e0c556193f36cf4fcc1e464c915861571d3b', "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"; }
@@ -798,8 +757,7 @@ export class GbTable {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "{\r\n    title: 'Filter',\r\n    enableDateRange: true,\r\n    showClearButton: true,\r\n    additionalFields: [\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'approvalStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'default',\r\n          showLabel: true,\r\n          label: 'Approval status',\r\n          placeholder: 'Select approval status',\r\n          items: ['Draft', 'Pending', 'Approved', 'Rejected'],\r\n          destructive: false,\r\n        },\r\n        default: {\r\n          value: [],\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-slider',\r\n        key: 'amountRange',\r\n        event: 'thumbValueChanged',\r\n        props: {\r\n          showHeading: true,\r\n          heading: 'Amount range',\r\n        },\r\n        default: {\r\n          leftControl: 50,\r\n          rightControl: 100,\r\n        },\r\n      },\r\n      {\r\n        tag: 'gb-input-dropdown',\r\n        key: 'disbursementStatus',\r\n        event: 'dropdownItemSelected',\r\n        props: {\r\n          type: 'default',\r\n          showLabel: true,\r\n          label: 'Disbursement status',\r\n          placeholder: 'Select disbursement status',\r\n          items: ['Disbursed', 'Not Disbursed'],\r\n        },\r\n      },\r\n      //   {\r\n      //     tag: 'gb-input-dropdown',\r\n      //     key: 'facilityCategory',\r\n      //     props: {\r\n      //       showLabel: true,\r\n      //       label: 'Facility category',\r\n      //       placeholder: 'Select facility category',\r\n      //       items: ['Retail', 'Commercial', 'Corporate'],\r\n      //     },\r\n      //   },\r\n    ],\r\n    initialValues: {\r\n      pageNumber: 1,\r\n      pageSize: 10,\r\n    },\r\n  }"
+                "setter": false
             },
             "showActionsColumn": {
                 "type": "boolean",
@@ -819,7 +777,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-actions-column",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "rowActions": {
                 "type": "unknown",
@@ -947,7 +905,7 @@ export class GbTable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-checkbox",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "tableHeadColor": {
                 "type": "string",
@@ -1139,15 +1097,15 @@ export class GbTable {
         return [{
                 "propName": "data",
                 "methodName": "onDataChange"
-            }, {
-                "propName": "totalItems",
-                "methodName": "onTotalItemsChange"
             }, {
                 "propName": "loading",
                 "methodName": "onLoadingChange"
             }, {
                 "propName": "columns",
                 "methodName": "validateMobilePositions"
+            }, {
+                "propName": "paginationConfig",
+                "methodName": "handlePaginationChange"
             }];
     }
     static get listeners() {