globuswebcomponents 2.10.5 → 2.10.6
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 +73 -83
- 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 +74 -86
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/components/gb-table.js +74 -85
- package/dist/components/gb-table.js.map +1 -1
- package/dist/docs.json +5 -5
- package/dist/esm/gb-avatar_44.entry.js +73 -83
- 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-2c6570a9.entry.js → p-8dad7535.entry.js} +2 -2
- package/dist/globuscomponents/p-8dad7535.entry.js.map +1 -0
- package/dist/types/components/gb-table/gb-table.d.ts +0 -1
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/globuscomponents/p-2c6570a9.entry.js.map +0 -1
|
@@ -63,68 +63,68 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
63
63
|
this.applyFilters = createEvent(this, "applyFilters");
|
|
64
64
|
this.loading = false;
|
|
65
65
|
this.columns = [
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
66
|
+
{ key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },
|
|
67
|
+
{ key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },
|
|
68
|
+
{ key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, supportingText: row => row.role, mobile: { position: 'top_right' } },
|
|
69
|
+
{ key: 'role', label: 'Role' },
|
|
70
|
+
{ key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },
|
|
71
|
+
{
|
|
72
|
+
key: 'status',
|
|
73
|
+
label: 'Status',
|
|
74
|
+
cellComponent: 'gb-badge',
|
|
75
|
+
cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),
|
|
76
|
+
cellSlots: {
|
|
77
|
+
default: {
|
|
78
|
+
tag: 'p',
|
|
79
|
+
content: row => row.status,
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
83
|
];
|
|
84
84
|
this.data = [
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
85
|
+
// {
|
|
86
|
+
// id: '#30011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
|
|
87
|
+
// date: 'Jan 1, 2022',
|
|
88
|
+
// name: 'Emma Johnson',
|
|
89
|
+
// role: 'Frontend Developer',
|
|
90
|
+
// level: 'Today',
|
|
91
|
+
// customer: 'John Doe',
|
|
92
|
+
// amount: '$120.00',
|
|
93
|
+
// status: 'Completed',
|
|
94
|
+
// },
|
|
95
|
+
// { id: '#3002', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
96
|
+
// { id: '#3003', date: new Date(), name: 'Liam Smith', role: 'Frontend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
97
|
+
// { id: '#3004', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
98
|
+
// { id: '#3005', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
99
|
+
// { id: '#3006', date: new Date(), name: 'Liam Smith', role: 'Backend Developer', level: 'Today', customer: 'Sarah Wilson', amount: '$85.50', status: 'Pending' },
|
|
100
|
+
{ id: '#3003', date: 'Jan 3, 2022', name: 'Olivia Brown', role: 'UI Designer', level: 'Today', customer: 'Michael Lee', amount: '$230.75', status: 'Cancelled' },
|
|
101
|
+
{ id: '#3004', date: 'Jan 4, 2022', name: 'Noah Davis', role: 'DevOps Engineer', level: 'Today', customer: 'Emily Clark', amount: '$59.99', status: 'Completed' },
|
|
102
|
+
{ id: '#3005', date: 'Jan 5, 2022', name: 'Ava Martinez', role: 'Product Manager', level: 'Today', customer: 'Daniel Harris', amount: '$410.00', status: 'Pending' },
|
|
103
|
+
{ id: '#3006', date: 'Jan 6, 2022', name: 'William Garcia', role: 'QA Engineer', level: 'Today', customer: 'Sophia Lewis', amount: '$150.20', status: 'Completed' },
|
|
104
|
+
{ id: '#3007', date: 'Jan 7, 2022', name: 'Isabella Rodriguez', role: 'Business Analyst', level: 'Today', customer: 'James Walker', amount: '$78.40', status: 'Pending' },
|
|
105
|
+
{ id: '#3008', date: 'Jan 8, 2022', name: 'James Wilson', role: 'Fullstack Developer', level: 'Today', customer: 'Mia Hall', amount: '$300.00', status: 'Completed' },
|
|
106
|
+
{ id: '#3009', date: 'Jan 9, 2022', name: 'Sophia Anderson', role: 'UX Researcher', level: 'Today', customer: 'Benjamin Allen', amount: '$95.60', status: 'Cancelled' },
|
|
107
|
+
{ id: '#3010', date: 'Jan 10, 2022', name: 'Benjamin Thomas', role: 'Mobile Developer', level: 'Today', customer: 'Charlotte Young', amount: '$210.10', status: 'Completed' },
|
|
108
|
+
{ id: '#3011', date: 'Jan 11, 2022', name: 'Mia Taylor', role: 'Data Analyst', level: 'Today', customer: 'Lucas King', amount: '$180.00', status: 'Pending' },
|
|
109
|
+
{ id: '#3012', date: 'Jan 12, 2022', name: 'Lucas Moore', role: 'Cloud Engineer', level: 'Today', customer: 'Amelia Scott', amount: '$420.75', status: 'Completed' },
|
|
110
|
+
{ id: '#3013', date: 'Jan 13, 2022', name: 'Charlotte Jackson', role: 'Security Engineer', level: 'Today', customer: 'Elijah Green', amount: '$65.90', status: 'Cancelled' },
|
|
111
|
+
{ id: '#3014', date: 'Jan 14, 2022', name: 'Elijah Martin', role: 'Technical Lead', level: 'Today', customer: 'Harper Adams', amount: '$510.30', status: 'Completed' },
|
|
112
|
+
{ id: '#3015', date: 'Jan 15, 2022', name: 'Amelia Lee', role: 'Scrum Master', level: 'Today', customer: 'Alexander Baker', amount: '$99.99', status: 'Pending' },
|
|
113
|
+
{ id: '#3016', date: 'Jan 16, 2022', name: 'Harper Perez', role: 'Frontend Developer', level: 'Today', customer: 'Ella Nelson', amount: '$275.45', status: 'Completed' },
|
|
114
|
+
{ id: '#3017', date: 'Jan 17, 2022', name: 'Alexander White', role: 'Backend Developer', level: 'Today', customer: 'Matthew Carter', amount: '$340.00', status: 'Pending' },
|
|
115
|
+
{ id: '#3018', date: 'Jan 18, 2022', name: 'Ella Harris', role: 'UI Designer', level: 'Today', customer: 'Avery Mitchell', amount: '$88.80', status: 'Completed' },
|
|
116
|
+
{ id: '#3019', date: 'Jan 19, 2022', name: 'Matthew Clark', role: 'DevOps Engineer', level: 'Today', customer: 'Evelyn Perez', amount: '$190.25', status: 'Cancelled' },
|
|
117
|
+
{ id: '#3020', date: 'Jan 20, 2022', name: 'Avery Lewis', role: 'Product Manager', level: 'Today', customer: 'Henry Roberts', amount: '$600.00', status: 'Completed' },
|
|
118
|
+
{ id: '#3021', date: 'Jan 21, 2022', name: 'Evelyn Walker', role: 'QA Engineer', level: 'Today', customer: 'Luna Turner', amount: '$72.30', status: 'Pending' },
|
|
119
|
+
{ id: '#3022', date: 'Jan 22, 2022', name: 'Henry Hall', role: 'Business Analyst', level: 'Today', customer: 'Jack Phillips', amount: '$310.40', status: 'Completed' },
|
|
120
|
+
{ id: '#3023', date: 'Jan 23, 2022', name: 'Luna Allen', role: 'Fullstack Developer', level: 'Today', customer: 'Sofia Campbell', amount: '$145.00', status: 'Cancelled' },
|
|
121
|
+
{ id: '#3024', date: 'Jan 24, 2022', name: 'Jack Young', role: 'UX Researcher', level: 'Today', customer: 'David Parker', amount: '$260.70', status: 'Completed' },
|
|
122
|
+
{ id: '#3025', date: 'Jan 25, 2022', name: 'Sofia Hernandez', role: 'Mobile Developer', level: 'Today', customer: 'Grace Evans', amount: '$89.10', status: 'Pending' },
|
|
123
|
+
{ id: '#3026', date: 'Jan 26, 2022', name: 'David King', role: 'Data Analyst', level: 'Today', customer: 'Samuel Edwards', amount: '$410.90', status: 'Completed' },
|
|
124
|
+
{ id: '#3027', date: 'Jan 27, 2022', name: 'Grace Wright', role: 'Cloud Engineer', level: 'Today', customer: 'Chloe Collins', amount: '$130.55', status: 'Cancelled' },
|
|
125
|
+
{ id: '#3028', date: 'Jan 28, 2022', name: 'Samuel Scott', role: 'Security Engineer', level: 'Today', customer: 'Victoria Stewart', amount: '$555.00', status: 'Completed' },
|
|
126
|
+
{ id: '#3029', date: 'Jan 29, 2022', name: 'Chloe Green', role: 'Technical Lead', level: 'Today', customer: 'Nathan Morris', amount: '$205.25', status: 'Pending' },
|
|
127
|
+
{ id: '#3030', date: 'Jan 30, 2022', name: 'Nathan Adams', role: 'Scrum Master', level: 'Today', customer: 'Zoe Rogers', amount: '$320.80', status: 'Completed' },
|
|
128
128
|
];
|
|
129
129
|
this.tableHeaderConfig = {
|
|
130
130
|
tableHeading: false,
|
|
@@ -193,11 +193,10 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
193
193
|
this.draggedIndex = null;
|
|
194
194
|
this.handlePageChange = ({ detail }) => {
|
|
195
195
|
const { pageNumber, pageSize } = detail;
|
|
196
|
+
// Update these state variables to trigger a re-render
|
|
196
197
|
this.internalPageSize = pageSize;
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
198
|
+
this.internalCurrentPage = pageNumber;
|
|
199
|
+
if (this.paginationConfig.paginationMode === 'external') {
|
|
201
200
|
this.pageItemSelected.emit(detail);
|
|
202
201
|
}
|
|
203
202
|
};
|
|
@@ -414,12 +413,11 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
414
413
|
this.selectionChanged.emit(selected);
|
|
415
414
|
}
|
|
416
415
|
get displayedData() {
|
|
417
|
-
if (!this.paginationConfig) {
|
|
418
|
-
return this.sortedData;
|
|
419
|
-
}
|
|
420
|
-
if (this.paginationConfig.paginationMode === 'external') {
|
|
421
|
-
return this.sortedData;
|
|
416
|
+
if (!this.paginationConfig || this.paginationConfig.paginationMode === 'external') {
|
|
417
|
+
return this.sortedData; // In external mode, we show what the parent sent
|
|
422
418
|
}
|
|
419
|
+
// INTERNAL MODE:
|
|
420
|
+
// This calculation must run every time internalCurrentPage changes
|
|
423
421
|
const start = (this.internalCurrentPage - 1) * this.internalPageSize;
|
|
424
422
|
const end = start + this.internalPageSize;
|
|
425
423
|
return this.sortedData.slice(start, end);
|
|
@@ -429,9 +427,7 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
429
427
|
if (!this.paginationConfig)
|
|
430
428
|
return 1;
|
|
431
429
|
const pageSize = this.internalPageSize || 1;
|
|
432
|
-
const totalItems = this.paginationConfig.paginationMode === 'internal'
|
|
433
|
-
? this.sortedData.length
|
|
434
|
-
: ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
430
|
+
const totalItems = this.paginationConfig.paginationMode === 'internal' ? this.sortedData.length : ((_a = this.paginationConfig.totalItems) !== null && _a !== void 0 ? _a : 0);
|
|
435
431
|
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
436
432
|
}
|
|
437
433
|
onDataChange() {
|
|
@@ -486,11 +482,6 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
486
482
|
}
|
|
487
483
|
this.initializeColumns(newCols);
|
|
488
484
|
}
|
|
489
|
-
handlePaginationChange(newValue, oldValue) {
|
|
490
|
-
if (newValue.pageSize !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.pageSize)) {
|
|
491
|
-
this.internalCurrentPage = 1;
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
485
|
emitRowData(row) {
|
|
495
486
|
this.rowClicked.emit(row);
|
|
496
487
|
}
|
|
@@ -554,16 +545,16 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
554
545
|
window.removeEventListener('resize', this.checkViewport);
|
|
555
546
|
}
|
|
556
547
|
render() {
|
|
557
|
-
return (h("div", { key: '
|
|
548
|
+
return (h("div", { key: '07df297969e67ed22e9d2d7e8c40fd5a6dac6707', class: `table_wrapper` }, h("gb-table-header", { key: 'd5993f9be3b3a5020faf6623cb87fa7343a13e23', 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: 'd253eeebb0b8719fa97b40ef29fbbefcc272adaf', class: "dialog", style: {
|
|
558
549
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
559
|
-
} }, h("div", { key: '
|
|
550
|
+
} }, h("div", { key: '0dbd61a4c32db9438e75ee572eae38ee5c86363b', class: "column-modal" }, h("div", { key: '68aa572c50074639ec5171ae14414d9ac6dc346d', class: "modal_header" }, h("div", { key: 'eb4aecd8a24bb9639687cceb67d5b8314d5398bf', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'cc9256ceb87d3ad3b543018c0d4527c06d4c8f2a', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: 'aad187ffbc9feb260242ee2c44d3d0ee848980e4', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '4ee5788dbfae79213a80285c82f5cff1c489d846', class: "content_wrapper" }, h("div", { key: '7d10619ad0bf91cf3a8ad3adf2ff3da256999ec5', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
|
|
560
551
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
561
552
|
this.reorderColumns(this.draggedIndex, index);
|
|
562
553
|
}
|
|
563
554
|
this.draggedIndex = null;
|
|
564
555
|
} }, 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 => {
|
|
565
556
|
this.toggleColumn(e, col.key);
|
|
566
|
-
} })))), h("div", { key: '
|
|
557
|
+
} })))), h("div", { key: 'aa4f1d22ced84032f6eee15ee122c9c04a27b85e', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '827e7f937361246a0abb7216b81a1277578e84c2', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '0e0db3a616282d8132d56ca2627da014222d3467', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
|
|
567
558
|
e.stopPropagation();
|
|
568
559
|
this.closeFilterModal();
|
|
569
560
|
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
@@ -602,13 +593,12 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
602
593
|
// ✅ No loading + no data = empty state
|
|
603
594
|
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" }))) : (
|
|
604
595
|
// ✅ Has data + not loading
|
|
605
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
596
|
+
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '8fffdd4354947793a3c0f62c6d2687e64270b828', "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) }))));
|
|
606
597
|
}
|
|
607
598
|
static get watchers() { return {
|
|
608
599
|
"data": ["onDataChange"],
|
|
609
600
|
"loading": ["onLoadingChange"],
|
|
610
|
-
"columns": ["validateMobilePositions"]
|
|
611
|
-
"paginationConfig": ["handlePaginationChange"]
|
|
601
|
+
"columns": ["validateMobilePositions"]
|
|
612
602
|
}; }
|
|
613
603
|
static get style() { return gbTableCss; }
|
|
614
604
|
}, [257, "gb-table", {
|
|
@@ -648,8 +638,7 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
648
638
|
}, [[9, "resize", "checkViewport"]], {
|
|
649
639
|
"data": ["onDataChange"],
|
|
650
640
|
"loading": ["onLoadingChange"],
|
|
651
|
-
"columns": ["validateMobilePositions"]
|
|
652
|
-
"paginationConfig": ["handlePaginationChange"]
|
|
641
|
+
"columns": ["validateMobilePositions"]
|
|
653
642
|
}]);
|
|
654
643
|
function defineCustomElement$1() {
|
|
655
644
|
if (typeof customElements === "undefined") {
|