globuswebcomponents 2.10.3 → 2.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -63,68 +63,68 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
63
63
  this.applyFilters = createEvent(this, "applyFilters");
64
64
  this.loading = false;
65
65
  this.columns = [
66
- { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
67
- { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
68
- { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
69
- { key: 'role', label: 'Role' },
70
- { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
71
- {
72
- key: 'status',
73
- label: 'Status',
74
- cellComponent: 'gb-badge',
75
- cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
76
- cellSlots: {
77
- default: {
78
- tag: 'p',
79
- content: row => row.status,
80
- },
81
- },
82
- },
66
+ // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
67
+ // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
68
+ // { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
69
+ // { key: 'role', label: 'Role' },
70
+ // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
71
+ // {
72
+ // key: 'status',
73
+ // label: 'Status',
74
+ // cellComponent: 'gb-badge',
75
+ // cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
76
+ // cellSlots: {
77
+ // default: {
78
+ // tag: 'p',
79
+ // content: row => row.status,
80
+ // },
81
+ // },
82
+ // },
83
83
  ];
84
84
  this.data = [
85
- // {
86
- // id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
87
- // date: 'Jan 1, 2022',
88
- // name: 'Emma Johnson',
89
- // role: 'Frontend Developer',
90
- // level: 'Today',
91
- // customer: 'John Doe',
92
- // amount: '$120.00',
93
- // status: 'Completed',
94
- // },
95
- // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
96
- // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
97
- // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
98
- // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
99
- // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
100
- { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
101
- { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
102
- { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
103
- { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },
104
- { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },
105
- { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },
106
- { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },
107
- { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },
108
- { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },
109
- { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },
110
- { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },
111
- { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },
112
- { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },
113
- { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },
114
- { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },
115
- { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },
116
- { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },
117
- { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },
118
- { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },
119
- { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },
120
- { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },
121
- { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },
122
- { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },
123
- { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },
124
- { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },
125
- { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },
126
- { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },
127
- { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },
85
+ // {
86
+ // id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
87
+ // date: 'Jan 1, 2022',
88
+ // name: 'Emma Johnson',
89
+ // role: 'Frontend Developer',
90
+ // level: 'Today',
91
+ // customer: 'John Doe',
92
+ // amount: '$120.00',
93
+ // status: 'Completed',
94
+ // },
95
+ // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
96
+ // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
97
+ // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
98
+ // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
99
+ // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
100
+ // { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
101
+ // { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
102
+ // { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
103
+ // { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },
104
+ // { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },
105
+ // { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },
106
+ // { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },
107
+ // { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },
108
+ // { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },
109
+ // { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },
110
+ // { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },
111
+ // { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },
112
+ // { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },
113
+ // { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },
114
+ // { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },
115
+ // { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },
116
+ // { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },
117
+ // { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },
118
+ // { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },
119
+ // { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },
120
+ // { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },
121
+ // { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },
122
+ // { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },
123
+ // { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },
124
+ // { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },
125
+ // { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },
126
+ // { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },
127
+ // { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },
128
128
  ];
129
129
  this.tableHeaderConfig = {
130
130
  tableHeading: false,
@@ -155,78 +155,16 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
155
155
  illustrationStyle: 'box',
156
156
  theme: 'light',
157
157
  };
158
- this.filterConfig = {
159
- title: 'Filter',
160
- enableDateRange: true,
161
- showClearButton: true,
162
- additionalFields: [
163
- {
164
- tag: 'gb-input-dropdown',
165
- key: 'approvalStatus',
166
- event: 'dropdownItemSelected',
167
- props: {
168
- type: 'default',
169
- showLabel: true,
170
- label: 'Approval status',
171
- placeholder: 'Select approval status',
172
- items: ['Draft', 'Pending', 'Approved', 'Rejected'],
173
- destructive: false,
174
- },
175
- default: {
176
- value: [],
177
- },
178
- },
179
- {
180
- tag: 'gb-slider',
181
- key: 'amountRange',
182
- event: 'thumbValueChanged',
183
- props: {
184
- showHeading: true,
185
- heading: 'Amount range',
186
- },
187
- default: {
188
- leftControl: 50,
189
- rightControl: 100,
190
- },
191
- },
192
- {
193
- tag: 'gb-input-dropdown',
194
- key: 'disbursementStatus',
195
- event: 'dropdownItemSelected',
196
- props: {
197
- type: 'default',
198
- showLabel: true,
199
- label: 'Disbursement status',
200
- placeholder: 'Select disbursement status',
201
- items: ['Disbursed', 'Not Disbursed'],
202
- },
203
- },
204
- // {
205
- // tag: 'gb-input-dropdown',
206
- // key: 'facilityCategory',
207
- // props: {
208
- // showLabel: true,
209
- // label: 'Facility category',
210
- // placeholder: 'Select facility category',
211
- // items: ['Retail', 'Commercial', 'Corporate'],
212
- // },
213
- // },
214
- ],
215
- initialValues: {
216
- pageNumber: 1,
217
- pageSize: 10,
218
- },
219
- };
220
158
  this.showActionsColumn = true;
221
159
  this.rowActions = [
222
- { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
223
- { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
224
- { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
160
+ // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
161
+ // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
162
+ // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
225
163
  ];
226
164
  this.dropdownOptions = [
227
- { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },
228
- { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
229
- { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },
165
+ // { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },
166
+ // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
167
+ // { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },
230
168
  ];
231
169
  this.stickyFirstColumn = false;
232
170
  this.stickyLastColumn = false;
@@ -289,6 +227,11 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
289
227
  componentWillLoad() {
290
228
  this.initializeColumns(this.columns);
291
229
  this.internalLoading = this.loading;
230
+ // Initialize internal pagination state from config
231
+ if (this.paginationConfig) {
232
+ this.internalPageSize = this.paginationConfig.pageSize || 10;
233
+ this.internalCurrentPage = this.paginationConfig.currentPage || 1;
234
+ }
292
235
  }
293
236
  componentWillRender() {
294
237
  this.checkViewport();
@@ -477,6 +420,7 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
477
420
  if (this.paginationConfig.paginationMode === 'external') {
478
421
  return this.sortedData;
479
422
  }
423
+ // Use internal state for slicing
480
424
  const start = (this.internalCurrentPage - 1) * this.internalPageSize;
481
425
  const end = start + this.internalPageSize;
482
426
  return this.sortedData.slice(start, end);
@@ -486,12 +430,26 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
486
430
  if (!this.paginationConfig)
487
431
  return 1;
488
432
  const pageSize = this.internalPageSize || 1;
489
- const totalItems = (_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0;
433
+ // For internal mode, use the local data length
434
+ // For external mode, rely on the provided totalItems prop
435
+ const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.data.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
490
436
  return Math.max(1, Math.ceil(totalItems / pageSize));
491
437
  }
438
+ // Inside your GbTable class in gb-table.tsx
439
+ get paginatedData() {
440
+ var _a;
441
+ // If mode is external, return all data (parent handles slicing)
442
+ if (((_a = this.paginationConfig) === null || _a === void 0 ? void 0 : _a.paginationMode) !== 'internal') {
443
+ return this.data;
444
+ }
445
+ // If mode is internal, slice the array locally
446
+ const pageSize = this.paginationConfig.pageSize || 10;
447
+ const currentPage = this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage;
448
+ const startIndex = (currentPage - 1) * pageSize;
449
+ const endIndex = startIndex + pageSize;
450
+ return this.data.slice(startIndex, endIndex);
451
+ }
492
452
  onDataChange() {
493
- // if (!newValue) return;
494
- // this.data = newValue;
495
453
  this.internalCurrentPage = 1;
496
454
  }
497
455
  onLoadingChange(newValue, _oldValue) {
@@ -543,6 +501,11 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
543
501
  }
544
502
  this.initializeColumns(newCols);
545
503
  }
504
+ handlePaginationChange(newValue, oldValue) {
505
+ if (newValue.pageSize !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.pageSize)) {
506
+ this.internalCurrentPage = 1;
507
+ }
508
+ }
546
509
  emitRowData(row) {
547
510
  this.rowClicked.emit(row);
548
511
  }
@@ -606,16 +569,16 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
606
569
  window.removeEventListener('resize', this.checkViewport);
607
570
  }
608
571
  render() {
609
- return (h("div", { key: '871ce0112a7403083d1a518f3d0e8617d0e82211', class: `table_wrapper` }, h("gb-table-header", { key: '31ef7ef98c7a2f2fb035ed4a71ae00902fcf6376', 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: '2747b59a0ef520ed2bfdccd495b85ab6a894a8ac', class: "dialog", style: {
572
+ 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: {
610
573
  transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
611
- } }, h("div", { key: '3ec67c58b72483ff713625f2c215d42c7fbc7498', class: "column-modal" }, h("div", { key: 'fc524ae4b528d4f53bda5b67b978e997a4225af6', class: "modal_header" }, h("div", { key: '4e81183ebd7ab21ef5e197bd96def51c5472eebd', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '5804d117ac888507ca70976477bfffad346878df', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: 'eb40ff8e0bf08aef9d0933170e06036626154d8a', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '63218bf770f9707d342b72d2d8c49d8286f14574', class: "content_wrapper" }, h("div", { key: 'd588a32e6b51d76989f9920a8c68a406a924095d', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
574
+ } }, 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: () => {
612
575
  if (this.draggedIndex !== null && this.draggedIndex !== index) {
613
576
  this.reorderColumns(this.draggedIndex, index);
614
577
  }
615
578
  this.draggedIndex = null;
616
579
  } }, 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 => {
617
580
  this.toggleColumn(e, col.key);
618
- } })))), h("div", { key: 'ce776c89ab657dddcaab6a53a980a128f42c7e65', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '71cc09317e7a5d5cfc7fd1d54be5dd8f3d44d86a', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '76b6173fb55f6b1ea7ffbfae8f42d147c7706d6d', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
581
+ } })))), 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 => {
619
582
  e.stopPropagation();
620
583
  this.closeFilterModal();
621
584
  }, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
@@ -654,12 +617,13 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
654
617
  // ✅ No loading + no data = empty state
655
618
  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" }))) : (
656
619
  // ✅ Has data + not loading
657
- h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '72446cdc26ff453441ac3fa236024996631ae1e3', "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) }))));
620
+ 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) }))));
658
621
  }
659
622
  static get watchers() { return {
660
623
  "data": ["onDataChange"],
661
624
  "loading": ["onLoadingChange"],
662
- "columns": ["validateMobilePositions"]
625
+ "columns": ["validateMobilePositions"],
626
+ "paginationConfig": ["handlePaginationChange"]
663
627
  }; }
664
628
  static get style() { return gbTableCss; }
665
629
  }, [257, "gb-table", {
@@ -699,7 +663,8 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
699
663
  }, [[9, "resize", "checkViewport"]], {
700
664
  "data": ["onDataChange"],
701
665
  "loading": ["onLoadingChange"],
702
- "columns": ["validateMobilePositions"]
666
+ "columns": ["validateMobilePositions"],
667
+ "paginationConfig": ["handlePaginationChange"]
703
668
  }]);
704
669
  function defineCustomElement$1() {
705
670
  if (typeof customElements === "undefined") {