Merge branch '21.1.x' into dmdimitrov/export-chat-21.1.x

Author: igdmdimitrov

projects/igniteui-angular/combo/src/combo/combo.component.spec.ts

@@ -1866,6 +1866,40 @@ describe('igxCombo', () => {
                     expect(document.activeElement).toEqual(combo.comboInput.nativeElement);
                     expect(combo.selection.length).toEqual(0);
                 }));
+                it('should stop Escape keydown event propagation when the dropdown is open', fakeAsync(() => {
+                    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+                    spyOn(escapeEvent, 'stopPropagation');
+
+                    combo.comboInput.nativeElement.focus();
+                    fixture.detectChanges();
+
+                    combo.toggle();
+                    fixture.detectChanges();
+                    expect(combo.collapsed).toBeFalsy();
+
+                    combo.onEscape(escapeEvent);
+                    tick();
+                    fixture.detectChanges();
+
+                    expect(escapeEvent.stopPropagation).toHaveBeenCalled();
+                }));
+                it('should stop Escape key propagation when the combo is collapsed and has a selection', fakeAsync(() => {
+                    combo.comboInput.nativeElement.focus();
+                    fixture.detectChanges();
+
+                    combo.select([combo.data[0][combo.valueKey]]);
+                    expect(combo.selection.length).toEqual(1);
+                    fixture.detectChanges();
+
+                    const keyEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+                    const stopPropSpy = spyOn(keyEvent, 'stopPropagation');
+
+                    combo.onEscape(keyEvent);
+                    tick();
+                    fixture.detectChanges();
+
+                    expect(stopPropSpy).toHaveBeenCalledTimes(1);
+                }));
                 it('should close the combo and preserve the focus when Escape key is pressed', fakeAsync(() => {
                     combo.comboInput.nativeElement.focus();
                     fixture.detectChanges();

projects/igniteui-angular/combo/src/combo/combo.component.ts

@@ -187,6 +187,7 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
 
     @HostListener('keydown.Escape', ['$event'])
     public onEscape(event: Event) {
+        event.stopPropagation();
         if (this.collapsed) {
             this.deselectAllItems(true, event);
         }

projects/igniteui-angular/core/src/data-operations/merge-strategy.ts

@@ -74,7 +74,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
                 index++;
                 continue;
             }
-            const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord };
+            const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord, index: index };
             recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1, childRecords: [] });
             if (prev && comparer.call(this, prev.recordRef, recToUpdateData.recordRef, field, isDate, isTime) && prev.ghostRecord === recToUpdateData.ghostRecord) {
                 const root = prev.cellMergeMeta.get(field)?.root ?? prev;

projects/igniteui-angular/core/src/grid-column-actions/token.ts

@@ -7,6 +7,7 @@ export abstract class IgxActionStripToken {
     public abstract cdr: ChangeDetectorRef
     public abstract context: any;
     public abstract menuOverlaySettings: OverlaySettings;
+    public abstract actionButtons: QueryList<IgxActionStripActionsToken>;
     public abstract get hideOnRowLeave(): boolean;
 
     public abstract show(context?: any): void;

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -275,8 +275,11 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     protected _differ: IterableDiffer<T> | null = null;
     protected _trackByFn: TrackByFunction<T>;
     protected individualSizeCache: number[] = [];
+    /**
+     * @hidden
+     */
     /** Internal track for scroll top that is being virtualized */
-    protected _virtScrollPosition = 0;
+    public _virtScrollPosition = 0;
     /** If the next onScroll event is triggered due to internal setting of scrollTop */
     protected _bScrollInternal = false;
     // End properties related to virtual height handling
@@ -901,7 +904,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
                 const maxVirtScrollTop = this._virtSize - containerSize;
                 this._bScrollInternal = true;
                 this._virtScrollPosition = maxVirtScrollTop;
-                this.scrollPosition = maxVirtScrollTop;
+                this.scrollPosition = maxVirtScrollTop / this._virtRatio;
                 return;
             }
             if (this._adjustToIndex) {
@@ -1529,11 +1532,12 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         let currentScroll = this.scrollPosition;
         if (this._virtRatio !== 1) {
             this._calcVirtualScrollPosition(this.scrollPosition);
-            currentScroll = this._virtScrollPosition;
+            scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
+        } else {
+            const scroll = this.scrollComponent.nativeElement;
+            scrollOffset = scroll && this.scrollComponent.size ?
+            currentScroll - this.sizesCache[this.state.startIndex] : 0;
         }
-        const scroll = this.scrollComponent.nativeElement;
-        scrollOffset = scroll && this.scrollComponent.size ?
-        currentScroll - this.sizesCache[this.state.startIndex] : 0;
         const dir = this.igxForScrollOrientation === 'horizontal' ? 'left' : 'transform';
         this.dc.instance._viewContainer.element.nativeElement.style[dir] = this.igxForScrollOrientation === 'horizontal' ?
          -(scrollOffset) + 'px' :

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts

@@ -482,17 +482,26 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             const matchedData = cloneHierarchicalArray(this.esf.listData, 'children');
             this.displayedListData = this.hierarchicalSelectMatches(matchedData, searchVal);
             this.cdr.detectChanges();
+            /**
+             * There are two calls of `matchesNumericValue` in this method: one when we generate the displayedListData in hierarchicalSelectMatches method
+             * and another one when going through the tree nodes. We can avoid the second call by storing the items in a set.
+             * However, if the datasource is small there is no significant difference in performance but we would be adding extra memory overhead.
+             * We should test this when https://github.com/IgniteUI/igniteui-angular/issues/17144 issue is fixed with 100k or 1m records
+             */
             this.tree.nodes.forEach(n => {
                 n.selected = true;
-                if ((n.data as FilterListItem).label.toString().toLowerCase().indexOf(searchVal) > -1) {
+                const item = n.data as FilterListItem;
+                if (item.label.toString().toLowerCase().indexOf(searchVal) > -1 ||
+                    this.matchesNumericValue(item, searchVal)) {
                     this.expandAllParentNodes(n);
                 }
             });
         } else {
             this.displayedListData = this.esf.listData.filter((it, i) => (i === 0 && it.isSpecial) ||
                 (it.label !== null && it.label !== undefined) &&
                 !it.isBlanks &&
-                it.label.toString().toLowerCase().indexOf(searchVal) > -1);
+                (it.label.toString().toLowerCase().indexOf(searchVal) > -1 ||
+                this.matchesNumericValue(it, searchVal)));
 
             this.esf.listData.forEach(i => i.isSelected = false);
             this.displayedListData.forEach(i => i.isSelected = true);
@@ -724,7 +733,8 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                 node.expanded = false;
             }
 
-            if (element.label.toString().toLowerCase().indexOf(searchVal) > -1) {
+            if (element.label.toString().toLowerCase().indexOf(searchVal) > -1 ||
+                this.matchesNumericValue(element, searchVal)) {
                 element.isSelected = true;
                 this.hierarchicalSelectAllChildren(element);
                 this._hierarchicalSelectedItems.push(element);
@@ -802,6 +812,23 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    private matchesNumericValue(item: FilterListItem, searchVal: string): boolean {
+        const columnDataType = this.esf.column?.dataType;
+        if (typeof item.value !== 'number' ||
+            (columnDataType !== GridColumnDataType.Number &&
+             columnDataType !== GridColumnDataType.Currency &&
+             columnDataType !== GridColumnDataType.Percent)) {
+            return false;
+        }
+
+        let numericValue = item.value;
+        if (columnDataType === GridColumnDataType.Percent) {
+            numericValue = parseFloat((item.value * 100).toPrecision(15));
+        }
+
+        return numericValue.toString().toLowerCase().indexOf(searchVal) > -1;
+    }
+
     private onArrowUpKeyDown() {
         if (this.focusedItem && this.focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
             // on ArrowUp the focus stays on the same element if it is the first focused

projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts

@@ -71,6 +71,26 @@ describe('igxGridPinningActions #grid ', () => {
             const secondToLastVisible = grid.rowList.toArray()[grid.rowList.length - 2];
             expect(secondToLastVisible.key).toEqual('FAMIA');
         });
+
+        it('should not hide action strip in base mode when scrollToRow is invoked', () => {
+            grid.pinRow('FAMIA');
+            fixture.detectChanges();
+
+            const pinnedRow = grid.pinnedRows[0];
+            actionStrip.show(pinnedRow);
+            fixture.detectChanges();
+
+            const pinningActions = fixture.debugElement.query(By.directive(IgxGridPinningActionsComponent))
+                .componentInstance as IgxGridPinningActionsComponent;
+            spyOn<any>(grid, 'scrollTo');
+
+            pinningActions.scrollToRow(null);
+            fixture.detectChanges();
+
+            expect((grid as any).scrollTo).toHaveBeenCalledWith(pinnedRow.data, 0);
+            expect(actionStrip.hidden).toBeFalse();
+            expect(actionStrip.context).toBe(pinnedRow);
+        });
     });
 
     describe('Menu ', () => {

projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.ts

@@ -126,7 +126,10 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         const context = this.strip.context;
         const grid = context.grid;
         grid.scrollTo(context.data, 0);
-        this.strip.hide();
+
+        if (this.asMenuItems) {
+            this.strip.hide();
+        }
     }
 
     private registerSVGIcons(): void {

projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts

@@ -6,7 +6,7 @@ import { IgxPaginatorComponent } from 'igniteui-angular/paginator';;
 import { DataParent } from '../../../test-utils/sample-test-data.spec';
 import { GridFunctions, GridSelectionFunctions } from '../../../test-utils/grid-functions.spec';
 import { By } from '@angular/platform-browser';
-import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
+import { UIInteractions, wait, waitForActiveNodeChange } from '../../../test-utils/ui-interactions.spec';
 import { hasClass, setElementSize } from '../../../test-utils/helper-utils.spec';
 import { ColumnLayoutTestComponent } from './grid.multi-row-layout.spec';
 import { IgxHierarchicalGridTestBaseComponent } from '../../hierarchical-grid/src/hierarchical-grid.spec';
@@ -1113,6 +1113,68 @@ describe('IgxGrid - Cell merging #grid', () => {
                 ]);
             });
 
+            it('should remerge child grid cells when focus moves to parent grid.', async () => {
+                const ri = fix.componentInstance.rowIsland;
+                ri.cellMergeMode = 'always';
+                ri.getColumnByName('ProductName').merge = true;
+                fix.detectChanges();
+
+                const firstRow = grid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+                firstRow.toggle();
+                fix.detectChanges();
+
+                const childGrid = grid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
+                expect(childGrid).toBeDefined();
+
+                const childCol = childGrid.getColumnByName('ProductName');
+                GridFunctions.verifyColumnMergedState(childGrid, childCol, [
+                    { value: 'Product A', span: 2 },
+                    { value: 'Product B', span: 1 },
+                    { value: 'Product A', span: 1 }
+                ]);
+
+                await wait(1);
+                fix.detectChanges();
+
+                const allGrids = fix.debugElement.queryAll(By.directive(IgxHierarchicalGridComponent));
+                const childGridDE = allGrids.find(x => x.componentInstance === childGrid);
+                expect(childGridDE).toBeDefined();
+                const childRows = childGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW));
+                childRows.shift();
+                const childRowDE = childRows[0];
+                const childCells = childRowDE.queryAll(By.css('.igx-grid__td'));
+                const childCellDE = childCells[1];
+                UIInteractions.simulateClickAndSelectEvent(childCellDE.nativeElement);
+                await wait(1);
+                fix.detectChanges();
+
+                GridFunctions.verifyColumnMergedState(childGrid, childCol, [
+                    { value: 'Product A', span: 1 },
+                    { value: 'Product A', span: 1 },
+                    { value: 'Product B', span: 1 },
+                    { value: 'Product A', span: 1 }
+                ]);
+
+                const rootGridDE = allGrids.find(x => x.componentInstance === grid);
+                expect(rootGridDE).toBeDefined();
+                const parentRows = rootGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW));
+                parentRows.shift();
+                const parentRowDE = parentRows[0];
+                const parentCells = parentRowDE.queryAll(By.css('.igx-grid__td'));
+                const parentCellDE = parentCells[1];
+                const activeChange = waitForActiveNodeChange(childGrid);
+                UIInteractions.simulateClickAndSelectEvent(parentCellDE.nativeElement);
+                await activeChange;
+                await wait(20);
+                fix.detectChanges();
+
+                GridFunctions.verifyColumnMergedState(childGrid, childCol, [
+                    { value: 'Product A', span: 2 },
+                    { value: 'Product B', span: 1 },
+                    { value: 'Product A', span: 1 }
+                ]);
+            });
+
         });
 
         describe('TreeGrid', () => {

projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts

@@ -4,7 +4,8 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec';
 import {
-    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent
+    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent,
+    GridDynamicActionStripComponent
 } from '../../../test-utils/grid-samples.spec';
 
 import { By } from '@angular/platform-browser';
@@ -45,7 +46,8 @@ describe('IgxGrid - Row Adding #grid', () => {
                 IgxGridRowEditingTransactionComponent,
                 IgxGridRowEditingDefinedColumnsComponent,
                 ColumnLayoutTestComponent,
-                DefaultGridMasterDetailComponent
+                DefaultGridMasterDetailComponent,
+                GridDynamicActionStripComponent
             ],
             providers: [
                 IgxGridMRLNavigationService
@@ -1121,4 +1123,32 @@ describe('IgxGrid - Row Adding #grid', () => {
             expect(grid.rowChangesCount).toEqual(3);
         });
     });
+
+    describe('ActionStrip - Dynamic Addition', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(GridDynamicActionStripComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        });
+
+        it('Should set outlet for actionstrip menu when added post-init', async () => {
+            // Verify no actionstrip initially
+            expect(fixture.componentInstance.actionStrip).toBeUndefined();
+            expect(grid.actionStrip).toBeUndefined();
+
+            // Add the actionstrip dynamically
+            fixture.componentInstance.showActionStrip = true;
+            fixture.detectChanges();
+            await wait(16);
+
+            // Get reference to the actionstrip
+            actionStrip = fixture.componentInstance.actionStrip;
+            expect(actionStrip).toBeDefined();
+            expect(grid.actionStrip).toBeDefined();
+
+            // Verify that the outlet is properly set
+            expect(actionStrip.menuOverlaySettings.outlet).toBeDefined();
+            expect(actionStrip.menuOverlaySettings.outlet).toBe(grid.outlet);
+        });
+    });
 });