Merge branch 'master' into mkirova/fix-8076

Author: ChronosSF

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' } }),