igniteui-angular 21.1.4 → 21.1.6

package/fesm2022/igniteui-angular-grids-grid.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, ElementRef, ChangeDetectorRef, TemplateRef, HostBinding, HostListener, ViewChild, Input, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, forwardRef, InjectionToken, QueryList, NgZone, IterableDiffers, ViewContainerRef, Injector, EnvironmentInjector, LOCALE_ID, EventEmitter, createComponent, booleanAttribute, ViewChildren, ContentChildren, ContentChild, Output, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
-import { GridBaseAPIService, IGX_GRID_BASE, IgxGridSelectionService, IgxFilteringService, GridSelectionMode, IgxColumnFormatterPipe, IgxGroupByAreaDirective, IgxGroupAreaDropDirective, IgxGroupByMetaPipe, GridSummaryPosition, RowPinningPosition, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxRowDirective, IgxRowDragDirective, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, FilterMode, GridCellMergeMode, IgxGridValidationService, IgxColumnResizingService, IGX_GRID_SERVICE_BASE, IgxGridNavigationService, IgxGridSummaryService, IgxGridTransaction, RowEditPositionStrategy, getUUID, IgxGridExcelStyleFilteringComponent, DropPosition, IgxCell, IgxEditRow, IgxColumnComponent, CharSeparatedValueData, IgxAdvancedFilteringDialogComponent, IgxColumnGroupComponent, IgxGridColumnResizerComponent, IgxGridHeaderRowComponent, IgxGridBodyDirective, IgxRowEditTabStopDirective, IgxSummaryRowComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxRowAddTextDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxGridLoadingTemplateDirective, IgxGridEmptyTemplateDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxRowDragGhostDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxDragIndicatorIconDirective, IgxToolbarToken, WatchChanges, IgxGridRow, IgxGridCell, IgxGroupByRow, IgxSummaryRow, IgxGridMRLNavigationService, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridDetailTemplateDirective, IgxGroupByRowTemplateDirective, IgxGroupByRowSelectorDirective, IgxGridCRUDService, IgxGridFooterComponent, IgxGridStateDirective, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
+import { GridBaseAPIService, IGX_GRID_BASE, IgxGridSelectionService, IgxFilteringService, GridSelectionMode, IgxColumnFormatterPipe, IgxGroupByAreaDirective, IgxGroupAreaDropDirective, IgxGroupByMetaPipe, GridSummaryPosition, RowPinningPosition, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxRowDirective, IgxRowDragDirective, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, FilterMode, GridCellMergeMode, IgxGridValidationService, IgxColumnResizingService, IGX_GRID_SERVICE_BASE, IgxGridNavigationService, IgxGridSummaryService, IgxGridTransaction, RowEditPositionStrategy, getUUID, IgxGridExcelStyleFilteringComponent, DropPosition, IgxCell, IgxEditRow, IgxColumnComponent, CharSeparatedValueData, IgxAdvancedFilteringDialogComponent, IgxColumnGroupComponent, IgxGridPinningActionsComponent, IgxGridColumnResizerComponent, IgxGridHeaderRowComponent, IgxGridBodyDirective, IgxRowEditTabStopDirective, IgxSummaryRowComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxRowAddTextDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxGridLoadingTemplateDirective, IgxGridEmptyTemplateDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxRowDragGhostDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxDragIndicatorIconDirective, IgxToolbarToken, WatchChanges, IgxGridRow, IgxGridCell, IgxGroupByRow, IgxSummaryRow, IgxGridMRLNavigationService, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridDetailTemplateDirective, IgxGroupByRowTemplateDirective, IgxGroupByRowSelectorDirective, IgxGridCRUDService, IgxGridFooterComponent, IgxGridStateDirective, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
 import { cloneArray, DataUtil, GridColumnDataType, IgxNumberFormatterPipe, IgxDateFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, GridSummaryCalculationMode, FilteringExpressionsTree, FilterUtil, HammerGesturesManager, isTree, FilteringLogic, FilteringExpressionsTreeType, getCurrentResourceStrings, GridResourceStringsEN, isObject, TransactionType, IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil, I18N_FORMATTER, DefaultMergeStrategy, FilteringStrategy, ColumnPinningPosition, VerticalAlignment, HorizontalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, DefaultDataCloneStrategy, ɵSize as _Size, areEqualArrays, resizeObservable, compareMaps, TransactionEventOrigin, mergeObjects, ContainerPositionStrategy, resolveNestedPath, columnFieldPath, recreateTree, recreateTreeFromFields, DEFAULT_LOCALE, onResourceChangeHandle, IgxOverlayOutletDirective, IgxActionStripToken } from 'igniteui-angular/core';
 import { takeUntil, shareReplay, filter, throttle, take, switchMap, throttleTime, takeWhile, map, first } from 'rxjs/operators';
 import { Subject, BehaviorSubject, animationFrameScheduler, fromEvent, timer, pipe, merge } from 'rxjs';
@@ -737,7 +737,7 @@ class IgxGridUnmergeActivePipe {
         }
         const result = cloneArray(collection);
         uniqueRoots.forEach(x => {
-            const index = collection.indexOf(x);
+            const index = x.index;
             const colKeys = [...x.cellMergeMeta.keys()];
             const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1);
             for (const col of cols) {
@@ -3620,7 +3620,7 @@ class IgxGridBaseDirective {
     }
     getMergeCellOffset(rowData) {
         const index = rowData.dataIndex;
-        let offset = this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
+        let offset = this.verticalScrollContainer._virtScrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
         if (this.hasPinnedRecords && this.isRowPinningToTop) {
             offset -= this.pinnedRowHeight;
         }
@@ -3786,7 +3786,7 @@ class IgxGridBaseDirective {
             this.cdr.detectChanges();
         });
         this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), throttleTime(30), destructor).subscribe(() => {
-            this.notifyChanges(true);
+            this.onContentSizeChange();
         });
         this.verticalScrollContainer.chunkPreload.pipe(filter(() => !this._init), destructor).subscribe(() => {
             this.updateMergedData();
@@ -3961,6 +3961,11 @@ class IgxGridBaseDirective {
         this.paginationComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.setUpPaginator();
         });
+        this.actionStripComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.actionStrip) {
+                this.actionStrip.menuOverlaySettings.outlet = this.outlet;
+            }
+        });
         if (this.actionStrip) {
             this.actionStrip.menuOverlaySettings.outlet = this.outlet;
         }
@@ -6829,18 +6834,21 @@ class IgxGridBaseDirective {
         if (!this._height) {
             return null;
         }
+        const styles = this.document.defaultView.getComputedStyle(this.nativeElement);
         const actualTheadRow = this.getTheadRowHeight();
         const footerHeight = this.getFooterHeight();
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingFooterHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
         const scrHeight = this.getComputedHeight(this.scr.nativeElement);
+        const borderTop = parseFloat(styles.getPropertyValue('border-top-width')) || 0;
+        const borderBottom = parseFloat(styles.getPropertyValue('border-bottom-width')) || 0;
         const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
-            scrHeight;
+            scrHeight + borderTop + borderBottom;
         let gridHeight = 0;
         if (this.isPercentHeight) {
-            const computed = this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('height');
+            const computed = styles.getPropertyValue('height');
             const autoSize = this._shouldAutoSize(renderedHeight);
             if (autoSize || computed.indexOf('%') !== -1) {
                 const bodyHeight = this.getDataBasedBodyHeight();
@@ -7350,9 +7358,16 @@ class IgxGridBaseDirective {
         });
         this.disableTransitions = false;
         this.hideOverlays();
-        this.actionStrip?.hide();
-        if (this.actionStrip) {
-            this.actionStrip.context = null;
+        const context = this.actionStrip?.context;
+        const contextEl = context?.element?.nativeElement;
+        const keepActionStrip = !!context?.pinned &&
+            !!contextEl?.isConnected &&
+            !this.hasMenuPinningActions();
+        if (!keepActionStrip) {
+            if (this.actionStrip) {
+                this.actionStrip.hide();
+                this.actionStrip.context = null;
+            }
         }
         const args = {
             direction: 'vertical',
@@ -7361,6 +7376,17 @@ class IgxGridBaseDirective {
         };
         this.gridScroll.emit(args);
     }
+    hasMenuPinningActions() {
+        const strip = this.actionStrip;
+        const actionButtons = strip?.actionButtons;
+        if (!actionButtons?.length) {
+            return false;
+        }
+        return actionButtons
+            .toArray()
+            .some((button) => button instanceof IgxGridPinningActionsComponent &&
+            button.asMenuItems);
+    }
     horizontalScrollHandler(event) {
         const scrollLeft = event.target.scrollLeft;
         this.headerContainer.onHScroll(scrollLeft);
@@ -7703,6 +7729,9 @@ class IgxGridBaseDirective {
             return false;
         return Object.keys(oldData[0]).join() !== Object.keys(newData[0]).join();
     }
+    onContentSizeChange() {
+        this.notifyChanges(true);
+    }
     /**
      * Clears the current navigation service active node
      */
@@ -7736,16 +7765,15 @@ class IgxGridBaseDirective {
         // recalc merged data
         if (this.columnsToMerge.length > 0) {
             const startIndex = this.verticalScrollContainer.state.startIndex;
-            const prevDataView = this.verticalScrollContainer.igxForOf?.slice(0, startIndex);
             const data = [];
-            for (let index = 0; index < startIndex; index++) {
-                const rec = prevDataView[index];
-                if (rec.cellMergeMeta &&
-                    // index + maxRowSpan is within view
-                    startIndex < (index + Math.max(...rec.cellMergeMeta.values().toArray().map(x => x.rowSpan)))) {
-                    const visibleIndex = this.isRowPinningToTop ? index + this.pinnedRecordsCount : index;
-                    data.push({ record: rec, index: visibleIndex, dataIndex: index });
-                }
+            const rec = this.verticalScrollContainer.igxForOf[startIndex];
+            if (rec && rec.cellMergeMeta) {
+                this.columnsToMerge.forEach((col) => {
+                    const root = rec.cellMergeMeta?.get(col.field)?.root;
+                    if (root) {
+                        data.push({ record: root, index: root.index, dataIndex: root.index });
+                    }
+                });
             }
             this._mergedDataInView = data;
             this.notifyChanges();