feat(stepper): different horizontal and vertical animation settings

Author: mmart1n

projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts

@@ -2,13 +2,12 @@ import { AnimationBuilder } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import {
     AfterViewInit, Component, HostBinding, OnDestroy, OnInit,
-    Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef, NgModule, ChangeDetectorRef
+    Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef, NgModule
 } from '@angular/core';
 import { IgxCarouselComponentBase } from 'igniteui-angular';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { growVerIn, growVerOut } from '../animations/grow';
-import { slideInLeft, slideOutRight } from '../animations/slide';
 import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
 import { IgxStepperOrienatation, IGX_STEPPER_COMPONENT, IStepToggledEventArgs, IStepTogglingEventArgs } from './common';
 import {
@@ -40,11 +39,11 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
         return this.orientation === IgxStepperOrienatation.Horizontal;
     }
 
-    /** Get/Set the animation settings that branches should use when expanding/collpasing.
+    /** Get/Set the animation settings that should be used when the active step is changed in vertical orientation mode.
      *
      * ```html
-     * <igx-tree [animationSettings]="customAnimationSettings">
-     * </igx-tree>
+     * <igx-stepper [verticalAnimationSettings]="customAnimationSettings">
+     * </igx-stepper>
      * ```
      *
      * ```typescript
@@ -53,15 +52,45 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
      *      closeAnimation: growVerOut
      * };
      *
-     * this.tree.animationSettings = animationSettings;
+     * this.stepper.verticalAnimationSettings = animationSettings;
      * ```
      */
     @Input()
-    public animationSettings: ToggleAnimationSettings = {
+    public verticalAnimationSettings: ToggleAnimationSettings = {
         openAnimation: growVerIn,
-        closeAnimation: growVerOut
+        closeAnimation: growVerOut,
     };
 
+    /**
+     * Gets/sets the animation type of the stepper when the orientation direction is horizontal.
+     * Default value is `slide`. Another possible values are `none` and `fade`.
+     * ```html
+     * <igx-stepper animationType='none'>
+     * <igx-stepper>
+     * ```
+     *
+     * @memberOf IgxSlideComponent
+     */
+    @Input()
+    public get horizontalAnimationType(): string {
+        return this.animationType;
+    }
+
+    public set horizontalAnimationType(value: string) {
+        // TODO: activeChange event is not emitted for the collapsing steps
+        this.stepperService.collapsingSteps.clear();
+        this.animationType = value;
+    }
+
+    @Input()
+    public get horizontalAnimationDuration(): number {
+        return this.animationDuration;
+    }
+
+    public set horizontalAnimationDuration(value: number) {
+        this.animationDuration = value;
+    }
+
     /**
      * Get/Set whether the stepper is linear.
      * Only if the active step is valid the user is able to move forward.
@@ -89,17 +118,7 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
         if (this._orientation === value) {
             return;
         }
-        if (value === IgxStepperOrienatation.Horizontal) {
-            this.animationSettings = {
-                openAnimation: slideInLeft,
-                closeAnimation: slideOutRight
-            };
-        } else {
-            this.animationSettings = {
-                openAnimation: growVerIn,
-                closeAnimation: growVerOut
-            };
-        }
+
         // TODO: activeChange event is not emitted for the collapsing steps
         this.stepperService.collapsingSteps.clear();
         this._orientation = value;

projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts

@@ -45,7 +45,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
 
     /** @hidden @internal */
     public get animationSettings(): ToggleAnimationSettings {
-        return this.stepper.animationSettings;
+        return this.stepper.verticalAnimationSettings;
     }
 
     /**
@@ -288,7 +288,9 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
     public ngOnInit() {
         this.openAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(
             () => {
-                this.stepper.activeStepChanged.emit({ owner: this.stepper, activeStep: this });
+                if (this.stepperService.activeStep === this) {
+                    this.stepper.activeStepChanged.emit({ owner: this.stepper, activeStep: this });
+                }
             }
         );
         this.closeAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(() => {
@@ -352,11 +354,42 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
      */
     public onPointerDown(event) {
         event.stopPropagation();
-        this.stepperService.expand(this);
+        if (this.isHorizontal) {
+            this.changeHorizontalActiveStep();
+        } else {
+            this.changeVerticalActiveStep();
+        }
     }
 
     public ngOnDestroy() {
         super.ngOnDestroy();
     }
 
+    private changeHorizontalActiveStep(): void {
+        // pointer events none on active step and remove this.stepperService.activeStep !== this on the next line
+        if (this.stepper.animationType === 'none' && this.stepperService.activeStep !== this) {
+            this.active = true;
+            this.stepper.activeStepChanged.emit({ owner: this.stepper, activeStep: this });
+            return;
+        }
+        this.stepperService.expand(this);
+        if (this.stepper.animationType === 'fade') {
+            if (this.stepperService.collapsingSteps.has(this.stepperService.previousActiveStep)) {
+                this.stepperService.previousActiveStep.active = false;
+            }
+        }
+    }
+
+    private changeVerticalActiveStep(): void {
+        this.stepperService.expand(this);
+
+        if (!this.animationSettings.closeAnimation) {
+            this.stepperService.previousActiveStep.openAnimationPlayer?.finish();
+        }
+
+        if (!this.animationSettings.openAnimation) {
+            this.stepperService.activeStep.closeAnimationPlayer?.finish();
+        }
+    }
+
 }