feat(overlay): do not move overlay element

Author: wnvko

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 21.1.1
+
+### New Features
+
+- `IgxOverlayService`
+    - The overlay service now always renders content in place using the HTML Popover API, eliminating the need for outlet containers.
+
+    - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are all deprecated. The overlay service now always renders content in place using the HTML Popover API. These will be removed in a future version.
+
 ## 21.1.0
 
 ### New Features

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

@@ -78,7 +78,7 @@ this.overlay.show(component, overlaySettings);
 | 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.** No longer has any effect. The overlay service now always renders content in place using the HTML Popover API. This property will be removed in a future version. |
 
 ###### PositionSettings
 
@@ -135,7 +135,7 @@ 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?|
+|createAbsoluteOverlaySettings| Creates overlay settings with global or container position strategy based on a preset position settings. **Note:** The `outlet` parameter is deprecated and no longer has any effect. The overlay service now always renders content in place.    |position?, outlet?|
 |createRelativeOverlaySettings| Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings    |target, strategy?, position?|