feat(overlay): move target to overlaySettings #7807 (#8099)

Author: PlamenaMiteva

CHANGELOG.md

@@ -5,13 +5,16 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 - `IgxInputGroup`
-    - **Breaking Chage** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
+    - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
+- `IgxOverlay`
+    - **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
 - `IgxDatePicker`
     - **Breaking Change** - Deprecated the `label` and `labelVisibility` properties.
 
+
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
@@ -24,7 +27,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxTimePicker`
     - Added a custom label functionality.
 - `IgxCalendar` and `IgxDatePicker` - new `showWeekNumbers` input, that allows showing of the week number at left side of content area.
-
+- `IgxOverlay`
+    - The `PositionSettings` `target` property has been deprecated and moved to `OverlaySettings`.
+    - An optional Point/HTML Element parameter `target` has been added to the `position()` method
+    
 ## 10.1.0
 
 ### General

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -1228,7 +1228,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public ngOnInit() {
         this.ngControl = this._injector.get<NgControl>(NgControl, null);
-        this._overlaySettings.positionStrategy.settings.target = this.elementRef.nativeElement;
+        this._overlaySettings.target = this.elementRef.nativeElement;
         this.selection.set(this.id, new Set());
         this._iconService.addSvgIconFromText(caseSensitiveIcon.name, caseSensitiveIcon.value, 'case-sensitive');
     }

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -1482,6 +1482,7 @@ describe('IgxDatePicker', () => {
             const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
             datePicker['_inputGroup'] = inputGroup;
             datePicker['_inputDirectiveUserTemplates'] = new QueryList();
+            spyOnProperty(datePicker, 'inputGroupElement').and.returnValue(null);
             ngModel.control.validator = () => ({ required: true });
             datePicker.ngOnInit();
             datePicker.ngAfterViewInit();
@@ -1495,6 +1496,7 @@ describe('IgxDatePicker', () => {
             const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
             datePicker['_inputGroupUserTemplate'] = inputGroup;
             datePicker['_inputDirectiveUserTemplates'] = new QueryList();
+            spyOnProperty(datePicker, 'inputGroupElement').and.returnValue(null);
             ngModel.control.validator = () => ({ required: true });
             datePicker.ngOnInit();
             datePicker.ngAfterViewInit();
@@ -1508,6 +1510,7 @@ describe('IgxDatePicker', () => {
             const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
             datePicker['_inputGroup'] = inputGroup;
             datePicker['_inputDirectiveUserTemplates'] = new QueryList();
+            spyOnProperty(datePicker, 'inputGroupElement').and.returnValue(null);
             datePicker.ngOnInit();
             datePicker.ngAfterViewInit();
             datePicker.ngAfterViewChecked();

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -841,6 +841,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         };
 
         this._defaultDropDownOverlaySettings = {
+            target: this.inputGroupElement,
             closeOnOutsideClick: true,
             modal: false,
             scrollStrategy: new AbsoluteScrollStrategy(),
@@ -1050,7 +1051,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                 this.hasHeader = false;
                 const target = this.inputGroupElement;
                 if (target) {
-                    this.dropDownOverlaySettings.positionStrategy.settings.target = target;
+                    this.dropDownOverlaySettings.target = target;
                 }
                 this._componentID = this._overlayService.attach(IgxCalendarContainerComponent,
                     this.dropDownOverlaySettings, this._moduleRef);

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -927,10 +927,10 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     private configPositionStrategy(): void {
         this._positionSettings = {
             openAnimation: fadeIn,
-            closeAnimation: fadeOut,
-            target: this.element.nativeElement
+            closeAnimation: fadeOut
         };
         this._dropDownOverlaySettings.positionStrategy = new AutoPositionStrategy(this._positionSettings);
+        this.dropdownOverlaySettings.target = this.element.nativeElement;
     }
 
     private configOverlaySettings(): void {

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -88,9 +88,10 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     private destroy$ = new Subject();
 
     private defaultSettings: OverlaySettings = {
+        target: this.parentElement,
         modal: false,
         scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new AutoPositionStrategy({ target: this.parentElement }),
+        positionStrategy: new AutoPositionStrategy(),
         excludePositionTarget: true
     };
 
@@ -111,9 +112,10 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
 
     private get settings(): OverlaySettings {
         const settings = Object.assign({}, this.defaultSettings, this.autocompleteSettings);
-        if (!settings.positionStrategy.settings.target) {
+        const target = settings.target || settings.positionStrategy.settings.target;
+        if (!target) {
             const positionStrategyClone: IPositionStrategy = settings.positionStrategy.clone();
-            positionStrategyClone.settings.target = this.parentElement;
+            settings.target = this.parentElement;
             settings.positionStrategy = positionStrategyClone;
         }
         return settings;

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts

@@ -470,8 +470,10 @@ describe('IgxToggle', () => {
             const fixture = TestBed.createComponent(IgxToggleActionTestComponent);
             fixture.detectChanges();
             spyOn(IgxToggleDirective.prototype, 'toggle');
+            const button = fixture.debugElement.query(By.directive(IgxToggleActionDirective)).nativeElement;
 
             const defaults: OverlaySettings = {
+                target: button,
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
@@ -493,8 +495,10 @@ describe('IgxToggle', () => {
             const fixture = TestBed.createComponent(IgxToggleActionTestComponent);
             fixture.detectChanges();
             spyOn(IgxToggleDirective.prototype, 'toggle');
+            const button = fixture.debugElement.query(By.directive(IgxToggleActionDirective)).nativeElement;
 
             const settings: OverlaySettings = {
+                target: button,
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
@@ -540,16 +544,8 @@ describe('IgxToggle', () => {
             fixture.detectChanges();
 
             fixture.componentInstance.toggleAction.onClick();
+            settings.target = button;
             expect(toggleSpy).toHaveBeenCalledWith(settings);
-            let positionStrategy = toggleSpy.calls.mostRecent().args[0].positionStrategy as IPositionStrategy;
-            expect(positionStrategy.settings.target).toBe(button);
-
-            fixture.componentInstance.settings.positionStrategy = new ConnectedPositioningStrategy({ target: document.body });
-            fixture.detectChanges();
-
-            fixture.componentInstance.toggleAction.onClick();
-            positionStrategy = toggleSpy.calls.mostRecent().args[0].positionStrategy as IPositionStrategy;
-            expect(positionStrategy.settings.target).toBe(button);
         });
 
         it('Should fire toggle "onClosing" event when closing through closeOnOutsideClick', fakeAsync(() => {
@@ -585,9 +581,11 @@ describe('IgxToggle', () => {
             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,

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -425,7 +425,8 @@ export class IgxToggleActionDirective implements OnInit {
      */
     public ngOnInit() {
         this._overlayDefaults = {
-            positionStrategy: new ConnectedPositioningStrategy({ target: this.element.nativeElement }),
+            target: this.element.nativeElement,
+            positionStrategy: new ConnectedPositioningStrategy(),
             scrollStrategy: new AbsoluteScrollStrategy(),
             closeOnOutsideClick: true,
             modal: false,
@@ -455,7 +456,7 @@ export class IgxToggleActionDirective implements OnInit {
     protected updateOverlaySettings(settings: OverlaySettings): OverlaySettings {
         if (settings && settings.positionStrategy) {
             const positionStrategyClone: IPositionStrategy = settings.positionStrategy.clone();
-            positionStrategyClone.settings.target = this.element.nativeElement;
+            settings.target = this.element.nativeElement;
             settings.positionStrategy = positionStrategyClone;
         }
 

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -215,8 +215,8 @@ describe('IgxTooltip', () => {
 
             // Use custom overlaySettings.
             tooltipTarget.overlaySettings = /*<OverlaySettings>*/ {
+                target: tooltipTarget.nativeElement,
                 positionStrategy: new AutoPositionStrategy({
-                    target: tooltipTarget.nativeElement,
                     horizontalStartPoint: HorizontalAlignment.Right,
                     verticalStartPoint: VerticalAlignment.Bottom,
                     horizontalDirection: HorizontalAlignment.Right,

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.ts

@@ -191,7 +191,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         super.ngOnInit();
 
         const positionSettings: PositionSettings = {
-            target: this.nativeElement,
             horizontalDirection: HorizontalAlignment.Center,
             horizontalStartPoint: HorizontalAlignment.Center,
             openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }),

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -657,8 +657,10 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
 
         this.cdr.detectChanges();
 
-        this.columnSelectOverlaySettings.positionStrategy = new AutoPositionStrategy({ target: this.columnSelect.element });
-        this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy({ target: this.conditionSelect.element });
+        this.columnSelectOverlaySettings.target = this.columnSelect.element;
+        this.columnSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
+        this.conditionSelectOverlaySettings.target = this.conditionSelect.element;
+        this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
 
         if (!this.selectedColumn) {
             this.columnSelect.input.nativeElement.focus();
@@ -920,7 +922,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
             Math.max(r, c.elementRef.nativeElement.getBoundingClientRect().right), 0);
         maxRight = Math.max(maxRight, containerRect.left);
         maxRight = Math.min(maxRight, containerRect.right);
-        this._overlaySettings.positionStrategy.settings.target = new Point(maxRight, minTop);
+        this._overlaySettings.target = new Point(maxRight, minTop);
     }
 
     private scrollElementIntoView(target: HTMLElement) {

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -489,15 +489,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      * Opens the conditions dropdown.
      */
     public toggleConditionsDropDown(target: any) {
-        this._conditionsOverlaySettings.positionStrategy.settings.target = target;
+        this._conditionsOverlaySettings.target = target;
         this.dropDownConditions.toggle(this._conditionsOverlaySettings);
     }
 
     /**
      * Opens the logic operators dropdown.
      */
     public toggleOperatorsDropDown(eventArgs, index) {
-        this._operatorsOverlaySettings.positionStrategy.settings.target = eventArgs.target.parentElement;
+        this._operatorsOverlaySettings.target = eventArgs.target.parentElement;
         this.dropDownOperators.toArray()[index].toggle(this._operatorsOverlaySettings);
     }
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts

@@ -77,7 +77,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
      */
     public onTextFilterClick(eventArgs) {
         if (this.shouldOpenSubMenu) {
-            this._subMenuOverlaySettings.positionStrategy.settings.target = eventArgs.currentTarget;
+            this._subMenuOverlaySettings.target = eventArgs.currentTarget;
 
             const gridRect = this.esf.grid.nativeElement.getBoundingClientRect();
             const dropdownRect = this.esf.mainDropdown.nativeElement.getBoundingClientRect();

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts

@@ -130,7 +130,7 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
     }
 
     public open(esf) {
-        this._customDialogOverlaySettings.positionStrategy.settings.target =
+        this._customDialogOverlaySettings.target =
             this.overlayComponentId ?
                 this.grid.rootGrid ? this.grid.rootGrid.nativeElement : this.grid.nativeElement :
                 esf;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts

@@ -117,9 +117,8 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
 
     ngAfterViewInit(): void {
         this.dropDownOverlaySettings.outlet = this.overlayOutlet;
-        this.dropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy({
-            target : this.dropdownConditions.inputGroup.element.nativeElement
-        });
+        this.dropDownOverlaySettings.target = this.dropdownConditions.inputGroup.element.nativeElement;
+        this.dropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy();
     }
 
     public focus() {

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -74,7 +74,7 @@ export class IgxFilteringService implements OnDestroy {
             const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
             const filterIconTarget = element.querySelector('.' + filterIcon);
 
-            this._filterMenuOverlaySettings.positionStrategy.settings.target = filterIconTarget;
+            this._filterMenuOverlaySettings.target = filterIconTarget;
             this._filterMenuOverlaySettings.outlet = (this.grid as any).outlet;
 
             if (this.grid.excelStyleFilteringComponent) {

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2685,7 +2685,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         closeAnimation: null
     });
 
-    private rowEditSettings = {
+    private rowEditSettings: OverlaySettings = {
         scrollStrategy: new AbsoluteScrollStrategy(),
         modal: false,
         closeOnOutsideClick: false,
@@ -6332,7 +6332,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!targetRow) {
             return;
         }
-        this.rowEditPositioningStrategy.settings.target = targetRow.element.nativeElement;
+        this.rowEditSettings.target = targetRow.element.nativeElement;
         this.toggleRowEditingOverlay(true);
     }
 
@@ -6562,7 +6562,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public openAdvancedFilteringDialog() {
         if (!this._advancedFilteringOverlayId) {
-            this._advancedFilteringOverlaySettings.positionStrategy.settings.target =
+            this._advancedFilteringOverlaySettings.target =
                 (this as any).rootGrid ? (this as any).rootGrid.nativeElement : this.nativeElement;
             this._advancedFilteringOverlaySettings.outlet = this.outlet;
 

projects/igniteui-angular/src/lib/grids/grid.common.ts

@@ -1,6 +1,6 @@
 import { Directive } from '@angular/core';
 import { ConnectedPositioningStrategy } from '../services/public_api';
-import { VerticalAlignment, PositionSettings } from '../services/overlay/utilities';
+import { VerticalAlignment, PositionSettings, Point } from '../services/overlay/utilities';
 import { scaleInVerBottom, scaleInVerTop } from '../animations/main';
 import { IgxForOfSyncService } from '../directives/for-of/for_of.sync.service';
 import { ColumnPinningPosition, RowPinningPosition } from './common/enums';
@@ -35,9 +35,10 @@ export class RowEditPositionStrategy extends ConnectedPositioningStrategy {
     isTop = false;
     isTopInitialPosition = null;
     public settings: RowEditPositionSettings;
-    position(contentElement: HTMLElement, size: { width: number, height: number }, document?: Document, initialCall?: boolean): void {
+    position(contentElement: HTMLElement, size: { width: number, height: number }, document?: Document, initialCall?: boolean,
+            target?: Point | HTMLElement): void {
         const container = this.settings.container; // grid.tbody
-        const target = <HTMLElement>this.settings.target; // current grid.row
+        const targetElement = <HTMLElement>target || <HTMLElement>this.settings.target; // current grid.row
 
         // Position of the overlay depends on the available space in the grid.
         // If the bottom space is not enough then the the row overlay will show at the top of the row.
@@ -46,13 +47,14 @@ export class RowEditPositionStrategy extends ConnectedPositioningStrategy {
         this.isTop = this.isTopInitialPosition !== null ?
             this.isTopInitialPosition :
             container.getBoundingClientRect().bottom <
-                target.getBoundingClientRect().bottom + contentElement.getBoundingClientRect().height;
+                targetElement.getBoundingClientRect().bottom + contentElement.getBoundingClientRect().height;
 
         // Set width of the row editing overlay to equal row width, otherwise it fits 100% of the grid.
-        contentElement.style.width = target.clientWidth + 'px';
+        contentElement.style.width = targetElement.clientWidth + 'px';
         this.settings.verticalStartPoint = this.settings.verticalDirection = this.isTop ? VerticalAlignment.Top : VerticalAlignment.Bottom;
         this.settings.openAnimation = this.isTop ? scaleInVerBottom : scaleInVerTop;
 
-        super.position(contentElement, { width: target.clientWidth, height: target.clientHeight }, document, initialCall);
+        super.position(contentElement, { width: targetElement.clientWidth, height: targetElement.clientHeight },
+                    document, initialCall, targetElement);
     }
 }