primeng 15.4.10-lts → 15.4.12-lts

package/fesm2015/primeng-table.mjs

@@ -1372,23 +1372,26 @@ class Table {
         return this.selectionMode === 'multiple';
     }
     onColumnResizeBegin(event) {
-        let containerLeft = DomHandler.getOffset(this.containerViewChild.nativeElement).left;
+        var _a, _b;
+        let containerLeft = DomHandler.getOffset((_a = this.containerViewChild) === null || _a === void 0 ? void 0 : _a.nativeElement).left;
         this.resizeColumnElement = event.target.parentElement;
         this.columnResizing = true;
-        this.lastResizerHelperX = event.pageX - containerLeft + this.containerViewChild.nativeElement.scrollLeft;
+        this.lastResizerHelperX = event.pageX - containerLeft + ((_b = this.containerViewChild) === null || _b === void 0 ? void 0 : _b.nativeElement.scrollLeft);
         this.onColumnResize(event);
         event.preventDefault();
     }
     onColumnResize(event) {
-        let containerLeft = DomHandler.getOffset(this.containerViewChild.nativeElement).left;
-        DomHandler.addClass(this.containerViewChild.nativeElement, 'p-unselectable-text');
-        this.resizeHelperViewChild.nativeElement.style.height = this.containerViewChild.nativeElement.offsetHeight + 'px';
+        var _a, _b, _c, _d;
+        let containerLeft = DomHandler.getOffset((_a = this.containerViewChild) === null || _a === void 0 ? void 0 : _a.nativeElement).left;
+        DomHandler.addClass((_b = this.containerViewChild) === null || _b === void 0 ? void 0 : _b.nativeElement, 'p-unselectable-text');
+        this.resizeHelperViewChild.nativeElement.style.height = ((_c = this.containerViewChild) === null || _c === void 0 ? void 0 : _c.nativeElement.offsetHeight) + 'px';
         this.resizeHelperViewChild.nativeElement.style.top = 0 + 'px';
-        this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + this.containerViewChild.nativeElement.scrollLeft + 'px';
+        this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + ((_d = this.containerViewChild) === null || _d === void 0 ? void 0 : _d.nativeElement.scrollLeft) + 'px';
         this.resizeHelperViewChild.nativeElement.style.display = 'block';
     }
     onColumnResizeEnd() {
-        let delta = this.resizeHelperViewChild.nativeElement.offsetLeft - this.lastResizerHelperX;
+        var _a, _b, _c;
+        let delta = ((_a = this.resizeHelperViewChild) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetLeft) - this.lastResizerHelperX;
         let columnWidth = this.resizeColumnElement.offsetWidth;
         let newColumnWidth = columnWidth + delta;
         let minWidth = this.resizeColumnElement.style.minWidth.replace(/[^\d.]/g, '') || 15;
@@ -1401,7 +1404,8 @@ class Table {
                 }
             }
             else if (this.columnResizeMode === 'expand') {
-                let tableWidth = this.tableViewChild.nativeElement.offsetWidth + delta;
+                this._initialColWidths = this._totalTableWidth();
+                let tableWidth = ((_b = this.tableViewChild) === null || _b === void 0 ? void 0 : _b.nativeElement.offsetWidth) + delta;
                 this.setResizeTableWidth(tableWidth + 'px');
                 this.resizeTableCells(newColumnWidth, null);
             }
@@ -1414,29 +1418,7 @@ class Table {
             }
         }
         this.resizeHelperViewChild.nativeElement.style.display = 'none';
-        DomHandler.removeClass(this.containerViewChild.nativeElement, 'p-unselectable-text');
-    }
-    resizeTableCells(newColumnWidth, nextColumnWidth) {
-        let colIndex = DomHandler.index(this.resizeColumnElement);
-        let widths = [];
-        const tableHead = DomHandler.findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead');
-        let headers = DomHandler.find(tableHead, 'tr > th');
-        headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
-        this.destroyStyleElement();
-        this.createStyleElement();
-        let innerHTML = '';
-        widths.forEach((width, index) => {
-            let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-            let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important;`;
-            innerHTML += `
-                #${this.id}-table > .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                #${this.id}-table > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                #${this.id}-table > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
-                    ${style}
-                }
-            `;
-        });
-        this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+        DomHandler.removeClass((_c = this.containerViewChild) === null || _c === void 0 ? void 0 : _c.nativeElement, 'p-unselectable-text');
     }
     onColumnDragStart(event, columnElement) {
         this.reorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUpViewChild.nativeElement);
@@ -1510,6 +1492,11 @@ class Table {
                     });
                 }
             }
+            if (this.resizableColumns && this.resizeColumnElement && this.resizeColumnElement.isSameNode(this.draggedColumn)) {
+                let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth();
+                ObjectUtils.reorderArray(width, dragIndex + 1, dropIndex + 1);
+                this.updateStyleElement(width, dragIndex, null, null);
+            }
             this.reorderIndicatorUpViewChild.nativeElement.style.display = 'none';
             this.reorderIndicatorDownViewChild.nativeElement.style.display = 'none';
             this.draggedColumn.draggable = false;
@@ -1517,6 +1504,35 @@ class Table {
             this.dropPosition = null;
         }
     }
+    _totalTableWidth() {
+        let widths = [];
+        const tableHead = DomHandler.findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead');
+        let headers = DomHandler.find(tableHead, 'tr > th');
+        headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
+        return widths;
+    }
+    resizeTableCells(newColumnWidth, nextColumnWidth) {
+        let colIndex = DomHandler.index(this.resizeColumnElement);
+        let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth();
+        this.updateStyleElement(width, colIndex, newColumnWidth, nextColumnWidth);
+    }
+    updateStyleElement(width, colIndex, newColumnWidth, nextColumnWidth) {
+        this.destroyStyleElement();
+        this.createStyleElement();
+        let innerHTML = '';
+        width.forEach((width, index) => {
+            let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
+            let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important;`;
+            innerHTML += `
+                #${this.id}-table > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                #${this.id}-table > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                #${this.id}-table > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                    ${style}
+                }
+            `;
+        });
+        this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+    }
     onRowDragStart(event, index) {
         this.rowDragging = true;
         this.draggedRowIndex = index;
@@ -3480,6 +3496,11 @@ class EditableColumn {
         this.el = el;
         this.zone = zone;
     }
+    ngOnChanges({ data }) {
+        if (this.el.nativeElement && !data.firstChange) {
+            this.dt.updateEditingCell(this.el.nativeElement, this.data, this.field, this.rowIndex);
+        }
+    }
     ngAfterViewInit() {
         if (this.isEnabled()) {
             DomHandler.addClass(this.el.nativeElement, 'p-editable-column');
@@ -3733,7 +3754,7 @@ class EditableColumn {
     }
 }
 EditableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-EditableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: EditableColumn, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: "pEditableColumnDisabled", pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" }, classAttribute: "p-element" }, ngImport: i0 });
+EditableColumn.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: EditableColumn, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: "pEditableColumnDisabled", pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" }, classAttribute: "p-element" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditableColumn, decorators: [{
             type: Directive,
             args: [{