feat(overlay): remove outlet from picker-base

wnvko · wnvko · commit 2dcff4475bdd · 2026-03-13T15:19:28.000+02:00
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts
@@ -9,7 +9,6 @@ import { IFormattingViews, IgxCalendarComponent, IgxCalendarHeaderTemplateDirect
 import { IgxCalendarContainerComponent } from './calendar-container/calendar-container.component';
 import { IgxDatePickerComponent } from './date-picker.component';
 import {
-    IgxOverlayOutletDirective,
     IgxOverlayService,
     OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings,
     WEEKDAYS,
@@ -1064,7 +1063,6 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.isDropdown).toEqual(true);
                 expect(datePicker.minValue).toEqual(undefined);
                 expect(datePicker.maxValue).toEqual(undefined);
-                expect(datePicker.outlet).toEqual(undefined);
                 expect(datePicker.specialDates).toEqual(null);
                 expect(datePicker.spinDelta).toEqual(undefined);
                 expect(datePicker.spinLoop).toEqual(true);
@@ -1152,15 +1150,6 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.maxValue).toEqual(today);
                 datePicker.maxValue = '12/12/1998';
                 expect(datePicker.maxValue).toEqual('12/12/1998');
-                datePicker.outlet = null;
-                expect(datePicker.outlet).toEqual(null);
-                const mockEl: ElementRef = jasmine.createSpyObj<ElementRef>('mockEl', ['nativeElement']);
-                datePicker.outlet = mockEl;
-                expect(datePicker.outlet).toEqual(mockEl);
-                const mockOverlayDirective: IgxOverlayOutletDirective =
-                    jasmine.createSpyObj<IgxOverlayOutletDirective>('mockEl', ['nativeElement']);
-                datePicker.outlet = mockOverlayDirective;
-                expect(datePicker.outlet).toEqual(mockOverlayDirective);
                 const specialDates: DateRangeDescriptor[] = [{ type: DateRangeType.Weekdays },
                 { type: DateRangeType.Before, dateRange: [today] }];
                 datePicker.specialDates = specialDates;
@@ -1286,21 +1275,18 @@ describe('IgxDatePicker', () => {
                 datePicker.open();
                 expect(overlay.attach).toHaveBeenCalledWith(IgxCalendarContainerComponent, viewsContainerRef, baseDropdownSettings);
                 expect(overlay.show).toHaveBeenCalledWith(mockOverlayId);
-                const mockOutlet = {} as any;
-                datePicker.outlet = mockOutlet;
                 datePicker.open();
                 expect(overlay.attach).toHaveBeenCalledWith(
                     IgxCalendarContainerComponent,
                     viewsContainerRef,
-                    Object.assign({}, baseDropdownSettings, { outlet: mockOutlet }),
+                    Object.assign({}, baseDropdownSettings),
                 );
                 expect(overlay.show).toHaveBeenCalledWith(mockOverlayId);
                 let mockSettings: OverlaySettings = {
                     closeOnEscape: true,
                     closeOnOutsideClick: true,
                     modal: false
                 };
-                datePicker.outlet = null;
                 datePicker.open(mockSettings);
                 expect(overlay.attach).toHaveBeenCalledWith(
                     IgxCalendarContainerComponent,
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts
@@ -63,7 +63,6 @@ import {
     DatePartDeltas,
     DatePart,
     isDateInRanges,
-    IgxOverlayOutletDirective,
     I18N_FORMATTER
 } from 'igniteui-angular/core';
 import { IDatePickerValidationFailedEventArgs } from './date-picker.common';
@@ -243,26 +242,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input()
     public spinDelta: Pick<DatePartDeltas, 'date' | 'month' | 'year'>;
 
-    /**
-     * @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.
-     *
-     * Gets/Sets the container used for the popup element.
-     *
-     * @remarks
-     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
-     * @example
-     * ```html
-     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
-     * //..
-     * <igx-date-picker [outlet]="outlet"></igx-date-picker>
-     * //..
-     * ```
-     */
-    @Input()
-    public override outlet: IgxOverlayOutletDirective | ElementRef;
-
     /**
      * Gets/Sets the value of `id` attribute.
      *
@@ -601,9 +580,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         if (this.isDropdown && this.inputGroupElement) {
             overlaySettings.target = this.inputGroupElement;
         }
-        if (this.outlet) {
-            overlaySettings.outlet = this.outlet;
-        }
         this._overlayId = this._overlayService
             .attach(IgxCalendarContainerComponent, this.viewContainerRef, overlaySettings);
         this._overlayService.show(this._overlayId);
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts b/projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts
@@ -12,7 +12,6 @@ import {
     EditorProvider,
     IBaseCancelableBrowserEventArgs,
     IBaseEventArgs,
-    IgxOverlayOutletDirective,
     IgxPickerClearComponent,
     IgxPickerToggleComponent,
     IToggleView,
@@ -185,24 +184,6 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
         this._weekStart = value;
     }
 
-    /**
-     * @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.
-     *
-     * The container used for the pop-up element.
-     *
-     * @example
-     * ```html
-     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
-     * <!-- ... -->
-     * <igx-date-picker [outlet]="outlet"></igx-date-picker>
-     * <!-- ... -->
-     * ```
-     */
-    @Input()
-    public outlet: IgxOverlayOutletDirective | ElementRef;
-
     /**
      * Determines how the picker's input will be styled.
      *
diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts
@@ -38,7 +38,6 @@ import {
     IgxPickerActionsDirective,
     isDateInRanges,
     PickerCalendarOrientation,
-    IgxOverlayOutletDirective
 } from 'igniteui-angular/core';
 import { IgxCalendarContainerComponent } from '../date-picker/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-picker/picker-base.directive';
@@ -366,26 +365,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @Input()
     public override placeholder = '';
 
-    /**
-     * @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.
-     *
-     * Gets/Sets the container used for the popup element.
-     *
-     * @remarks
-     *  `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`.
-     * @example
-     * ```html
-     * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
-     * //..
-     * <igx-date-range-picker [outlet]="outlet"></igx-date-range-picker>
-     * //..
-     * ```
-     */
-    @Input()
-    public override outlet: IgxOverlayOutletDirective | ElementRef<any>;
-
     /**
      * Show/hide week numbers
      *
diff --git a/projects/igniteui-angular/grids/core/src/cell.component.html b/projects/igniteui-angular/grids/core/src/cell.component.html
@@ -125,7 +125,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-date-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [weekStart]="column.pipeArgs.weekStart"
@@ -142,7 +141,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-time-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [inputFormat]="column.editorOptions?.dateTimeFormat"
diff --git a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.html
@@ -60,7 +60,6 @@
 <ng-template #defaultDateUI>
     <igx-date-picker #picker
         [(value)]="value"
-        [outlet]="filteringService.grid.outlet"
         [locale]="filteringService.grid.locale"
         (click)="expression.condition.isUnary ? null : picker.open()"
         type="box"
@@ -109,7 +108,6 @@
         [displayFormat]="column.pipeArgs.format"
         [locale]="filteringService.grid.locale"
         [formatter]="column.formatter"
-        [outlet]="filteringService.grid.outlet"
         type="box"
         [style.--ig-size]="filteringElementsSize"
         [placeholder]="placeholder"
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html
@@ -24,7 +24,6 @@
         [weekStart]="column.pipeArgs.weekStart ?? weekStart"
         [(ngModel)]="searchVal"
         [locale]="grid.locale"
-        [outlet]="grid.outlet"
         (click)="picker.open()"
         [placeholder]="inputDatePlaceholder"
         [formatter]="column.formatter"
@@ -41,7 +40,6 @@
     <igx-time-picker #picker
         [(ngModel)]="searchVal"
         [locale]="grid.locale"
-        [outlet]="grid.outlet"
         (click)="picker.open()"
         [placeholder]="inputTimePlaceholder"
         [displayFormat]="column.pipeArgs.format"
diff --git a/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html
@@ -108,7 +108,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-date-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [weekStart]="column.pipeArgs.weekStart"
@@ -125,7 +124,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-time-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [(value)]="editValue"
diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts
@@ -1298,8 +1298,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick();
             fix.detectChanges();
 
-            const outlet = document.getElementsByClassName('igx-grid__outlet')[0];
-            const calendar = outlet.getElementsByClassName('igx-calendar')[0];
+            const calendar = document.getElementsByClassName('igx-calendar')[0];
 
             const sundayLabel = calendar.querySelectorAll('.igx-days-view__label')[0].textContent;
 
@@ -2104,8 +2103,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             fix.detectChanges();
 
             // Click the today date.
-            const outlet = document.getElementsByClassName('igx-grid__outlet')[0];
-            let calendar = outlet.getElementsByClassName('igx-calendar')[0];
+            let calendar = document.getElementsByClassName('igx-calendar')[0];
             const todayDayItem: HTMLElement = calendar.querySelector('.igx-days-view__date--current');
             UIInteractions.simulateClickAndSelectEvent(todayDayItem.firstChild);
             grid.filteringRow.onInputGroupFocusout();
@@ -2136,7 +2134,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick(100);
             fix.detectChanges();
 
-            calendar = outlet.getElementsByClassName('igx-calendar')[0];
+            calendar = document.getElementsByClassName('igx-calendar')[0];
 
             // View years
             const yearView: HTMLElement = calendar.querySelectorAll('.igx-calendar-picker__date')[1] as HTMLElement;
@@ -2986,8 +2984,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick();
             fix.detectChanges();
 
-            const outlet = document.getElementsByClassName('igx-grid__outlet')[0];
-            const calendar = outlet.getElementsByClassName('igx-calendar')[0];
+            const calendar = document.getElementsByClassName('igx-calendar')[0];
 
             const currentDay = calendar.querySelector('.igx-days-view__date--current');
 
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html
@@ -122,7 +122,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-date-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [weekStart]="column.pipeArgs.weekStart"
@@ -139,7 +138,6 @@
         <ng-container [formGroup]="formGroup">
             <igx-time-picker
                 [style.width.%]="100"
-                [outlet]="grid.outlet"
                 mode="dropdown"
                 [locale]="grid.locale"
                 [(value)]="editValue"
diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.html b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.html
@@ -390,7 +390,6 @@
                                 type="box"
                                 [disabled]="isSearchValueInputDisabled()"
                                 [locale]="this.locale"
-                                [outlet]="pickerOutlet"
                                 [formatter]="selectedField.formatter"
                                 [displayFormat]="selectedField.pipeArgs.format"
                                 [weekStart]="selectedField.pipeArgs.weekStart"
@@ -410,7 +409,6 @@
                                 type="box"
                                 [disabled]="isSearchValueInputDisabled()"
                                 [locale]="this.locale"
-                                [outlet]="pickerOutlet"
                                 [formatter]="selectedField.formatter"
                                 [displayFormat]="selectedField.pipeArgs.format"
                                 [inputFormat]="selectedField.editorOptions?.dateTimeFormat"
diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts
@@ -472,15 +472,13 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     private _defaultDialogOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: true,
-        closeOnEscape: true,
-        outlet: this.outlet
+        closeOnEscape: true
     };
     private _defaultDropDownOverlaySettings: OverlaySettings = {
         modal: false,
         closeOnOutsideClick: true,
         scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new AutoPositionStrategy(),
-        outlet: this.outlet
+        positionStrategy: new AutoPositionStrategy()
     };
 
 
