@fundamental-ngx/platform 0.43.36 → 0.43.37

package/fesm2020/fundamental-ngx-platform-table-helpers.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, EventEmitter, inject, Directive, Input, Output, NgZone, ChangeDetectorRef, forwardRef, HostBinding, Optional, ElementRef, Inject, Pipe, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, EventEmitter, inject, Directive, Input, Output, NgZone, ChangeDetectorRef, forwardRef, HostBinding, HostListener, Optional, ElementRef, Inject, Pipe, NgModule } from '@angular/core';
 import * as i2 from '@fundamental-ngx/cdk/utils';
-import { DestroyedService, isString, dfs, RtlService, KeyUtil, resizeObservable, FDK_FOCUSABLE_ITEM_DIRECTIVE, FocusableItemDirective } from '@fundamental-ngx/cdk/utils';
+import { DestroyedService, isString, dfs, KeyUtil, RtlService, resizeObservable, FDK_FOCUSABLE_ITEM_DIRECTIVE, FocusableItemDirective } from '@fundamental-ngx/cdk/utils';
 import { isDataSource, DataSourceDirective, FD_DATA_SOURCE_TRANSFORMER } from '@fundamental-ngx/cdk/data-source';
 import { Subject, BehaviorSubject, isObservable, Subscription, filter as filter$1, fromEvent, Observable, take as take$1, takeUntil as takeUntil$1 } from 'rxjs';
 import { map, takeUntil, take, skip, startWith, filter, debounceTime, distinctUntilChanged, share, tap } from 'rxjs/operators';
@@ -12,7 +12,8 @@ import { get } from 'lodash-es';
 import equal from 'fast-deep-equal';
 import cloneDeep from 'lodash-es/cloneDeep';
 import set from 'lodash-es/set';
-import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DOCUMENT } from '@angular/common';
 import { TableCellDirective } from '@fundamental-ngx/core/table';
 import * as i1 from '@angular/forms';
@@ -2319,6 +2320,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Injectable
         }] });
 
+class TableRowService {
+    constructor() {
+        /** @hidden */
+        this._toggleRowSubject = new Subject();
+        /** @hidden */
+        this._scrollToOverlappedCellSubject = new Subject();
+        /** @hidden */
+        this._cellClickedSubject = new Subject();
+        /** @hidden */
+        this._cellFocusedSubject = new Subject();
+        /** @hidden */
+        this._cellActivateSubject = new Subject();
+        /** Stream that emits when the table cell being focused. */
+        this.cellActivate$ = this._cellActivateSubject.asObservable();
+        /** @hidden */
+        this._toggleAllSelectableRowsSubject = new Subject();
+        /** Stream that emits when toggling all selectable rows is needed. */
+        this.toggleAllSelectableRows$ = this._toggleAllSelectableRowsSubject.asObservable();
+        /** Stream that emits when table cell being clicked. */
+        this.cellClicked$ = this._cellClickedSubject.asObservable();
+        /** Stream that emits when scrolling to overlapped cell is needed. */
+        this.scrollToOverlappedCell$ = this._scrollToOverlappedCellSubject.asObservable();
+        /** Stream that emits when the table cell being focused. */
+        this.cellFocused$ = this._cellFocusedSubject.asObservable();
+        /** Toggle row stream. */
+        this.toggleRow$ = this._toggleRowSubject.asObservable();
+        /** Editable cells map. */
+        this.editableCells = new Map();
+        /** @hidden */
+        this.childRowsAdded$ = new Subject();
+        /** Stream to load child items for a particular rows. */
+        this.loadChildRows$ = new Subject();
+    }
+    /** `toggleRow$` stream trigger. */
+    toggleRow(evt) {
+        this._toggleRowSubject.next(evt);
+    }
+    /** `scrollToOverlappedCell$` stream trigger. */
+    scrollToOverlappedCell() {
+        this._scrollToOverlappedCellSubject.next();
+    }
+    /** `cellClicked$` stream trigger. */
+    cellClicked(evt) {
+        this._cellClickedSubject.next(evt);
+    }
+    /** @hidden */
+    cellActivate(columnIndex, row) {
+        this._cellActivateSubject.next({ columnIndex, row: row.value });
+    }
+    /** `cellFocused$` stream trigger. */
+    cellFocused(evt) {
+        this._cellFocusedSubject.next(evt);
+    }
+    /** `toggleAllSelectableRows$` stream trigger. */
+    toggleAllSelectableRows(selectAll) {
+        this._toggleAllSelectableRowsSubject.next(selectAll);
+    }
+    /** Groups the table rows. */
+    groupTableRows(sourceRows, groups, groupRulesMap) {
+        const groupRules = Array.from(groups);
+        if (!groupRules.length) {
+            /**
+             * In case if previously we had groups with collapsed items
+             * but now we don't have it we need to reset row.hidden flag
+             * in order to avoid empty table after groups settings removing
+             */
+            sourceRows.forEach((row) => {
+                row.hidden = false;
+            });
+            return sourceRows;
+        }
+        // Build tree like groups
+        const treeLikeGroupedRows = createGroupedTableRowsTree(groupRules, sourceRows);
+        // Sort tree like groups
+        const sortedTreeLikeGroupedRows = sortTreeLikeGroupedRows(treeLikeGroupedRows, groupRulesMap);
+        // Convert tree like list to a flat list
+        return convertTreeLikeToFlatList(sortedTreeLikeGroupedRows);
+    }
+    /** Sets editable cells for particular row. */
+    updateEditableCells(row, cells) {
+        this.editableCells.set(row, cells);
+    }
+    /** Removes editable cells of particular row. */
+    removeEditableCells(row) {
+        this.editableCells.delete(row);
+    }
+    /** Triggers stream to load child items for a particular rows. */
+    loadChildRows(rows) {
+        const expandableRows = [];
+        if (Array.isArray(rows)) {
+            expandableRows.push(...rows.filter((r) => !r.childItemsLoading$.value));
+        }
+        else {
+            if (rows.childItemsLoading$.value) {
+                return;
+            }
+            expandableRows.push(rows);
+        }
+        this.loadChildRows$.next(expandableRows);
+    }
+}
+TableRowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableRowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowService, decorators: [{
+            type: Injectable
+        }] });
+
 class TableVirtualScrollDirective extends TableVirtualScroll {
     constructor() {
         super(...arguments);
@@ -2342,7 +2450,103 @@ class TableVirtualScrollDirective extends TableVirtualScroll {
         /** @hidden */
         this._tableScrollDispatcher = inject(TableScrollDispatcherService);
         /** @hidden */
+        this._tableRowService = inject(TableRowService);
+        /** @hidden */
         this._destroy$ = inject(DestroyedService);
+        /** @hidden */
+        this._lastMockScrollPosition = 0;
+        /** @hidden */
+        this._previousStartNodeIndex = null;
+        /** @hidden */
+        this._scrollWholeRows = false;
+        /**
+         * @hidden
+         * This function is called when the user performs a wheel event. It determines whether or not the user has scrolled
+         * up or down using the event's deltaX property, and scrolls the table by one row.
+         */
+        this._wheelScrollListenerFunction = (event) => {
+            if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                if (this._wheelTimeout) {
+                    window.cancelAnimationFrame(this._wheelTimeout);
+                }
+                const deltaY = event.deltaY;
+                if (deltaY) {
+                    this._wheelTimeout = window.requestAnimationFrame(() => {
+                        this._scrollRow(deltaY > 0 ? 1 : -1);
+                    });
+                }
+            }
+        };
+        /**
+         * @hidden
+         * This function is called when the mock scrollbar (when using 'scrollWholeRows') is moved. It determines if the
+         * scroll was up or down by comparing the current scroll top to the previous scroll top and scrolls rows accordingly.
+         */
+        this._mockScrollbarListenerFunction = (event) => {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (this._scrollMockTimeout) {
+                window.cancelAnimationFrame(this._scrollMockTimeout);
+            }
+            const tableScrollMockContainer = this._table.tableScrollMockContainer.nativeElement;
+            let deltaY = tableScrollMockContainer.scrollTop - this._lastMockScrollPosition;
+            deltaY = Math.ceil(deltaY / this.rowHeight);
+            this._scrollMockTimeout = window.requestAnimationFrame(() => {
+                this._scrollRow(deltaY, true);
+                this._lastMockScrollPosition = tableScrollMockContainer.scrollTop;
+                if (tableScrollMockContainer.scrollTop === 0) {
+                    // Always display the first row of the table when the user scrolls all the way to the top
+                    this._setRows(0);
+                }
+                if (tableScrollMockContainer.scrollTop + tableScrollMockContainer.getBoundingClientRect().height ===
+                    tableScrollMockContainer.scrollHeight) {
+                    // Always display the last rows of the table when the user scrolls all the way to the bottom
+                    const startingNodeIndex = this._table._tableRowsVisible.length - this._getNumberOfRowsToDisplay();
+                    this._setRows(startingNodeIndex);
+                }
+            });
+        };
+    }
+    /**
+     * Whether to scroll whole rows rather than pixel by pixel when the user performs a scroll.
+     * This gives greater performance improvements but also lends to some potentially undesirable UX changes.
+     * A "rowHeight" must be provided when using this feature.
+     */
+    set scrollWholeRows(value) {
+        this._scrollWholeRows = coerceBooleanProperty(value);
+        if (this._scrollWholeRows) {
+            this.virtualScroll = true;
+        }
+    }
+    get scrollWholeRows() {
+        return this._scrollWholeRows;
+    }
+    /** @hidden */
+    _keydownHandler(event) {
+        if (this.scrollWholeRows) {
+            if (this._focusedCell?.rowIndex === 0 && KeyUtil.isKeyCode(event, UP_ARROW)) {
+                if (this._table.tableContainer.nativeElement.querySelectorAll('tr')[1].ariaRowIndex !== '0') {
+                    const cellToFocus = {
+                        colIndex: this._focusedCell.colIndex,
+                        rowIndex: 1
+                    };
+                    this._table._focusableGrid.focusCell(cellToFocus);
+                }
+                this._scrollRow(-1);
+            }
+            else if (this._focusedCell?.rowIndex === this._getNumberOfRowsToDisplay() &&
+                KeyUtil.isKeyCode(event, DOWN_ARROW)) {
+                this._scrollRow(1);
+            }
+        }
+    }
+    /** @hidden */
+    ngOnInit() {
+        if (this.scrollWholeRows && !this.virtualScroll) {
+            this.virtualScroll = true;
+        }
     }
     /** @hidden */
     ngOnChanges(changes) {
@@ -2353,58 +2557,152 @@ class TableVirtualScrollDirective extends TableVirtualScroll {
             this.calculateVirtualScrollRows();
         }
     }
+    /** @hidden */
+    ngOnDestroy() {
+        this._focusableGridSubscription?.unsubscribe();
+    }
     /** Sets table reference. */
     setTable(table) {
         this._table = table;
     }
     /**
-     * Calculates rows in viewport.
+     * This function determines how many rows can be displayed in the table, and sets the rows in the table based on the
+     * start node index, which may come from the table state
      */
     calculateVirtualScrollRows() {
-        if (!this.virtualScroll || !this.bodyHeight) {
-            return;
+        if (this.scrollWholeRows) {
+            if (!this._focusableGridSubscription) {
+                this._focusableGridSubscription = this._table._focusableGrid.itemFocused.subscribe((event) => {
+                    this._focusedCell = event;
+                });
+            }
+            if (!this.virtualScroll || !this.bodyHeight) {
+                return;
+            }
+            let startNodeIndex = 0;
+            const scrollTop = this._table.getTableState().scrollTopPosition;
+            if (scrollTop !== 0) {
+                startNodeIndex = Math.floor(scrollTop / this.rowHeight);
+                if (startNodeIndex > this._table._tableRowsVisible.length) {
+                    startNodeIndex = 0;
+                }
+            }
+            const totalNodeCount = this._table._tableRowsVisible.length;
+            let visibleNodeCount = Math.floor(this._table.tableContainer.nativeElement.clientHeight / this.rowHeight);
+            visibleNodeCount = Math.min(totalNodeCount - startNodeIndex, visibleNodeCount);
+            this.virtualScrollTotalHeight = totalNodeCount * this.rowHeight - visibleNodeCount * this.rowHeight;
+            this._setRows(startNodeIndex);
+            const scrollMockContainer = this._table.tableScrollMockContainer.nativeElement;
+            scrollMockContainer.style.maxHeight = this.bodyHeight;
         }
-        const rowHeight = this.rowHeight + 1;
-        const rowsVisible = this._table._tableRowsVisible;
-        const rowsInViewPort = this._table.getRowsInViewport();
-        const totalNodeCount = rowsVisible.length;
-        const scrollTop = this._table.tableScrollable.getScrollTop();
-        let startNodeIndex = Math.floor(scrollTop / rowHeight) - this.renderAhead;
-        startNodeIndex = Math.max(0, startNodeIndex);
-        let visibleNodeCount = Math.ceil(this._table.tableContainer.nativeElement.clientHeight / rowHeight) + 2 * this.renderAhead;
-        visibleNodeCount = Math.min(totalNodeCount - startNodeIndex, visibleNodeCount);
-        this.virtualScrollTransform$.next(startNodeIndex * rowHeight);
-        // Simple caching to avoid unnecessary re-renderings
-        const isCached = startNodeIndex === this._virtualScrollCache.startNodeIndex &&
-            visibleNodeCount === this._virtualScrollCache.visibleNodeCount &&
-            totalNodeCount === this._virtualScrollCache.totalNodeCount &&
-            // On rows change, even if the total number of rows is the same, the row object will be different
-            startNodeIndex === rowsInViewPort[0];
-        if (isCached) {
-            return;
+        else {
+            if (!this.virtualScroll || !this.bodyHeight) {
+                return;
+            }
+            const rowHeight = this.rowHeight + 1;
+            const rowsVisible = this._table._tableRowsVisible;
+            const rowsInViewPort = this._table.getRowsInViewport();
+            const totalNodeCount = rowsVisible.length;
+            const scrollTop = this._table.tableScrollable.getScrollTop();
+            let startNodeIndex = Math.floor(scrollTop / rowHeight) - this.renderAhead;
+            startNodeIndex = Math.max(0, startNodeIndex);
+            let visibleNodeCount = Math.ceil(this._table.tableContainer.nativeElement.clientHeight / rowHeight) + 2 * this.renderAhead;
+            visibleNodeCount = Math.min(totalNodeCount - startNodeIndex, visibleNodeCount);
+            this.virtualScrollTransform$.next(startNodeIndex * rowHeight);
+            // Simple caching to avoid unnecessary re-renderings
+            const isCached = startNodeIndex === this._virtualScrollCache.startNodeIndex &&
+                visibleNodeCount === this._virtualScrollCache.visibleNodeCount &&
+                totalNodeCount === this._virtualScrollCache.totalNodeCount &&
+                // On rows change, even if the total number of rows is the same, the row object will be different
+                startNodeIndex === rowsInViewPort[0];
+            if (isCached) {
+                return;
+            }
+            this._virtualScrollCache = { startNodeIndex, visibleNodeCount, totalNodeCount };
+            this.virtualScrollTotalHeight = totalNodeCount * rowHeight - visibleNodeCount * rowHeight;
+            this._table.setRowsInViewport(startNodeIndex, rowsVisible.slice(startNodeIndex, startNodeIndex + visibleNodeCount).length);
         }
-        this._virtualScrollCache = { startNodeIndex, visibleNodeCount, totalNodeCount };
-        this.virtualScrollTotalHeight = totalNodeCount * rowHeight - visibleNodeCount * rowHeight;
-        this._table.setRowsInViewport(startNodeIndex, rowsVisible.slice(startNodeIndex, startNodeIndex + visibleNodeCount).length);
     }
     /**
-     * Initialises scroll listener.
+     * @hidden
+     * Initialises scroll listeners.
      */
     listenOnVirtualScroll() {
-        this._tableScrollDispatcher
-            .verticallyScrolled()
-            .pipe(filter$1(() => this.virtualScroll && !!this.bodyHeight), takeUntil(this._destroy$))
-            .subscribe((scrollable) => {
-            this.calculateVirtualScrollRows();
-            this._table.setTableState({
-                ...this._table.getTableState(),
-                scrollTopPosition: scrollable.getScrollTop()
+        if (this.scrollWholeRows) {
+            this._table.tableContainer.nativeElement.addEventListener('wheel', this._wheelScrollListenerFunction, {
+                passive: false
             });
+            this._table.tableScrollMockContainer.nativeElement.addEventListener('scroll', this._mockScrollbarListenerFunction, { passive: false });
+        }
+        else {
+            this._tableScrollDispatcher
+                .verticallyScrolled()
+                .pipe(filter$1(() => this.virtualScroll && !!this.bodyHeight), takeUntil(this._destroy$))
+                .subscribe((scrollable) => {
+                this.calculateVirtualScrollRows();
+                this._table.setTableState({
+                    ...this._table.getTableState(),
+                    scrollTopPosition: scrollable.getScrollTop()
+                });
+            });
+        }
+    }
+    /** @hidden */
+    _getNumberOfRowsToDisplay() {
+        const tableContainer = this._table.tableContainer.nativeElement;
+        let tableHeight = tableContainer.clientHeight;
+        tableHeight = tableHeight - tableContainer.querySelector('thead').clientHeight;
+        return Math.floor(tableHeight / (this.rowHeight + 2));
+    }
+    /**
+     * @hidden
+     * This function, used only when 'scrollWholeRows' is truthy, calculates what should be the new starting node, based
+     * off the previous starting node and the provided 'count' parameter. For example if the previous start node was 10
+     * and the count parameter is -2, the new starting node will be 8. This function also programmatically moves the
+     * mock scrollbar.
+     */
+    _scrollRow(count, fromMockScrollbarListener = false) {
+        let startingNode = 0;
+        if (this._previousStartNodeIndex !== null && this._previousStartNodeIndex >= 0) {
+            startingNode = this._previousStartNodeIndex;
+        }
+        if (startingNode + count + this._getNumberOfRowsToDisplay() <= this._table._tableRowsVisible.length ||
+            count < 0) {
+            startingNode = Math.ceil(startingNode + count);
+        }
+        if (startingNode < 0) {
+            startingNode = 0;
+        }
+        // This next 'if' statement is for triggering new page loads when 'pageScrolling' is true
+        if (count > 0 &&
+            startingNode === this._previousStartNodeIndex &&
+            this._table.pageScrolling &&
+            this._table._tableRowsVisible.length === this._table._tableRows.length) {
+            this._table._onSpyIntersect(true);
+        }
+        this._setRows(startingNode);
+        const tableScrollMockContainer = this._table.tableScrollMockContainer.nativeElement;
+        if (!fromMockScrollbarListener) {
+            tableScrollMockContainer.scrollBy({ top: count * this.rowHeight });
+        }
+        this._lastMockScrollPosition = tableScrollMockContainer.scrollTop;
+    }
+    /**
+     * @hidden
+     * This function sets rows in the table's viewport depending on the provided starting node. It also sets the table
+     * state.
+     */
+    _setRows(startingNode) {
+        this._table.setRowsInViewport(startingNode, this._getNumberOfRowsToDisplay());
+        this._previousStartNodeIndex = startingNode;
+        this._table.setTableState({
+            ...this._table.getTableState(),
+            scrollTopPosition: this.rowHeight * startingNode
         });
     }
 }
 TableVirtualScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableVirtualScrollDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TableVirtualScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TableVirtualScrollDirective, isStandalone: true, selector: "fdp-table[virtualScroll]", inputs: { virtualScroll: "virtualScroll", renderAhead: "renderAhead", bodyHeight: "bodyHeight", rowHeight: "rowHeight" }, providers: [
+TableVirtualScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TableVirtualScrollDirective, isStandalone: true, selector: "fdp-table[virtualScroll]", inputs: { virtualScroll: "virtualScroll", scrollWholeRows: "scrollWholeRows", renderAhead: "renderAhead", bodyHeight: "bodyHeight", rowHeight: "rowHeight" }, host: { listeners: { "keydown": "_keydownHandler($event)" } }, providers: [
         DestroyedService,
         {
             provide: FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE,
@@ -2427,12 +2725,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }], propDecorators: { virtualScroll: [{
                 type: Input
+            }], scrollWholeRows: [{
+                type: Input
             }], renderAhead: [{
                 type: Input
             }], bodyHeight: [{
                 type: Input
             }], rowHeight: [{
                 type: Input
+            }], _keydownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 class TableInitialStateDirective extends TableInitialState {
@@ -2601,6 +2904,8 @@ class TableColumnResizeService {
         this._destroyed = new Subject();
         /** @hidden */
         this._resizerMoveSubscription = new Subscription();
+        /** @hidden */
+        this._initialTableWidth = null;
         /** Resize progress stream. */
         this.resizeInProgress$ = new BehaviorSubject(this._resizeInProgress);
         /** Whether cell mock should be visible. */
@@ -2665,8 +2970,24 @@ class TableColumnResizeService {
     }
     /** Retrieves custom column value or returns `unset` */
     getColumnWidthStyle(columnName) {
-        const calculatedWidth = this._fixedColumnsWidthMap.get(columnName);
-        return calculatedWidth || 'unset';
+        if (this._tableRef._virtualScrollDirective?.scrollWholeRows) {
+            if (!this._initialTableWidth) {
+                this._initialTableWidth = this._tableRef._tableWidthPx;
+            }
+            const selectionColumnWidth = SELECTION_COLUMN_WIDTH.get(this._tableRef.contentDensityObserver.value) ?? 0;
+            let sizeDividedByColumnsCount = this._initialTableWidth / this._tableRef.getVisibleTableColumns().length -
+                selectionColumnWidth / this._tableRef.getVisibleTableColumns().length;
+            // In the event of tables with a very high number of columns, need to prevent the default behavior which
+            // would make each column not wide enough to be usable and instead use a horizontal scrollbar.
+            if (sizeDividedByColumnsCount < 176) {
+                sizeDividedByColumnsCount = 176;
+            }
+            return this._fixedColumnsWidthMap.get(columnName) || sizeDividedByColumnsCount + 'px';
+        }
+        else {
+            const calculatedWidth = this._fixedColumnsWidthMap.get(columnName);
+            return calculatedWidth || 'unset';
+        }
     }
     /** Previous column name */
     getPreviousColumnName(columnName) {
@@ -2717,7 +3038,6 @@ class TableColumnResizeService {
             this._resizerPosition = resizerPosition - TABLE_RESIZER_BORDER_WIDTH + scrollLeftOffset;
             this.resizerPosition$.next(this.resizerPosition);
         }
-        this._markForCheck.next();
     }
     /** Hide the column resizer. */
     hideResizer() {
@@ -2798,6 +3118,10 @@ class TableColumnResizeService {
         this._updateHeaderOverflowState(updatedWidth - padding);
         this._markForCheck.next();
     }
+    /** @hidden */
+    _setInitialTableWidth() {
+        this._initialTableWidth = this._tableRef._tableWidthPx;
+    }
     /** Update column resizer position. */
     _updateResizerPositionOnMouseMove() {
         this._resizerMoveSubscription = fromEvent(document, 'mousemove')
@@ -2807,7 +3131,6 @@ class TableColumnResizeService {
             const diffX = this._rtl ? clientStartX - event.clientX : event.clientX - clientStartX;
             this._resizerPosition = (this._startX ?? 0) + diffX;
             this.resizerPosition$.next(this.resizerPosition);
-            this._markForCheck.next();
         });
     }
     /**
@@ -2836,113 +3159,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     type: Optional
                 }] }]; } });
 
-class TableRowService {
-    constructor() {
-        /** @hidden */
-        this._toggleRowSubject = new Subject();
-        /** @hidden */
-        this._scrollToOverlappedCellSubject = new Subject();
-        /** @hidden */
-        this._cellClickedSubject = new Subject();
-        /** @hidden */
-        this._cellFocusedSubject = new Subject();
-        /** @hidden */
-        this._cellActivateSubject = new Subject();
-        /** Stream that emits when the table cell being focused. */
-        this.cellActivate$ = this._cellActivateSubject.asObservable();
-        /** @hidden */
-        this._toggleAllSelectableRowsSubject = new Subject();
-        /** Stream that emits when toggling all selectable rows is needed. */
-        this.toggleAllSelectableRows$ = this._toggleAllSelectableRowsSubject.asObservable();
-        /** Stream that emits when table cell being clicked. */
-        this.cellClicked$ = this._cellClickedSubject.asObservable();
-        /** Stream that emits when scrolling to overlapped cell is needed. */
-        this.scrollToOverlappedCell$ = this._scrollToOverlappedCellSubject.asObservable();
-        /** Stream that emits when the table cell being focused. */
-        this.cellFocused$ = this._cellFocusedSubject.asObservable();
-        /** Toggle row stream. */
-        this.toggleRow$ = this._toggleRowSubject.asObservable();
-        /** Editable cells map. */
-        this.editableCells = new Map();
-        /** @hidden */
-        this.childRowsAdded$ = new Subject();
-        /** Stream to load child items for a particular rows. */
-        this.loadChildRows$ = new Subject();
-    }
-    /** `toggleRow$` stream trigger. */
-    toggleRow(evt) {
-        this._toggleRowSubject.next(evt);
-    }
-    /** `scrollToOverlappedCell$` stream trigger. */
-    scrollToOverlappedCell() {
-        this._scrollToOverlappedCellSubject.next();
-    }
-    /** `cellClicked$` stream trigger. */
-    cellClicked(evt) {
-        this._cellClickedSubject.next(evt);
-    }
-    /** @hidden */
-    cellActivate(columnIndex, row) {
-        this._cellActivateSubject.next({ columnIndex, row: row.value });
-    }
-    /** `cellFocused$` stream trigger. */
-    cellFocused(evt) {
-        this._cellFocusedSubject.next(evt);
-    }
-    /** `toggleAllSelectableRows$` stream trigger. */
-    toggleAllSelectableRows(selectAll) {
-        this._toggleAllSelectableRowsSubject.next(selectAll);
-    }
-    /** Groups the table rows. */
-    groupTableRows(sourceRows, groups, groupRulesMap) {
-        const groupRules = Array.from(groups);
-        if (!groupRules.length) {
-            /**
-             * In case if previously we had groups with collapsed items
-             * but now we don't have it we need to reset row.hidden flag
-             * in order to avoid empty table after groups settings removing
-             */
-            sourceRows.forEach((row) => {
-                row.hidden = false;
-            });
-            return sourceRows;
-        }
-        // Build tree like groups
-        const treeLikeGroupedRows = createGroupedTableRowsTree(groupRules, sourceRows);
-        // Sort tree like groups
-        const sortedTreeLikeGroupedRows = sortTreeLikeGroupedRows(treeLikeGroupedRows, groupRulesMap);
-        // Convert tree like list to a flat list
-        return convertTreeLikeToFlatList(sortedTreeLikeGroupedRows);
-    }
-    /** Sets editable cells for particular row. */
-    updateEditableCells(row, cells) {
-        this.editableCells.set(row, cells);
-    }
-    /** Removes editable cells of particular row. */
-    removeEditableCells(row) {
-        this.editableCells.delete(row);
-    }
-    /** Triggers stream to load child items for a particular rows. */
-    loadChildRows(rows) {
-        const expandableRows = [];
-        if (Array.isArray(rows)) {
-            expandableRows.push(...rows.filter((r) => !r.childItemsLoading$.value));
-        }
-        else {
-            if (rows.childItemsLoading$.value) {
-                return;
-            }
-            expandableRows.push(rows);
-        }
-        this.loadChildRows$.next(expandableRows);
-    }
-}
-TableRowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TableRowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowService, decorators: [{
-            type: Injectable
-        }] });
-
 class TableHeaderResizerDirective {
     constructor() {
         /** @hidden */