globuswebcomponents 2.17.4 → 2.17.5

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

@@ -494,10 +494,10 @@ export class GbTable {
         };
         this.showActionsColumn = true;
         this.rowActions = [
-            // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
-            // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
-            // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
-            { action: 'edit', type: 'custom' },
+        // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },
+        // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },
+        // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },
+        // { action: 'edit', type: 'custom' },
         ];
         this.dropdownOptions = [
         // { label: 'Download invalid', action: 'view', icon: 'assets/view.svg', disabled: false },
@@ -594,7 +594,7 @@ export class GbTable {
         }
     }
     async handleAction(action, row) {
-        console.log('Action clicked:', action, row);
+        // console.log('Action clicked:', action, row);
         this.rowActionClicked.emit({ action, row });
     }
     renderCell(col, row) {
@@ -858,6 +858,23 @@ export class GbTable {
         const splitNames = name.split(' ');
         return splitNames.map((nm) => nm.charAt(0));
     }
+    renderCustomAction(row) {
+        if (!this.renderCustomActions)
+            return h("slot", { name: "row_actions" });
+        const rowId = String(this.getRowId(row));
+        return (h("div", { key: `custom-action-${rowId}`, class: "custom_action_slot", ref: el => {
+                if (!el)
+                    return;
+                // Re-mount only when this container is bound to a different row.
+                // Prevents tearing down (and resetting) the host-framework component
+                // on unrelated re-renders (sort, resize, dropdown open, etc.).
+                if (el.dataset.rowKey === rowId)
+                    return;
+                el.dataset.rowKey = rowId;
+                el.innerHTML = '';
+                this.renderCustomActions(el, row, (action) => this.handleAction(action, row));
+            } }));
+    }
     renderDesktopView() {
         // compute table min-width to force horizontal scroll when > 5 columns
         const defaultColWidth = 160;
@@ -901,7 +918,7 @@ export class GbTable {
             .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: e => {
                 e.stopPropagation();
                 this.toggleDropdown(rowIndex);
-            } })) : action.type === 'custom' ? (h("slot", { name: "row_actions" })) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: e => {
+            } })) : action.type === 'custom' ? (this.renderCustomAction(row)) : (h("gb-button", { hierarchy: "tertiary_gray", size: "md", icon: "only", destructive: action.destructive, iconLeading: true, iconLeadingSwap: action.icon, onClick: e => {
                 e.stopPropagation();
                 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: () => {
@@ -1122,16 +1139,16 @@ export class GbTable {
         window.removeEventListener('resize', this.checkViewport);
     }
     render() {
-        return (h("div", { key: '7e37e1decada263824af90c8cff25cdc398c12d2', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: '1a61eb8ef7a06e3634a1d88f81549cef8d0d19ba', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '127fd89235313623b7bd1e7f7fc1e7f802a9f45d', type: this.tableHeaderConfig.type, 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), onTableControlClicked: e => this.emitTableContolClickedEvent(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: '252d90ee540b90f0776b04ff3580fe92883b5eda', class: "dialog", style: {
+        return (h("div", { key: 'fff578632318ce951474e8e0b017ed34d007b1cc', class: `table_wrapper ${this.currentTableLayout}` }, this.tableHeaderConfig && (h("div", { key: '0bfb29c446aba3674c2a22d125d656e0ff60b905', class: `table-header ${this.currentTableLayout}` }, h("gb-table-header", { key: '5b3b14ae8bd63048508b409296701912dd6266ef', type: this.tableHeaderConfig.type, 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), onTableControlClicked: e => this.emitTableContolClickedEvent(e) }))), this.showColumnsPanel && this.columns.length > 0 && (h("div", { key: 'ab47e5d1fe46f9ad4af7cf94da064dc5392a9741', class: "dialog", style: {
                 transform: `translate(${this.modalPosition.x}px, ${this.modalPosition.y}px)`,
-            } }, h("div", { key: '53ed04f9b2d40d5031c160e3fce76c80a995b3f3', class: "column-modal" }, h("div", { key: '1b481f9a462812fa6c9252043c456a0697164ff9', class: "modal_header" }, h("div", { key: 'd090fdf401483a4e52ef58f8c73990fe70421d31', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: '84c7223322fa17b5cea1aeaa89f37a0450ff0563', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '35385dbd7a801fa62534c5a9996a48f6ec2290c4', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '6db9081a50ee72b78bb13f8fa8bdf944cc3f315d', class: "content_wrapper" }, h("div", { key: '3864f3180ce0883958e220ad88e19303db3c0b73', 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: '6d2f489e5a60e1de41389b2c59a234b329b3e9e4', class: "column-modal" }, h("div", { key: '15d3b2d539e1d89e08e87f711e59d1c0a27c1cc0', class: "modal_header" }, h("div", { key: '9e82dd8cbbba886000589a8f22d9e2a4dd99b15e', class: "modal_header_content", onPointerDown: this.onModalPointerDown }, h("h4", { key: 'a21373b0a6930722cabd74384252476fe717a847', class: "heading display-xs-semi-bold" }, "Column Options"), h("gb-button-close", { key: '2bbd2f88dac95f3bc6545646c02cfc1074f95347', class: "close_button", color: "gray", size: "sm", onClick: () => (this.showColumnsPanel = false) }))), h("div", { key: '5e52b2115e6fe50b5fec37db6ffad6a55dc6cd70', class: "content_wrapper" }, h("div", { key: 'e84c90cadb033462b0093b33f179add5255dd49a', 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: 'af8ba5cb159997b965129e26a45f28394e88234b', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: 'e6b67ec8dd041a3725315c235010f33c100585a0', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '71dfa5d239316d26fb78f7ac07d6a3283fa01adb', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
+            } })))), h("div", { key: '3341d8212bb2a00da1ad3870f9981dc7a1e01f16', class: "modal-actions" })))))), this.showFilterModalInternal && this.filterConfig && (h("div", { key: '7d7c1b31ede07a6e918709127fc4f080d3657584', class: `filter_modal_wrapper ${this.isFilterModalVisible ? 'open' : 'closing'}` }, h("gb-filter-modal", { key: '3d9100c67e02b89f1a675be3d4d18283815d005b', class: "filter_modal", filterConfig: this.mergedFilterConfig, onClose: e => {
                 e.stopPropagation();
                 this.closeFilterModal();
             }, onApplyFilters: e => this.onApplyFilters(e), onClearFilters: () => this.handleClearFilters() }))), this.internalLoading ? (
@@ -1178,7 +1195,7 @@ export class GbTable {
                 ? this.renderDesktopView()
                 : this.currentTableLayout === 'grid'
                     ? this.renderGridView()
-                    : null)), this.paginationConfig && (h("div", { key: '33a6244621ba1e6bc5310c93525c976f1ce2ed4a', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: 'c967ffcb992ada18475e77b8fef0916f34cad21f', "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: '61c8e21f95ce33eec2cbb0c6f67fd662d3bdb83a', class: `toast ${this.toastVisible ? 'visible' : ''}`, color: "information", "main-text": this.filterMessage, breakpoint: "desktop", size: "floating", onClose: () => this.hideToast() }))));
+                    : null)), this.paginationConfig && (h("div", { key: '527422bd2e3afe19527a91735ad9c2d54e6c23d8', class: `pagination ${this.currentTableLayout}` }, h("gb-pagination", { key: '4b685257a198683d4d1c8ff190a6e1b51f3a93df', "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: '360262fc71f37fbecfbe48a42133faf34b607f57', 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"; }
@@ -1428,7 +1445,7 @@ export class GbTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },\r\n    // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },\r\n    { action: 'edit', type: 'custom' },\r\n  ]"
+                "defaultValue": "[\r\n    // { label: 'View Details', action: 'view_details', icon: 'assets/view.svg', type: 'button' },\r\n    // { label: '', action: '', icon: 'assets/more-horizontal.svg', type: 'dropdown' },\r\n    // { label: 'Edit', action: 'edit', icon: 'assets/pencil-edit-01.svg', type: 'button' },\r\n    // { action: 'edit', type: 'custom' },\r\n  ]"
             },
             "dropdownOptions": {
                 "type": "unknown",
@@ -1578,9 +1595,14 @@ export class GbTable {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(row: any) => any",
-                    "resolved": "(row: any) => any",
-                    "references": {}
+                    "original": "(container: HTMLElement, row: any, emit: (action: string) => void) => void",
+                    "resolved": "(container: HTMLElement, row: any, emit: (action: string) => void) => void",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,