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..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 @@ -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. * 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/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/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/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/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/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 @@ expr.isSelected === true); if (selectedItem) { this.expression = selectedItem.expression; diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html index 8121e9f6cb8..d4f5a2cf6fd 100644 --- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html +++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.html @@ -24,7 +24,6 @@ [weekStart]="column.pipeArgs.weekStart ?? weekStart" [(ngModel)]="searchVal" [locale]="grid.locale" - [outlet]="grid.outlet" (click)="picker.open()" [placeholder]="inputDatePlaceholder" [formatter]="column.formatter" @@ -41,7 +40,6 @@ { 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/expandable-cell.component.html b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html index c6fca1627c8..80f883bdf3f 100644 --- a/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html +++ b/projects/igniteui-angular/grids/grid/src/expandable-cell.component.html @@ -108,7 +108,6 @@ diff --git a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts index 767ff740188..566dafa6e3f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts @@ -1145,10 +1145,6 @@ describe('IgxGrid - Row Adding #grid', () => { actionStrip = fixture.componentInstance.actionStrip; expect(actionStrip).toBeDefined(); expect(grid.actionStrip).toBeDefined(); - - // Verify that the outlet is properly set - expect(actionStrip.menuOverlaySettings.outlet).toBeDefined(); - expect(actionStrip.menuOverlaySettings.outlet).toBe(grid.outlet); }); }); }); 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 e83e4f0e266..2898e9c3226 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 @@ -1153,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 */ @@ -1347,12 +1335,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 +2665,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 +3291,6 @@ export abstract class IgxGridBaseDirective implements GridType, scrollStrategy: new AbsoluteScrollStrategy(), modal: false, closeOnOutsideClick: false, - outlet: this.rowOutletDirective, positionStrategy: this.rowEditPositioningStrategy }; @@ -4071,19 +4038,8 @@ export abstract class IgxGridBaseDirective implements GridType, this.paginationComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => { this.setUpPaginator(); }); - - this.actionStripComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => { - if (this.actionStrip) { - this.actionStrip.menuOverlaySettings.outlet = this.outlet; - } - }); - - if (this.actionStrip) { - this.actionStrip.menuOverlaySettings.outlet = this.outlet; - } } - protected get activeRowIndexes(): number[] { if (this._activeRowIndexes) { return this._activeRowIndexes; @@ -4272,7 +4228,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(); @@ -6384,7 +6339,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); @@ -6765,13 +6720,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(); } } @@ -8166,13 +8120,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-cell-editing.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts index c84769e3161..85b48dbb61f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts @@ -621,7 +621,8 @@ describe('IgxGrid - Cell Editing #grid', () => { 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/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', () => { diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html index b8f5df39515..c10caf47eae 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.html +++ b/projects/igniteui-angular/grids/grid/src/grid.component.html @@ -157,16 +157,9 @@ -
-
- @if (shouldOverlayLoading) { - - - } -
@if (moving && columnInDrag) { @@ -183,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(); 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..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 @@ -124,7 +124,6 @@ } -
@if (!this.parent) { @@ -132,8 +131,7 @@
@if (shouldOverlayLoading) { - - + }
@if (moving && columnInDrag) { @@ -271,7 +269,6 @@ @if (colResizingService.showResizer) { } -
@if (platform.isElements) {
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 96951a552b1..fb4c2f4aa85 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 @@ -658,15 +658,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/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; - } } /** 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..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 @@ -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-cell.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-cell.component.html index 6a4a72f8d21..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 @@ -122,7 +122,6 @@ 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..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 @@ -116,14 +116,12 @@ -
@if (shouldOverlayLoading) { - - + }
@if (moving && columnInDrag) { @@ -251,7 +249,6 @@ @if (colResizingService.showResizer) { } -
@if (platform.isElements) {
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 1fca459aa7e..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 @@ -390,7 +390,6 @@ type="box" [disabled]="isSearchValueInputDisabled()" [locale]="this.locale" - [outlet]="pickerOutlet" [formatter]="selectedField.formatter" [displayFormat]="selectedField.pipeArgs.format" [weekStart]="selectedField.pipeArgs.weekStart" @@ -410,7 +409,6 @@ type="box" [disabled]="isSearchValueInputDisabled()" [locale]="this.locale" - [outlet]="pickerOutlet" [formatter]="selectedField.formatter" [displayFormat]="selectedField.pipeArgs.format" [inputFormat]="selectedField.editorOptions?.dateTimeFormat" @@ -582,13 +580,6 @@ } -
- ; @@ -406,11 +400,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { */ public searchValue: { value: any } = { value: null }; - /** - * @hidden @internal - */ - public pickerOutlet: IgxOverlayOutletDirective | ElementRef; - /** * @hidden @internal */ @@ -528,18 +517,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 +547,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)) { @@ -741,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 * @@ -1391,14 +1351,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(); })); 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 * 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