globuswebcomponents 2.13.3 → 2.13.5

package/dist/collection/components/gb-table/gb-table.js

@@ -14,12 +14,26 @@ export class GbTable {
         //   helpIcon: true,
         //   searchable: true,
         //   hasAvatar: true,
-        //   cellAvatar: {
-        //     // image: '',
-        //     slots: {
-        //       // initials: (row) => row.name.split(' ').map((nm: string) => nm.charAt(0)),
-        //       image: (row) => row.image,
-        //     },
+        //   cellComponent: 'gb-avatar-label-group',
+        //   cellProps: (row) => ({
+        //     size: 'sm',
+        //     text: true
+        //   }),
+        //   cellSlots: {
+        //     named:{ 
+        //       name: {
+        //         tag: 'p',
+        //         content: row => row.name
+        //       },
+        //       initials: {
+        //         tag: 'h1',
+        //         content: row => row.name.split(' ').map((nm) => nm.charAt(0))
+        //       },
+        //       supporting_text: {
+        //         tag: 'p',
+        //         content: row => row.role
+        //       }
+        //     }
         //   },
         //   mobile: { position: 'top_right' },
         // },
@@ -1083,16 +1097,16 @@ export class GbTable {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: '651fb446928f8d526665593e17f5647d7859cbaa', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: 'c90f298f13fc880eb5cf4497b9feab1cb12f78b8', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '94c0c6ec6307e15c16a470796d1ce034dba52d59', 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": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "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(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: 'fa723554418f473e2decf515fbcc8959235f6d7a', class: "dialog", style: {
+        return (h("div", { key: '0c7ccb328b5c266eb73a32d768aadd86423317e2', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: '4a552625d1e82214d5af06c65ffd5de6cbb080d3', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '535daeba177575896a86206cd17dc05c8365c496', 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": Object.keys(this.appliedFilterValues).length > 0 ? 'applied' : 'default', "filter-count": Object.keys(this.appliedFilterValues).length, "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(), onRefreshButtonClicked: () => this.onRefreshButtonClicked(), onLayoutButtonClicked: e => this.switchTableLayout(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: '69b20ea7d62161518c73507dc8a4aa7e66a8a8a5', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '5ceae94f847b6af8b8b58058dddbf108abc71315', class: "column-modal" }, h("div", { key: 'aad941b174bb787c0c3848e6710372782890b7df', class: "modal_header" }, h("div", { key: 'cf44e011df25cb7d0add253fc9b5e43f7c8eb7aa', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '69fa2bd3cbfdeaa1b8adc2964d9d0c3232b961d1', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: 'a3694243c2c87f763c94fb45eb67a127d78d87cb', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: 'f5d9a0999e889b84cb46ce16c2f11311439a5640', class: "content_wrapper" }, h("div", { key: '10d2ed9be4d886450bb93b409eb5f335b14cd4a9', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
+            } }, h("div", { key: '9f844b0f13998c7037f8f8934ba51734ce79660b', class: "column-modal" }, h("div", { key: '7abfef35d1f9bd4c0dec4ec03173f7d14e8ef5fe', class: "modal_header" }, h("div", { key: 'ca64268dfb66e2a8fdcb4e8a0b4501c25b15395a', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '6e7ccc67bbcb932d42a76023b231726629ef1044', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: 'f1d2ff792e20a6bc989e19a631209a08c48927b9', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '0d808968f3ff34f4ac56c17bb21854efb25e8046', class: "content_wrapper" }, h("div", { key: 'c705c2e78bb969a0e5facc12a8cbf996c41f7a09', class: "modal_content" }, this.internalColumns.map((col, index) => (h("div", { class: "column_option", draggable: true, onDragStart: () => (this.draggedIndex = index), onDragOver: e => e.preventDefault(), onDrop: () => {
                 if (this.draggedIndex !== null && this.draggedIndex !== index) {
                     this.reorderColumns(this.draggedIndex, index);
                 }
                 this.draggedIndex = null;
             } }, 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 => {
                 this.toggleColumn(e, col.key);
-            } })))), h("div", { key: 'f7d0bc919555a2201c55a4e39e631751f9ae9ee1', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: '20e005701dbf2cfce4a048f2e3c05dcfebae6227', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '730563f0c778f5a0d13316f3fb8226f980405d08', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
+            } })))), h("div", { key: '782029c08ed18d7bfcd92a3cc78761fabcc96578', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: '7d0aa98bbb83a0da45d2a84f8ee548632007eb2b', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '83215cc4ca5c4336ab4eedec0cba8277593219f7', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
@@ -1139,7 +1153,7 @@ export class GbTable {
                 ? this.renderDesktopView()
                 : this.currentTableLayout === 'grid'
                     ? this.renderGridView()
-                    : null)), this.paginationConfig && (h("div", { key: '3f30889d2d1221ff3f63c033d79a5833b47f52dd', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: '034fbde168399b4b16a9680e60bb7076489f4854', "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) }))), this.showToast && (h("gb-toast", { key: 'e00c6746cbb71435ccf669ae47c07448a75ccbef', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
+                    : null)), this.paginationConfig && (h("div", { key: 'c14fdccf1ed45eac188ec98b5a4b82d6acaed2a7', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: '3d4a6e5d40265017afa74db444d404e7e507c484', "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) }))), this.showToast && (h("gb-toast", { key: '91d8e0c5bfd0c030c341c82b0fdaae338fa95cc1', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
     }
     static get is() { return "gb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -1197,7 +1211,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "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    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   searchable: true,\r\n    //   hasAvatar: true,\r\n    //   cellAvatar: {\r\n    //     // image: '',\r\n    //     slots: {\r\n    //       // initials: (row) => row.name.split(' ').map((nm: string) => nm.charAt(0)),\r\n    //       image: (row) => row.image,\r\n    //     },\r\n    //   },\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role', searchable: true },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\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  ]"
+                "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    // {\r\n    //   key: 'name',\r\n    //   label: 'Name',\r\n    //   sortable: true,\r\n    //   sortType: 'string',\r\n    //   helpIcon: true,\r\n    //   searchable: true,\r\n    //   hasAvatar: true,\r\n    //   cellComponent: 'gb-avatar-label-group',\r\n    //   cellProps: (row) => ({\r\n    //     size: 'sm',\r\n    //     text: true\r\n    //   }),\r\n    //   cellSlots: {\r\n    //     named:{ \r\n    //       name: {\r\n    //         tag: 'p',\r\n    //         content: row => row.name\r\n    //       },\r\n    //       initials: {\r\n    //         tag: 'h1',\r\n    //         content: row => row.name.split(' ').map((nm) => nm.charAt(0))\r\n    //       },\r\n    //       supporting_text: {\r\n    //         tag: 'p',\r\n    //         content: row => row.role\r\n    //       }\r\n    //     }\r\n    //   },\r\n    //   mobile: { position: 'top_right' },\r\n    // },\r\n    // { key: 'role', label: 'Role', searchable: true },\r\n    // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },\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  ]"
             },
             "data": {
                 "type": "unknown",