globuswebcomponents 2.10.6 → 2.10.7
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 +65 -93
- package/dist/collection/components/gb-table/gb-table.js +70 -101
- package/dist/collection/components/gb-table/gb-table.js.map +1 -1
- package/dist/components/gb-table.js +65 -93
- package/dist/components/gb-table.js.map +1 -1
- package/dist/docs.json +8 -26
- package/dist/esm/gb-avatar_44.entry.js +65 -93
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-8dad7535.entry.js → p-8251390e.entry.js} +2 -2
- package/dist/globuscomponents/p-8251390e.entry.js.map +1 -0
- package/dist/types/components.d.ts +4 -22
- package/package.json +1 -1
- package/dist/globuscomponents/p-8dad7535.entry.js.map +0 -1
|
@@ -63,98 +63,69 @@ 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
|
-
this.tableHeaderConfig = {
|
|
130
|
-
tableHeading: false,
|
|
131
|
-
tableHeadingLabel: 'Suspicious outflows',
|
|
132
|
-
showDateFilter: true,
|
|
133
|
-
showFilter: true,
|
|
134
|
-
showColumnOptions: true,
|
|
135
|
-
showSearch: true,
|
|
136
|
-
showExport: true,
|
|
137
|
-
showRefreshButton: false,
|
|
138
|
-
datePickerMode: 'range',
|
|
139
|
-
inputPlaceholder: 'Transaction reference',
|
|
140
|
-
};
|
|
141
|
-
this.paginationConfig = {
|
|
142
|
-
paginationMode: 'internal',
|
|
143
|
-
entriesDropdownMenuPosition: 'top',
|
|
144
|
-
currentPage: 1,
|
|
145
|
-
pageSize: 10,
|
|
146
|
-
};
|
|
147
|
-
this.emptyStateConfig = {
|
|
148
|
-
size: 'md',
|
|
149
|
-
background: true,
|
|
150
|
-
backgroundType: 'grid',
|
|
151
|
-
mainText: 'No data available',
|
|
152
|
-
supportingText: 'Try adjusting your filters or check back later.',
|
|
153
|
-
color: 'gray',
|
|
154
|
-
illustrationIcon: 'assets/alert-circle.svg',
|
|
155
|
-
illustrationStyle: 'box',
|
|
156
|
-
theme: 'light',
|
|
157
|
-
};
|
|
158
129
|
this.showActionsColumn = true;
|
|
159
130
|
this.rowActions = [
|
|
160
131
|
// { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
|
|
@@ -420,6 +391,7 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
420
391
|
// This calculation must run every time internalCurrentPage changes
|
|
421
392
|
const start = (this.internalCurrentPage - 1) * this.internalPageSize;
|
|
422
393
|
const end = start + this.internalPageSize;
|
|
394
|
+
console.log(this.sortedData.slice(start, end));
|
|
423
395
|
return this.sortedData.slice(start, end);
|
|
424
396
|
}
|
|
425
397
|
get totalPages() {
|
|
@@ -545,16 +517,16 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
545
517
|
window.removeEventListener('resize', this.checkViewport);
|
|
546
518
|
}
|
|
547
519
|
render() {
|
|
548
|
-
return (h("div", { key: '
|
|
520
|
+
return (h("div", { key: '4fa6ff6724d6807868bcd631c01c4fcd4c3076c7', class: `table_wrapper` }, h("gb-table-header", { key: 'f759266620da3b0a28aa97dfe6a4fc86b3e2b470', 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: '31eb9725068a7960966c6a6b8860ab0454520893', class: "dialog", style: {
|
|
549
521
|
transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
|
|
550
|
-
} }, h("div", { key: '
|
|
522
|
+
} }, h("div", { key: 'e784c2ade77f50a5ea019f10e2a376aea51eccd5', class: "column-modal" }, h("div", { key: 'c640c202c05ed38a923476801c8cfefb99c6a114', class: "modal_header" }, h("div", { key: 'b5c44b795c684b23405d1e957c15fec9fd52605c', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '5bed673bd118262fb9dab57fcc084103cba0b841', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '3b59163c1a5a7208cd39f12ad1eff0fe533dca18', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '3f58970b56175e2fcacd921b0c2c42af46433c76', class: "content_wrapper" }, h("div", { key: '5a6dd8d10012b991009868c63fb11b16d0d1beff', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
|
|
551
523
|
if (this.draggedIndex !== null && this.draggedIndex !== index) {
|
|
552
524
|
this.reorderColumns(this.draggedIndex, index);
|
|
553
525
|
}
|
|
554
526
|
this.draggedIndex = null;
|
|
555
527
|
} }, 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 => {
|
|
556
528
|
this.toggleColumn(e, col.key);
|
|
557
|
-
} })))), h("div", { key: '
|
|
529
|
+
} })))), h("div", { key: '3bcaafefbb890f4fce646189a6c1b16630300850', class: "modal-actions" })))))), this.showFilterModalInternal && (h("div", { key: '4e676a43ee3149de0a7f695f2644eb9cabc1a4db', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '26fc8c94ea318218e9c98d1cfa68971d73671630', class: "filter_modal", filterConfig: this.filterConfig, onClose: e => {
|
|
558
530
|
e.stopPropagation();
|
|
559
531
|
this.closeFilterModal();
|
|
560
532
|
}, onApplyFilters: e => this.onApplyFilters(e) }))), this.internalLoading ? (
|
|
@@ -593,7 +565,7 @@ const GbTable$1 = /*@__PURE__*/ proxyCustomElement(class GbTable extends H {
|
|
|
593
565
|
// ✅ No loading + no data = empty state
|
|
594
566
|
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" }))) : (
|
|
595
567
|
// ✅ Has data + not loading
|
|
596
|
-
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '
|
|
568
|
+
h(Fragment, null, this.isMobile ? this.renderMobileView() : this.renderDesktopView())), this.paginationConfig && this.data.length > 0 && (h("gb-pagination", { key: '08668a3a60f9a3b1f95c504c29ba6413165d7d7f', "entries-dropdown-menu-position": this.paginationConfig.entriesDropdownMenuPosition, "page-size": this.paginationConfig.paginationMode === 'internal' ? this.internalPageSize : this.paginationConfig.pageSize, "current-page": this.paginationConfig.paginationMode === 'internal' ? this.internalCurrentPage : this.paginationConfig.currentPage, "total-pages": this.totalPages, onPageItemSelected: this.handlePageChange.bind(this) }))));
|
|
597
569
|
}
|
|
598
570
|
static get watchers() { return {
|
|
599
571
|
"data": ["onDataChange"],
|