fix(overlay): add sample for fixed functionality

Author: wnvko

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({
@@ -22,6 +24,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(),
@@ -60,7 +63,6 @@ export class OverlayAnimationSampleComponent {
                 break;
         }
     }
-
     public mouseleave(ev) {
         switch (ev.target.id) {
             case 'audi':
@@ -74,4 +76,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;
+        }
+    }
 }