feat(overlay): remove outlet from column moving

Author: wnvko

projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts

@@ -1189,7 +1189,7 @@ describe('igxExpansionPanel', () => {
             expect(grid.attributes.getNamedItem('role').nodeValue).toEqual('grid');
             expect(grid.attributes.getNamedItem('id').nodeValue).toEqual(fixture.componentInstance.grid1.id);
             expect(grid.attributes.getNamedItem('tabindex').nodeValue).toEqual('0');
-            expect(grid.childElementCount).toEqual(6);
+            expect(grid.childElementCount).toEqual(7);
         }));
         it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {
             const fixture: ComponentFixture<IgxExpansionPanelImageComponent> = TestBed.createComponent(IgxExpansionPanelImageComponent);

projects/igniteui-angular/grids/core/src/common/grid.interface.ts

@@ -657,6 +657,7 @@ export interface GridType extends IGridDataBindable {
     expansionStates: Map<any, boolean>;
     parentVirtDir: any;
     tbody: any;
+    dragGhostHost: ElementRef<HTMLElement>;
     verticalScrollContainer: any;
     dataRowList: any;
     rowList: any;

projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html

@@ -58,7 +58,7 @@
             'igx-grid-th--selected': selected,
             'igx-grid-th--active': activeGroup}"
         [igxColumnMovingDrag]="column"
-        [ghostHost]="grid.outlet.nativeElement"
+        [ghostHost]="grid.dragGhostHost.nativeElement"
         [attr.droppable]="true"
         [igxColumnMovingDrop]="column"
         (pointerdown)="pointerdown($event)"
@@ -108,7 +108,7 @@
         [ngClass]="column.headerClasses"
         [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
         [igxColumnMovingDrag]="column"
-        [ghostHost]="grid.outlet.nativeElement"
+        [ghostHost]="grid.dragGhostHost.nativeElement"
         [attr.droppable]="true"
         (pointerdown)="activate()"
         [style.width]="column.resolvedWidth"

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -1316,6 +1316,10 @@ export abstract class IgxGridBaseDirective implements GridType,
     @ViewChild('tbody', { static: true })
     public tbody: ElementRef;
 
+    /** @hidden @internal */
+    @ViewChild('igxDragGhostHost', { read: ElementRef, static: true })
+    public dragGhostHost: ElementRef<HTMLElement>;
+
     /** @hidden @internal */
     @ViewChild("bodyViewContainerRef", { read: ViewContainerRef, static: true })
     public bodyViewContainerRef?: ViewContainerRef;

projects/igniteui-angular/grids/grid/src/grid.component.html

@@ -319,6 +319,7 @@
     <igx-grid-column-resizer></igx-grid-column-resizer>
 }
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxDragGhostHost></div>
 @if (platform.isElements) {
     <div #sink style="display: none;"></div>
     <ng-content select="igx-grid-state,igc-grid-state"></ng-content>

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html

@@ -272,6 +272,7 @@
 }
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxDragGhostHost></div>
 @if (platform.isElements) {
     <div #sink style="display: none;"></div>
     <ng-content select="igx-grid-state,igc-grid-state"></ng-content>

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html

@@ -125,6 +125,7 @@
 }
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxDragGhostHost></div>
 
 <ng-template #headerTemplate let-column>
     <div class="igx-grid__tr--header">

projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html

@@ -20,7 +20,7 @@
         [ngClass]="column.headerClasses"
         [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
         [igxColumnMovingDrag]="column"
-        [ghostHost]="grid.outlet.nativeElement"
+        [ghostHost]="grid.dragGhostHost.nativeElement"
         [attr.droppable]="true"
         (pointerdown)="pointerdown($event)"
         [igxColumnMovingDrop]="column"

projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html

@@ -252,6 +252,7 @@
 }
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxDragGhostHost></div>
 @if (platform.isElements) {
     <div #sink style="display: none;"></div>
     <ng-content select="igx-grid-state,igc-grid-state"></ng-content>