cps-ui-kit 0.129.0 → 0.130.0

package/fesm2015/cps-ui-kit.mjs

@@ -5748,6 +5748,7 @@ class CpsTreeTableComponent {
         this.columns = [];
         this.colHeaderName = 'header';
         this.colFieldName = 'field';
+        this.minWidth = 0;
         this.striped = true;
         this.bordered = true;
         this.size = 'normal';
@@ -5768,6 +5769,7 @@ class CpsTreeTableComponent {
         this.scrollable = true;
         this.scrollHeight = ''; // 'flex' or value+'px'
         this.virtualScroll = false; // works only if scrollable is true
+        this.maxVirtualScrollItemHeight = 0;
         this.numToleratedItems = 10;
         this.paginator = false;
         this.alwaysShowPaginator = true;
@@ -5825,8 +5827,17 @@ class CpsTreeTableComponent {
         this.defScrollHeightPx = 0;
         this.defScrollHeight = '';
         this.scrollbarWidth = 0;
+        this.observerDebouncers = new WeakMap();
+        this.observerHandlers = new WeakMap();
         this.resizeObserver = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
+                if (!this.observerHandlers.has(entry.target)) {
+                    this.observerHandlers.set(entry.target, () => {
+                        entry.target.dispatchEvent(new CustomEvent('treeTableBodyResized'));
+                    });
+                }
+                clearTimeout(this.observerDebouncers.get(entry.target));
+                this.observerDebouncers.set(entry.target, setTimeout(this.observerHandlers.get(entry.target), 100));
                 const body = entry.target;
                 const sbarVisible = body.scrollHeight > body.clientHeight;
                 let wScroll = sbarVisible ? this.scrollbarWidth : 0;
@@ -5876,6 +5887,17 @@ class CpsTreeTableComponent {
         this.selectedColumns = this.columns;
     }
     ngAfterViewInit() {
+        if (this.minWidth > 0) {
+            const treeTableMain = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable');
+            if (treeTableMain)
+                treeTableMain.style.overflow = 'auto';
+            const scrollableWrapper = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable-scrollable-wrapper');
+            if (scrollableWrapper)
+                scrollableWrapper.style.minWidth = this.minWidth + 'px';
+            const treeTableHeader = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable-header');
+            if (treeTableHeader)
+                treeTableHeader.style.minWidth = this.minWidth + 'px';
+        }
         this.scrollableBody = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable-scrollable-body');
         if (this.scrollableBody) {
             this.headerBox = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable-scrollable-header-box');
@@ -5883,16 +5905,29 @@ class CpsTreeTableComponent {
                 this.defScrollHeightPx = this.scrollableBody.clientHeight;
             if (this.headerBox) {
                 this.scrollbarWidth = DomHandler.calculateScrollbarWidth();
+                this.scrollableBody.addEventListener('treeTableBodyResized', () => {
+                    this._recalcVirtualHeight();
+                });
                 this.resizeObserver.observe(this.scrollableBody);
             }
         }
     }
+    _updateVirtualScrollItemSize() {
+        var _a, _b, _c, _d;
+        if (!this.virtualScroll)
+            return;
+        const tr = (_d = (_c = (_b = (_a = this.primengTreeTable) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.querySelector('.p-treetable-tbody')) === null || _d === void 0 ? void 0 : _d.querySelector('tr');
+        if (tr) {
+            this.virtualScrollItemSize = tr.clientHeight || 0;
+            if (this.maxVirtualScrollItemHeight > 0) {
+                this.virtualScrollItemSize = Math.min(this.maxVirtualScrollItemHeight, this.virtualScrollItemSize);
+            }
+        }
+    }
     ngAfterViewChecked() {
-        var _a, _b, _c, _d, _e;
         if (!this.virtualScroll || this.virtualScrollItemSize)
             return;
-        this.virtualScrollItemSize =
-            ((_e = (_d = (_c = (_b = (_a = this.primengTreeTable) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.querySelector('.p-treetable-tbody')) === null || _d === void 0 ? void 0 : _d.querySelector('tr')) === null || _e === void 0 ? void 0 : _e.clientHeight) || 0;
+        this._recalcVirtualHeight();
         this.cdRef.detectChanges();
     }
     ngOnChanges(changes) {
@@ -5954,28 +5989,33 @@ class CpsTreeTableComponent {
         this.customSortFunction.emit(event);
     }
     _recalcVirtualHeight() {
-        if (this.virtualScroll && this.defScrollHeight) {
-            const itemsLen = this.primengTreeTable.serializedValue.length;
-            if (itemsLen < 1) {
-                this.scrollHeight = this.emptyBodyHeight
-                    ? `calc(${this.emptyBodyHeight} + 1px)`
-                    : this.virtualScrollItemSize + 1 + 'px';
-            }
-            else {
-                const curHeight = this.virtualScrollItemSize * itemsLen + 2;
-                if (this.defScrollHeight === 'flex') {
-                    if (curHeight >= this.defScrollHeightPx) {
-                        this.scrollHeight = 'flex';
-                        setTimeout(() => {
-                            this.scrollableBody.style.height = '100%';
-                            this.cdRef.markForCheck();
-                        });
-                        return;
+        setTimeout(() => {
+            if (this.virtualScroll && this.defScrollHeight) {
+                this._updateVirtualScrollItemSize();
+                const itemsLen = this.primengTreeTable.serializedValue.length;
+                if (itemsLen < 1) {
+                    this.scrollHeight = this.emptyBodyHeight
+                        ? `calc(${this.emptyBodyHeight} + 1px)`
+                        : this.virtualScrollItemSize + 1 + 'px';
+                }
+                else {
+                    const curHeight = this.virtualScrollItemSize * itemsLen + 2;
+                    if (this.defScrollHeight === 'flex') {
+                        if (curHeight >= this.defScrollHeightPx) {
+                            this.scrollHeight = 'flex';
+                            setTimeout(() => {
+                                this.scrollableBody.style.height = '100%';
+                                this.cdRef.markForCheck();
+                            });
+                            return;
+                        }
                     }
+                    this.scrollHeight =
+                        Math.min(this.defScrollHeightPx, curHeight) + 'px';
                 }
-                this.scrollHeight = Math.min(this.defScrollHeightPx, curHeight) + 'px';
+                this.cdRef.markForCheck();
             }
-        }
+        });
     }
     onFilterGlobal(value) {
         this.primengTreeTable.filterGlobal(value, 'contains');
@@ -6002,10 +6042,7 @@ class CpsTreeTableComponent {
         this.data = [...this.data];
         this.rowsRemoved.emit(this.selectedRows);
         this.clearSelection();
-        setTimeout(() => {
-            this._recalcVirtualHeight();
-            this.cdRef.markForCheck();
-        });
+        this._recalcVirtualHeight();
     }
     clearSelection() {
         this.selectedRows = [];
@@ -6017,10 +6054,7 @@ class CpsTreeTableComponent {
         this.selectedRows = this.selectedRows.filter((v) => v !== node);
         this._removeNodeFromData(node);
         this.rowsRemoved.emit([node]);
-        setTimeout(() => {
-            this._recalcVirtualHeight();
-            this.cdRef.markForCheck();
-        });
+        this._recalcVirtualHeight();
     }
     _removeNodeFromData(nodeToRemove, single = true) {
         const _findTopSortOrder = (_node) => {
@@ -6114,17 +6148,11 @@ class CpsTreeTableComponent {
     }
     onNodeExpanded(event) {
         this.nodeExpanded.emit(event);
-        setTimeout(() => {
-            this._recalcVirtualHeight();
-            this.cdRef.markForCheck();
-        });
+        this._recalcVirtualHeight();
     }
     onNodeCollapsed(event) {
         this.nodeCollapsed.emit(event);
-        setTimeout(() => {
-            this._recalcVirtualHeight();
-            this.cdRef.markForCheck();
-        });
+        this._recalcVirtualHeight();
     }
     onNodeSelected(event) {
         this.nodeSelected.emit(event);
@@ -6137,10 +6165,7 @@ class CpsTreeTableComponent {
     }
     onFilter(event) {
         this.filtered.emit(event);
-        setTimeout(() => {
-            this._recalcVirtualHeight();
-            this.cdRef.markForCheck();
-        });
+        this._recalcVirtualHeight();
     }
     onSelectColumn(col) {
         let res = [];
@@ -6163,7 +6188,7 @@ class CpsTreeTableComponent {
     }
 }
 CpsTreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { data: "data", columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled" }, outputs: { selectionChanged: "selectionChanged", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsRemoved: "rowsRemoved", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
+CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { data: "data", columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", minWidth: "minWidth", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", maxVirtualScrollItemHeight: "maxVirtualScrollItemHeight", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled" }, outputs: { selectionChanged: "selectionChanged", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsRemoved: "rowsRemoved", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
         TreeTableService,
         {
             provide: TreeTable,
@@ -6208,6 +6233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], colFieldName: [{
                 type: Input
+            }], minWidth: [{
+                type: Input
             }], striped: [{
                 type: Input
             }], bordered: [{
@@ -6248,6 +6275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], virtualScroll: [{
                 type: Input
+            }], maxVirtualScrollItemHeight: [{
+                type: Input
             }], numToleratedItems: [{
                 type: Input
             }], paginator: [{