refactor(stepper): add requested changes and fix circular dependency

Author: teodosiah

projects/igniteui-angular/src/lib/stepper/public_api.ts

@@ -1,3 +1,3 @@
 export * from './stepper.component';
 export * from './step/step.component';
-export * from './common';
+export * from './stepper.common';

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

@@ -4,13 +4,12 @@ import {
     ChangeDetectorRef, Component, ContentChild, ElementRef,
     EventEmitter, forwardRef, HostBinding, HostListener, Inject, Input, OnDestroy, Output, Renderer2, TemplateRef, ViewChild
 } from '@angular/core';
-import { IgxStep } from 'igniteui-angular';
 import { takeUntil } from 'rxjs/operators';
 import { CarouselAnimationType, Direction, IgxSlideComponentBase } from '../../carousel/carousel-base';
 import { PlatformUtil } from '../../core/utils';
 import { ToggleAnimationPlayer, ToggleAnimationSettings } from '../../expansion-panel/toggle-animation-component';
 import { IgxDirectionality } from '../../services/direction/directionality';
-import { IgxStepper, IgxStepperOrienatation, IgxStepType, IGX_STEPPER_COMPONENT, IGX_STEP_COMPONENT } from '../common';
+import { IgxStep, IgxStepper, IgxStepperOrienatation, IgxStepType, IGX_STEPPER_COMPONENT, IGX_STEP_COMPONENT } from '../stepper.common';
 import { IgxStepContentDirective, IgxStepIndicatorDirective } from '../stepper.directive';
 import { IgxStepperService } from '../stepper.service';
 

projects/igniteui-angular/src/lib/stepper/common.ts renamed to projects/igniteui-angular/src/lib/stepper/stepper.common.ts

@@ -13,9 +13,9 @@ import { IgxCarouselComponentBase } from '../carousel/carousel-base';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
 import {
-    IgxStepperTitlePosition, IgxStepperOrienatation,
+    IgxStepper, IgxStepperTitlePosition, IgxStepperOrienatation,
     IgxStepType, IGX_STEPPER_COMPONENT, IStepChangedEventArgs, IStepChangingEventArgs, IgxStepperVerticalAnimationType
-} from './common';
+} from './stepper.common';
 import {
     IgxStepActiveIndicatorDirective,
     IgxStepCompletedIndicatorDirective,
@@ -25,7 +25,6 @@ import {
 } from './stepper.directive';
 import { IgxStepComponent } from './step/step.component';
 import { IgxStepperService } from './stepper.service';
-import { IgxStepper } from 'igniteui-angular';
 
 
 // TODO: common interface between IgxCarouselComponentBase and ToggleAnimationPlayer?
@@ -397,7 +396,7 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
     }
 
     /**
-     * Activates the step by given index.
+     * Activates the step at a given index.
      *
      *```typescript
      * this.stepper.navigateTo(1);
@@ -451,8 +450,8 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
     /**
      * Resets the stepper to its initial state i.e. activates the first step.
      *
-     * @remark
-     * The developer should reset the steps content manually.
+     * @remarks
+     * The steps' content will not be automatically reset.
      *```typescript
      * this.stepper.reset();
      *```
@@ -482,21 +481,20 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
     private updateVerticalAnimationSettings(
         openAnimation: AnimationReferenceMetadata,
         closeAnimation: AnimationReferenceMetadata): ToggleAnimationSettings {
+        const customCloseAnimation = useAnimation(closeAnimation, {
+            params: {
+                duration: this.animationDuration + 'ms'
+            }
+        });
+        const customOpenAnimation = useAnimation(openAnimation, {
+            params: {
+                duration: this.animationDuration + 'ms'
+            }
+        });
+
         return {
-            openAnimation: openAnimation
-                ? useAnimation(openAnimation, {
-                    params: {
-                        duration: this.animationDuration + 'ms'
-                    }
-                })
-                : null,
-            closeAnimation: closeAnimation
-                ? useAnimation(closeAnimation, {
-                    params: {
-                        duration: this.animationDuration + 'ms'
-                    }
-                })
-                : null
+            openAnimation: openAnimation ? customOpenAnimation : null,
+            closeAnimation: closeAnimation ? customCloseAnimation : null
         };
     }
 

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

@@ -1,5 +1,5 @@
 import { Directive, ElementRef, HostBinding, Inject, Input } from '@angular/core';
-import { IGX_STEP_COMPONENT } from './common';
+import { IGX_STEP_COMPONENT } from './stepper.common';
 import { IgxStepComponent } from './step/step.component';
 import { IgxStepperService } from './stepper.service';
 
@@ -27,20 +27,16 @@ export class IgxStepIndicatorDirective { }
     selector: '[igxStepTitle]'
 })
 export class IgxStepTitleDirective {
-
     @HostBinding('class.igx-stepper__step-title')
     public defaultClass = true;
-
 }
 
 @Directive({
     selector: '[igxStepSubTitle]'
 })
 export class IgxStepSubTitleDirective {
-
     @HostBinding('class.igx-stepper__step-subtitle')
     public defaultClass = true;
-
 }
 
 @Directive({

projects/igniteui-angular/src/lib/stepper/stepper.directive.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { IgxStepComponent } from 'igniteui-angular';
-import { IgxStepper, IgxStepperOrienatation, IStepChangingEventArgs } from './common';
+import { IgxStepper, IgxStepperOrienatation, IStepChangingEventArgs } from './stepper.common';
+import { IgxStepComponent } from './step/step.component';
 
 /** @hidden @internal */
 @Injectable()

projects/igniteui-angular/src/lib/stepper/stepper.service.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { IgxStepperTitlePosition, IgxStepperOrienatation, IgxStepType } from 'projects/igniteui-angular/src/lib/stepper/common';
+import { IgxStepperTitlePosition, IgxStepperOrienatation, IgxStepType } from 'projects/igniteui-angular/src/lib/stepper/stepper.common';
 import { IgxStepperComponent } from 'projects/igniteui-angular/src/lib/stepper/stepper.component';
 
 @Component({