refactor(overlay): do not use outlet internally

projects/igniteui-angular/date-picker/src/date-picker/README.md

@@ -113,7 +113,6 @@ The date picker also supports binding through `ngModel` if two-way date-bind is
 | `overlaySettings` | Changes the default overlay settings used by the `IgxDatePickerComponent`. | OverlaySettings |
 | `placeholder` | Sets the placeholder text for empty input. | string |
 | `disabled` | Disables or enables the picker. | boolean |
-| `outlet` | **Deprecated.** The container used for the pop up element. | IgxOverlayOutletDirective \| ElementRef |
 | `type` | Determines how the picker will be styled. | IgxInputGroupType |
 | `spinLoop` | Determines if the currently spun date segment should loop over. | boolean |
 | `spinDelta` | Delta values used to increment or decrement each editor date part on spin actions. All values default to `1`. | DatePartDeltas |

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.
      *
@@ -600,9 +580,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         if (this.isDropdown && this.inputGroupElement) {
             overlaySettings.target = this.inputGroupElement;
         }
-        if (this.outlet) {
-            overlaySettings.outlet = this.outlet;
-        }
         this._overlayId = this._overlayService
             .attach(IgxCalendarContainerComponent, this.viewContainerRef, overlaySettings);
         this._overlayService.show(this._overlayId);

projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts

@@ -185,24 +185,6 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
         this._weekStart = value;
     }
 
-    /**
-     * The container used for the pop-up element.
-     *
-     * @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 outlet: IgxOverlayOutletDirective | ElementRef;
-
     /**
      * Determines how the picker's input will be styled.
      *

projects/igniteui-angular/date-picker/src/date-range-picker/README.md

@@ -116,7 +116,6 @@ With projected inputs:
 | mode             | PickerInteractionMode    | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. Default is `dialog` |
 | minValue | Date \| string | The minimum value in a valid range. |
 | maxValue | Date \| string | The maximum value in a valid range. |
-| outlet | IgxOverlayOutletDirective \| ElementRef<any> | **Deprecated** Gets/Sets the container used for the popup element.
 | overlaySettings  | OverlaySettings    | Changes the default overlay settings used by the `IgxDateRangePickerComponent`. | 
 | placeholder      | string             | Sets the `placeholder` for single-input `IgxDateRangePickerComponent`. |
 | weekStart        | number             | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |

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/notification/notifications.directive.ts

@@ -1,5 +1,5 @@
-import { Directive, ElementRef, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core';
-import { IgxOverlayOutletDirective, IToggleView } from 'igniteui-angular/core';
+import { Directive, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core';
+import { IToggleView } from 'igniteui-angular/core';
 import { IPositionStrategy, OverlaySettings } from 'igniteui-angular/core';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
 
@@ -29,19 +29,6 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective
     @Input()
     public displayTime = 4000;
 
-    /**
-     * Gets/Sets the container used for the element.
-     *
-     * @remarks
-     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
-     *
-     * @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 component in the intended
-     * DOM tree position instead and use `positioning` property as needed.
-     */
-    @Input()
-    public outlet: IgxOverlayOutletDirective | ElementRef<HTMLElement>;
-
     /**
      * Controls whether positioning is relative to the viewport or to the nearest positioned container.
      */
@@ -95,8 +82,7 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective
             positionStrategy: this.strategy,
             closeOnEscape: false,
             closeOnOutsideClick: false,
-            modal: false,
-            outlet: this.outlet
+            modal: false
         };
 
         super.open(overlaySettings);

projects/igniteui-angular/directives/src/directives/toggle/README.md

@@ -103,18 +103,3 @@ Providing reference from custom component which has already been registered into
 |:----------:|:-------------|:------|
 | `igxToggleAction`| `IToggleView` \| `string` | Determines the target that have to be controled. |
 | `overlaySettings` | `OverlaySettings`| Passes `igxOverlay` settings for applicable targets (`igxToggle`) that control positioning, interaction and scroll behavior.
-| `igxToggleOutlet` | `IgxOverlayOutletDirective` \| `ElementRef`| **Deprecated.** Determines where the target overlay element should be attached. Shortcut for `overlaySettings.outlet`.
-
-# IgxOverlayOutlet Directive
-
-The **IgxOverlayOutlet** provides a way to mark an element as an `igxOverlay` outlet container through the component template only.
-Directive instance is exported as `overlay-outlet`, so it can be assigned within the template:
-
-```html
-<div igxOverlayOutlet #outlet="overlay-outlet"></div>
-```
-This allows to provide the `outlet` templates variable as a setting to the toggle action:
-```html
-<button type="button" igxButton [igxToggleAction]="reference" [igxToggleOutlet]="outlet">Toggle</button>
-<custom-component #reference></custom-component>
-```

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/directives/src/directives/toggle/toggle.directive.ts

@@ -10,7 +10,7 @@ import {
     OnInit,
     Output,
 } from '@angular/core';
-import { AbsoluteScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy } from 'igniteui-angular/core';
 import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from 'igniteui-angular/core';
 import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
 import { filter, first, takeUntil } from 'rxjs/operators';
@@ -436,22 +436,6 @@ export class IgxToggleActionDirective implements OnInit {
     @Input()
     public overlaySettings: OverlaySettings;
 
-    /**
-     * Determines where the toggle element overlay should be attached.
-     *
-     * ```html
-     * <!--set-->
-     * <div igxToggleAction [igxToggleOutlet]="outlet"></div>
-     * ```
-     * Where `outlet` in an instance of `IgxOverlayOutletDirective` or an `ElementRef`
-     *
-     * @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 or use `container` property instead.
-     */
-    @Input('igxToggleOutlet')
-    public outlet: IgxOverlayOutletDirective | ElementRef;
-
     /**
      * @hidden
      */
@@ -480,10 +464,6 @@ export class IgxToggleActionDirective implements OnInit {
      */
     @HostListener('click')
     public onClick() {
-        if (this.outlet) {
-            this._overlayDefaults.outlet = this.outlet;
-        }
-
         const clonedSettings = Object.assign({}, this._overlayDefaults, this.overlaySettings);
         this.updateOverlaySettings(clonedSettings);
         this.target.toggle(clonedSettings);

projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts

@@ -418,7 +418,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
-        this._checkOutletAndOutsideClick();
         this._hideOnInteraction();
     }
 
@@ -513,12 +512,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._abortController = new AbortController();
     }
 
-    private _checkOutletAndOutsideClick(): void {
-        if (this.outlet) {
-            this._overlayDefaults.outlet = this.outlet;
-        }
-    }
-
     /**
      * A guard method that performs precondition checks before showing the tooltip.
      * It ensures that the tooltip is not disabled and not already shown in sticky mode.
@@ -528,7 +521,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         if (this.tooltipDisabled) return;
         if (!this.target.collapsed && this.target?.tooltipTarget?.sticky) return;
 
-        this._checkOutletAndOutsideClick();
         this._checkTooltipForMultipleTargets();
         action();
     }

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);