refactor(overlay): stop moving to body container & deprecate outlet (#16989)

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

Author: wnvko

CHANGELOG.md

@@ -6,10 +6,21 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `IgxOverlayService`
+    - `IgxOverlayService.createAbsoluteOverlaySettings` - Added a new overload accepting `useContainerStrategy?: boolean` as the second parameter. When `true`, uses `ContainerPositionStrategy`; otherwise defaults to `GlobalPositionStrategy`. The previous overload accepting `outlet?: IgxOverlayOutletDirective | ElementRef` is still supported but deprecated.
+
+- `IgxSnackbarComponent`, `IgxToastComponent`
+    - Added a new `positioning` input property. When set to `container`, the components is displayed inside its nearest positioned ancestor in place of the now deprecated `outlet` property .
+
 - `IgxCombo`, `IgxSimpleCombo`
     - Introduced the `selectionChanged` event for both components. The event is not cancelable and is emitted after the selection is committed and the component state is updated.
     - Added `disableClear` input that allows hiding the clear button even when items are selected. Defaults to `false`.
 
+### General
+
+- `IgxOverlayService`
+    - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are deprecated and will be removed in a future version. As overlay service now integrates the HTML Popover API and prefers rendering content in place / in the top layer, significantly reducing the need for outlet containers, new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers.
+
 ## 21.1.3
 
 ### Security Fixes

projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts

@@ -1045,7 +1045,7 @@ describe('Multi-View Calendar - ', () => {
             tick(400);
             fixture.detectChanges();
 
-            let overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            let overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             HelperTestFunctions.verifyMonthsViewNumber(overlay, 3);
             HelperTestFunctions.verifyCalendarSubHeaders(overlay, [ymd('2019-09-16'), ymd('2019-10-16'), ymd('2019-11-16')]);
 
@@ -1064,7 +1064,7 @@ describe('Multi-View Calendar - ', () => {
             tick(400);
             fixture.detectChanges();
 
-            overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             HelperTestFunctions.verifyMonthsViewNumber(overlay, 2);
             HelperTestFunctions.verifyCalendarSubHeaders(overlay, [ymd('2019-09-16'), ymd('2019-10-16')]);
 
@@ -1079,7 +1079,7 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
 
             expect(datePicker.hideOutsideDays).toBe(true);
-            let overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            let overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             expect(HelperTestFunctions.getHiddenDays(overlay, 0).length).toBe(HelperTestFunctions.getInactiveDays(overlay, 0).length);
             expect(HelperTestFunctions.getHiddenDays(overlay, 1).length).toBe(HelperTestFunctions.getInactiveDays(overlay, 1).length);
             expect(HelperTestFunctions.getHiddenDays(overlay, 2).length).toBe(HelperTestFunctions.getInactiveDays(overlay, 2).length);
@@ -1098,7 +1098,7 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
 
             expect(datePicker.hideOutsideDays).toBe(false);
-            overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             expect(HelperTestFunctions.getHiddenDays(overlay, 0).length).toBe(12);
             expect(HelperTestFunctions.getHiddenDays(overlay, 1).length).toBe(11);
             expect(HelperTestFunctions.getHiddenDays(overlay, 2).length).toBe(5);

projects/igniteui-angular/core/src/services/overlay/README.md

@@ -73,12 +73,12 @@ this.overlay.show(component, overlaySettings);
 
 | Name | Type | Description |
 | :--- | :--- | :---------- |
-| target              | Point | HTMLElement                     | Attaching target for the component to show          |
+| target              | Point | HTMLElement                     | Attaching target for the component to show.         |
 | positionStrategy    | IPositionStrategy                       | Position strategy to use with this settings         | 
 | scrollStrategy      | IScrollStrategy                         | Scroll strategy to use with this settings           |
 | modal               | boolean                                 | Set if the overlay should be in modal mode          |
 | closeOnOutsideClick | boolean                                 | Set if the overlay should closed on outside click   |
-| outlet              | IgxOverlayOutletDirective or ElementRef | Set the outlet container to attach the overlay to   |
+| outlet              | IgxOverlayOutletDirective or ElementRef | **Deprecated.** Set the outlet container to attach the overlay to |
 
 ###### PositionSettings
 
@@ -135,8 +135,8 @@ this.overlay.show(component, overlaySettings);
 | Name            | Description                                                                     | Parameters |
 |-----------------|---------------------------------------------------------------------------------|------------|
 |getPointFromPositionsSettings| Calculates the point from which the overlay should start showing    |settings    |
-|createAbsoluteOverlaySettings| Creates overlay settings with global or container position strategy based on a preset position settings    |position?, outlet?|
-|createRelativeOverlaySettings| Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings    |target, strategy?, position?|
+|createAbsoluteOverlaySettings| Creates overlay settings with global or container position strategy based on a preset position settings |position?, useContainerStrategy?|
+|createRelativeOverlaySettings| Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings |target, strategy?, position?|
 
 
 ##### Events