feat(overlay): remove outlet from container position strategy

Author: wnvko

CHANGELOG.md

@@ -10,6 +10,13 @@ All notable changes for each version of this project will be documented in this
     - 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.
 ## 21.1.0
 
 ### New Features

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 | **Deprecated.** Still supported and used by the overlay service when provided but will be removed in a future version. Avoid using this property in new code and prefer the default in-place rendering with the HTML Popover API. |
+| 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 a global or container position strategy based on preset position settings and the provided outlet. When an outlet is specified, a container strategy is used and the content is rendered inside that outlet; otherwise, a global strategy is used and the content is rendered in place.    |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?|
 
 

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

@@ -3414,41 +3414,41 @@ describe('igxOverlay', () => {
         }));
 
         // 1.5 GlobalContainer.
-        it('Should center the shown component in the outlet.', fakeAsync(() => {
+        it('Should center the shown component in the container.', fakeAsync(() => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
 
-            const outlet = fixture.componentInstance.divElement;
-            const outletElement = outlet.nativeElement;
-            outletElement.style.width = '800px';
-            outletElement.style.height = '600px';
-            outletElement.style.position = 'fixed';
-            outletElement.style.top = '100px';
-            outletElement.style.left = '200px';
-            outletElement.style.overflow = 'hidden';
+            const container = fixture.componentInstance.divElement;
+            const containerElement = container.nativeElement;
+            containerElement.style.width = '800px';
+            containerElement.style.height = '600px';
+            containerElement.style.position = 'fixed';
+            containerElement.style.top = '100px';
+            containerElement.style.left = '200px';
+            containerElement.style.overflow = 'hidden';
 
             fixture.detectChanges();
             const overlaySettings: OverlaySettings = {
-                outlet,
+                target: containerElement,
                 positionStrategy: new ContainerPositionStrategy()
             };
 
-            const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, overlaySettings);
+            const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, fixture.componentInstance.viewContainerRef, overlaySettings);
             fixture.componentInstance.overlay.show(id);
             tick();
 
-            const overlayElement = outletElement.children[0];
+            const overlayElement = containerElement.children[0];
             const overlayElementRect = overlayElement.getBoundingClientRect();
-            expect(overlayElementRect.width).toBeCloseTo(800, 1);
-            expect(overlayElementRect.height).toBeCloseTo(600, 1);
+            expect(overlayElementRect.width).toBeCloseTo(800, 0);
+            expect(overlayElementRect.height).toBeCloseTo(600, 0);
 
             const wrapperElement = overlayElement.children[0] as HTMLElement;
             const componentElement = wrapperElement.children[0].children[0];
             const componentRect = componentElement.getBoundingClientRect();
-            const outletRect = outletElement.getBoundingClientRect();
+            const containerRect = containerElement.getBoundingClientRect();
 
-            // Check component is centered relative to outlet
-            const horizontalCenter = Math.abs((componentRect.left + componentRect.width / 2) - (outletRect.left + outletRect.width / 2));
-            const verticalCenter = Math.abs((componentRect.top + componentRect.height / 2) - (outletRect.top + outletRect.height / 2));
+            // Check component is centered relative to container
+            const horizontalCenter = Math.abs((componentRect.left + componentRect.width / 2) - (containerRect.left + containerRect.width / 2));
+            const verticalCenter = Math.abs((componentRect.top + componentRect.height / 2) - (containerRect.top + containerRect.height / 2));
             expect(horizontalCenter).toBeLessThan(1);
             expect(verticalCenter).toBeLessThan(1);
 
@@ -3458,41 +3458,41 @@ describe('igxOverlay', () => {
         it('Should reposition overlay when outlet is resized with ContainerPositionStrategy.', async() => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
 
-            const outlet = fixture.componentInstance.divElement;
-            const outletElement = outlet.nativeElement;
-            outletElement.style.width = '800px';
-            outletElement.style.height = '600px';
-            outletElement.style.position = 'fixed';
-            outletElement.style.top = '100px';
-            outletElement.style.left = '200px';
-            outletElement.style.overflow = 'hidden';
+            const container = fixture.componentInstance.divElement;
+            const containerElement = container.nativeElement;
+            containerElement.style.width = '800px';
+            containerElement.style.height = '600px';
+            containerElement.style.position = 'fixed';
+            containerElement.style.top = '100px';
+            containerElement.style.left = '200px';
+            containerElement.style.overflow = 'hidden';
 
             fixture.detectChanges();
             const overlaySettings: OverlaySettings = {
-                outlet,
+                target: containerElement,
                 positionStrategy: new ContainerPositionStrategy()
             };
 
-            const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, overlaySettings);
+            const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, fixture.componentInstance.viewContainerRef, overlaySettings);
             fixture.componentInstance.overlay.show(id);
             fixture.detectChanges();
             await wait(100);
 
-            let wrapperElement = outletElement.children[0];
+            let wrapperElement = containerElement.children[0];
             let wrapperRect = wrapperElement.getBoundingClientRect();
 
             // Initial wrapper dimensions should match outlet
             expect(wrapperRect.width).toBeCloseTo(800, 0);
             expect(wrapperRect.height).toBeCloseTo(600, 0);
 
             // Resize the outlet
-            outletElement.style.width = '1000px';
-            outletElement.style.height = '700px';
+            containerElement.style.width = '1000px';
+            containerElement.style.height = '700px';
             fixture.detectChanges();
             await wait(100);
 
             // Wrapper should now match new outlet dimensions
-            wrapperElement = outletElement.children[0];
+            wrapperElement = containerElement.children[0];
             wrapperRect = wrapperElement.getBoundingClientRect();
             expect(wrapperRect.width).toBeCloseTo(1000, 0);
             expect(wrapperRect.height).toBeCloseTo(700, 0);
@@ -3503,30 +3503,30 @@ describe('igxOverlay', () => {
         it('Should maintain centering when outlet is resized with ContainerPositionStrategy.', async () => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
 
-            const outlet = fixture.componentInstance.divElement;
-            const outletElement = outlet.nativeElement;
-            outletElement.style.width = '600px';
-            outletElement.style.height = '400px';
-            outletElement.style.position = 'fixed';
-            outletElement.style.top = '50px';
-            outletElement.style.left = '50px';
-            outletElement.style.overflow = 'hidden';
+            const container = fixture.componentInstance.divElement;
+            const containerElement = container.nativeElement;
+            containerElement.style.width = '600px';
+            containerElement.style.height = '400px';
+            containerElement.style.position = 'fixed';
+            containerElement.style.top = '50px';
+            containerElement.style.left = '50px';
+            containerElement.style.overflow = 'hidden';
 
             fixture.detectChanges();
             const overlaySettings: OverlaySettings = {
-                outlet,
+                target: containerElement,
                 positionStrategy: new ContainerPositionStrategy()
             };
 
-            const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, overlaySettings);
+            const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, fixture.componentInstance.viewContainerRef, overlaySettings);
             fixture.componentInstance.overlay.show(id);
             fixture.detectChanges();
             await wait(100);
 
-            const wrapperElement = outletElement.children[0];
+            const wrapperElement = containerElement.children[0];
             let componentElement = wrapperElement.children[0].children[0];
             let componentRect = componentElement.getBoundingClientRect();
-            let outletRect = outletElement.getBoundingClientRect();
+            let outletRect = containerElement.getBoundingClientRect();
 
             // Verify initial centering
             let horizontalCenter = Math.abs((componentRect.left + componentRect.width / 2) - (outletRect.left + outletRect.width / 2));
@@ -3535,49 +3535,49 @@ describe('igxOverlay', () => {
             expect(verticalCenter).toBeLessThan(2);
 
             // Resize the outlet
-            outletElement.style.width = '900px';
-            outletElement.style.height = '600px';
+            containerElement.style.width = '900px';
+            containerElement.style.height = '600px';
 
             // Wait for ResizeObserver to fire for size change
             await wait(100);
 
             // Re-check centering with new dimensions
             componentElement = wrapperElement.children[0].children[0];
             componentRect = componentElement.getBoundingClientRect();
-            outletRect = outletElement.getBoundingClientRect();
+            outletRect = containerElement.getBoundingClientRect();
 
             horizontalCenter = Math.abs((componentRect.left + componentRect.width / 2) - (outletRect.left + outletRect.width / 2));
             verticalCenter = Math.abs((componentRect.top + componentRect.height / 2) - (outletRect.top + outletRect.height / 2));
-            expect(horizontalCenter).toBeLessThan(2);
-            expect(verticalCenter).toBeLessThan(2);
+            expect(horizontalCenter).toBeLessThan(1);
+            expect(verticalCenter).toBeLessThan(1);
 
             fixture.componentInstance.overlay.detachAll();
         });
 
         it('Should dispose IntersectionObserver when overlay is detached.', async () => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
 
-            const outlet = fixture.componentInstance.divElement;
-            const outletElement = outlet.nativeElement;
-            outletElement.style.width = '800px';
-            outletElement.style.height = '600px';
-            outletElement.style.position = 'fixed';
-            outletElement.style.top = '100px';
-            outletElement.style.left = '200px';
+            const container = fixture.componentInstance.divElement;
+            const containerElement = container.nativeElement;
+            containerElement.style.width = '800px';
+            containerElement.style.height = '600px';
+            containerElement.style.position = 'fixed';
+            containerElement.style.top = '100px';
+            containerElement.style.left = '200px';
 
             fixture.detectChanges();
             const positionStrategy = new ContainerPositionStrategy();
             spyOn(positionStrategy, 'dispose').and.callThrough();
             const overlaySettings: OverlaySettings = {
-                outlet,
+                target: containerElement,
                 positionStrategy
             };
 
             const id = fixture.componentInstance.overlay.attach(SimpleDynamicComponent, overlaySettings);
             fixture.componentInstance.overlay.show(id);
             await wait(100);
 
-            const wrapperElement = outletElement.children[0];
+            const wrapperElement = containerElement.children[0];
             const wrapperRect = wrapperElement.getBoundingClientRect();
 
             // Initial dimensions
@@ -4851,6 +4851,7 @@ describe('igxOverlay', () => {
     standalone: true
 })
 export class SimpleDynamicComponent {
+    public viewContainerRef = inject(ViewContainerRef);
     @HostBinding('style.display')
     public hostDisplay = 'block';
     @HostBinding('style.width')