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

CHANGELOG.md

@@ -6,6 +6,18 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `IgxOverlayService`
+    - The 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. When configured, `OverlaySettings.outlet` is still honored, and overlays may also fall back to being appended to `document.body` when required.
+
+    - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are deprecated and will be removed in a future version. They remain functional in this release for backward compatibility, but new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers.
+
+    - `ContainerPositionStrategy` - The `ContainerPositionStrategy` now uses the `target` property from `OverlaySettings` (when set to an `HTMLElement`) as the container in which the overlay is rendered. This replaces the previous reliance on the deprecated `outlet` property and internal DOM traversal. The overlay wrapper is sized and positioned to match the target container's bounds and automatically updates on resize via `ResizeObserver`.
+
+    - `IgxOverlayService.createAbsoluteOverlaySettings` - Added a new overload accepting `container?: HTMLElement` as the second parameter. When a container element is provided, a `ContainerPositionStrategy` is used and the `target` in the returned overlay settings is set to the container element. The previous overload accepting `outlet?: IgxOverlayOutletDirective | ElementRef` is still supported but deprecated.
+
+- `IgxNotificationsDirective`, `IgxSnackbarComponent`, `IgxToastComponent`
+    - Added a new `container` input property of type `HTMLElement`. When set, overlay content is rendered inside the given container using `ContainerPositionStrategy`. The deprecated `outlet` property now points users to `container` as its replacement.
+
 - `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.
 

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. When set to an `HTMLElement` in combination with `ContainerPositionStrategy`, the element serves as the container in which the overlay is rendered. |
 | 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.** Use `target` with an `HTMLElement` and `ContainerPositionStrategy` instead. Still supported for backward compatibility but 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 a global or container position strategy based on preset position settings. Accepts either a deprecated outlet (`IgxOverlayOutletDirective` / `ElementRef`) or an `HTMLElement` container. When a container or outlet is provided, a `ContainerPositionStrategy` is used; otherwise, a `GlobalPositionStrategy` is used.    |position?, container?|
 |createRelativeOverlaySettings| Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings    |target, strategy?, position?|