From 550c0eda90663d7f39b4931952ccc88656a107fb Mon Sep 17 00:00:00 2001
From: Milko Venkov <MVenkov@infragistics.com>
Date: Mon, 4 Oct 2021 14:24:41 +0300
Subject: [PATCH] chore(overlay): update sample to allow change of animations
 duration

---
 src/app/overlay/overlay.sample.html | 4 ++++
 src/app/overlay/overlay.sample.ts   | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/overlay/overlay.sample.html b/src/app/overlay/overlay.sample.html
index fe223423e48..8a61cb89f69 100644
--- a/src/app/overlay/overlay.sample.html
+++ b/src/app/overlay/overlay.sample.html
@@ -70,6 +70,10 @@
                     <input igxInput name="dropDownWidth" type="number" [(ngModel)]="dropDownWidth">
                     <label igxLabel for="dropDownWidth">Drop down width</label>
                 </igx-input-group>
+                <igx-input-group>
+                    <input igxInput name="animationLength" type="number" [(ngModel)]="animationLength">
+                    <label igxLabel for="animationLength">Animation length in ms</label>
+                </igx-input-group>
             </div>
         </div>
         <div #outlet class="outlet column">
diff --git a/src/app/overlay/overlay.sample.ts b/src/app/overlay/overlay.sample.ts
index 9f4915991c8..92a323848bb 100644
--- a/src/app/overlay/overlay.sample.ts
+++ b/src/app/overlay/overlay.sample.ts
@@ -11,7 +11,8 @@ import {
     NoOpScrollStrategy,
     ElasticPositionStrategy,
     IgxDragDirective,
-    ContainerPositionStrategy
+    ContainerPositionStrategy,
+    IAnimationParams
 } from 'igniteui-angular';
 
 @Component({
@@ -48,6 +49,7 @@ export class OverlaySampleComponent implements OnInit {
     public closeOnOutsideClick = true;
     public modal = true;
     public useOutlet = false;
+    public animationLength = 300; // in ms
 
     private xAddition = 0;
     private yAddition = 0;
@@ -341,6 +343,10 @@ export class OverlaySampleComponent implements OnInit {
             this.cdr.detectChanges();
             this.onChange2();
             this._overlaySettings.target = this.button.nativeElement;
+            (this._overlaySettings.positionStrategy.settings.openAnimation.options.params as IAnimationParams).duration
+                = `${this.animationLength}ms`;
+            (this._overlaySettings.positionStrategy.settings.closeAnimation.options.params as IAnimationParams).duration
+                = `${this.animationLength}ms`;
         }
         this.igxDropDown.toggle(this._overlaySettings);
     }