feat(overlay): remove row editing outlet

Author: wnvko

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

@@ -131,12 +131,6 @@ interface IMatchInfoCache {
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
 const MINIMUM_COLUMN_WIDTH = 136;
-// By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
-// In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header.
-// Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
-// More accurate calculation is not possible, cause row editing overlay is still not shown and we don't know its height,
-// but in the same time we need to set row editing overlay outlet before opening the overlay itself.
-const MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
 
 /* blazorIndirectRender
    blazorComponent
@@ -1347,12 +1341,6 @@ export abstract class IgxGridBaseDirective implements GridType,
     @ViewChild('tfoot', { static: true })
     public tfoot: ElementRef<HTMLElement>;
 
-    /**
-     * @hidden @internal
-     */
-    @ViewChild('igxRowEditingOverlayOutlet', { read: IgxOverlayOutletDirective, static: true })
-    public rowEditingOutletDirective: IgxOverlayOutletDirective;
-
     /**
      * @hidden @internal
      */
@@ -2683,20 +2671,6 @@ export abstract class IgxGridBaseDirective implements GridType,
         this._rowSelectorTemplate = template;
     }
 
-    /**
-     * @hidden @internal
-     */
-    public get rowOutletDirective() {
-        return this.rowEditingOutletDirective;
-    }
-
-    /**
-     * @hidden @internal
-     */
-    public get parentRowOutletDirective() {
-        return this.outlet;
-    }
-
     /**
      * @hidden @internal
      */
@@ -3323,7 +3297,6 @@ export abstract class IgxGridBaseDirective implements GridType,
         scrollStrategy: new AbsoluteScrollStrategy(),
         modal: false,
         closeOnOutsideClick: false,
-        outlet: this.rowOutletDirective,
         positionStrategy: this.rowEditPositioningStrategy
     };
 
@@ -6377,7 +6350,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * TODO: MOVE to CRUD
      */
     public openRowOverlay(id) {
-        this.configureRowEditingOverlay(id, this.rowList.length <= MIN_ROW_EDITING_COUNT_THRESHOLD);
+        this.configureRowEditingOverlay(id);
 
         this.rowEditingOverlay.open(this.rowEditSettings);
         this.rowEditingOverlay.element.addEventListener('wheel', this.rowEditingWheelHandler);
@@ -8133,13 +8106,12 @@ export abstract class IgxGridBaseDirective implements GridType,
     }
 
     // TODO: About to Move to CRUD
-    private configureRowEditingOverlay(rowID: any, useOuter = false) {
+    private configureRowEditingOverlay(rowID: any) {
         let settings = this.rowEditSettings;
         const overlay = this.overlayService.getOverlayById(this.rowEditingOverlay.overlayId);
         if (overlay) {
             settings = overlay.settings;
         }
-        settings.outlet = useOuter ? this.parentRowOutletDirective : this.rowOutletDirective;
         this.rowEditPositioningStrategy.settings.container = this.tbody.nativeElement;
         const pinned = this._pinnedRecordIDs.indexOf(rowID) !== -1;
         const targetRow = !pinned ?

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

@@ -157,7 +157,6 @@
         </ng-template>
 
         <ng-container *ngTemplateOutlet="template; context: { $implicit: this }"></ng-container>
-        <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
         <ng-container #bodyViewContainerRef></ng-container>
         <igc-trial-watermark></igc-trial-watermark>
     </div>

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

@@ -124,7 +124,6 @@
             <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
                 id="right" class="igx-grid__scroll-on-drag-right"></span>
         }
-        <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
         <ng-container #bodyViewContainerRef></ng-container>
         @if (!this.parent) {
             <igc-trial-watermark></igc-trial-watermark>

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

@@ -657,15 +657,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         }
     }
 
-    /**
-     * @hidden
-     */
-    public override get parentRowOutletDirective() {
-        // Targeting parent outlet in order to prevent hiding when outlet
-        // is present at a child grid and is attached to a row.
-        return this.parent ? this.parent.rowOutletDirective : this.outlet;
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts

@@ -582,8 +582,10 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
             expect(idCell.editMode).toBeFalsy();
             expect(ageCell.editMode).toBeTruthy();
 
-            const cancelBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[0] as DebugElement;
-            const doneBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[1];
+            // the first button element is in the add row snackbar, so we need to get
+            // the second and third one which are Cancel and Done buttons in the row edit banner
+            const cancelBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[1];
+            const doneBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[2];
             spyOn(cancelBtn.nativeElement, 'focus').and.callThrough();
             spyOn<any>(grid.rowEditTabs.first, 'move').and.callThrough();
             spyOn<any>(grid.rowEditTabs.last, 'move').and.callThrough();

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

@@ -116,7 +116,6 @@
             </igx-grid-summary-row>
         </ng-template>
         <ng-container *ngTemplateOutlet="template; context: { $implicit: this }"></ng-container>
-        <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
         <ng-container #bodyViewContainerRef></ng-container>
         <igc-trial-watermark></igc-trial-watermark>
     </div>