globuswebcomponents 2.10.3 → 2.10.5
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 +85 -136
- package/dist/cjs/gb-toast.cjs.entry.js +3 -1
- package/dist/cjs/gb-toast.entry.cjs.js.map +1 -1
- 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 +91 -141
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/collection/components/gb-toast/gb-toast.js +3 -1
- package/dist/collection/components/gb-toast/gb-toast.js.map +1 -1
- package/dist/components/gb-table.js +87 -137
- package/dist/components/gb-table.js.map +1 -1
- package/dist/components/gb-toast.js +3 -1
- package/dist/components/gb-toast.js.map +1 -1
- package/dist/docs.json +10 -16
- package/dist/esm/gb-avatar_44.entry.js +85 -136
- package/dist/esm/gb-toast.entry.js +3 -1
- package/dist/esm/gb-toast.entry.js.map +1 -1
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/gb-toast.entry.esm.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-ed3682f7.entry.js → p-2c6570a9.entry.js} +2 -2
- package/dist/globuscomponents/p-2c6570a9.entry.js.map +1 -0
- package/dist/globuscomponents/{p-eb087176.entry.js → p-f3bd7944.entry.js} +2 -2
- package/dist/globuscomponents/p-f3bd7944.entry.js.map +1 -0
- package/dist/types/components/gb-table/gb-table.d.ts +1 -0
- package/dist/types/components.d.ts +8 -14
- package/package.json +3 -2
- package/dist/globuscomponents/p-eb087176.entry.js.map +0 -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();
|
|
@@ -427,12 +370,12 @@ export class GbTable {
|
|
|
427
370
|
if (!this.paginationConfig)
|
|
428
371
|
return 1;
|
|
429
372
|
const pageSize = this.internalPageSize || 1;
|
|
430
|
-
const totalItems =
|
|
373
|
+
const totalItems = this.paginationConfig.paginationMode === 'internal'
|
|
374
|
+
? this.sortedData.length
|
|
375
|
+
: ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
431
376
|
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
432
377
|
}
|
|
433
378
|
onDataChange() {
|
|
434
|
-
// if (!newValue) return;
|
|
435
|
-
// this.data = newValue;
|
|
436
379
|
this.internalCurrentPage = 1;
|
|
437
380
|
}
|
|
438
381
|
onLoadingChange(newValue, _oldValue) {
|
|
@@ -494,6 +437,11 @@ export class GbTable {
|
|
|
494
437
|
}
|
|
495
438
|
this.initializeColumns(newCols);
|
|
496
439
|
}
|
|
440
|
+
handlePaginationChange(newValue, oldValue) {
|
|
441
|
+
if (newValue.pageSize !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.pageSize)) {
|
|
442
|
+
this.internalCurrentPage = 1;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
497
445
|
emitRowData(row) {
|
|
498
446
|
this.rowClicked.emit(row);
|
|
499
447
|
}
|
|
@@ -557,16 +505,16 @@ export class GbTable {
|
|
|
557
505
|
window.removeEventListener('resize', this.checkViewport);
|
|
558
506
|
}
|
|
559
507
|
render() {
|
|
560
|
-
return (h("div", { key: '
|
|
508
|
+
return (h("div", { key: 'b08194dc7daac26c85433f3ddfe4271e041b5da5', class: `table_wrapper` }, h("gb-table-header", { key: 'c45bf96493ca79bb015a976b4b297a52cce2fc85', 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: 'ab4e778062c445102cde6b1b64f546349d105b01', class: "dialog", style: {
|
|
561
509
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
562
|
-
} }, h("div", { key: '
|
|
510
|
+
} }, h("div", { key: '523ef6a05cb9d8b5189f5c5de274592473482f7d', class: "column-modal" }, h("div", { key: '01e236838e41b7cdd87ce08c29dbf4adf101773c', class: "modal_header" }, h("div", { key: '1c8be75891b22479443e9bde79b136a9a41e7a6a', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '926dc831d43ff017561a839ce24b14738eb14128', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '69f60bde545895304b8f2547782a69873ebf307b', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '69e83fcc542f0ce8ea82f262073a64a333b84205', class: "content_wrapper" }, h("div", { key: '62ce3b1355ebbde257a7bef79502ec6f943bba0a', 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
511
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
564
512
|
this.reorderColumns(this.draggedIndex, index);
|
|
565
513
|
}
|
|
566
514
|
this.draggedIndex = null;
|
|
567
515
|
} }, 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
516
|
this.toggleColumn(e, col.key);
|
|
569
|
-
} })))), h("div", { key: '
|
|
517
|
+
} })))), h("div", { key: 'e47dec91b5cdcb36b59d66996a0c5c848902df98', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: 'a04074555bbd39994478b438a8bab4d9c2e87dd1', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'cb5d76cfa6f6d5eb3777bb1aa415827cc657db9d', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
|
|
570
518
|
e.stopPropagation();
|
|
571
519
|
this.closeFilterModal();
|
|
572
520
|
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
@@ -605,7 +553,7 @@ export class GbTable {
|
|
|
605
553
|
// ✅ No loading + no data = empty state
|
|
606
554
|
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
555
|
// ✅ Has data + not loading
|
|
608
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
556
|
+
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: 'dbc28995645dd876f3bf841c75ad4de3632bce21', "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
557
|
}
|
|
610
558
|
static get is() { return "gb-table"; }
|
|
611
559
|
static get encapsulation() { return "shadow"; }
|
|
@@ -663,7 +611,7 @@ export class GbTable {
|
|
|
663
611
|
},
|
|
664
612
|
"getter": false,
|
|
665
613
|
"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
|
|
614
|
+
"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
615
|
},
|
|
668
616
|
"data": {
|
|
669
617
|
"type": "unknown",
|
|
@@ -681,7 +629,7 @@ export class GbTable {
|
|
|
681
629
|
},
|
|
682
630
|
"getter": false,
|
|
683
631
|
"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 ]"
|
|
632
|
+
"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
633
|
},
|
|
686
634
|
"tableHeaderConfig": {
|
|
687
635
|
"type": "unknown",
|
|
@@ -794,8 +742,7 @@ export class GbTable {
|
|
|
794
742
|
"text": ""
|
|
795
743
|
},
|
|
796
744
|
"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 }"
|
|
745
|
+
"setter": false
|
|
799
746
|
},
|
|
800
747
|
"showActionsColumn": {
|
|
801
748
|
"type": "boolean",
|
|
@@ -839,7 +786,7 @@ export class GbTable {
|
|
|
839
786
|
},
|
|
840
787
|
"getter": false,
|
|
841
788
|
"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 ]"
|
|
789
|
+
"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
790
|
},
|
|
844
791
|
"dropdownOptions": {
|
|
845
792
|
"type": "unknown",
|
|
@@ -863,7 +810,7 @@ export class GbTable {
|
|
|
863
810
|
},
|
|
864
811
|
"getter": false,
|
|
865
812
|
"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 ]"
|
|
813
|
+
"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
814
|
},
|
|
868
815
|
"stickyFirstColumn": {
|
|
869
816
|
"type": "boolean",
|
|
@@ -1141,6 +1088,9 @@ export class GbTable {
|
|
|
1141
1088
|
}, {
|
|
1142
1089
|
"propName": "columns",
|
|
1143
1090
|
"methodName": "validateMobilePositions"
|
|
1091
|
+
}, {
|
|
1092
|
+
"propName": "paginationConfig",
|
|
1093
|
+
"methodName": "handlePaginationChange"
|
|
1144
1094
|
}];
|
|
1145
1095
|
}
|
|
1146
1096
|
static get listeners() {
|