Merge branch '7.3.x' into mkirova/fix-5626

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.ts

@@ -856,7 +856,8 @@ export class IgxDragDirective implements OnInit, OnDestroy {
         const viewPortY = pageY - window.pageYOffset;
         if (document['msElementsFromPoint']) {
             // Edge and IE special snowflakes
-            return document['msElementsFromPoint'](viewPortX, viewPortY);
+            const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
+            return elements === null ? [] : elements;
         } else {
             // Other browsers like Chrome, Firefox, Opera
             return document.elementsFromPoint(viewPortX, viewPortY);

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -1980,8 +1980,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         }
 
         this.children.forEach(child => {
-            child.disableHiding = true;
-            child.disablePinning = true;
             child.movable = false;
         });
     }

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.ts

@@ -55,6 +55,9 @@ export class IgxExcelStyleColumnMovingComponent {
             }
         } else if (this.grid.unpinnedColumns.indexOf(this.column) === 0 && moveDirection === 0) {
             targetColumn = this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1];
+            if (targetColumn.parent) {
+                targetColumn = targetColumn.topLevelParent;
+            }
             moveDirection = 1;
         } else {
             targetColumn = this.findColumn(moveDirection, this.grid.unpinnedColumns);

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -5659,6 +5659,44 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             expect(pinButton.classList.contains('igx-excel-filter__actions-pin--disabled')).toBe(true,
                 'pinButton should be disabled');
         }));
+
+        it('Should pin column next to already pinned group by moving it to the left.', fakeAsync(() => {
+            // Test prerequisites
+            grid.width = '1000px';
+            fix.detectChanges();
+            tick(100);
+            // Adjust column widths, so their group can be pinned.
+            const columnFields = ['ID', 'ProductName', 'Downloads', 'Released', 'ReleaseDate', 'AnotherField'];
+            columnFields.forEach((columnField) => {
+                const col = grid.columns.find((c) => c.field === columnField);
+                col.width = '100px';
+            });
+            fix.detectChanges();
+            // Make 'AnotherField' column movable.
+            const column = grid.columns.find((c) => c.field === 'AnotherField');
+            column.movable = true;
+            fix.detectChanges();
+
+            // Pin the 'General Information' group by pinning its child 'ProductName' column.
+            GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+            fix.detectChanges();
+            GridFunctions.clickPinIconInExcelStyleFiltering(fix, false);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify 'AnotherField' column is not pinned.
+            GridFunctions.verifyColumnIsPinned(column, false, 7);
+
+            // Try to pin the 'AnotherField' column by moving it to the left.
+            GridFunctions.clickExcelFilterIcon(fix, 'AnotherField');
+            fix.detectChanges();
+            GridFunctions.clickMoveLeftInExcelStyleFiltering(fix);
+            tick(200);
+            fix.detectChanges();
+
+            // Verify 'AnotherField' column is successfully pinned next to the column group.
+            GridFunctions.verifyColumnIsPinned(column, true, 8);
+        }));
     });
 });
 

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

@@ -801,6 +801,21 @@ describe('IgxGrid - multi-row-layout Integration - ', () => {
 
             verifyDOMMatchesLayoutSettings(gridFirstRow, fixture.componentInstance.colGroups);
         });
+
+        it('should render unpin and hide column buttons into the excel style filter', () => {
+            const filterIcons = fixture.debugElement.queryAll(By.css('.igx-excel-filter__icon'));
+            expect(filterIcons.length).not.toBe(0);
+
+            filterIcons[0].nativeElement.click();
+            fixture.detectChanges();
+
+            const excelMenu = grid.nativeElement.querySelector('.igx-excel-filter__menu');
+            const unpinComponent = excelMenu.querySelector('.igx-excel-filter__actions-unpin');
+            const hideComponent = excelMenu.querySelector('.igx-excel-filter__actions-hide');
+
+            expect(unpinComponent).toBeDefined();
+            expect(hideComponent).toBeDefined();
+        });
     });
 
     describe('GroupBy ', () => {