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.
- package/dist/cjs/gb-avatar_44.cjs.entry.js +100 -136
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-table/gb-table.js +106 -141
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/components/gb-table.js +102 -137
- package/dist/components/gb-table.js.map +1 -1
- package/dist/docs.json +10 -16
- package/dist/esm/gb-avatar_44.entry.js +100 -136
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-ed3682f7.entry.js → p-6ccc11b8.entry.js} +2 -2
- package/dist/globuscomponents/p-6ccc11b8.entry.js.map +1 -0
- package/dist/types/components/gb-table/gb-table.d.ts +2 -0
- package/dist/types/components.d.ts +8 -14
- package/package.json +1 -1
- package/dist/globuscomponents/p-ed3682f7.entry.js.map +0 -1
|
@@ -4,68 +4,68 @@ export class GbTable {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.loading = false;
|
|
6
6
|
this.columns = [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
7
|
+
// { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
|
|
8
|
+
// { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
|
|
9
|
+
// { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
|
|
10
|
+
// { key: 'role', label: 'Role' },
|
|
11
|
+
// { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
|
|
12
|
+
// {
|
|
13
|
+
// key: 'status',
|
|
14
|
+
// label: 'Status',
|
|
15
|
+
// cellComponent: 'gb-badge',
|
|
16
|
+
// cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
|
|
17
|
+
// cellSlots: {
|
|
18
|
+
// default: {
|
|
19
|
+
// tag: 'p',
|
|
20
|
+
// content: row => row.status,
|
|
21
|
+
// },
|
|
22
|
+
// },
|
|
23
|
+
// },
|
|
24
24
|
];
|
|
25
25
|
this.data = [
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
26
|
+
// {
|
|
27
|
+
// id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
|
|
28
|
+
// date: 'Jan 1, 2022',
|
|
29
|
+
// name: 'Emma Johnson',
|
|
30
|
+
// role: 'Frontend Developer',
|
|
31
|
+
// level: 'Today',
|
|
32
|
+
// customer: 'John Doe',
|
|
33
|
+
// amount: '$120.00',
|
|
34
|
+
// status: 'Completed',
|
|
35
|
+
// },
|
|
36
|
+
// { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
37
|
+
// { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
38
|
+
// { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
39
|
+
// { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
40
|
+
// { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
41
|
+
// { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
|
|
42
|
+
// { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
|
|
43
|
+
// { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
|
|
44
|
+
// { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },
|
|
45
|
+
// { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },
|
|
46
|
+
// { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },
|
|
47
|
+
// { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },
|
|
48
|
+
// { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },
|
|
49
|
+
// { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },
|
|
50
|
+
// { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },
|
|
51
|
+
// { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },
|
|
52
|
+
// { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },
|
|
53
|
+
// { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },
|
|
54
|
+
// { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },
|
|
55
|
+
// { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },
|
|
56
|
+
// { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },
|
|
57
|
+
// { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },
|
|
58
|
+
// { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },
|
|
59
|
+
// { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },
|
|
60
|
+
// { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },
|
|
61
|
+
// { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },
|
|
62
|
+
// { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },
|
|
63
|
+
// { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },
|
|
64
|
+
// { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },
|
|
65
|
+
// { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },
|
|
66
|
+
// { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },
|
|
67
|
+
// { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },
|
|
68
|
+
// { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },
|
|
69
69
|
];
|
|
70
70
|
this.tableHeaderConfig = {
|
|
71
71
|
tableHeading: false,
|
|
@@ -96,78 +96,16 @@ export class GbTable {
|
|
|
96
96
|
illustrationStyle: 'box',
|
|
97
97
|
theme: 'light',
|
|
98
98
|
};
|
|
99
|
-
this.filterConfig = {
|
|
100
|
-
title: 'Filter',
|
|
101
|
-
enableDateRange: true,
|
|
102
|
-
showClearButton: true,
|
|
103
|
-
additionalFields: [
|
|
104
|
-
{
|
|
105
|
-
tag: 'gb-input-dropdown',
|
|
106
|
-
key: 'approvalStatus',
|
|
107
|
-
event: 'dropdownItemSelected',
|
|
108
|
-
props: {
|
|
109
|
-
type: 'default',
|
|
110
|
-
showLabel: true,
|
|
111
|
-
label: 'Approval status',
|
|
112
|
-
placeholder: 'Select approval status',
|
|
113
|
-
items: ['Draft', 'Pending', 'Approved', 'Rejected'],
|
|
114
|
-
destructive: false,
|
|
115
|
-
},
|
|
116
|
-
default: {
|
|
117
|
-
value: [],
|
|
118
|
-
},
|
|
119
|
-
},
|
|
120
|
-
{
|
|
121
|
-
tag: 'gb-slider',
|
|
122
|
-
key: 'amountRange',
|
|
123
|
-
event: 'thumbValueChanged',
|
|
124
|
-
props: {
|
|
125
|
-
showHeading: true,
|
|
126
|
-
heading: 'Amount range',
|
|
127
|
-
},
|
|
128
|
-
default: {
|
|
129
|
-
leftControl: 50,
|
|
130
|
-
rightControl: 100,
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
tag: 'gb-input-dropdown',
|
|
135
|
-
key: 'disbursementStatus',
|
|
136
|
-
event: 'dropdownItemSelected',
|
|
137
|
-
props: {
|
|
138
|
-
type: 'default',
|
|
139
|
-
showLabel: true,
|
|
140
|
-
label: 'Disbursement status',
|
|
141
|
-
placeholder: 'Select disbursement status',
|
|
142
|
-
items: ['Disbursed', 'Not Disbursed'],
|
|
143
|
-
},
|
|
144
|
-
},
|
|
145
|
-
// {
|
|
146
|
-
// tag: 'gb-input-dropdown',
|
|
147
|
-
// key: 'facilityCategory',
|
|
148
|
-
// props: {
|
|
149
|
-
// showLabel: true,
|
|
150
|
-
// label: 'Facility category',
|
|
151
|
-
// placeholder: 'Select facility category',
|
|
152
|
-
// items: ['Retail', 'Commercial', 'Corporate'],
|
|
153
|
-
// },
|
|
154
|
-
// },
|
|
155
|
-
],
|
|
156
|
-
initialValues: {
|
|
157
|
-
pageNumber: 1,
|
|
158
|
-
pageSize: 10,
|
|
159
|
-
},
|
|
160
|
-
};
|
|
161
99
|
this.showActionsColumn = true;
|
|
162
100
|
this.rowActions = [
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
101
|
+
// { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
|
|
102
|
+
// { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
|
|
103
|
+
// { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
|
|
166
104
|
];
|
|
167
105
|
this.dropdownOptions = [
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
106
|
+
// { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },
|
|
107
|
+
// { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
|
|
108
|
+
// { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },
|
|
171
109
|
];
|
|
172
110
|
this.stickyFirstColumn = false;
|
|
173
111
|
this.stickyLastColumn = false;
|
|
@@ -230,6 +168,11 @@ export class GbTable {
|
|
|
230
168
|
componentWillLoad() {
|
|
231
169
|
this.initializeColumns(this.columns);
|
|
232
170
|
this.internalLoading = this.loading;
|
|
171
|
+
// Initialize internal pagination state from config
|
|
172
|
+
if (this.paginationConfig) {
|
|
173
|
+
this.internalPageSize = this.paginationConfig.pageSize || 10;
|
|
174
|
+
this.internalCurrentPage = this.paginationConfig.currentPage || 1;
|
|
175
|
+
}
|
|
233
176
|
}
|
|
234
177
|
componentWillRender() {
|
|
235
178
|
this.checkViewport();
|
|
@@ -418,6 +361,7 @@ export class GbTable {
|
|
|
418
361
|
if (this.paginationConfig.paginationMode === 'external') {
|
|
419
362
|
return this.sortedData;
|
|
420
363
|
}
|
|
364
|
+
// Use internal state for slicing
|
|
421
365
|
const start = (this.internalCurrentPage - 1) * this.internalPageSize;
|
|
422
366
|
const end = start + this.internalPageSize;
|
|
423
367
|
return this.sortedData.slice(start, end);
|
|
@@ -427,12 +371,26 @@ export class GbTable {
|
|
|
427
371
|
if (!this.paginationConfig)
|
|
428
372
|
return 1;
|
|
429
373
|
const pageSize = this.internalPageSize || 1;
|
|
430
|
-
|
|
374
|
+
// For internal mode, use the local data length
|
|
375
|
+
// For external mode, rely on the provided totalItems prop
|
|
376
|
+
const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.data.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
431
377
|
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
432
378
|
}
|
|
379
|
+
// Inside your GbTable class in gb-table.tsx
|
|
380
|
+
get paginatedData() {
|
|
381
|
+
var _a;
|
|
382
|
+
// If mode is external, return all data (parent handles slicing)
|
|
383
|
+
if (((_a = this.paginationConfig) === null || _a === void 0 ? void 0 : _a.paginationMode) !== 'internal') {
|
|
384
|
+
return this.data;
|
|
385
|
+
}
|
|
386
|
+
// If mode is internal, slice the array locally
|
|
387
|
+
const pageSize = this.paginationConfig.pageSize || 10;
|
|
388
|
+
const currentPage = this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage;
|
|
389
|
+
const startIndex = (currentPage - 1) * pageSize;
|
|
390
|
+
const endIndex = startIndex + pageSize;
|
|
391
|
+
return this.data.slice(startIndex, endIndex);
|
|
392
|
+
}
|
|
433
393
|
onDataChange() {
|
|
434
|
-
// if (!newValue) return;
|
|
435
|
-
// this.data = newValue;
|
|
436
394
|
this.internalCurrentPage = 1;
|
|
437
395
|
}
|
|
438
396
|
onLoadingChange(newValue, _oldValue) {
|
|
@@ -494,6 +452,11 @@ export class GbTable {
|
|
|
494
452
|
}
|
|
495
453
|
this.initializeColumns(newCols);
|
|
496
454
|
}
|
|
455
|
+
handlePaginationChange(newValue, oldValue) {
|
|
456
|
+
if (newValue.pageSize !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.pageSize)) {
|
|
457
|
+
this.internalCurrentPage = 1;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
497
460
|
emitRowData(row) {
|
|
498
461
|
this.rowClicked.emit(row);
|
|
499
462
|
}
|
|
@@ -557,16 +520,16 @@ export class GbTable {
|
|
|
557
520
|
window.removeEventListener('resize', this.checkViewport);
|
|
558
521
|
}
|
|
559
522
|
render() {
|
|
560
|
-
return (h("div", { key: '
|
|
523
|
+
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: {
|
|
561
524
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
562
|
-
} }, h("div", { key: '
|
|
525
|
+
} }, 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: () => {
|
|
563
526
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
564
527
|
this.reorderColumns(this.draggedIndex, index);
|
|
565
528
|
}
|
|
566
529
|
this.draggedIndex = null;
|
|
567
530
|
} }, 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 => {
|
|
568
531
|
this.toggleColumn(e, col.key);
|
|
569
|
-
} })))), h("div", { key: '
|
|
532
|
+
} })))), 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 => {
|
|
570
533
|
e.stopPropagation();
|
|
571
534
|
this.closeFilterModal();
|
|
572
535
|
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
@@ -605,7 +568,7 @@ export class GbTable {
|
|
|
605
568
|
// ✅ No loading + no data = empty state
|
|
606
569
|
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" }))) : (
|
|
607
570
|
// ✅ Has data + not loading
|
|
608
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
571
|
+
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) }))));
|
|
609
572
|
}
|
|
610
573
|
static get is() { return "gb-table"; }
|
|
611
574
|
static get encapsulation() { return "shadow"; }
|
|
@@ -663,7 +626,7 @@ export class GbTable {
|
|
|
663
626
|
},
|
|
664
627
|
"getter": false,
|
|
665
628
|
"setter": false,
|
|
666
|
-
"defaultValue": "[\r\n { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },\r\n { key: 'role', label: 'Role' },\r\n { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },\r\n {\r\n
|
|
629
|
+
"defaultValue": "[\r\n // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },\r\n // { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },\r\n // { key: 'role', label: 'Role' },\r\n // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },\r\n // {\r\n // key: 'status',\r\n // label: 'Status',\r\n // cellComponent: 'gb-badge',\r\n // cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),\r\n // cellSlots: {\r\n // default: {\r\n // tag: 'p',\r\n // content: row => row.status,\r\n // },\r\n // },\r\n // },\r\n ]"
|
|
667
630
|
},
|
|
668
631
|
"data": {
|
|
669
632
|
"type": "unknown",
|
|
@@ -681,7 +644,7 @@ export class GbTable {
|
|
|
681
644
|
},
|
|
682
645
|
"getter": false,
|
|
683
646
|
"setter": false,
|
|
684
|
-
"defaultValue": "[\r\n // {\r\n // id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n // date: 'Jan 1, 2022',\r\n // name: 'Emma Johnson',\r\n // role: 'Frontend Developer',\r\n // level: 'Today',\r\n // customer: 'John Doe',\r\n // amount: '$120.00',\r\n // status: 'Completed',\r\n // },\r\n // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },\r\n { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },\r\n { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },\r\n { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },\r\n { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },\r\n { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },\r\n { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },\r\n { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },\r\n { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },\r\n { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },\r\n { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },\r\n { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },\r\n { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },\r\n { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },\r\n { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },\r\n { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },\r\n { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },\r\n { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },\r\n { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },\r\n { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },\r\n { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },\r\n { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },\r\n { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },\r\n { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },\r\n { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },\r\n { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },\r\n { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },\r\n { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },\r\n ]"
|
|
647
|
+
"defaultValue": "[\r\n // {\r\n // id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',\r\n // date: 'Jan 1, 2022',\r\n // name: 'Emma Johnson',\r\n // role: 'Frontend Developer',\r\n // level: 'Today',\r\n // customer: 'John Doe',\r\n // amount: '$120.00',\r\n // status: 'Completed',\r\n // },\r\n // { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },\r\n // { id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },\r\n // { id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },\r\n // { id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },\r\n // { id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },\r\n // { id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },\r\n // { id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },\r\n // { id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },\r\n // { id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },\r\n // { id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },\r\n // { id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },\r\n // { id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },\r\n // { id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },\r\n // { id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },\r\n // { id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },\r\n // { id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },\r\n // { id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },\r\n // { id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },\r\n // { id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },\r\n // { id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },\r\n // { id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },\r\n // { id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },\r\n // { id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },\r\n // { id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },\r\n // { id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },\r\n // { id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },\r\n // { id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },\r\n // { id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },\r\n // { id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },\r\n ]"
|
|
685
648
|
},
|
|
686
649
|
"tableHeaderConfig": {
|
|
687
650
|
"type": "unknown",
|
|
@@ -794,8 +757,7 @@ export class GbTable {
|
|
|
794
757
|
"text": ""
|
|
795
758
|
},
|
|
796
759
|
"getter": false,
|
|
797
|
-
"setter": false
|
|
798
|
-
"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 }"
|
|
760
|
+
"setter": false
|
|
799
761
|
},
|
|
800
762
|
"showActionsColumn": {
|
|
801
763
|
"type": "boolean",
|
|
@@ -839,7 +801,7 @@ export class GbTable {
|
|
|
839
801
|
},
|
|
840
802
|
"getter": false,
|
|
841
803
|
"setter": false,
|
|
842
|
-
"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 ]"
|
|
804
|
+
"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 ]"
|
|
843
805
|
},
|
|
844
806
|
"dropdownOptions": {
|
|
845
807
|
"type": "unknown",
|
|
@@ -863,7 +825,7 @@ export class GbTable {
|
|
|
863
825
|
},
|
|
864
826
|
"getter": false,
|
|
865
827
|
"setter": false,
|
|
866
|
-
"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 ]"
|
|
828
|
+
"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 ]"
|
|
867
829
|
},
|
|
868
830
|
"stickyFirstColumn": {
|
|
869
831
|
"type": "boolean",
|
|
@@ -1141,6 +1103,9 @@ export class GbTable {
|
|
|
1141
1103
|
}, {
|
|
1142
1104
|
"propName": "columns",
|
|
1143
1105
|
"methodName": "validateMobilePositions"
|
|
1106
|
+
}, {
|
|
1107
|
+
"propName": "paginationConfig",
|
|
1108
|
+
"methodName": "handlePaginationChange"
|
|
1144
1109
|
}];
|
|
1145
1110
|
}
|
|
1146
1111
|
static get listeners() {
|