chore(overlay): address PR comments

Author: wnvko

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

@@ -113,6 +113,7 @@ 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/picker-base.directive.ts

@@ -185,6 +185,24 @@ 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,6 +116,7 @@ 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/grids/grid/src/grid.component.html

@@ -177,7 +177,7 @@
     </div>
 
     <div class="igx-grid__loading-outlet">
-        <div igxToggle>
+        <div igxToggle #loadingOverlay>
             @if (shouldOverlayLoading) {
                 <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
             }

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html

@@ -131,8 +131,7 @@
     </div>
     <div igxToggle #loadingOverlay>
         @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true">
-            </igx-circular-bar>
+            <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
         }
     </div>
     @if (moving && columnInDrag) {
@@ -270,7 +269,6 @@
 @if (colResizingService.showResizer) {
     <igx-grid-column-resizer></igx-grid-column-resizer>
 }
-<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxDragGhostHost></div>
 @if (platform.isElements) {

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html

@@ -65,8 +65,7 @@
     </div>
     <div igxToggle #loadingOverlay>
         @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true">
-            </igx-circular-bar>
+            <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
         }
     </div>
     @if (hasMovableColumns && columnInDrag) {
@@ -123,7 +122,6 @@
 @if (colResizingService.showResizer) {
     <igx-pivot-grid-column-resizer [restrictResizerTop]="calculateResizerTop()"></igx-pivot-grid-column-resizer>
 }
-<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxDragGhostHost></div>
 

projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html

@@ -121,8 +121,7 @@
     </div>
     <div igxToggle #loadingOverlay>
         @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true">
-            </igx-circular-bar>
+            <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
         }
     </div>
     @if (moving && columnInDrag) {
@@ -250,7 +249,6 @@
 @if (colResizingService.showResizer) {
     <igx-grid-column-resizer></igx-grid-column-resizer>
 }
-<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxDragGhostHost></div>
 @if (platform.isElements) {