globuswebcomponents 2.9.2 → 2.10.2
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 +151 -101
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/reusableModels-_LRAKnsh.js.map +1 -1
- package/dist/collection/components/gb-button/readme.md +2 -0
- package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css +0 -1
- package/dist/collection/components/gb-filter-modal/gb-filter-modal.css +4 -0
- package/dist/collection/components/gb-filter-modal/gb-filter-modal.js +2 -2
- package/dist/collection/components/gb-filter-modal/gb-filter-modal.js.map +1 -1
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +16 -4
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js.map +1 -1
- package/dist/collection/components/gb-input-field/gb-input-field.js +14 -2
- package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
- package/dist/collection/components/gb-table/gb-table.css +26 -13
- package/dist/collection/components/gb-table/gb-table.js +158 -97
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/collection/components/gb-toggle-base/gb-toggle-base.js +1 -1
- package/dist/collection/components/gb-toggle-base/gb-toggle-base.js.map +1 -1
- package/dist/collection/models/reusableModels.js.map +1 -1
- package/dist/components/gb-avatar-dropdown.js +1 -1
- package/dist/components/gb-contact-help-dropdown.js +1 -1
- package/dist/components/gb-dropdown-items-with-shortcut.js +1 -1
- package/dist/components/gb-filter-modal.js +1 -1
- package/dist/components/gb-header.js +5 -5
- package/dist/components/gb-help-dropdown.js +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-input-field.js +1 -1
- package/dist/components/gb-nav-bar.js +1 -1
- package/dist/components/gb-pagination.js +1 -1
- package/dist/components/gb-table-header.js +1 -1
- package/dist/components/gb-table.js +126 -98
- package/dist/components/gb-table.js.map +1 -1
- package/dist/components/gb-toggle-base.js +1 -1
- package/dist/components/gb-toggle.js +1 -1
- package/dist/components/{p-3Du3w-pS.js → p-6u1HaWoe.js} +3 -3
- package/dist/components/p-6u1HaWoe.js.map +1 -0
- package/dist/components/{p-Co457UXm.js → p-B1U9qYyf.js} +3 -3
- package/dist/components/{p-Co457UXm.js.map → p-B1U9qYyf.js.map} +1 -1
- package/dist/components/{p-CBwlEMQ5.js → p-B1q7GSUP.js} +19 -7
- package/dist/components/p-B1q7GSUP.js.map +1 -0
- package/dist/components/{p-BAGZEYW2.js → p-B8V2b584.js} +5 -5
- package/dist/components/p-B8V2b584.js.map +1 -0
- package/dist/components/{p-VqHJf1uS.js → p-BDEe2hS1.js} +4 -4
- package/dist/components/{p-VqHJf1uS.js.map → p-BDEe2hS1.js.map} +1 -1
- package/dist/components/{p-fASCuyDJ.js → p-CgRjoJ7j.js} +3 -3
- package/dist/components/{p-fASCuyDJ.js.map → p-CgRjoJ7j.js.map} +1 -1
- package/dist/components/{p-_h_4WkXb.js → p-D9WlXXTb.js} +3 -3
- package/dist/components/{p-_h_4WkXb.js.map → p-D9WlXXTb.js.map} +1 -1
- package/dist/components/{p-Dfb-OutP.js → p-DIorYzCL.js} +3 -3
- package/dist/components/{p-Dfb-OutP.js.map → p-DIorYzCL.js.map} +1 -1
- package/dist/components/{p-btCkXoB_.js → p-Dy0A4tjX.js} +3 -3
- package/dist/components/{p-btCkXoB_.js.map → p-Dy0A4tjX.js.map} +1 -1
- package/dist/components/{p-CT7vYQvP.js → p-FycGmteh.js} +3 -3
- package/dist/components/{p-CT7vYQvP.js.map → p-FycGmteh.js.map} +1 -1
- package/dist/components/p-cHn6O-Kf.js.map +1 -1
- package/dist/components/{p-BJOkCh_x.js → p-xpOcvUAn.js} +16 -4
- package/dist/components/p-xpOcvUAn.js.map +1 -0
- package/dist/docs.json +64 -17
- package/dist/esm/gb-avatar_44.entry.js +151 -101
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/reusableModels-cHn6O-Kf.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-2fe0e837.entry.js → p-c75bc3c7.entry.js} +2 -2
- package/dist/globuscomponents/p-c75bc3c7.entry.js.map +1 -0
- package/dist/globuscomponents/p-cHn6O-Kf.js.map +1 -1
- package/dist/globuscomponents/readme.md +2 -0
- package/dist/types/components/gb-table/gb-table.d.ts +10 -1
- package/dist/types/components.d.ts +32 -16
- package/dist/types/models/reusableModels.d.ts +2 -0
- package/package.json +1 -1
- package/dist/components/p-3Du3w-pS.js.map +0 -1
- package/dist/components/p-BAGZEYW2.js.map +0 -1
- package/dist/components/p-BJOkCh_x.js.map +0 -1
- package/dist/components/p-CBwlEMQ5.js.map +0 -1
- package/dist/globuscomponents/p-2fe0e837.entry.js.map +0 -1
|
@@ -4,64 +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
|
-
|
|
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' },
|
|
65
69
|
];
|
|
66
70
|
this.tableHeaderConfig = {
|
|
67
71
|
tableHeading: false,
|
|
@@ -154,22 +158,23 @@ export class GbTable {
|
|
|
154
158
|
pageSize: 10,
|
|
155
159
|
},
|
|
156
160
|
};
|
|
157
|
-
this.showActionsColumn =
|
|
161
|
+
this.showActionsColumn = false;
|
|
158
162
|
this.rowActions = [
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
163
|
+
// { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
|
|
164
|
+
// { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
|
|
165
|
+
// { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
|
|
162
166
|
];
|
|
163
167
|
this.dropdownOptions = [
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
168
|
+
// { label: 'View', action: 'view', icon: 'assets/view.svg', disabled: false },
|
|
169
|
+
// { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', disabled: false },
|
|
170
|
+
// { label: 'Delete', action: 'delete', icon: 'assets/delete-02.svg', disabled: true },
|
|
167
171
|
];
|
|
168
|
-
this.stickyFirstColumn =
|
|
169
|
-
this.stickyLastColumn =
|
|
172
|
+
this.stickyFirstColumn = false;
|
|
173
|
+
this.stickyLastColumn = false;
|
|
170
174
|
this.actionsType = 'none';
|
|
171
175
|
this.showCheckbox = true;
|
|
172
176
|
this.tableHeadColor = 'gray';
|
|
177
|
+
this.rowKey = 'id';
|
|
173
178
|
this.internalCurrentPage = 1;
|
|
174
179
|
this.internalPageSize = 10;
|
|
175
180
|
this.openRowIndex = null;
|
|
@@ -183,6 +188,7 @@ export class GbTable {
|
|
|
183
188
|
this.showFilterModal = false;
|
|
184
189
|
this.modalPosition = { x: 0, y: 0 };
|
|
185
190
|
this.showFilterModalInternal = false;
|
|
191
|
+
this.isFilterModalVisible = false;
|
|
186
192
|
this.internalLoading = false;
|
|
187
193
|
this.isDraggingModal = false;
|
|
188
194
|
this.dragOffset = { x: 0, y: 0 };
|
|
@@ -246,7 +252,7 @@ export class GbTable {
|
|
|
246
252
|
}
|
|
247
253
|
}
|
|
248
254
|
handleAction(action, row) {
|
|
249
|
-
this.
|
|
255
|
+
this.rowActionClicked.emit({ action, row });
|
|
250
256
|
}
|
|
251
257
|
renderCell(col, row) {
|
|
252
258
|
var _a, _b, _c;
|
|
@@ -279,6 +285,13 @@ export class GbTable {
|
|
|
279
285
|
const supporting = typeof col.supportingText === 'function' ? col.supportingText(row) : col.supportingText ? row[col.supportingText] : undefined;
|
|
280
286
|
return (h("div", { class: "text_and_supporting_text" }, h("div", { class: "primary" }, h("p", { class: "text-sm-medium" }, primary)), supporting && (h("div", { class: "supporting" }, h("p", { class: "text-xs-regular" }, supporting)))));
|
|
281
287
|
}
|
|
288
|
+
const value = this.getCellValue(col, row);
|
|
289
|
+
return h("p", { class: "body_text text-sm-regular" }, value);
|
|
290
|
+
}
|
|
291
|
+
getCellValue(col, row) {
|
|
292
|
+
if (col.value) {
|
|
293
|
+
return col.value(row);
|
|
294
|
+
}
|
|
282
295
|
return h("p", { class: "body_text text-sm-regular" }, row[col.key]);
|
|
283
296
|
}
|
|
284
297
|
emitPaginationDetails({ detail }) {
|
|
@@ -330,8 +343,8 @@ export class GbTable {
|
|
|
330
343
|
if (!col)
|
|
331
344
|
return this.data;
|
|
332
345
|
return [...this.data].sort((a, b) => {
|
|
333
|
-
let valA = a[this.sortKey];
|
|
334
|
-
let valB = b[this.sortKey];
|
|
346
|
+
let valA = col.value ? col.value(a) : a[this.sortKey];
|
|
347
|
+
let valB = col.value ? col.value(b) : b[this.sortKey];
|
|
335
348
|
// Null safety
|
|
336
349
|
if (valA == null)
|
|
337
350
|
return 1;
|
|
@@ -368,28 +381,34 @@ export class GbTable {
|
|
|
368
381
|
get isIndeterminate() {
|
|
369
382
|
return this.selectedRowIds.size > 0 && this.selectedRowIds.size < this.sortedData.length;
|
|
370
383
|
}
|
|
384
|
+
getRowId(row) {
|
|
385
|
+
if (typeof this.rowKey === 'function') {
|
|
386
|
+
return this.rowKey(row);
|
|
387
|
+
}
|
|
388
|
+
return row[this.rowKey];
|
|
389
|
+
}
|
|
371
390
|
toggleAll() {
|
|
372
391
|
if (this.allSelected) {
|
|
373
392
|
this.selectedRowIds = new Set();
|
|
374
393
|
}
|
|
375
394
|
else {
|
|
376
|
-
this.selectedRowIds = new Set(this.sortedData.map(row => row
|
|
395
|
+
this.selectedRowIds = new Set(this.sortedData.map(row => this.getRowId(row)));
|
|
377
396
|
}
|
|
378
397
|
this.emitSelection();
|
|
379
398
|
}
|
|
380
399
|
toggleRow(row) {
|
|
381
400
|
const updated = new Set(this.selectedRowIds);
|
|
382
|
-
if (updated.has(row
|
|
383
|
-
updated.delete(row
|
|
401
|
+
if (updated.has(this.getRowId(row))) {
|
|
402
|
+
updated.delete(this.getRowId(row));
|
|
384
403
|
}
|
|
385
404
|
else {
|
|
386
|
-
updated.add(row
|
|
405
|
+
updated.add(this.getRowId(row));
|
|
387
406
|
}
|
|
388
407
|
this.selectedRowIds = updated;
|
|
389
408
|
this.emitSelection();
|
|
390
409
|
}
|
|
391
410
|
emitSelection() {
|
|
392
|
-
const selected = this.sortedData.filter(row => this.selectedRowIds.has(row
|
|
411
|
+
const selected = this.sortedData.filter(row => this.selectedRowIds.has(this.getRowId(row)));
|
|
393
412
|
this.selectionChanged.emit(selected);
|
|
394
413
|
}
|
|
395
414
|
get displayedData() {
|
|
@@ -426,9 +445,8 @@ export class GbTable {
|
|
|
426
445
|
renderHeaderIcons(col) {
|
|
427
446
|
return (h(Fragment, null, col.sortable && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: {
|
|
428
447
|
transform: this.sortKey === col.key && this.sortDirection === 'desc' ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
429
|
-
opacity: this.sortKey === col.key ? '1' : '0.4',
|
|
430
448
|
transition: 'transform 0.2s ease',
|
|
431
|
-
} }, h("path", { d: "M7.99998 13.3332V2.6665M7.99998 13.3332C8.87837 13.3332 11.3333 9.99993 11.3333 9.99993M7.99998 13.3332C7.12158 13.3332 4.66663 9.9999 4.66663 9.9999", stroke:
|
|
449
|
+
} }, h("path", { d: "M7.99998 13.3332V2.6665M7.99998 13.3332C8.87837 13.3332 11.3333 9.99993 11.3333 9.99993M7.99998 13.3332C7.12158 13.3332 4.66663 9.9999 4.66663 9.9999", stroke: this.sortKey === col.key ? 'var(--color-icon, #4B5565)' : 'var(--color-icon-disabled, #808c9e)', "stroke-linecap": "round", "stroke-linejoin": "round" }))), col.helpIcon && (h("gb-help-tooltip", { "show-supporting-text": "true" }, h("p", { slot: "label" }, "This is a label"), h("p", { slot: "supporting_text" }, "This is a supporting text")))));
|
|
432
450
|
}
|
|
433
451
|
renderDesktopView() {
|
|
434
452
|
// compute table min-width to force horizontal scroll when > 5 columns
|
|
@@ -465,7 +483,7 @@ export class GbTable {
|
|
|
465
483
|
sticky_right: this.stickyLastColumn,
|
|
466
484
|
has_border: this.isScrollable,
|
|
467
485
|
[`table_header_${this.tableHeadColor}`]: true,
|
|
468
|
-
} }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(row
|
|
486
|
+
} }, h("div", { class: "empty_div" }))))), h("tbody", null, this.displayedData.map((row, rowIndex) => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: `table_detail ${this.showCheckbox ? 'checkbox' : ''}` }, h("gb-checkbox", { type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) }))), this.internalColumns
|
|
469
487
|
.filter(col => col.visible)
|
|
470
488
|
.map((col, index) => (h(Fragment, null, h("td", { style: { textAlign: col.align || 'left' }, class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, this.renderCell(col, row))))), this.showActionsColumn && (h("td", { class: { table_detail: true, actions_cell: true, sticky_right: this.stickyLastColumn, has_border: this.isScrollable }, style: { width: '50px' } }, h(Fragment, null, h("div", { class: "action_buttons" }, this.rowActions.map(action => (h(Fragment, null, action.type === 'dropdown' ? (h("gb-button", { id: `gb-table-trigger-${rowIndex}`, ref: el => (this.actionButtonRefs[rowIndex] = el), class: "dropdown_button", hierarchy: "tertiary_gray", size: "md", icon: "only", iconLeading: true, iconLeadingSwap: "assets/more-horizontal.svg", onClick: () => this.toggleDropdown(rowIndex) })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: () => this.handleAction(action.action, row) })))))), h(Fragment, null, this.openRowIndex === rowIndex && (h("gb-portal", { "anchor-id": `gb-table-trigger-${rowIndex}`, placement: this.dropdownPlacement, anchorEl: this.currentAnchorEl, boundaryEl: this.scrollContainer, dropdownHeight: requestAnimationFrame(() => this.dropdownRef.scrollHeight), open: true }, h("div", { class: "portal_dropdown_wrapper", ref: el => (this.dropdownRef = el) }, this.dropdownOptions.map(action => (h("gb-dropdown-items-with-shortcut", { icon: action.icon ? true : false, state: action.disabled ? StateEnum.Disabled : StateEnum.Default, label: action.label, "icon-src": action.icon, onClick: () => {
|
|
471
489
|
this.handleAction(action.action, row);
|
|
@@ -489,7 +507,7 @@ export class GbTable {
|
|
|
489
507
|
const topRight = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'top_right'; });
|
|
490
508
|
const bottomLeft = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_left'; });
|
|
491
509
|
const bottomRight = this.internalColumns.find(c => { var _a; return ((_a = c.mobile) === null || _a === void 0 ? void 0 : _a.position) === 'bottom_right'; });
|
|
492
|
-
return (h("div", { class: "mobile_card_wrapper", style: { paddingLeft: this.showCheckbox ? 'var(--spacing-4)' : '' } }, this.showCheckbox && (h("gb-checkbox", { style: { paddingTop: 'var(--spacing-6)' }, type: "checkbox", checked: this.selectedRowIds.has(row
|
|
510
|
+
return (h("div", { class: "mobile_card_wrapper", style: { paddingLeft: this.showCheckbox ? 'var(--spacing-4)' : '' } }, this.showCheckbox && (h("gb-checkbox", { style: { paddingTop: 'var(--spacing-6)' }, type: "checkbox", checked: this.selectedRowIds.has(this.getRowId(row)), indeterminate: false, size: "sm", onClick: () => this.toggleRow(row) })), h("div", { class: "mobile-card", onClick: () => this.emitRowData(row) }, h("div", { class: "mobile-row left" }, h("div", { class: "mobile-cell" }, h("p", { class: "top_left_text text-md-regular" }, topLeft && row[topLeft.key])), h("div", { class: "mobile-cell" }, h("p", { class: "bottom_left_text text-sm-regular" }, bottomLeft && row[bottomLeft.key]))), h("div", { class: "mobile-row right" }, h("div", { class: "mobile-cell right" }, h("p", { class: "top_right_text text-md-semi-bold" }, topRight && row[topRight.key])), h("div", { class: "mobile-cell right" }, bottomRight && this.renderCell(bottomRight, row))))));
|
|
493
511
|
})));
|
|
494
512
|
}
|
|
495
513
|
emitSearchValue(detail) {
|
|
@@ -524,31 +542,38 @@ export class GbTable {
|
|
|
524
542
|
}
|
|
525
543
|
openFilterModal() {
|
|
526
544
|
this.showFilterModalInternal = true;
|
|
545
|
+
requestAnimationFrame(() => {
|
|
546
|
+
this.isFilterModalVisible = true;
|
|
547
|
+
});
|
|
527
548
|
}
|
|
528
549
|
closeFilterModal() {
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
550
|
+
this.isFilterModalVisible = false;
|
|
551
|
+
setTimeout(() => {
|
|
552
|
+
this.showFilterModalInternal = false;
|
|
553
|
+
}, 300); // match CSS duration
|
|
554
|
+
}
|
|
555
|
+
onApplyFilters(detail) {
|
|
556
|
+
console.log(detail.detail);
|
|
557
|
+
this.applyFilters.emit(detail.detail);
|
|
558
|
+
this.showFilterModalInternal = false;
|
|
534
559
|
}
|
|
535
560
|
disconnectedCallback() {
|
|
536
561
|
window.removeEventListener('resize', this.checkViewport);
|
|
537
562
|
}
|
|
538
563
|
render() {
|
|
539
|
-
return (h("div", { key: '
|
|
564
|
+
return (h("div", { key: '410fa469f810ba42469b0af434d1a296b3f80ee5', class: `table_wrapper` }, h("gb-table-header", { key: 'dd04ea4e22d88bb4c6e2e22762e97a34df2c15d2', mode: this.tableHeaderConfig.datePickerMode, "table-heading": this.tableHeaderConfig.tableHeading, "table-heading-label": this.tableHeaderConfig.tableHeadingLabel, "show-search": this.tableHeaderConfig.showSearch, "show-date-filter": this.tableHeaderConfig.showDateFilter, "show-filter": this.tableHeaderConfig.showFilter, "show-export": this.tableHeaderConfig.showExport, "show-column-options": this.tableHeaderConfig.showColumnOptions, "show-refresh-button": this.tableHeaderConfig.showRefreshButton, "input-placeholder": this.tableHeaderConfig.inputPlaceholder, "date-picker-placeholder": this.tableHeaderConfig.datePickerPlaceholder, "show-entire-data": this.tableHeaderConfig.showEntireData, "show-layout-toggle": this.tableHeaderConfig.showLayoutToggle, "filter-state": this.tableHeaderConfig.filterState, "filter-count": this.tableHeaderConfig.filterCount, "export-button-state": this.tableHeaderConfig.exportButtonState, "pdf-state": this.tableHeaderConfig.pdfState, "csv-state": this.tableHeaderConfig.csvState, onInputValueChanged: this.emitSearchValue.bind(this), onDateChange: this.emitDateChange.bind(this), onColumnOptionsButtonClicked: this.columnOptionsButtonClicked(), onExportClicked: e => this.exportButtonClicked(e), onFilterButtonClicked: () => this.openFilterModal() }), this.showColumnsPanel && (h("div", { key: '0f9622994a4d44ee6e05c5e88b41ccbb264004df', class: "dialog", style: {
|
|
540
565
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
541
|
-
} }, h("div", { key: '
|
|
566
|
+
} }, h("div", { key: '40d85897ebb60e5d9c866226a3bc47ab0c59249e', class: "column-modal" }, h("div", { key: 'de6d609ecff8e8062dc245b224ec12cfaa478d6b', class: "modal_header" }, h("div", { key: 'c6de7754da86d99388e0d03b54de9f917b9bc15c', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'b22560ec5ac3e64aab9dda764b619e221e6332c8', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '44d5e861a86ae3e09fa342392aab8d2848b674ae', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '1f87107257cffb9176afca89ccbdd91f90ff4745', class: "content_wrapper" }, h("div", { key: '3ad5d12401605081df4ff9a59818e6c0b7d1bfaa', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
|
|
542
567
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
543
568
|
this.reorderColumns(this.draggedIndex, index);
|
|
544
569
|
}
|
|
545
570
|
this.draggedIndex = null;
|
|
546
571
|
} }, 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 => {
|
|
547
572
|
this.toggleColumn(e, col.key);
|
|
548
|
-
} })))), h("div", { key: '
|
|
573
|
+
} })))), h("div", { key: '3db0569c38add834acb923a6265e231c20b2c528', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '52977d71bf7b35b8b71438372065c4a14189c430', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: 'b13113f10d1eac46526000acf49878f4cb1e2a47', class: "filter_modal", onClose: e => {
|
|
549
574
|
e.stopPropagation();
|
|
550
575
|
this.closeFilterModal();
|
|
551
|
-
} }))), this.internalLoading ? (
|
|
576
|
+
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
552
577
|
// ✅ ALWAYS show loading when loading = true
|
|
553
578
|
h("table", null, h("thead", null, h("tr", { class: "table_head_row" }, this.showCheckbox && (h("th", { class: {
|
|
554
579
|
checkbox: true,
|
|
@@ -573,7 +598,7 @@ export class GbTable {
|
|
|
573
598
|
sticky_right: this.stickyLastColumn,
|
|
574
599
|
has_border: this.isScrollable,
|
|
575
600
|
[`table_header_${this.tableHeadColor}`]: true,
|
|
576
|
-
} }, h("div", { class: "empty_div" }))))), h("tbody", null, Array.from({ length: 5 }).map(
|
|
601
|
+
} }, h("div", { class: "empty_div" }))))), h("tbody", null, Array.from({ length: 5 }).map(_ => (h("tr", { class: "table_body" }, this.showCheckbox && (h("td", { class: "table_detail checkbox" }, h("gb-checkbox", { type: "checkbox", checked: this.allSelected, indeterminate: this.isIndeterminate, size: "sm", onClick: () => this.toggleAll() }))), this.internalColumns
|
|
577
602
|
.filter(col => col.visible)
|
|
578
603
|
.map((_col, index) => (h("td", { class: `table_detail ${this.stickyFirstColumn && index === 0 ? 'sticky_left' : ''} ${this.isScrollable ? 'has_border' : ''}` }, h("div", { class: "loader" }, h("div", { class: "skeleton skeleton-text" }))))), this.showActionsColumn && (h("td", { class: {
|
|
579
604
|
table_detail: true,
|
|
@@ -584,7 +609,7 @@ export class GbTable {
|
|
|
584
609
|
// ✅ No loading + no data = empty state
|
|
585
610
|
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" }))) : (
|
|
586
611
|
// ✅ Has data + not loading
|
|
587
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
612
|
+
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: 'f046e94681c0365b6acebeff99cac9d03bfe8d0f', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
|
|
588
613
|
}
|
|
589
614
|
static get is() { return "gb-table"; }
|
|
590
615
|
static get encapsulation() { return "shadow"; }
|
|
@@ -642,7 +667,7 @@ export class GbTable {
|
|
|
642
667
|
},
|
|
643
668
|
"getter": false,
|
|
644
669
|
"setter": false,
|
|
645
|
-
"defaultValue": "[\r\n { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },\r\n { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },\r\n { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, 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
|
|
670
|
+
"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 ]"
|
|
646
671
|
},
|
|
647
672
|
"data": {
|
|
648
673
|
"type": "unknown",
|
|
@@ -660,7 +685,7 @@ export class GbTable {
|
|
|
660
685
|
},
|
|
661
686
|
"getter": false,
|
|
662
687
|
"setter": false,
|
|
663
|
-
"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: '
|
|
688
|
+
"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 ]"
|
|
664
689
|
},
|
|
665
690
|
"tableHeaderConfig": {
|
|
666
691
|
"type": "unknown",
|
|
@@ -794,7 +819,7 @@ export class GbTable {
|
|
|
794
819
|
"setter": false,
|
|
795
820
|
"reflect": false,
|
|
796
821
|
"attribute": "show-actions-column",
|
|
797
|
-
"defaultValue": "
|
|
822
|
+
"defaultValue": "false"
|
|
798
823
|
},
|
|
799
824
|
"rowActions": {
|
|
800
825
|
"type": "unknown",
|
|
@@ -818,7 +843,7 @@ export class GbTable {
|
|
|
818
843
|
},
|
|
819
844
|
"getter": false,
|
|
820
845
|
"setter": false,
|
|
821
|
-
"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 ]"
|
|
846
|
+
"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 ]"
|
|
822
847
|
},
|
|
823
848
|
"dropdownOptions": {
|
|
824
849
|
"type": "unknown",
|
|
@@ -842,7 +867,7 @@ export class GbTable {
|
|
|
842
867
|
},
|
|
843
868
|
"getter": false,
|
|
844
869
|
"setter": false,
|
|
845
|
-
"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 ]"
|
|
870
|
+
"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 ]"
|
|
846
871
|
},
|
|
847
872
|
"stickyFirstColumn": {
|
|
848
873
|
"type": "boolean",
|
|
@@ -862,7 +887,7 @@ export class GbTable {
|
|
|
862
887
|
"setter": false,
|
|
863
888
|
"reflect": false,
|
|
864
889
|
"attribute": "sticky-first-column",
|
|
865
|
-
"defaultValue": "
|
|
890
|
+
"defaultValue": "false"
|
|
866
891
|
},
|
|
867
892
|
"stickyLastColumn": {
|
|
868
893
|
"type": "boolean",
|
|
@@ -882,7 +907,7 @@ export class GbTable {
|
|
|
882
907
|
"setter": false,
|
|
883
908
|
"reflect": false,
|
|
884
909
|
"attribute": "sticky-last-column",
|
|
885
|
-
"defaultValue": "
|
|
910
|
+
"defaultValue": "false"
|
|
886
911
|
},
|
|
887
912
|
"actionsType": {
|
|
888
913
|
"type": "string",
|
|
@@ -943,6 +968,26 @@ export class GbTable {
|
|
|
943
968
|
"reflect": false,
|
|
944
969
|
"attribute": "table-head-color",
|
|
945
970
|
"defaultValue": "'gray'"
|
|
971
|
+
},
|
|
972
|
+
"rowKey": {
|
|
973
|
+
"type": "string",
|
|
974
|
+
"mutable": false,
|
|
975
|
+
"complexType": {
|
|
976
|
+
"original": "string | ((row: any) => string)",
|
|
977
|
+
"resolved": "((row: any) => string) | string",
|
|
978
|
+
"references": {}
|
|
979
|
+
},
|
|
980
|
+
"required": false,
|
|
981
|
+
"optional": false,
|
|
982
|
+
"docs": {
|
|
983
|
+
"tags": [],
|
|
984
|
+
"text": ""
|
|
985
|
+
},
|
|
986
|
+
"getter": false,
|
|
987
|
+
"setter": false,
|
|
988
|
+
"reflect": false,
|
|
989
|
+
"attribute": "row-key",
|
|
990
|
+
"defaultValue": "'id'"
|
|
946
991
|
}
|
|
947
992
|
};
|
|
948
993
|
}
|
|
@@ -963,13 +1008,14 @@ export class GbTable {
|
|
|
963
1008
|
"internalColumns": {},
|
|
964
1009
|
"modalPosition": {},
|
|
965
1010
|
"showFilterModalInternal": {},
|
|
1011
|
+
"isFilterModalVisible": {},
|
|
966
1012
|
"internalLoading": {}
|
|
967
1013
|
};
|
|
968
1014
|
}
|
|
969
1015
|
static get events() {
|
|
970
1016
|
return [{
|
|
971
|
-
"method": "
|
|
972
|
-
"name": "
|
|
1017
|
+
"method": "rowActionClicked",
|
|
1018
|
+
"name": "rowActionClicked",
|
|
973
1019
|
"bubbles": true,
|
|
974
1020
|
"cancelable": true,
|
|
975
1021
|
"composed": true,
|
|
@@ -1072,6 +1118,21 @@ export class GbTable {
|
|
|
1072
1118
|
"resolved": "{ row: any; }",
|
|
1073
1119
|
"references": {}
|
|
1074
1120
|
}
|
|
1121
|
+
}, {
|
|
1122
|
+
"method": "applyFilters",
|
|
1123
|
+
"name": "applyFilters",
|
|
1124
|
+
"bubbles": true,
|
|
1125
|
+
"cancelable": true,
|
|
1126
|
+
"composed": true,
|
|
1127
|
+
"docs": {
|
|
1128
|
+
"tags": [],
|
|
1129
|
+
"text": ""
|
|
1130
|
+
},
|
|
1131
|
+
"complexType": {
|
|
1132
|
+
"original": "{\r\n filters: any;\r\n pagination: any;\r\n }",
|
|
1133
|
+
"resolved": "{ filters: any; pagination: any; }",
|
|
1134
|
+
"references": {}
|
|
1135
|
+
}
|
|
1075
1136
|
}];
|
|
1076
1137
|
}
|
|
1077
1138
|
static get watchers() {
|