Merge pull request #15283 from IgniteUI/mvenkov/use-passed-overlay-settings

Lipata · web-flow · commit 9e5f3cd92e37 · 2025-01-22T16:25:06.000+02:00
Use provided in show method overlay settings
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/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: ', () => {
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/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;
     }
 
diff --git a/src/app/overlay/overlay-animation.sample.html b/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>
diff --git a/src/app/overlay/overlay-animation.sample.scss b/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;
+}
diff --git a/src/app/overlay/overlay-animation.sample.ts b/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;
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -8,3 +8,7 @@ $new-card-theme: card-theme(`
`8`	`8`	`::ng-deep {`
`9`	`9`	`@include card($new-card-theme);`
`10`	`10`	`}`
	`11`	`+`
	`12`	`+.padding {`
	`13`	`+ gap: 2rem;`
	`14`	`+}`