From a36aa138d15d56b4fa824d2f1f9b5c88ad36824e Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 3 Apr 2026 09:52:00 +0300 Subject: [PATCH 01/17] feat(overlay): remove outlet from pickers --- .../date-picker/src/date-picker/README.md | 1 - .../date-picker/date-picker.component.spec.ts | 20 ++-------------- .../src/date-picker/date-picker.component.ts | 23 ------------------- .../src/date-picker/picker-base.directive.ts | 18 --------------- .../src/date-range-picker/README.md | 1 - .../date-range-picker.component.ts | 23 +------------------ .../grids/core/src/cell.component.html | 3 --- .../base/grid-filtering-row.component.html | 2 -- ...excel-style-date-expression.component.html | 2 -- .../grid/src/expandable-cell.component.html | 2 -- .../grids/grid/src/grid-cell-editing.spec.ts | 12 +++++++++- .../grids/grid/src/grid-filtering-ui.spec.ts | 13 ++++------- .../tree-grid/src/tree-cell.component.html | 2 -- .../query-builder-tree.component.html | 2 -- .../src/time-picker/time-picker.component.ts | 6 ++--- 15 files changed, 20 insertions(+), 110 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-picker/README.md b/projects/igniteui-angular/date-picker/src/date-picker/README.md index 3034888612d..ffebd409ee4 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/README.md +++ b/projects/igniteui-angular/date-picker/src/date-picker/README.md @@ -113,7 +113,6 @@ 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 | 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 index 7148d6561e7..2579a5b617e 100644 --- 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,12 +9,9 @@ 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, - BaseFormatter, - I18N_FORMATTER + WEEKDAYS } from 'igniteui-angular/core'; import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, Injector, QueryList, Renderer2, ViewChild } from '@angular/core'; import { By } from '@angular/platform-browser'; @@ -1064,7 +1061,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 +1148,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('mockEl', ['nativeElement']); - datePicker.outlet = mockEl; - expect(datePicker.outlet).toEqual(mockEl); - const mockOverlayDirective: IgxOverlayOutletDirective = - jasmine.createSpyObj('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,13 +1273,11 @@ 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 = { @@ -1300,7 +1285,6 @@ describe('IgxDatePicker', () => { 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 index 61e0a3270ab..fc573a87f5d 100644 --- 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 @@ -5,7 +5,6 @@ import { ChangeDetectorRef, Component, ContentChild, - ElementRef, EventEmitter, HostBinding, HostListener, @@ -243,25 +242,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr @Input() public spinDelta: Pick; - /** - * Gets/Sets the container used for the popup element. - * @remarks - * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. - * @example - * ```html - *
- * //.. - * - * //.. - * ``` - * - * @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 override outlet: IgxOverlayOutletDirective | ElementRef; - /** * Gets/Sets the value of `id` attribute. * @@ -600,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 index 7b56131951a..17acc659db3 100644 --- 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 @@ -185,24 +185,6 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider this._weekStart = value; } - /** - * The container used for the pop-up element. - * - * @example - * ```html - *
- * - * - * - * ``` - * - * @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. * diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md index 8bf2293762b..a675d473db8 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md @@ -116,7 +116,6 @@ 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 | **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. | 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 index c3c941c52d4..b6f0221fba2 100644 --- 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 @@ -37,8 +37,7 @@ import { DateTimeUtil, IgxPickerActionsDirective, isDateInRanges, - PickerCalendarOrientation, - IgxOverlayOutletDirective + PickerCalendarOrientation } from 'igniteui-angular/core'; import { IgxCalendarContainerComponent } from '../date-picker/calendar-container/calendar-container.component'; import { PickerBaseDirective } from '../date-picker/picker-base.directive'; @@ -364,26 +363,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective @Input() public override placeholder = ''; - /** - * Gets/Sets the container used for the popup element. - * - * @remarks - * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. - * @example - * ```html - *
- * //.. - * - * //.. - * ``` - * - * @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 override outlet: IgxOverlayOutletDirective | ElementRef; - /** * 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 index 4bbce226c42..ffb36674e6b 100644 --- a/projects/igniteui-angular/grids/core/src/cell.component.html +++ b/projects/igniteui-angular/grids/core/src/cell.component.html @@ -125,7 +125,6 @@ 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 index 32f3b65a57a..4b13be78963 100644 --- 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 @@ -63,7 +63,6 @@ { let picker = document.getElementsByClassName('igx-calendar-picker'); expect(picker.length).toBe(1); - GridFunctions.scrollTop(grid, 10); + // scroll cell out of view + GridFunctions.scrollTop(grid, 120); await wait(100); fixture.detectChanges(); @@ -629,6 +630,15 @@ describe('IgxGrid - Cell Editing #grid', () => { picker = document.getElementsByClassName('igx-calendar-picker'); expect(picker.length).toBe(0); + // scroll back to cell + GridFunctions.scrollTop(grid, -120); + await wait(100); + fixture.detectChanges(); + + // Verify calendar is not opened + picker = document.getElementsByClassName('igx-calendar-picker'); + expect(picker.length).toBe(0); + // Verify cell is still in edit mode cell = grid.gridAPI.get_cell_by_index(1, 'birthday'); expect(cell.nativeElement.classList.contains(CELL_CLASS_IN_EDIT_MODE)).toBe(true); 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 index ff396662bca..75a05a3e29d 100644 --- 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,9 +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; expect(sundayLabel.trim()).toEqual('Mo'); @@ -2104,8 +2102,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 +2133,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,9 +2983,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'); UIInteractions.simulateClickAndSelectEvent(currentDay.firstChild); 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 index 6a4a72f8d21..22d7d5ad48b 100644 --- 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 @@ Date: Fri, 3 Apr 2026 10:03:24 +0300 Subject: [PATCH 02/17] feat(overlay): remove outlet from notifications --- .../notification/notifications.directive.ts | 20 +++---------------- .../src/snackbar/snackbar.component.ts | 2 +- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts b/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts index 4961236e67d..22f1d270a89 100644 --- a/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts @@ -1,5 +1,5 @@ -import { Directive, ElementRef, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core'; -import { IgxOverlayOutletDirective, IToggleView } from 'igniteui-angular/core'; +import { Directive, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core'; +import { IToggleView } from 'igniteui-angular/core'; import { IPositionStrategy, OverlaySettings } from 'igniteui-angular/core'; import { IgxToggleDirective } from '../toggle/toggle.directive'; @@ -29,19 +29,6 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective @Input() public displayTime = 4000; - /** - * Gets/Sets the container used for the element. - * - * @remarks - * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. - * - * @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 component in the intended - * DOM tree position instead and use `positioning` property as needed. - */ - @Input() - public outlet: IgxOverlayOutletDirective | ElementRef; - /** * Controls whether positioning is relative to the viewport or to the nearest positioned container. */ @@ -95,8 +82,7 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective positionStrategy: this.strategy, closeOnEscape: false, closeOnOutsideClick: false, - modal: false, - outlet: this.outlet + modal: false }; super.open(overlaySettings); diff --git a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts index 576a3be383b..29016577b10 100644 --- a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts +++ b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts @@ -156,7 +156,7 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective this.textMessage = message; } - this.strategy = this.outlet || this.positioning === 'container' ? + this.strategy = this.positioning === 'container' ? new ContainerPositionStrategy(this.positionSettings) : new GlobalPositionStrategy(this.positionSettings); super.open(); From 20cc25040d108c84023b9dcd3ae898255d2cfdcf Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 3 Apr 2026 10:21:45 +0300 Subject: [PATCH 03/17] feat(overlay): remove outlet from toggle directive --- .../src/directives/toggle/README.md | 15 -------- .../toggle/toggle.directive.spec.ts | 36 +------------------ .../src/directives/toggle/toggle.directive.ts | 22 +----------- .../tooltip/tooltip-target.directive.ts | 8 ----- .../grids/core/src/cell.component.ts | 1 - .../grid/src/expandable-cell.component.html | 1 - .../tree-grid/src/tree-cell.component.html | 1 - src/app/drop-down/drop-down.sample.html | 1 - 8 files changed, 2 insertions(+), 83 deletions(-) diff --git a/projects/igniteui-angular/directives/src/directives/toggle/README.md b/projects/igniteui-angular/directives/src/directives/toggle/README.md index b8503af4b43..16326ead96b 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/README.md +++ b/projects/igniteui-angular/directives/src/directives/toggle/README.md @@ -103,18 +103,3 @@ Providing reference from custom component which has already been registered into |:----------:|:-------------|:------| | `igxToggleAction`| `IToggleView` \| `string` | Determines the target that have to be controled. | | `overlaySettings` | `OverlaySettings`| Passes `igxOverlay` settings for applicable targets (`igxToggle`) that control positioning, interaction and scroll behavior. -| `igxToggleOutlet` | `IgxOverlayOutletDirective` \| `ElementRef`| **Deprecated.** Determines where the target overlay element should be attached. Shortcut for `overlaySettings.outlet`. - -# IgxOverlayOutlet Directive - -The **IgxOverlayOutlet** provides a way to mark an element as an `igxOverlay` outlet container through the component template only. -Directive instance is exported as `overlay-outlet`, so it can be assigned within the template: - -```html -
-``` -This allows to provide the `outlet` templates variable as a setting to the toggle action: -```html - - -``` diff --git a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts index 7db9cfdc34c..d2034a47a3b 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts +++ b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts @@ -5,7 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxToggleActionDirective, IgxToggleDirective } from './toggle.directive'; import { first } from 'rxjs/operators'; -import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayOutletDirective, IgxOverlayService, OffsetMode, OverlaySettings } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayService, OffsetMode, OverlaySettings } from 'igniteui-angular/core'; describe('IgxToggle', () => { const HIDDEN_TOGGLER_CLASS = 'igx-toggle--hidden'; @@ -15,7 +15,6 @@ describe('IgxToggle', () => { imports: [ NoopAnimationsModule, IgxToggleActionTestComponent, - IgxToggleOutletComponent, IgxToggleServiceInjectComponent, IgxOverlayServiceComponent, IgxToggleTestComponent, @@ -610,29 +609,6 @@ describe('IgxToggle', () => { expect(toggle.closing.emit).toHaveBeenCalledWith({ id: '0', owner: toggle, cancel: false, event: new Event('click') }); expect(toggle.closed.emit).toHaveBeenCalledTimes(1); })); - - it('should pass IgxOverlayOutletDirective input from IgxToggleActionDirective', () => { - const fixture = TestBed.createComponent(IgxToggleOutletComponent); - const outlet = fixture.debugElement.query(By.css('.outlet-container')).nativeElement; - const toggleSpy = spyOn(IgxToggleDirective.prototype, 'toggle'); - const button = fixture.debugElement.query(By.directive(IgxToggleActionDirective)).nativeElement; - fixture.detectChanges(); - - const settings: OverlaySettings = { - target: button, - positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any, - closeOnOutsideClick: true, - modal: false, - scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any, - outlet: jasmine.any(IgxOverlayOutletDirective) as any, - excludeFromOutsideClick: [button] - }; - - fixture.componentInstance.toggleAction.onClick(); - expect(IgxToggleDirective.prototype.toggle).toHaveBeenCalledWith(settings); - const directive = toggleSpy.calls.mostRecent().args[0].outlet as IgxOverlayOutletDirective; - expect(directive.nativeElement).toBe(outlet); - }); }); }); @@ -678,16 +654,6 @@ export class IgxToggleActionTestComponent { } } -@Component({ - template: ` - -
-
- `, - imports: [IgxToggleActionDirective, IgxToggleDirective, IgxOverlayOutletDirective] -}) -export class IgxToggleOutletComponent extends IgxToggleActionTestComponent { } - @Component({ template: ` diff --git a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts index 0424bb58d75..89fcdcaf6f0 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts @@ -10,7 +10,7 @@ import { OnInit, Output, } from '@angular/core'; -import { AbsoluteScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy } from 'igniteui-angular/core'; import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from 'igniteui-angular/core'; import { ConnectedPositioningStrategy } from 'igniteui-angular/core'; import { filter, first, takeUntil } from 'rxjs/operators'; @@ -436,22 +436,6 @@ export class IgxToggleActionDirective implements OnInit { @Input() public overlaySettings: OverlaySettings; - /** - * Determines where the toggle element overlay should be attached. - * - * ```html - * - *
- * ``` - * Where `outlet` in an instance of `IgxOverlayOutletDirective` or an `ElementRef` - * - * @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 or use `container` property instead. - */ - @Input('igxToggleOutlet') - public outlet: IgxOverlayOutletDirective | ElementRef; - /** * @hidden */ @@ -480,10 +464,6 @@ export class IgxToggleActionDirective implements OnInit { */ @HostListener('click') public onClick() { - if (this.outlet) { - this._overlayDefaults.outlet = this.outlet; - } - const clonedSettings = Object.assign({}, this._overlayDefaults, this.overlaySettings); this.updateOverlaySettings(clonedSettings); this.target.toggle(clonedSettings); diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts index c55e158f229..992cde16dfd 100644 --- a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts @@ -418,7 +418,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen return; } - this._checkOutletAndOutsideClick(); this._hideOnInteraction(); } @@ -513,12 +512,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen this._abortController = new AbortController(); } - private _checkOutletAndOutsideClick(): void { - if (this.outlet) { - this._overlayDefaults.outlet = this.outlet; - } - } - /** * A guard method that performs precondition checks before showing the tooltip. * It ensures that the tooltip is not disabled and not already shown in sticky mode. @@ -528,7 +521,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen if (this.tooltipDisabled) return; if (!this.target.collapsed && this.target?.tooltipTarget?.sticky) return; - this._checkOutletAndOutsideClick(); this._checkTooltipForMultipleTargets(); action(); } diff --git a/projects/igniteui-angular/grids/core/src/cell.component.ts b/projects/igniteui-angular/grids/core/src/cell.component.ts index dba01a886aa..83675f31edd 100644 --- a/projects/igniteui-angular/grids/core/src/cell.component.ts +++ b/projects/igniteui-angular/grids/core/src/cell.component.ts @@ -920,7 +920,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT closeOnOutsideClick: true, excludeFromOutsideClick: [this.nativeElement], closeOnEscape: false, - outlet: this.grid.outlet, modal: false, positionStrategy: new AutoPositionStrategy({ horizontalStartPoint: HorizontalAlignment.Center, diff --git a/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html index ac19d11b4b4..80f883bdf3f 100644 --- a/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html +++ b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html @@ -202,7 +202,6 @@ name="error" #errorIcon [igxTooltipTarget]="tooltipRef" - [igxToggleOutlet]="grid.outlet" (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'> 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 index 22d7d5ad48b..70ac5d9b5f4 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html @@ -252,7 +252,6 @@ name="error" #errorIcon [igxTooltipTarget]="tooltipRef" - [igxToggleOutlet]="grid.outlet" (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'> diff --git a/src/app/drop-down/drop-down.sample.html b/src/app/drop-down/drop-down.sample.html index 94924f94c93..905bf259b5f 100644 --- a/src/app/drop-down/drop-down.sample.html +++ b/src/app/drop-down/drop-down.sample.html @@ -74,7 +74,6 @@
Angular Dropdown With Action directive
From c2f31469126a8f174ffa4787f9b9c0007a8250f7 Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 3 Apr 2026 11:21:33 +0300 Subject: [PATCH 04/17] feat(overlay): remove row editing outlet --- .../grids/grid/src/grid-base.directive.ts | 32 ++----------------- .../grids/grid/src/grid.component.html | 1 - .../src/hierarchical-grid.component.html | 1 - .../src/hierarchical-grid.component.ts | 9 ------ .../src/tree-grid-integration.spec.ts | 6 ++-- .../tree-grid/src/tree-grid.component.html | 1 - 6 files changed, 6 insertions(+), 44 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 0a20b0bba92..6a45aaad204 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -131,12 +131,6 @@ interface IMatchInfoCache { let FAKE_ROW_ID = -1; const DEFAULT_ITEMS_PER_PAGE = 15; const MINIMUM_COLUMN_WIDTH = 136; -// By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling. -// In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header. -// Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows. -// More accurate calculation is not possible, cause row editing overlay is still not shown and we don't know its height, -// but in the same time we need to set row editing overlay outlet before opening the overlay itself. -const MIN_ROW_EDITING_COUNT_THRESHOLD = 2; /* blazorIndirectRender blazorComponent @@ -1347,12 +1341,6 @@ export abstract class IgxGridBaseDirective implements GridType, @ViewChild('tfoot', { static: true }) public tfoot: ElementRef; - /** - * @hidden @internal - */ - @ViewChild('igxRowEditingOverlayOutlet', { read: IgxOverlayOutletDirective, static: true }) - public rowEditingOutletDirective: IgxOverlayOutletDirective; - /** * @hidden @internal */ @@ -2683,20 +2671,6 @@ export abstract class IgxGridBaseDirective implements GridType, this._rowSelectorTemplate = template; } - /** - * @hidden @internal - */ - public get rowOutletDirective() { - return this.rowEditingOutletDirective; - } - - /** - * @hidden @internal - */ - public get parentRowOutletDirective() { - return this.outlet; - } - /** * @hidden @internal */ @@ -3323,7 +3297,6 @@ export abstract class IgxGridBaseDirective implements GridType, scrollStrategy: new AbsoluteScrollStrategy(), modal: false, closeOnOutsideClick: false, - outlet: this.rowOutletDirective, positionStrategy: this.rowEditPositioningStrategy }; @@ -6377,7 +6350,7 @@ export abstract class IgxGridBaseDirective implements GridType, * TODO: MOVE to CRUD */ public openRowOverlay(id) { - this.configureRowEditingOverlay(id, this.rowList.length <= MIN_ROW_EDITING_COUNT_THRESHOLD); + this.configureRowEditingOverlay(id); this.rowEditingOverlay.open(this.rowEditSettings); this.rowEditingOverlay.element.addEventListener('wheel', this.rowEditingWheelHandler); @@ -8133,13 +8106,12 @@ export abstract class IgxGridBaseDirective implements GridType, } // TODO: About to Move to CRUD - private configureRowEditingOverlay(rowID: any, useOuter = false) { + private configureRowEditingOverlay(rowID: any) { let settings = this.rowEditSettings; const overlay = this.overlayService.getOverlayById(this.rowEditingOverlay.overlayId); if (overlay) { settings = overlay.settings; } - settings.outlet = useOuter ? this.parentRowOutletDirective : this.rowOutletDirective; this.rowEditPositioningStrategy.settings.container = this.tbody.nativeElement; const pinned = this._pinnedRecordIDs.indexOf(rowID) !== -1; const targetRow = !pinned ? diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index b8f5df39515..4a78b686f6a 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -157,7 +157,6 @@ -
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html index de9b91119dd..71d982d4600 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html @@ -124,7 +124,6 @@ } -
@if (!this.parent) { diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index ba34f9ad9de..9b0442fd716 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -657,15 +657,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti } } - /** - * @hidden - */ - public override get parentRowOutletDirective() { - // Targeting parent outlet in order to prevent hiding when outlet - // is present at a child grid and is attached to a row. - return this.parent ? this.parent.rowOutletDirective : this.outlet; - } - /** * @hidden */ diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts index 592925bec61..8c866b4a1ec 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts @@ -582,8 +582,10 @@ describe('IgxTreeGrid - Integration #tGrid', () => { expect(idCell.editMode).toBeFalsy(); expect(ageCell.editMode).toBeTruthy(); - const cancelBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[0] as DebugElement; - const doneBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[1]; + // the first button element is in the add row snackbar, so we need to get + // the second and third one which are Cancel and Done buttons in the row edit banner + const cancelBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[1]; + const doneBtn = fix.debugElement.queryAll(By.css('.igx-button--flat'))[2]; spyOn(cancelBtn.nativeElement, 'focus').and.callThrough(); spyOn(grid.rowEditTabs.first, 'move').and.callThrough(); spyOn(grid.rowEditTabs.last, 'move').and.callThrough(); diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html index 24efd0482df..9aaebf85efe 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html @@ -116,7 +116,6 @@ -
From 835c6fc47463353bf5abf428002720189b1eae41 Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 3 Apr 2026 11:43:17 +0300 Subject: [PATCH 05/17] feat(overlay): remove grid loading outlet --- .../grids/grid/src/grid-base.directive.ts | 13 +++---------- .../grids/grid/src/grid.component.html | 14 +++++++------- .../grids/grid/src/grid.component.spec.ts | 9 +++++---- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 6a45aaad204..437f82d598e 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -1147,13 +1147,7 @@ export abstract class IgxGridBaseDirective implements GridType, * @hidden @internal */ @ViewChild('loadingOverlay', { read: IgxToggleDirective, static: true }) - public loadingOverlay: IgxToggleDirective; - - /** - * @hidden @internal - */ - @ViewChild('igxLoadingOverlayOutlet', { static: true }) - public loadingOutlet: ElementRef; + public loadingOverlay?: IgxToggleDirective; /* reactContentChildren */ /* blazorInclude */ @@ -6731,13 +6725,12 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.shouldOverlayLoading) { // a new overlay should be shown const overlaySettings: OverlaySettings = { - outlet: this.loadingOutlet, closeOnOutsideClick: false, positionStrategy: new ContainerPositionStrategy() }; - this.loadingOverlay.open(overlaySettings); + this.loadingOverlay?.open(overlaySettings); } else { - this.loadingOverlay.close(); + this.loadingOverlay?.close(); } } diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index 4a78b686f6a..20ef6e2baa2 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -160,12 +160,6 @@ -
- @if (shouldOverlayLoading) { - - - } -
@if (moving && columnInDrag) { @@ -182,7 +176,13 @@ {{resourceStrings.igx_grid_snackbar_addrow_label}} -
+
+
+ @if (shouldOverlayLoading) { + + } +
+
diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts index 3dbf7acad9b..db76d7aad9b 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.spec.ts @@ -463,7 +463,7 @@ describe('IgxGrid Component Tests #grid', () => { expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth); expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight); - expect(loadingIndicator.nativeElement.children.length).not.toBe(0); + expect(loadingIndicator.nativeElement.children.length).not.toBeNull(); // Check for empty filter grid message and body less than 100px const columns = fixture.componentInstance.grid.columnList; @@ -490,7 +490,7 @@ describe('IgxGrid Component Tests #grid', () => { loadingIndicator = gridElement.query(By.css('.igx-grid__loading-outlet')); expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth); expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight); - expect(loadingIndicator.nativeElement.children.length).toBe(0); + expect(loadingIndicator.query(By.css('igx-circular-bar'))).toBeNull(); })); it('should render loading indicator when loading is enabled and autoGenerate is enabled', fakeAsync(() => { @@ -644,11 +644,12 @@ describe('IgxGrid Component Tests #grid', () => { const gridBody = fixture.debugElement.query(By.css('.igx-grid__tbody')); expect(loadingIndicator.nativeElement.offsetWidth).toBe(gridBody.nativeElement.offsetWidth); expect(loadingIndicator.nativeElement.offsetHeight).toBe(gridBody.nativeElement.offsetHeight); - expect(loadingIndicator.nativeElement.children.length).not.toBe(0); + expect(loadingIndicator.query(By.css('igx-circular-bar'))).not.toBeNull(); grid.isLoading = false; tick(16); - expect(loadingIndicator.nativeElement.children.length).toBe(0); + fixture.detectChanges(); + expect(loadingIndicator.query(By.css('igx-circular-bar'))).toBeNull(); // Clearing grid's data and check for empty grid message fixture.componentInstance.clearData(); From b793b4ddaf51da7f10fea78611a134036961909f Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 3 Apr 2026 12:06:45 +0300 Subject: [PATCH 06/17] feat(overlay): remove outlet from query builder --- .../query-builder-functions.spec.ts | 21 +++++------- .../query-builder-tree.component.html | 7 ---- .../query-builder-tree.component.ts | 33 ------------------- .../query-builder.component.spec.ts | 10 +++--- 4 files changed, 13 insertions(+), 58 deletions(-) diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-functions.spec.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-functions.spec.ts index 10c81481d53..69bd191b4ea 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-functions.spec.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-functions.spec.ts @@ -308,14 +308,9 @@ export class QueryBuilderFunctions { return buttonsContainers[buttonsIndex]; } - public static getQueryBuilderOutlet(queryBuilderElement: HTMLElement) { - const outlet = queryBuilderElement.querySelector(':scope > .igx-query-builder__outlet'); - return outlet; - } - public static getQueryBuilderSelectDropdown(queryBuilderElement: HTMLElement, index = 0) { - const outlet = QueryBuilderFunctions.getQueryBuilderOutlet(queryBuilderElement); - const selectDropdown = outlet.querySelectorAll(`.${QueryBuilderSelectors.DROP_DOWN_LIST_SCROLL}`).item(index); + const selectDropdown = Array.from(document.querySelectorAll(`.${QueryBuilderSelectors.DROP_DOWN_LIST_SCROLL}`)) + .filter(item => (item as HTMLElement).checkVisibility())[index]; return selectDropdown; } @@ -504,8 +499,8 @@ export class QueryBuilderFunctions { * Click 'add condition' or 'add group' item */ public static clickQueryBuilderTreeAddOption(fix: ComponentFixture, index: number) { - const outlet = Array.from(fix.debugElement.nativeElement.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0]; - const item = Array.from((outlet as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement; + const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0]; + const item = Array.from((dropdownList as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement; UIInteractions.simulateClickAndSelectEvent(item) tick(100); fix.detectChanges(); @@ -751,8 +746,8 @@ export class QueryBuilderFunctions { QueryBuilderFunctions.clickQueryBuilderEntitySelect(fix, level); fix.detectChanges(); - const outlet = Array.from(fix.debugElement.nativeElement.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0]; - const item = Array.from((outlet as HTMLElement).querySelectorAll('.igx-drop-down__item'))[dropdownItemIndex] as HTMLElement; + const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0]; + const item = Array.from((dropdownList as HTMLElement).querySelectorAll('.igx-drop-down__item'))[dropdownItemIndex] as HTMLElement; UIInteractions.simulateClickAndSelectEvent(item) tick(); fix.detectChanges(); @@ -762,9 +757,9 @@ export class QueryBuilderFunctions { QueryBuilderFunctions.clickQueryBuilderFieldsCombo(fix, level); fix.detectChanges(); - const outlet = Array.from(fix.debugElement.nativeElement.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0]; + const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)).filter(item => (item as HTMLElement).checkVisibility())[0]; deselectItemIndexes.forEach(index => { - const item = Array.from((outlet as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement; + const item = Array.from((dropdownList as HTMLElement).querySelectorAll('.igx-drop-down__item'))[index] as HTMLElement; UIInteractions.simulateClickAndSelectEvent(item) tick(); fix.detectChanges(); 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 index 370684a68db..0d07e30abdc 100644 --- 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 @@ -580,13 +580,6 @@ } -
- ; @@ -528,18 +523,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { return _level; } - private _positionSettings = { - horizontalStartPoint: HorizontalAlignment.Right, - verticalStartPoint: VerticalAlignment.Top - }; - - private _overlaySettings: OverlaySettings = { - closeOnOutsideClick: false, - modal: false, - positionStrategy: new ConnectedPositioningStrategy(this._positionSettings), - scrollStrategy: new CloseScrollStrategy() - }; - /** @hidden */ protected isAdvancedFiltering(): boolean { return (this.entities?.length === 1 && !this.entities[0]?.name) || @@ -570,14 +553,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { * @hidden @internal */ public ngAfterViewInit(): void { - this._overlaySettings.outlet = this.overlayOutlet; - this.entitySelectOverlaySettings.outlet = this.overlayOutlet; - this.fieldSelectOverlaySettings.outlet = this.overlayOutlet; - this.conditionSelectOverlaySettings.outlet = this.overlayOutlet; - this.returnFieldSelectOverlaySettings.outlet = this.overlayOutlet; - this.addExpressionDropDownOverlaySettings.outlet = this.overlayOutlet; - this.groupContextMenuDropDownOverlaySettings.outlet = this.overlayOutlet; - if (this.isAdvancedFiltering() && this.entities?.length === 1) { this.selectedEntity = this.entities[0].name; if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) { @@ -1391,14 +1366,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { } } - /** - * @hidden @internal - */ - public onOutletPointerDown(event) { - // This prevents closing the select's dropdown when clicking the scroll - event.preventDefault(); - } - /** * @hidden @internal */ diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts index ff9428c85c8..5d394541e7c 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts @@ -52,7 +52,7 @@ describe('IgxQueryBuilder', () => { expect(queryBuilder.expressionTree).toBeUndefined(); - expect(queryTreeElement.children.length).toEqual(3); + expect(queryTreeElement.children.length).toEqual(2); const bodyElement = queryTreeElement.children[0]; expect(bodyElement).toHaveClass(QueryBuilderSelectors.QUERY_BUILDER_BODY); expect(bodyElement.children.length).toEqual(1); @@ -456,9 +456,9 @@ describe('IgxQueryBuilder', () => { QueryBuilderFunctions.clickQueryBuilderFieldsCombo(fix); fix.detectChanges(); - // TO DO: refactor when overlay issue is fixed - const outlet = fix.debugElement.queryAll(By.css(`.igx-drop-down__list-scroll`))[1].nativeElement; - const dropdownItems = Array.from(outlet.querySelectorAll('.igx-drop-down__item'));; + const dropdownList = Array.from(document.querySelectorAll(`.igx-drop-down__list-scroll`)) + .filter(item => (item as HTMLElement).checkVisibility())[0] as HTMLElement; + const dropdownItems = Array.from(dropdownList.querySelectorAll('.igx-drop-down__item')); expect(dropdownItems.length).toBe(5); expect((dropdownItems[0] as HTMLElement).innerText).toBe('Select All'); expect((dropdownItems[1] as HTMLElement).innerText).toBe('Id'); @@ -1822,7 +1822,7 @@ describe('IgxQueryBuilder', () => { const actionArea = bodyElement.children[0].querySelector('.igx-query-builder__root-actions'); expect(actionArea).toBeNull(); expect(bodyElement.children[1].children[1].children[1].children[1].children[6].children[1]).toHaveClass(QueryBuilderSelectors.QUERY_BUILDER_TREE); - expect(bodyElement.children[1].children[1].children[1].children[1].children[6].children[1].children.length).toEqual(3); + expect(bodyElement.children[1].children[1].children[1].children[1].children[6].children[1].children.length).toEqual(2); const tree = bodyElement.children[1].children[1].children[1].children[1].children[6].children[1].querySelector('.igx-filter-tree__expression'); expect(tree).toBeNull(); })); From f748bfc94fcf2d70f38ff0578c81c0bb5397be9f Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 3 Apr 2026 12:37:35 +0300 Subject: [PATCH 07/17] feat(overlay): remove outlet from grid toolbar --- .../grids/core/src/toolbar/grid-toolbar.base.ts | 2 +- .../igniteui-angular/grids/grid/src/column-pinning.spec.ts | 4 ++-- .../grids/grid/src/grid-row-selection.spec.ts | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts index 26963fa64e0..bfebe1034a9 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.base.ts @@ -127,7 +127,7 @@ export abstract class BaseToolbarDirective implements OnDestroy { } toggleRef.toggle({ ...this.overlaySettings, ...{ - target: anchorElement, outlet: this.grid.outlet, + target: anchorElement, excludeFromOutsideClick: [anchorElement] } }); diff --git a/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts b/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts index f2b3ede7e1f..1abf76730d1 100644 --- a/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts @@ -255,7 +255,7 @@ describe('Column Pinning UI #grid', () => { pinningUIButton.click(); fix.detectChanges(); - expect(GridFunctions.getOverlay(fix).querySelectorAll('igx-checkbox').length).toEqual(5); + expect(fix.nativeElement.querySelectorAll('igx-grid-toolbar-pinning igx-checkbox').length).toEqual(5); grid.columnList.get(0).disablePinning = true; fix.detectChanges(); @@ -263,7 +263,7 @@ describe('Column Pinning UI #grid', () => { pinningUIButton.click(); fix.detectChanges(); - expect(GridFunctions.getOverlay(fix).querySelectorAll('igx-checkbox').length).toEqual(4); + expect(fix.nativeElement.querySelectorAll('igx-grid-toolbar-pinning igx-checkbox').length).toEqual(4); }); it('Checks order of columns after unpinning', () => { diff --git a/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts index 1b71f444157..2e42b445360 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts @@ -1618,8 +1618,9 @@ describe('IgxGrid - Row Selection #grid', () => { await wait(SCROLL_DEBOUNCETIME); fix.detectChanges(); + const requiredRow = grid.gridAPI.get_row_by_index(0); GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true); - GridSelectionFunctions.verifyRowSelected(selectedRow); + GridSelectionFunctions.verifyRowSelected(requiredRow); }); it('Should be able to select and deselect rows from API', () => { From c67e0a7ce06ccb78b8d9372ebe3480d1893a64ab Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 10:03:23 +0300 Subject: [PATCH 08/17] feat(overlay): remove outlet from column moving --- .../src/expansion-panel/expansion-panel.spec.ts | 2 +- .../igniteui-angular/grids/core/src/common/grid.interface.ts | 1 + .../grids/core/src/headers/grid-header-group.component.html | 4 ++-- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 4 ++++ projects/igniteui-angular/grids/grid/src/grid.component.html | 1 + .../hierarchical-grid/src/hierarchical-grid.component.html | 1 + .../grids/pivot-grid/src/pivot-grid.component.html | 1 + .../src/pivot-row-dimension-header-group.component.html | 2 +- .../grids/tree-grid/src/tree-grid.component.html | 1 + 9 files changed, 13 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts index 6e6b570d4e7..56e5bf343df 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts @@ -1189,7 +1189,7 @@ describe('igxExpansionPanel', () => { expect(grid.attributes.getNamedItem('role').nodeValue).toEqual('grid'); expect(grid.attributes.getNamedItem('id').nodeValue).toEqual(fixture.componentInstance.grid1.id); expect(grid.attributes.getNamedItem('tabindex').nodeValue).toEqual('0'); - expect(grid.childElementCount).toEqual(6); + expect(grid.childElementCount).toEqual(7); })); it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => { const fixture: ComponentFixture = TestBed.createComponent(IgxExpansionPanelImageComponent); diff --git a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts index 1635bb431cf..0d16c12b238 100644 --- a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts +++ b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts @@ -657,6 +657,7 @@ export interface GridType extends IGridDataBindable { expansionStates: Map; parentVirtDir: any; tbody: any; + dragGhostHost: ElementRef; verticalScrollContainer: any; dataRowList: any; rowList: any; diff --git a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html index 88e66e7512f..b252ac0afde 100644 --- a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html @@ -58,7 +58,7 @@ 'igx-grid-th--selected': selected, 'igx-grid-th--active': activeGroup}" [igxColumnMovingDrag]="column" - [ghostHost]="grid.outlet.nativeElement" + [ghostHost]="grid.dragGhostHost.nativeElement" [attr.droppable]="true" [igxColumnMovingDrop]="column" (pointerdown)="pointerdown($event)" @@ -108,7 +108,7 @@ [ngClass]="column.headerClasses" [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [igxColumnMovingDrag]="column" - [ghostHost]="grid.outlet.nativeElement" + [ghostHost]="grid.dragGhostHost.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [style.width]="column.resolvedWidth" diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 437f82d598e..43f3cae6f11 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -1316,6 +1316,10 @@ export abstract class IgxGridBaseDirective implements GridType, @ViewChild('tbody', { static: true }) public tbody: ElementRef; + /** @hidden @internal */ + @ViewChild('igxDragGhostHost', { read: ElementRef, static: true }) + public dragGhostHost: ElementRef; + /** @hidden @internal */ @ViewChild("bodyViewContainerRef", { read: ViewContainerRef, static: true }) public bodyViewContainerRef?: ViewContainerRef; diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index 20ef6e2baa2..dfc8077e344 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -319,6 +319,7 @@ }
+
@if (platform.isElements) {
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html index 71d982d4600..09c2908418e 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html @@ -272,6 +272,7 @@ }
+
@if (platform.isElements) {
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html index 4454985176e..b614f9588c8 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html @@ -125,6 +125,7 @@ }
+
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html index d73a2520541..4388ff1a968 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html @@ -20,7 +20,7 @@ [ngClass]="column.headerClasses" [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [igxColumnMovingDrag]="column" - [ghostHost]="grid.outlet.nativeElement" + [ghostHost]="grid.dragGhostHost.nativeElement" [attr.droppable]="true" (pointerdown)="pointerdown($event)" [igxColumnMovingDrop]="column" diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html index 9aaebf85efe..2565a964161 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html @@ -252,6 +252,7 @@ }
+
@if (platform.isElements) {
From 3149ee2f595b5abba924fafdaac081900f07edc7 Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 10:40:55 +0300 Subject: [PATCH 09/17] feat(overlay): remove outlet from filtering row --- .../core/src/filtering/base/grid-filtering-row.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts index 70258ee0882..fdef1e1c34d 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts @@ -245,9 +245,6 @@ export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDe } public ngAfterViewInit() { - this._conditionsOverlaySettings.outlet = this.column.grid.outlet; - this._operatorsOverlaySettings.outlet = this.column.grid.outlet; - const selectedItem = this.expressionsList.find(expr => expr.isSelected === true); if (selectedItem) { this.expression = selectedItem.expression; From 1a703a96f770b0a9afb96de4338189e6765eba6b Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 11:00:39 +0300 Subject: [PATCH 10/17] feat(overlay): remove outlet form grid's action strip --- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 3 --- .../grids/hierarchical-grid/src/row-island.component.ts | 4 ---- 2 files changed, 7 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 43f3cae6f11..19065d43b67 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4042,9 +4042,6 @@ export abstract class IgxGridBaseDirective implements GridType, this.paginationComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => { this.setUpPaginator(); }); - if (this.actionStrip) { - this.actionStrip.menuOverlaySettings.outlet = this.outlet; - } } diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts index 9f605bf95f1..5fcbc19aa06 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts @@ -431,10 +431,6 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective }); } }); - - if (this.actionStrip) { - this.actionStrip.menuOverlaySettings.outlet = this.outlet; - } } /** From 4d1292dd02837546580b79d3e7f655f2b4a45a77 Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 11:11:05 +0300 Subject: [PATCH 11/17] feat(overlay): remove outlet from grid paginator --- projects/igniteui-angular/grids/grid/src/grid-base.directive.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 19065d43b67..f2d6b2d5593 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -4233,7 +4233,6 @@ export abstract class IgxGridBaseDirective implements GridType, this.rendered$.pipe(takeUntil(this.destroy$)).subscribe(() => { if (this.paginator) { this.paginator.totalRecords = this.totalRecords ? this.totalRecords : this.paginator.totalRecords; - this.paginator.overlaySettings = { outlet: this.outlet }; } if (this.hasColumnsToAutosize) { this.autoSizeColumnsInView(); From 838eab614f9a0a19100402f384f9fa4a2544f62e Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 11:39:01 +0300 Subject: [PATCH 12/17] feat(overlay): remove outlet from query builder tree --- .../advanced-filtering-dialog.component.ts | 10 ++-------- .../query-builder-tree.component.ts | 17 +---------------- .../query-builder/query-builder.component.ts | 12 +----------- 3 files changed, 4 insertions(+), 35 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index 9d483f1d319..f9d03a565be 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/grids/core/src/filtering/advanced-filtering/advanced-filtering-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild, ChangeDetectorRef, AfterViewInit, OnDestroy, HostBinding, inject } from '@angular/core'; +import { Component, Input, ViewChild, ChangeDetectorRef, OnDestroy, HostBinding, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { IActiveNode } from '../../grid-navigation.service'; import { GridType } from '../../common/grid.interface'; @@ -34,7 +34,7 @@ import { templateUrl: './advanced-filtering-dialog.component.html', imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective] }) -export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy { +export class IgxAdvancedFilteringDialogComponent implements OnDestroy { public cdr = inject(ChangeDetectorRef); protected platform = inject(PlatformUtil); @@ -75,12 +75,6 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes this.assignResourceStrings(false); }, this); } - /** - * @hidden @internal - */ - public ngAfterViewInit(): void { - this.queryBuilder.setPickerOutlet(this.grid.outlet); - } /** * @hidden @internal diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts index db9d0d7745b..00b5627f9bd 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts @@ -39,8 +39,7 @@ import { DEFAULT_LOCALE, onResourceChangeHandle, IgxDateFormatterPipe, - isTree, - IgxOverlayOutletDirective + isTree } from 'igniteui-angular/core'; import { IgxDatePickerComponent } from 'igniteui-angular/date-picker'; @@ -401,11 +400,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { */ public searchValue: { value: any } = { value: null }; - /** - * @hidden @internal - */ - public pickerOutlet: IgxOverlayOutletDirective | ElementRef; - /** * @hidden @internal */ @@ -716,15 +710,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { return this._selectedField; } - /** - * @hidden @internal - * - * used by the grid - */ - public setPickerOutlet(outlet?: IgxOverlayOutletDirective | ElementRef) { - this.pickerOutlet = outlet; - } - /** * @hidden @internal * diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts index 37e9aa1a898..dbb628996dc 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts @@ -1,6 +1,6 @@ import { booleanAttribute, ContentChild, EventEmitter, Output, TemplateRef, inject, ContentChildren, QueryList } from '@angular/core'; import { - Component, Input, ViewChild, ElementRef, OnDestroy, HostBinding + Component, Input, ViewChild, OnDestroy, HostBinding } from '@angular/core'; import { Subject } from 'rxjs'; import { @@ -10,7 +10,6 @@ import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN, recreateTree, - IgxOverlayOutletDirective, getCurrentResourceStrings, onResourceChangeHandle } from 'igniteui-angular/core'; @@ -291,15 +290,6 @@ export class IgxQueryBuilderComponent implements OnDestroy { this.destroy$.complete(); } - /** - * @hidden @internal - * - * used by the grid - */ - public setPickerOutlet(outlet?: IgxOverlayOutletDirective | ElementRef) { - this.queryTree.setPickerOutlet(outlet); - } - /** * @hidden @internal * From 975ec1f75a17107b26f16ba6819f34392b8564fd Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 14:17:30 +0300 Subject: [PATCH 13/17] chore(overlay): address PR comments --- .../date-picker/src/date-picker/README.md | 1 + .../src/date-picker/picker-base.directive.ts | 18 ++++++++++++++++++ .../src/date-range-picker/README.md | 1 + .../grids/grid/src/grid.component.html | 2 +- .../src/hierarchical-grid.component.html | 4 +--- .../pivot-grid/src/pivot-grid.component.html | 4 +--- .../tree-grid/src/tree-grid.component.html | 4 +--- 7 files changed, 24 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-picker/README.md b/projects/igniteui-angular/date-picker/src/date-picker/README.md index ffebd409ee4..3034888612d 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/README.md +++ b/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 | 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 index 17acc659db3..7b56131951a 100644 --- 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 @@ -185,6 +185,24 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider this._weekStart = value; } + /** + * The container used for the pop-up element. + * + * @example + * ```html + *
+ * + * + * + * ``` + * + * @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. * diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md index a675d473db8..920b6afdaf0 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md +++ b/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 | **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. | diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index dfc8077e344..65da53242dd 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -177,7 +177,7 @@
-
+
@if (shouldOverlayLoading) { } diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html index 09c2908418e..0dedd2cbe24 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html @@ -131,8 +131,7 @@
@if (shouldOverlayLoading) { - - + }
@if (moving && columnInDrag) { @@ -270,7 +269,6 @@ @if (colResizingService.showResizer) { } -
@if (platform.isElements) { diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html index b614f9588c8..07e519b0cd3 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html @@ -65,8 +65,7 @@
@if (shouldOverlayLoading) { - - + }
@if (hasMovableColumns && columnInDrag) { @@ -123,7 +122,6 @@ @if (colResizingService.showResizer) { } -
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html index 2565a964161..c67c686875e 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html @@ -121,8 +121,7 @@
@if (shouldOverlayLoading) { - - + }
@if (moving && columnInDrag) { @@ -250,7 +249,6 @@ @if (colResizingService.showResizer) { } -
@if (platform.isElements) { From fd142aca25827805090e8fd4da82e7d207b5c5d3 Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 6 Apr 2026 14:56:08 +0300 Subject: [PATCH 14/17] chore(overlay): address PR comments - 2 --- .../igniteui-angular/grids/core/src/common/grid.interface.ts | 2 +- .../grids/core/src/headers/grid-header-group.component.html | 4 ++-- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 2 +- .../src/pivot-row-dimension-header-group.component.html | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts index 0d16c12b238..036a3838e35 100644 --- a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts +++ b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts @@ -657,7 +657,7 @@ export interface GridType extends IGridDataBindable { expansionStates: Map; parentVirtDir: any; tbody: any; - dragGhostHost: ElementRef; + dragGhostHost?: ElementRef; verticalScrollContainer: any; dataRowList: any; rowList: any; diff --git a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html index b252ac0afde..08ec486ffa8 100644 --- a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html @@ -58,7 +58,7 @@ 'igx-grid-th--selected': selected, 'igx-grid-th--active': activeGroup}" [igxColumnMovingDrag]="column" - [ghostHost]="grid.dragGhostHost.nativeElement" + [ghostHost]="grid.dragGhostHost?.nativeElement" [attr.droppable]="true" [igxColumnMovingDrop]="column" (pointerdown)="pointerdown($event)" @@ -108,7 +108,7 @@ [ngClass]="column.headerClasses" [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [igxColumnMovingDrag]="column" - [ghostHost]="grid.dragGhostHost.nativeElement" + [ghostHost]="grid.dragGhostHost?.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [style.width]="column.resolvedWidth" diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index f2d6b2d5593..aeccc5cee54 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -1318,7 +1318,7 @@ export abstract class IgxGridBaseDirective implements GridType, /** @hidden @internal */ @ViewChild('igxDragGhostHost', { read: ElementRef, static: true }) - public dragGhostHost: ElementRef; + public dragGhostHost?: ElementRef; /** @hidden @internal */ @ViewChild("bodyViewContainerRef", { read: ViewContainerRef, static: true }) diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html index 4388ff1a968..c8e0baf79b0 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html @@ -20,7 +20,7 @@ [ngClass]="column.headerClasses" [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [igxColumnMovingDrag]="column" - [ghostHost]="grid.dragGhostHost.nativeElement" + [ghostHost]="grid.dragGhostHost?.nativeElement" [attr.droppable]="true" (pointerdown)="pointerdown($event)" [igxColumnMovingDrop]="column" From be730aa15d6c9def0888fa4cb48560e2f24a89ed Mon Sep 17 00:00:00 2001 From: wnvko Date: Tue, 7 Apr 2026 16:12:23 +0300 Subject: [PATCH 15/17] chore(overlay): revert public properties removal --- .../src/date-picker/date-picker.component.ts | 3 +++ .../src/date-range-picker/README.md | 2 +- .../notification/notifications.directive.ts | 20 ++++++++++++++--- .../src/directives/toggle/README.md | 15 +++++++++++++ .../src/directives/toggle/toggle.directive.ts | 22 ++++++++++++++++++- .../tooltip/tooltip-target.directive.ts | 8 +++++++ .../src/snackbar/snackbar.component.ts | 2 +- .../src/time-picker/time-picker.component.ts | 6 +++-- 8 files changed, 70 insertions(+), 8 deletions(-) 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 index fc573a87f5d..3c01a937577 100644 --- 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 @@ -580,6 +580,9 @@ 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-range-picker/README.md b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md index 920b6afdaf0..8bf2293762b 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md @@ -116,7 +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 | **Deprecated** Gets/Sets the container used for the popup element +| outlet | IgxOverlayOutletDirective \| ElementRef | **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. | diff --git a/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts b/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts index 22f1d270a89..ac07a4c1c08 100644 --- a/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts @@ -1,5 +1,5 @@ -import { Directive, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core'; -import { IToggleView } from 'igniteui-angular/core'; +import { Directive, ElementRef, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core'; +import { IgxOverlayOutletDirective, IToggleView } from 'igniteui-angular/core'; import { IPositionStrategy, OverlaySettings } from 'igniteui-angular/core'; import { IgxToggleDirective } from '../toggle/toggle.directive'; @@ -29,6 +29,19 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective @Input() public displayTime = 4000; + /** + * Gets/Sets the container used for the element. + * + * @remarks + * `outlet` is an instance of `IgxOverlayOutletDirective` or an `ElementRef`. + * + * @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 component in the intended + * DOM tree position instead and use `positioning` property as needed. + */ + @Input() + public outlet: IgxOverlayOutletDirective | ElementRef; + /** * Controls whether positioning is relative to the viewport or to the nearest positioned container. */ @@ -82,7 +95,8 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective positionStrategy: this.strategy, closeOnEscape: false, closeOnOutsideClick: false, - modal: false + modal: false, + outlet: this.outlet, }; super.open(overlaySettings); diff --git a/projects/igniteui-angular/directives/src/directives/toggle/README.md b/projects/igniteui-angular/directives/src/directives/toggle/README.md index 16326ead96b..b8503af4b43 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/README.md +++ b/projects/igniteui-angular/directives/src/directives/toggle/README.md @@ -103,3 +103,18 @@ Providing reference from custom component which has already been registered into |:----------:|:-------------|:------| | `igxToggleAction`| `IToggleView` \| `string` | Determines the target that have to be controled. | | `overlaySettings` | `OverlaySettings`| Passes `igxOverlay` settings for applicable targets (`igxToggle`) that control positioning, interaction and scroll behavior. +| `igxToggleOutlet` | `IgxOverlayOutletDirective` \| `ElementRef`| **Deprecated.** Determines where the target overlay element should be attached. Shortcut for `overlaySettings.outlet`. + +# IgxOverlayOutlet Directive + +The **IgxOverlayOutlet** provides a way to mark an element as an `igxOverlay` outlet container through the component template only. +Directive instance is exported as `overlay-outlet`, so it can be assigned within the template: + +```html +
+``` +This allows to provide the `outlet` templates variable as a setting to the toggle action: +```html + + +``` diff --git a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts index 89fcdcaf6f0..0424bb58d75 100644 --- a/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts @@ -10,7 +10,7 @@ import { OnInit, Output, } from '@angular/core'; -import { AbsoluteScrollStrategy } from 'igniteui-angular/core'; +import { AbsoluteScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from 'igniteui-angular/core'; import { ConnectedPositioningStrategy } from 'igniteui-angular/core'; import { filter, first, takeUntil } from 'rxjs/operators'; @@ -436,6 +436,22 @@ export class IgxToggleActionDirective implements OnInit { @Input() public overlaySettings: OverlaySettings; + /** + * Determines where the toggle element overlay should be attached. + * + * ```html + * + *
+ * ``` + * Where `outlet` in an instance of `IgxOverlayOutletDirective` or an `ElementRef` + * + * @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 or use `container` property instead. + */ + @Input('igxToggleOutlet') + public outlet: IgxOverlayOutletDirective | ElementRef; + /** * @hidden */ @@ -464,6 +480,10 @@ export class IgxToggleActionDirective implements OnInit { */ @HostListener('click') public onClick() { + if (this.outlet) { + this._overlayDefaults.outlet = this.outlet; + } + const clonedSettings = Object.assign({}, this._overlayDefaults, this.overlaySettings); this.updateOverlaySettings(clonedSettings); this.target.toggle(clonedSettings); diff --git a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts index 992cde16dfd..c55e158f229 100644 --- a/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts @@ -418,6 +418,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen return; } + this._checkOutletAndOutsideClick(); this._hideOnInteraction(); } @@ -512,6 +513,12 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen this._abortController = new AbortController(); } + private _checkOutletAndOutsideClick(): void { + if (this.outlet) { + this._overlayDefaults.outlet = this.outlet; + } + } + /** * A guard method that performs precondition checks before showing the tooltip. * It ensures that the tooltip is not disabled and not already shown in sticky mode. @@ -521,6 +528,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen if (this.tooltipDisabled) return; if (!this.target.collapsed && this.target?.tooltipTarget?.sticky) return; + this._checkOutletAndOutsideClick(); this._checkTooltipForMultipleTargets(); action(); } diff --git a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts index 29016577b10..576a3be383b 100644 --- a/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts +++ b/projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts @@ -156,7 +156,7 @@ export class IgxSnackbarComponent extends IgxNotificationsDirective this.textMessage = message; } - this.strategy = this.positioning === 'container' ? + this.strategy = this.outlet || this.positioning === 'container' ? new ContainerPositionStrategy(this.positionSettings) : new GlobalPositionStrategy(this.positionSettings); super.open(); 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 index e86d848cc51..28b2ad29172 100644 --- 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,13 +472,15 @@ export class IgxTimePickerComponent extends PickerBaseDirective private _defaultDialogOverlaySettings: OverlaySettings = { closeOnOutsideClick: true, modal: true, - closeOnEscape: true + closeOnEscape: true, + outlet: this.outlet }; private _defaultDropDownOverlaySettings: OverlaySettings = { modal: false, closeOnOutsideClick: true, scrollStrategy: new AbsoluteScrollStrategy(), - positionStrategy: new AutoPositionStrategy() + positionStrategy: new AutoPositionStrategy(), + outlet: this.outlet }; From af6099e9c7037a40c89cd6c4038a04ab48bfee23 Mon Sep 17 00:00:00 2001 From: wnvko Date: Tue, 7 Apr 2026 16:14:23 +0300 Subject: [PATCH 16/17] feat(overlay): remove igxDragGhostHost and reuse grid outlet instead --- .../src/expansion-panel/expansion-panel.spec.ts | 2 +- .../igniteui-angular/grids/core/src/common/grid.interface.ts | 1 - .../grids/core/src/headers/grid-header-group.component.html | 4 ++-- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 4 ---- projects/igniteui-angular/grids/grid/src/grid.component.html | 1 - .../hierarchical-grid/src/hierarchical-grid.component.html | 1 - .../grids/pivot-grid/src/pivot-grid.component.html | 1 - .../src/pivot-row-dimension-header-group.component.html | 2 +- .../grids/tree-grid/src/tree-grid.component.html | 1 - 9 files changed, 4 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts index 56e5bf343df..6e6b570d4e7 100644 --- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts +++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts @@ -1189,7 +1189,7 @@ describe('igxExpansionPanel', () => { expect(grid.attributes.getNamedItem('role').nodeValue).toEqual('grid'); expect(grid.attributes.getNamedItem('id').nodeValue).toEqual(fixture.componentInstance.grid1.id); expect(grid.attributes.getNamedItem('tabindex').nodeValue).toEqual('0'); - expect(grid.childElementCount).toEqual(7); + expect(grid.childElementCount).toEqual(6); })); it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => { const fixture: ComponentFixture = TestBed.createComponent(IgxExpansionPanelImageComponent); diff --git a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts index 036a3838e35..1635bb431cf 100644 --- a/projects/igniteui-angular/grids/core/src/common/grid.interface.ts +++ b/projects/igniteui-angular/grids/core/src/common/grid.interface.ts @@ -657,7 +657,6 @@ export interface GridType extends IGridDataBindable { expansionStates: Map; parentVirtDir: any; tbody: any; - dragGhostHost?: ElementRef; verticalScrollContainer: any; dataRowList: any; rowList: any; diff --git a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html index 08ec486ffa8..88e66e7512f 100644 --- a/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-group.component.html @@ -58,7 +58,7 @@ 'igx-grid-th--selected': selected, 'igx-grid-th--active': activeGroup}" [igxColumnMovingDrag]="column" - [ghostHost]="grid.dragGhostHost?.nativeElement" + [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" [igxColumnMovingDrop]="column" (pointerdown)="pointerdown($event)" @@ -108,7 +108,7 @@ [ngClass]="column.headerClasses" [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [igxColumnMovingDrag]="column" - [ghostHost]="grid.dragGhostHost?.nativeElement" + [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [style.width]="column.resolvedWidth" diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index 7a080ae04c2..7baf931a486 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -1316,10 +1316,6 @@ export abstract class IgxGridBaseDirective implements GridType, @ViewChild('tbody', { static: true }) public tbody: ElementRef; - /** @hidden @internal */ - @ViewChild('igxDragGhostHost', { read: ElementRef, static: true }) - public dragGhostHost?: ElementRef; - /** @hidden @internal */ @ViewChild("bodyViewContainerRef", { read: ViewContainerRef, static: true }) public bodyViewContainerRef?: ViewContainerRef; diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index 65da53242dd..c10caf47eae 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -319,7 +319,6 @@ }
-
@if (platform.isElements) {
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html index 0dedd2cbe24..03b1f6c872d 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html @@ -270,7 +270,6 @@ }
-
@if (platform.isElements) {
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html index 07e519b0cd3..83cd715f91d 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html @@ -123,7 +123,6 @@ }
-
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html index c8e0baf79b0..d73a2520541 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-header-group.component.html @@ -20,7 +20,7 @@ [ngClass]="column.headerClasses" [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [igxColumnMovingDrag]="column" - [ghostHost]="grid.dragGhostHost?.nativeElement" + [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" (pointerdown)="pointerdown($event)" [igxColumnMovingDrop]="column" diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html index c67c686875e..e96adcebd54 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html @@ -250,7 +250,6 @@ }
-
@if (platform.isElements) {
From 713812b5593ceea094da2c60be885d34c8aa081c Mon Sep 17 00:00:00 2001 From: wnvko Date: Tue, 7 Apr 2026 16:58:49 +0300 Subject: [PATCH 17/17] chore(overlay): remove unnecessary change in notifications directive --- .../src/directives/notification/notifications.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts b/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts index ac07a4c1c08..4961236e67d 100644 --- a/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts +++ b/projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts @@ -96,7 +96,7 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective closeOnEscape: false, closeOnOutsideClick: false, modal: false, - outlet: this.outlet, + outlet: this.outlet }; super.open(overlaySettings);