Merge branch 'master' into ganastasov/feat-14890-master

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

@@ -478,6 +478,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         const eventArgs: IDialogCancellableEventArgs = { dialog: this, event: null, cancel: false };
         this.opening.emit(eventArgs);
         if (!eventArgs.cancel) {
+            overlaySettings = { ...{}, ... this._overlayDefaultSettings, ...overlaySettings };
             this.toggleRef.open(overlaySettings);
             this.isOpenChange.emit(true);
             if (!this.leftButtonLabel && !this.rightButtonLabel) {

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

@@ -256,7 +256,6 @@ describe('IgxDropDown ', () => {
                 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 = {
@@ -1266,6 +1265,31 @@ describe('IgxDropDown ', () => {
                 expect(dropdown.closing.emit).toHaveBeenCalledTimes(3);
                 expect(dropdown.closed.emit).toHaveBeenCalledTimes(3);
             }));
+            it('#15137 - should bind to custom target if provided', fakeAsync(() => {
+                const input = fixture.debugElement.query(By.css('input'));
+                dropdown.open({ target: input.nativeElement });
+                tick();
+                fixture.detectChanges();
+
+                const dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`));
+                expect(dropdownItems).not.toBeUndefined();
+
+                const inputRect = input.nativeElement.getBoundingClientRect();
+                let dropdownRect = dropdownItems[0].nativeElement.getBoundingClientRect();
+                expect(dropdownRect.left).toBe(inputRect.left);
+                expect(dropdownRect.top).toBe(inputRect.bottom);
+
+                dropdown.close();
+                tick();
+                fixture.detectChanges();
+                dropdown.open();
+                tick();
+                fixture.detectChanges();
+
+                dropdownRect = dropdownItems[0].nativeElement.getBoundingClientRect();
+                expect(dropdownRect.left).toBe(0);
+                expect(dropdownRect.top).toBe(0);
+            }));
         });
     });
 });
@@ -1341,7 +1365,6 @@ class DoubleIgxDropDownComponent implements OnInit {
         }
     }
 }
-
 @Component({
     template: `
     <input (click)="toggleDropDown()">

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

@@ -243,7 +243,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
      * ```
      */
     public open(overlaySettings?: OverlaySettings) {
-        const settings = overlaySettings || this.getDefaultOverlaySettings();
+        const settings = { ... {}, ...this.getDefaultOverlaySettings(), ...overlaySettings };
         this.toggleDirective.open(settings);
         this.updateScrollPosition();
     }

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -1378,6 +1378,38 @@ describe('igxOverlay', () => {
             expect(overlayContent.style.getPropertyValue('--ig-size')).toEqual('1');
             overlayInstance.detach(firstCallId);
         }));
+
+        it('#15228 - Should use provided in show overlay settings ', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SimpleRefComponent);
+            fixture.detectChanges();
+            const overlayInstance = fixture.componentInstance.overlay;
+            const id = overlayInstance.attach(SimpleDynamicComponent);
+            const info = overlayInstance.getOverlayById(id);
+            const initialPositionSpy = spyOn(info.settings.positionStrategy, 'position').and.callThrough();
+
+            overlayInstance.show(id);
+            tick();
+
+            expect(initialPositionSpy).toHaveBeenCalledTimes(1);
+            overlayInstance.hide(id);
+            tick();
+
+            const os: OverlaySettings = {
+                excludeFromOutsideClick: [],
+                positionStrategy: new GlobalPositionStrategy(),
+                scrollStrategy: new CloseScrollStrategy(),
+                modal: false,
+                closeOnOutsideClick: false,
+                closeOnEscape: true
+            };
+            const lastPositionSpy = spyOn(os.positionStrategy, 'position').and.callThrough();
+            overlayInstance.show(id, os);
+            tick();
+
+            expect(lastPositionSpy).toHaveBeenCalledTimes(1);
+            expect(info.settings.scrollStrategy).toBe(os.scrollStrategy);
+            expect(info.settings.positionStrategy).toBe(os.positionStrategy);
+        }));
     });
 
     describe('Unit Tests - Scroll Strategies: ', () => {

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -347,7 +347,7 @@ export class IgxOverlayService implements OnDestroy {
         const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
         info.initialSize = { width: elementRect.width, height: elementRect.height };
         // Get the size before moving the container into the overlay so that it does not forget about inherited styles.
-        this.getComponentSize(info); 
+        this.getComponentSize(info);
         this.moveElementToOverlay(info);
         // Update the container size after moving if there is size.
         if (info.size) {
@@ -416,7 +416,9 @@ export class IgxOverlayService implements OnDestroy {
             return;
         }
         if (settings) {
-            // TODO: update attach
+            settings.positionStrategy ??= info.settings.positionStrategy;
+            settings.scrollStrategy ??= info.settings.scrollStrategy;
+            info.settings = { ...info.settings, ...settings };
         }
         this.updateSize(info);
         info.settings.positionStrategy.position(
@@ -597,7 +599,7 @@ export class IgxOverlayService implements OnDestroy {
                 const createSettings = viewContainerRefOrSettings as OverlayCreateSettings | undefined;
                 let elementInjector: Injector;
                 if (createSettings) {
-                    ({ injector: elementInjector, ...overlaySettings} = createSettings);
+                    ({ injector: elementInjector, ...overlaySettings } = createSettings);
                 }
                 dynamicComponent = createComponent(component, { environmentInjector, elementInjector });
                 this._appRef.attachView(dynamicComponent.hostView);
@@ -615,7 +617,7 @@ export class IgxOverlayService implements OnDestroy {
             info.elementRef = { nativeElement: element };
             info.componentRef = dynamicComponent;
         }
-        info.settings = Object.assign({}, this._defaultSettings, overlaySettings); 
+        info.settings = Object.assign({}, this._defaultSettings, overlaySettings);
         return info;
     }
 

src/app/overlay/overlay-animation.sample.html

@@ -1,5 +1,6 @@
 <div #container>
-    <section class="sample-content">
+    <h5 style="text-align: center;">Move mouse over the avatars to start animations</h5>
+    <section class="sample-content padding">
         <igx-avatar id="audi" initials="BS" size="large" (mouseenter)="mouseenter($event)"
             (mouseleave)="mouseleave($event)">
         </igx-avatar>
@@ -10,6 +11,18 @@
             (mouseleave)="mouseleave($event)">
         </igx-avatar>
     </section>
+    <h5 style="text-align: center;">Move mouse over the avatars to reuse overlay settings</h5>
+    <section class="sample-content padding">
+        <igx-avatar id="audi" initials="BS" size="large" (mouseenter)="mouseenterReuse($event)"
+            (mouseleave)="mouseleaveReuse($event)">
+        </igx-avatar>
+        <igx-avatar id="bmw" initials="HK" size="large" (mouseenter)="mouseenterReuse($event)"
+            (mouseleave)="mouseleaveReuse($event)">
+        </igx-avatar>
+        <igx-avatar id="mercedes" initials="DZ" size="large" (mouseenter)="mouseenterReuse($event)"
+            (mouseleave)="mouseleaveReuse($event)">
+        </igx-avatar>
+    </section>
     <div igxToggle #audiToggle="toggle" style="max-width: 400px; min-width:250px;">
         <igx-card>
             <igx-card-header>
@@ -48,4 +61,15 @@ <h5 class="igx-card-header__subtitle">Daimler AG</h5>
             </igx-card-content>
         </igx-card>
     </div>
+    <div igxToggle #commonToggle="toggle" style="max-width: 400px; min-width:250px;">
+        <igx-card>
+            <igx-card-header>
+                <h3 class="igx-card-header__title">No Name</h3>
+                <h5 class="igx-card-header__subtitle">No Company</h5>
+            </igx-card-header>
+            <igx-card-content>
+                <p class="igx-card-content__text">This is a common toggle with no specific information.</p>
+            </igx-card-content>
+        </igx-card>
+    </div>
 </div>

src/app/overlay/overlay-animation.sample.scss

@@ -8,3 +8,7 @@ $new-card-theme: card-theme(
 ::ng-deep {
     @include card($new-card-theme);
 }
+
+.padding {
+    gap: 2rem;
+}

src/app/overlay/overlay-animation.sample.ts

@@ -7,7 +7,9 @@ import {
     IgxToggleDirective,
     HorizontalAlignment,
     IgxAvatarComponent,
-    IGX_CARD_DIRECTIVES
+    IGX_CARD_DIRECTIVES,
+    ConnectedPositioningStrategy,
+    VerticalAlignment
 } from 'igniteui-angular';
 
 @Component({
@@ -20,6 +22,7 @@ export class OverlayAnimationSampleComponent {
     @ViewChild('audiToggle', { static: true }) public audiToggle: IgxToggleDirective;
     @ViewChild('bmwToggle', { static: true }) public bmwToggle: IgxToggleDirective;
     @ViewChild('mercedesToggle', { static: true }) public mercedesToggle: IgxToggleDirective;
+    @ViewChild('commonToggle', { static: true }) public commonToggle: IgxToggleDirective;
 
     private _overlaySettings: OverlaySettings = {
         positionStrategy: new GlobalPositionStrategy(),
@@ -58,7 +61,6 @@ export class OverlayAnimationSampleComponent {
                 break;
         }
     }
-
     public mouseleave(ev) {
         switch (ev.target.id) {
             case 'audi':
@@ -72,4 +74,49 @@ export class OverlayAnimationSampleComponent {
                 break;
         }
     }
+    public mouseenterReuse(ev) {
+        const os: OverlaySettings = {
+            positionStrategy: new ConnectedPositioningStrategy(),
+            scrollStrategy: new NoOpScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: false,
+        };
+
+        os.positionStrategy.settings.horizontalDirection = HorizontalAlignment.Center;
+        os.positionStrategy.settings.horizontalStartPoint = HorizontalAlignment.Center;
+        os.positionStrategy.settings.verticalDirection = VerticalAlignment.Bottom;
+        os.positionStrategy.settings.verticalStartPoint = VerticalAlignment.Bottom;
+        os.target = ev.target;
+
+        const closeAnimationMetaData: AnimationMetadata[] = [
+            style({ opacity: `1`, transform: `scale(1)`, transformOrigin: `50% 50%` }),
+            animate(`6000ms`, style({ opacity: `0`, transform: `scale(0.5)`, transformOrigin: `50% 50%` }))
+        ];
+        const closeAnimation: AnimationReferenceMetadata = animation(closeAnimationMetaData);
+        this._overlaySettings.positionStrategy.settings.closeAnimation = closeAnimation;
+        switch (ev.target.id) {
+            case 'audi':
+                this.commonToggle.open(os);
+                break;
+            case 'bmw':
+                this.commonToggle.open(os);
+                break;
+            case 'mercedes':
+                this.commonToggle.open(os);
+                break;
+        }
+    }
+    public mouseleaveReuse(ev) {
+        switch (ev.target.id) {
+            case 'audi':
+                this.commonToggle.close();
+                break;
+            case 'bmw':
+                this.commonToggle.close();
+                break;
+            case 'mercedes':
+                this.commonToggle.close();
+                break;
+        }
+    }
 }