From 88875aa631bad2c9086299211b047fee9bc94281 Mon Sep 17 00:00:00 2001
From: mmart1n <mevtimov@infragistics.com>
Date: Thu, 16 Sep 2021 19:17:38 +0300
Subject: [PATCH] feat(stepper): control sample animation settings

---
 src/app/stepper/stepper.sample.html | 50 ++++++++++++++----------
 src/app/stepper/stepper.sample.scss | 10 ++++-
 src/app/stepper/stepper.sample.ts   | 60 ++++++++++++++++++++++++-----
 3 files changed, 87 insertions(+), 33 deletions(-)

diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html
index 9e25d090cd6..b3c7887d8b7 100644
--- a/src/app/stepper/stepper.sample.html
+++ b/src/app/stepper/stepper.sample.html
@@ -1,30 +1,46 @@
-<!-- <igx-stepper #stepperNg>
-    <igx-step *ngFor="let n of [1, 2, 3]">
-        <igx-icon>done</igx-icon>
-        <label igxLabel>Step No{{n}}</label>
-    </igx-step>
-</igx-stepper>
-<button (click)="stepperNg.navigateTo(2)">Navigate to 2 Step</button> -->
-<igx-stepper #stepper (activeStepChanged)="activeStepChanged($event)" (activeStepChanging)="activeStepChanging($event)" [orientation]="'Horizontal'">
-    <igx-step [active]="true" #step>
+<div class="sample-actions">
+    <!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
+    <!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
+    <!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
+    <button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
+    <div>
+        <p>Vertical Animation Settings</p>
+        <igx-buttongroup [values]="verticalAnimations" (selected)="toggleVerticalAnimations($event)">
+        </igx-buttongroup>
+    </div>
+    <div>
+        <p>Horizontal Animation Type</p>
+        <igx-buttongroup [values]="horizontalAnimationTypes" (selected)="toggleHorizontalAnimations($event)">
+        </igx-buttongroup>
+    </div>
+    <igx-input-group type="border">
+        <label igxLabel>Horizontal Animation Duration</label>
+        <input igxInput type="number" [(ngModel)]="animationDuration">
+        <igx-suffix>ms</igx-suffix>
+    </igx-input-group>
+</div>
+<igx-stepper #stepper [verticalAnimationSettings]="animationSettings" [horizontalAnimationType]="animationType"
+    [horizontalAnimationDuration]="animationDuration" (activeStepChanged)="activeChanged($event)"
+    [orientation]="'Horizontal'">
+    <igx-step [active]="true" #step (activeChange)="activeStepChange($event)">
         <igx-icon igxStepIcon>done</igx-icon>
         <label igxStepLabel>Step No 1</label>
         <div>Test me daddy</div>
     </igx-step>
 
-    <igx-step #step2 [skip]="true" (activeChanged)="activeStepChanged($event)">
+    <igx-step #step2 [skip]="true" (activeChange)="activeStepChange($event)">
         <igx-icon igxStepIcon>calendar_today</igx-icon>
         <label igxStepLabel>Step No 2</label>
         <igx-date-picker></igx-date-picker>
     </igx-step>
 
-    <igx-step #step3 [disabled]="true">
+    <igx-step #step3 [disabled]="true" (activeChange)="activeStepChange($event)">
         <igx-icon igxStepIcon>alarm</igx-icon>
         <label igxStepLabel>Step No 3</label>
         <igx-time-picker></igx-time-picker>
     </igx-step>
 
-    <igx-step #step4 [active]="true" (activeChanged)="activeStepChanged($event)">
+    <igx-step #step4 [active]="true" (activeChange)="activeStepChange($event)">
         <igx-icon igxStepIcon>check_circle</igx-icon>
         <label igxStepLabel>Step No 4</label>
         <igx-select [placeholder]="'Pick One'">
@@ -35,7 +51,7 @@
         </igx-select>
     </igx-step>
 
-    <igx-step #step5>
+    <igx-step #step5 (activeChange)="activeStepChange($event)">
         <igx-icon igxStepIcon>delete</igx-icon>
         <label igxStepLabel>Step No 5</label>
         <div>
@@ -43,11 +59,3 @@
         </div>
     </igx-step>
 </igx-stepper>
-
-<div class="sample-actions">
-    <!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
-    <!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
-    <!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
-    <button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
-</div>
-
diff --git a/src/app/stepper/stepper.sample.scss b/src/app/stepper/stepper.sample.scss
index 9d5295a8da6..ca559f25086 100644
--- a/src/app/stepper/stepper.sample.scss
+++ b/src/app/stepper/stepper.sample.scss
@@ -1,5 +1,11 @@
 .sample-actions {
-    margin-top: 20px;
+    margin: 20px 0;
     display: flex;
-    align-items: center;
+    gap: 25px;
+}
+
+::ng-deep {
+    .igx-button-group {
+        width: 250px;
+    }
 }
diff --git a/src/app/stepper/stepper.sample.ts b/src/app/stepper/stepper.sample.ts
index 9c93f2a8ebc..65c848c0467 100644
--- a/src/app/stepper/stepper.sample.ts
+++ b/src/app/stepper/stepper.sample.ts
@@ -1,4 +1,6 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { growVerIn, growVerOut, slideInLeft, slideOutRight } from 'igniteui-angular';
+import { ToggleAnimationSettings } from 'projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component';
 import { IgxStepperOrienatation } from 'projects/igniteui-angular/src/lib/stepper/common';
 import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/igx-stepper.component';
 
@@ -8,6 +10,12 @@ import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/i
 })
 export class IgxStepperSampleComponent implements AfterViewInit {
     @ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent;
+    public animationType = 'slide';
+    public animationSettings: ToggleAnimationSettings = {
+        openAnimation: growVerIn,
+        closeAnimation: growVerOut
+    };
+    public animationDuration = 320;
     // public stepType = IgxStepType.Full;
     // public labelPos = IgxStepperLabelPosition.Bottom;
     // public stepTypes = [
@@ -25,26 +33,58 @@ export class IgxStepperSampleComponent implements AfterViewInit {
     //     { label: 'Start', labelPos: IgxStepperLabelPosition.Start,
     //         selected: this.labelPos === IgxStepperLabelPosition.Start, togglable: true }
     // ];
+    public horizontalAnimationTypes = [];
+
+    public verticalAnimations = [];
+
+    constructor(private cdr: ChangeDetectorRef) {
+        this.horizontalAnimationTypes = [
+            { label: 'slide', animationType: 'slide', selected: this.animationType === 'slide', togglable: true },
+            { label: 'fade', animationType: 'fade', selected: this.animationType === 'fade', togglable: true },
+            { label: 'none', animationType: 'none', selected: this.animationType === 'none', togglable: true }
+        ];
+        this.verticalAnimations = [
+            {
+                label: 'default',
+                animationSettings: { openAnimation: growVerIn, closeAnimation: growVerOut },
+                selected: this.animationSettings.openAnimation === growVerIn,
+                togglable: true
+            },
+            {
+                label: 'custom',
+                animationSettings: { openAnimation: slideInLeft, closeAnimation: slideOutRight },
+                selected: this.animationSettings.openAnimation === slideOutRight,
+                togglable: true
+            }
+        ];
+    }
+
     public ngAfterViewInit() {
-        // requestAnimationFrame(() => {
-        //     this.stepper.steps[1].completedStyle = IgxStepperProgressLine.Dashed;
-        // });
     }
+
     // public toggleStepTypes(event){
     //     this.stepType = this.stepTypes[event.index].stepType;
     // }
+
+    public toggleHorizontalAnimations(event) {
+        this.animationType = this.horizontalAnimationTypes[event.index].animationType;
+    }
+
+    public toggleVerticalAnimations(event) {
+        this.animationSettings = this.verticalAnimations[event.index].animationSettings;
+    }
     // public toggleLabelPos(event){
     //     this.labelPos = this.labelPositions[event.index].labelPos;
     // }
 
-    public activeChanged(event, step) {
-        console.log('ACTIVE CHANGED');
-        console.log(event, step);
+
+    public activeChanged(event) {
+        console.log('GOLQM ACTIVE CHANGED');
+        // console.log(event);
     }
 
-    public activeStepChanged(ev) {
-        console.log('ACTIVE STEP CHANGED');
-        console.log(ev);
+    public activeStepChange(ev) {
+        console.log('MALUK CHANGE', ev);
     }
 
     public activeStepChanging(ev) {