Adding default overlay settings - 17.2.x (#14458)

* fix(dropdown): Adding default overlay settings

* chore(dropdown): Addressing comments and removing unnecessary code and imports

---------

Co-authored-by: Teodosia Hristodorova <[email protected]>

Author: IvanKitanov17

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -18,6 +18,7 @@ import { DisplayDensity } from '../core/density';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { NgFor } from '@angular/common';
+import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../services/public_api';
 
 const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down';
 const CSS_CLASS_LIST = 'igx-drop-down__list';
@@ -242,6 +243,57 @@ describe('IgxDropDown ', () => {
                 expect(dropdown.opening.emit).toHaveBeenCalledTimes(1);
                 expect(dropdown.opened.emit).toHaveBeenCalledTimes(1);
             }));
+            it('should use default overlay settings if none are provided', () => {
+                const toggle: IgxToggleDirective = (dropdown as any).toggleDirective;
+
+                spyOn(toggle, 'open').and.callThrough();
+
+                dropdown.open();
+                fixture.detectChanges();
+                expect(toggle.open).toHaveBeenCalledTimes(1);
+
+                const appliedSettings = (toggle.open as jasmine.Spy).calls.mostRecent().args[0];
+                expect(appliedSettings.closeOnOutsideClick).toBe(true);
+                expect(appliedSettings.modal).toBe(false);
+                expect(appliedSettings.positionStrategy instanceof ConnectedPositioningStrategy).toBe(true);
+
+                const positionStrategy = appliedSettings.positionStrategy as ConnectedPositioningStrategy;
+                expect(positionStrategy.settings.horizontalStartPoint).toBe(HorizontalAlignment.Left);
+                expect(positionStrategy.settings.verticalStartPoint).toBe(VerticalAlignment.Bottom);
+                expect(positionStrategy.settings.horizontalDirection).toBe(HorizontalAlignment.Right);
+                expect(positionStrategy.settings.verticalDirection).toBe(VerticalAlignment.Bottom);
+            });
+
+            it('should apply custom overlay settings if provided', () => {
+                const toggle: IgxToggleDirective = (dropdown as any).toggleDirective;
+                const customOverlaySettings: OverlaySettings = {
+                    closeOnOutsideClick: false,
+                    modal: true,
+                    positionStrategy: new ConnectedPositioningStrategy({
+                        horizontalStartPoint: HorizontalAlignment.Right,
+                        verticalStartPoint: VerticalAlignment.Top,
+                        horizontalDirection: HorizontalAlignment.Left,
+                        verticalDirection: VerticalAlignment.Top
+                    })
+                };
+
+                spyOn(toggle, 'open').and.callThrough();
+
+                dropdown.open(customOverlaySettings);
+                fixture.detectChanges();
+                expect(toggle.open).toHaveBeenCalledTimes(1);
+
+                const appliedSettings = (toggle.open as jasmine.Spy).calls.mostRecent().args[0];
+                expect(appliedSettings.closeOnOutsideClick).toBe(customOverlaySettings.closeOnOutsideClick);
+                expect(appliedSettings.modal).toBe(customOverlaySettings.modal);
+                expect(appliedSettings.positionStrategy instanceof ConnectedPositioningStrategy).toBe(true);
+
+                const positionStrategy = appliedSettings.positionStrategy as ConnectedPositioningStrategy;
+                expect(positionStrategy.settings.horizontalStartPoint).toBe(HorizontalAlignment.Right);
+                expect(positionStrategy.settings.verticalStartPoint).toBe(VerticalAlignment.Top);
+                expect(positionStrategy.settings.horizontalDirection).toBe(HorizontalAlignment.Left);
+                expect(positionStrategy.settings.verticalDirection).toBe(VerticalAlignment.Top);
+            });
             it('#2798 - should allow canceling of open/close through opening/closing events', fakeAsync(() => {
                 const toggle: IgxToggleDirective = (dropdown as any).toggleDirective;
                 const onOpeningSpy = spyOn(dropdown.opening, 'emit').and.callThrough();

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -31,8 +31,9 @@ import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
 import { IgxForOfToken } from '../directives/for-of/for_of.directive';
 import { take } from 'rxjs/operators';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
-import { OverlaySettings } from '../services/overlay/utilities';
+import {  OverlaySettings } from '../services/overlay/utilities';
 import { NgIf } from '@angular/common';
+import { ConnectedPositioningStrategy } from '../services/public_api';
 
 /**
  * **Ignite UI for Angular DropDown** -
@@ -50,6 +51,7 @@ import { NgIf } from '@angular/common';
  * </igx-drop-down>
  * ```
  */
+
 @Component({
     selector: 'igx-drop-down',
     templateUrl: './drop-down.component.html',
@@ -244,10 +246,22 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
      * ```
      */
     public open(overlaySettings?: OverlaySettings) {
-        this.toggleDirective.open(overlaySettings);
+        const settings = overlaySettings || this.getDefaultOverlaySettings();
+        this.toggleDirective.open(settings);
         this.updateScrollPosition();
     }
 
+    /**
+    * @hidden @internal
+    */
+    public getDefaultOverlaySettings(): OverlaySettings {
+        return {
+            closeOnOutsideClick: true,
+            modal: false,
+            positionStrategy: new ConnectedPositioningStrategy()
+        };
+    }
+
     /**
      * Closes the dropdown
      *