Merge pull request #17160 from IgniteUI/mvenkov/remove-internal-overlay-outlets

refactor(overlay): do not use outlet internally

Author: wnvko

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss

@@ -458,14 +458,6 @@
             @extend %igx-grid__outlet !optional;
         }
 
-        @include e(loading-outlet) {
-            @extend %igx-grid__loading-outlet !optional;
-        }
-
-        @include e(row-editing-outlet) {
-            @extend %igx-grid__row-editing-outlet !optional;
-        }
-
         @include e(addrow-snackbar) {
             @extend %igx-grid__addrow-snackbar !optional;
         }

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss

@@ -2335,35 +2335,6 @@
 
     %igx-grid__outlet {
         --ig-size: var(--grid-size);
-
-        z-index: 10002;
-        position: fixed;
-    }
-
-    %igx-grid__loading-outlet {
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        position: absolute;
-
-        > %overlay-wrapper--modal {
-            background: none;
-        }
-
-        %circular-display {
-            width: rem(50);
-            height: rem(50);
-        }
-    }
-
-    %igx-grid__row-editing-outlet {
-        z-index: 10000;
-        position: absolute;
-
-        %overlay-wrapper {
-            /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */
-            position: absolute;
-        }
     }
 
     %igx-grid__addrow-snackbar {

projects/igniteui-angular/core/src/services/overlay/overlay.ts

@@ -136,17 +136,6 @@ export class IgxOverlayService implements OnDestroy {
         this._document = this.document;
     }
 
-    /**
-     * @param position Preset position settings. Default position is 'center'
-     * @param outlet The outlet container to attach the overlay to
-     * @returns Non-modal overlay settings based on Global or Container position strategy and the provided position.
-    *
-     * @deprecated in version 21.2.0. The outlet parameter is deprecated. Please provide the container or outlet element through the
-     * `createAbsoluteOverlaySettings` method when calling `attach` method.
-     * Creates overlay settings with global or container position strategy and preset position settings
-     */
-    public static createAbsoluteOverlaySettings(
-        position?: AbsolutePosition, outlet?: IgxOverlayOutletDirective | ElementRef): OverlaySettings;
     /**
      * Creates overlay settings with global or container position strategy and preset position settings.
      *
@@ -159,6 +148,17 @@ export class IgxOverlayService implements OnDestroy {
      */
     public static createAbsoluteOverlaySettings(
         position?: AbsolutePosition, useContainerStrategy?: boolean): OverlaySettings;
+    /**
+     * @param position Preset position settings. Default position is 'center'
+     * @param outlet The outlet container to attach the overlay to
+     * @returns Non-modal overlay settings based on Global or Container position strategy and the provided position.
+    *
+     * @deprecated in version 21.2.0. The outlet parameter is deprecated. Please provide the container or outlet element through the
+     * `createAbsoluteOverlaySettings` method when calling `attach` method.
+     * Creates overlay settings with global or container position strategy and preset position settings
+     */
+    public static createAbsoluteOverlaySettings(
+        position?: AbsolutePosition, outlet?: IgxOverlayOutletDirective | ElementRef): OverlaySettings;
     public static createAbsoluteOverlaySettings(
         position?: AbsolutePosition, containerOrOutlet?: IgxOverlayOutletDirective | ElementRef | boolean): OverlaySettings {
         const positionSettings = this.createAbsolutePositionSettings(position);

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts

@@ -9,12 +9,9 @@ import { IFormattingViews, IgxCalendarComponent, IgxCalendarHeaderTemplateDirect
 import { IgxCalendarContainerComponent } from './calendar-container/calendar-container.component';
 import { IgxDatePickerComponent } from './date-picker.component';
 import {
-    IgxOverlayOutletDirective,
     IgxOverlayService,
     OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings,
-    WEEKDAYS,
-    BaseFormatter,
-    I18N_FORMATTER
+    WEEKDAYS
 } from 'igniteui-angular/core';
 import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, Injector, QueryList, Renderer2, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -1064,7 +1061,6 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.isDropdown).toEqual(true);
                 expect(datePicker.minValue).toEqual(undefined);
                 expect(datePicker.maxValue).toEqual(undefined);
-                expect(datePicker.outlet).toEqual(undefined);
                 expect(datePicker.specialDates).toEqual(null);
                 expect(datePicker.spinDelta).toEqual(undefined);
                 expect(datePicker.spinLoop).toEqual(true);
@@ -1152,15 +1148,6 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.maxValue).toEqual(today);
                 datePicker.maxValue = '12/12/1998';
                 expect(datePicker.maxValue).toEqual('12/12/1998');
-                datePicker.outlet = null;
-                expect(datePicker.outlet).toEqual(null);
-                const mockEl: ElementRef = jasmine.createSpyObj<ElementRef>('mockEl', ['nativeElement']);
-                datePicker.outlet = mockEl;
-                expect(datePicker.outlet).toEqual(mockEl);
-                const mockOverlayDirective: IgxOverlayOutletDirective =
-                    jasmine.createSpyObj<IgxOverlayOutletDirective>('mockEl', ['nativeElement']);
-                datePicker.outlet = mockOverlayDirective;
-                expect(datePicker.outlet).toEqual(mockOverlayDirective);
                 const specialDates: DateRangeDescriptor[] = [{ type: DateRangeType.Weekdays },
                 { type: DateRangeType.Before, dateRange: [today] }];
                 datePicker.specialDates = specialDates;
@@ -1286,21 +1273,18 @@ describe('IgxDatePicker', () => {
                 datePicker.open();
                 expect(overlay.attach).toHaveBeenCalledWith(IgxCalendarContainerComponent, viewsContainerRef, baseDropdownSettings);
                 expect(overlay.show).toHaveBeenCalledWith(mockOverlayId);
-                const mockOutlet = {} as any;
-                datePicker.outlet = mockOutlet;
                 datePicker.open();
                 expect(overlay.attach).toHaveBeenCalledWith(
                     IgxCalendarContainerComponent,
                     viewsContainerRef,
-                    Object.assign({}, baseDropdownSettings, { outlet: mockOutlet }),
+                    Object.assign({}, baseDropdownSettings),
                 );
                 expect(overlay.show).toHaveBeenCalledWith(mockOverlayId);
                 let mockSettings: OverlaySettings = {
                     closeOnEscape: true,
                     closeOnOutsideClick: true,
                     modal: false
                 };
-                datePicker.outlet = null;
                 datePicker.open(mockSettings);
                 expect(overlay.attach).toHaveBeenCalledWith(
                     IgxCalendarContainerComponent,

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts

@@ -5,7 +5,6 @@ import {
     ChangeDetectorRef,
     Component,
     ContentChild,
-    ElementRef,
     EventEmitter,
     HostBinding,
     HostListener,
@@ -243,25 +242,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input()
     public spinDelta: Pick<DatePartDeltas, 'date' | 'month' | 'year'>;
 
-    /**
-     * Gets/Sets the container used for the popup element.
-     * @remarks
-     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
-     * @example
-     * ```html
-     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
-     * //..
-     * <igx-date-picker [outlet]="outlet"></igx-date-picker>
-     * //..
-     * ```
-     *
-     * @deprecated in version 21.2.0. Overlays now use the HTML Popover API and no longer move to the document
-     * body by default, so using outlet is also no longer needed - just define the overlay in the intended
-     * DOM tree position instead.
-     */
-    @Input()
-    public override outlet: IgxOverlayOutletDirective | ElementRef;
-
     /**
      * Gets/Sets the value of `id` attribute.
      *

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts

@@ -37,8 +37,7 @@ import {
     DateTimeUtil,
     IgxPickerActionsDirective,
     isDateInRanges,
-    PickerCalendarOrientation,
-    IgxOverlayOutletDirective
+    PickerCalendarOrientation
 } from 'igniteui-angular/core';
 import { IgxCalendarContainerComponent } from '../date-picker/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-picker/picker-base.directive';
@@ -364,26 +363,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @Input()
     public override placeholder = '';
 
-    /**
-     * Gets/Sets the container used for the popup element.
-     *
-     * @remarks
-     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
-     * @example
-     * ```html
-     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
-     * //..
-     * <igx-date-range-picker [outlet]="outlet"></igx-date-range-picker>
-     * //..
-     * ```
-     *
-     * @deprecated in version 21.2.0. Overlays now use the HTML Popover API and no longer move to the document
-     * body by default, so using outlet is also no longer needed - just define the overlay in the intended
-     * DOM tree position instead.
-     */
-    @Input()
-    public override outlet: IgxOverlayOutletDirective | ElementRef<any>;
-
     /**
      * Show/hide week numbers
      *

projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts

@@ -5,7 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxToggleActionDirective, IgxToggleDirective } from './toggle.directive';
 
 import { first } from 'rxjs/operators';
-import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayOutletDirective, IgxOverlayService, OffsetMode, OverlaySettings } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayService, OffsetMode, OverlaySettings } from 'igniteui-angular/core';
 
 describe('IgxToggle', () => {
     const HIDDEN_TOGGLER_CLASS = 'igx-toggle--hidden';
@@ -15,7 +15,6 @@ describe('IgxToggle', () => {
             imports: [
                 NoopAnimationsModule,
                 IgxToggleActionTestComponent,
-                IgxToggleOutletComponent,
                 IgxToggleServiceInjectComponent,
                 IgxOverlayServiceComponent,
                 IgxToggleTestComponent,
@@ -610,29 +609,6 @@ describe('IgxToggle', () => {
             expect(toggle.closing.emit).toHaveBeenCalledWith({ id: '0', owner: toggle, cancel: false, event: new Event('click') });
             expect(toggle.closed.emit).toHaveBeenCalledTimes(1);
         }));
-
-        it('should pass IgxOverlayOutletDirective input from IgxToggleActionDirective', () => {
-            const fixture = TestBed.createComponent(IgxToggleOutletComponent);
-            const outlet = fixture.debugElement.query(By.css('.outlet-container')).nativeElement;
-            const toggleSpy = spyOn(IgxToggleDirective.prototype, 'toggle');
-            const button = fixture.debugElement.query(By.directive(IgxToggleActionDirective)).nativeElement;
-            fixture.detectChanges();
-
-            const settings: OverlaySettings = {
-                target: button,
-                positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
-                closeOnOutsideClick: true,
-                modal: false,
-                scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
-                outlet: jasmine.any(IgxOverlayOutletDirective) as any,
-                excludeFromOutsideClick: [button]
-            };
-
-            fixture.componentInstance.toggleAction.onClick();
-            expect(IgxToggleDirective.prototype.toggle).toHaveBeenCalledWith(settings);
-            const directive = toggleSpy.calls.mostRecent().args[0].outlet as IgxOverlayOutletDirective;
-            expect(directive.nativeElement).toBe(outlet);
-        });
     });
 });
 
@@ -678,16 +654,6 @@ export class IgxToggleActionTestComponent {
     }
 }
 
-@Component({
-    template: `
-    <button type="button" [igxToggleAction]="toggleRef" [overlaySettings]="{}" [igxToggleOutlet]="outlet"></button>
-    <div igxToggle #toggleRef="toggle"></div>
-    <div igxOverlayOutlet #outlet="overlay-outlet" class="outlet-container"></div>
-    `,
-    imports: [IgxToggleActionDirective, IgxToggleDirective, IgxOverlayOutletDirective]
-})
-export class IgxToggleOutletComponent extends IgxToggleActionTestComponent { }
-
 @Component({
     template: `
         <button type="button" igxToggleAction="toggleID">Open/Close Toggle</button>

projects/igniteui-angular/grids/core/src/cell.component.html

@@ -125,7 +125,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-date-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [weekStart]="column.pipeArgs.weekStart"
@@ -142,7 +141,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-time-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [inputFormat]="column.editorOptions?.dateTimeFormat"
@@ -215,7 +213,6 @@
         name="error"
         #errorIcon
         [igxTooltipTarget]="tooltipRef"
-        [igxToggleOutlet]="grid.outlet"
         (mouseover)='errorShowing = true'
         (mouseout)='errorShowing = false'>
     </igx-icon>

projects/igniteui-angular/grids/core/src/cell.component.ts

@@ -920,7 +920,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
                 closeOnOutsideClick: true,
                 excludeFromOutsideClick: [this.nativeElement],
                 closeOnEscape: false,
-                outlet: this.grid.outlet,
                 modal: false,
                 positionStrategy: new AutoPositionStrategy({
                     horizontalStartPoint: HorizontalAlignment.Center,

projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ChangeDetectorRef, AfterViewInit, OnDestroy, HostBinding, inject } from '@angular/core';
+import { Component, Input, ViewChild, ChangeDetectorRef, OnDestroy, HostBinding, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { IActiveNode } from '../../grid-navigation.service';
 import { GridType } from '../../common/grid.interface';
@@ -34,7 +34,7 @@ import {
     templateUrl: './advanced-filtering-dialog.component.html',
     imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective]
 })
-export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy {
+export class IgxAdvancedFilteringDialogComponent implements OnDestroy {
     public cdr = inject(ChangeDetectorRef);
     protected platform = inject(PlatformUtil);
 
@@ -75,12 +75,6 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
             this.assignResourceStrings(false);
         }, this);
     }
-    /**
-     * @hidden @internal
-     */
-    public ngAfterViewInit(): void {
-        this.queryBuilder.setPickerOutlet(this.grid.outlet);
-    }
 
     /**
      * @hidden @internal