Merge pull request #10061 from IgniteUI/thristodorova/stepper-implementaton

IgxStepperComponent implementaton

Author: ChronosSF

Diff for: CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes for each version of this project will be documented in this
 ## 13.0.0
 
 ### New Features
+- Added `IgxStepper` component
+    - Highly customizable component that visualizes content as a process and shows its progress by dividing the content into chronological `igx-steps`.
+    - Exposed API to control features like step validation, styling, orientation, and easy-to-use keyboard navigation.
+    - Code example below:
+
+    ```html
+   <igx-stepper>
+        <igx-step *ngFor="let step of stepsData" >
+            ...
+        </igx-step>
+    </igx-stepper>
+    ```
+
+    - For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Stepper-Specification) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper).
+
 - `IgxCsvExporterService`, `IgxExcelExporterService`
     - Exporter services are no longer required to be provided in the application since they are now injected on a root level.
 - `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent`
@@ -34,7 +49,9 @@ All notable changes for each version of this project will be documented in this
         Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
 - `IgxColumnActionsComponent`
     - **Breaking Change** - The following input has been removed
-        - Input `columns`. Use `igxGrid` `columns` input instead.        
+        - Input `columns`. Use `igxGrid` `columns` input instead.  
+- `IgxCarousel`
+    - **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.      
 
 ## 12.2.3
 

Diff for: README.md

@@ -65,6 +65,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
 |select|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)|||||
 |slider|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)|||||
 |snackbar|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/snackbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)|||||
+|stepper|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper)|
 |switch|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/switch/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)|||||
 |tabs|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/tabs/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)|||||
 |time picker|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker)|||||

Diff for: projects/igniteui-angular/migrations/migration-collection.json

@@ -105,6 +105,11 @@
             "version": "12.1.0",
             "description": "Updates Ignite UI for Angular from v11.1.x to v12.1.0",
             "factory": "./update-12_1_0"
+        },
+        "migration-22": {
+            "version": "13.0.0",
+            "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0",
+            "factory": "./update-13_0_0"
         }
     }
 }

Diff for: projects/igniteui-angular/migrations/update-13_0_0/changes/classes.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "../../common/schema/class.schema.json",
+    "changes": [{
+            "name": "CarouselAnimationType",
+            "replaceWith": "HorizontalAnimationType"
+        }
+    ]
+}

Diff for: projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts

@@ -0,0 +1,70 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '13.0.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    const migrationName = 'migration-22';
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should rename CarouselAnimationType to HorizontalAnimationType', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.ts',
+            `import { Component, ViewChild } from '@angular/core';
+        import { CarouselAnimationType } from 'igniteui-angular';
+
+        @Component({
+            selector: 'animationType',
+            templateUrl: './test.component.html',
+            styleUrls: ['./test.component.scss']
+        })
+        export class AnimationType {
+            public animationType: CarouselAnimationType = CarouselAnimationType.slide;
+        }
+        `);
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        const expectedContent = `import { Component, ViewChild } from '@angular/core';
+        import { HorizontalAnimationType } from 'igniteui-angular';
+
+        @Component({
+            selector: 'animationType',
+            templateUrl: './test.component.html',
+            styleUrls: ['./test.component.scss']
+        })
+        export class AnimationType {
+            public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;
+        }
+        `;
+
+        expect(
+            tree.readContent(
+                '/testSrc/appPrefix/component/test.component.ts'
+            )
+        ).toEqual(expectedContent);
+    });
+});

Diff for: projects/igniteui-angular/migrations/update-13_0_0/index.ts

@@ -0,0 +1,11 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '13.0.0';
+
+export default (): Rule => (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

Diff for: projects/igniteui-angular/src/lib/carousel/README.md

@@ -17,7 +17,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. |
 | `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `5`. |
 | `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls whether the indicators should be previewed on top or on bottom of carousel. Defaults to `bottom`. |
-| `animationType` | CarouselAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
+| `animationType` | HorizontalAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
 | `total` | number | The number of slides the carousel currently has.  |
 | `current` | number | The index of the slide currently showing. |
 | `isPlaying` | boolean | Returns whether the carousel is paused/playing. |

Diff for: projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -1,16 +1,17 @@
 import { AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
+import { EventEmitter } from '@angular/core';
 import { fadeIn } from '../animations/fade';
 import { slideInLeft } from '../animations/slide';
 import { mkenum } from '../core/utils';
 
 export enum Direction { NONE, NEXT, PREV }
 
-export const CarouselAnimationType = mkenum({
+export const HorizontalAnimationType = mkenum({
     none: 'none',
     slide: 'slide',
     fade: 'fade'
 });
-export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
+export type HorizontalAnimationType = (typeof HorizontalAnimationType)[keyof typeof HorizontalAnimationType];
 
 export interface CarouselAnimationSettings {
     enterAnimation: AnimationReferenceMetadata;
@@ -26,7 +27,12 @@ export interface IgxSlideComponentBase {
 /** @hidden */
 export abstract class IgxCarouselComponentBase {
     /** @hidden */
-    public animationType = CarouselAnimationType.slide;
+    public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;
+
+    /** @hidden @internal */
+    public enterAnimationDone = new EventEmitter();
+    /** @hidden @internal */
+    public leaveAnimationDone = new EventEmitter();
 
     /** @hidden */
     protected currentItem: IgxSlideComponentBase;
@@ -37,7 +43,7 @@ export abstract class IgxCarouselComponentBase {
     /** @hidden */
     protected leaveAnimationPlayer?: AnimationPlayer;
     /** @hidden */
-    protected animationDuration = 320;
+    protected defaultAnimationDuration = 320;
     /** @hidden */
     protected animationPosition = 0;
     /** @hidden */
@@ -48,7 +54,7 @@ export abstract class IgxCarouselComponentBase {
 
     /** @hidden */
     protected triggerAnimations() {
-        if (this.animationType !== CarouselAnimationType.none) {
+        if (this.animationType !== HorizontalAnimationType.none) {
             if (this.animationStarted(this.leaveAnimationPlayer) || this.animationStarted(this.enterAnimationPlayer)) {
                 requestAnimationFrame(() => {
                     this.resetAnimations();
@@ -74,10 +80,12 @@ export abstract class IgxCarouselComponentBase {
     private resetAnimations() {
         if (this.animationStarted(this.leaveAnimationPlayer)) {
             this.leaveAnimationPlayer.reset();
+            this.leaveAnimationDone.emit();
         }
 
         if (this.animationStarted(this.enterAnimationPlayer)) {
             this.enterAnimationPlayer.reset();
+            this.enterAnimationDone.emit();
         }
     }
 
@@ -86,11 +94,11 @@ export abstract class IgxCarouselComponentBase {
         if (this.newDuration) {
             duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration;
         } else {
-            duration = this.animationPosition ? this.animationPosition * this.animationDuration : this.animationDuration;
+            duration = this.animationPosition ? this.animationPosition * this.defaultAnimationDuration : this.defaultAnimationDuration;
         }
 
         switch (this.animationType) {
-            case CarouselAnimationType.slide:
+            case HorizontalAnimationType.slide:
                 const trans = this.animationPosition ? this.animationPosition * 100 : 100;
                 return {
                     enterAnimation: useAnimation(slideInLeft,
@@ -116,7 +124,7 @@ export abstract class IgxCarouselComponentBase {
                             }
                         })
                 };
-            case CarouselAnimationType.fade:
+            case HorizontalAnimationType.fade:
                 return {
                     enterAnimation: useAnimation(fadeIn,
                         { params: { duration: `${duration}ms`, startOpacity: `${this.animationPosition}` } }),
@@ -146,6 +154,7 @@ export abstract class IgxCarouselComponentBase {
             this.animationPosition = 0;
             this.newDuration = 0;
             this.previousItem.previous = false;
+            this.enterAnimationDone.emit();
         });
         this.previousItem.previous = true;
         this.enterAnimationPlayer.play();
@@ -167,6 +176,7 @@ export abstract class IgxCarouselComponentBase {
             }
             this.animationPosition = 0;
             this.newDuration = 0;
+            this.leaveAnimationDone.emit();
         });
         this.leaveAnimationPlayer.play();
     }

Diff for: projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -11,7 +11,7 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxSlideComponent } from './slide.component';
-import { CarouselAnimationType } from './carousel-base';
+import { HorizontalAnimationType } from './carousel-base';
 
 describe('Carousel', () => {
     configureTestSuite();
@@ -589,7 +589,7 @@ describe('Carousel', () => {
             await wait();
             expect(carousel.get(0).active).toBeTruthy();
             expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
-            expect(carousel.animationType).toBe(CarouselAnimationType.slide);
+            expect(carousel.animationType).toBe(HorizontalAnimationType.slide);
             carousel.next();
             fixture.detectChanges();
             await wait(200);
@@ -616,12 +616,12 @@ describe('Carousel', () => {
 
         it('Test fade animation', async () => {
             await wait();
-            carousel.animationType = CarouselAnimationType.fade;
+            carousel.animationType = HorizontalAnimationType.fade;
             fixture.detectChanges();
 
             expect(carousel.get(0).active).toBeTruthy();
             expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
-            expect(carousel.animationType).toBe(CarouselAnimationType.fade);
+            expect(carousel.animationType).toBe(HorizontalAnimationType.fade);
             carousel.next();
             fixture.detectChanges();
             await wait(200);

Diff for: projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -30,7 +30,7 @@ import { IgxSlideComponent } from './slide.component';
 import { ICarouselResourceStrings } from '../core/i18n/carousel-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
-import { CarouselAnimationType, Direction, IgxCarouselComponentBase } from './carousel-base';
+import { HorizontalAnimationType, Direction, IgxCarouselComponentBase } from './carousel-base';
 
 let NEXT_ID = 0;
 
@@ -227,7 +227,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
      *
      * @memberOf IgxSlideComponent
      */
-    @Input() public animationType = CarouselAnimationType.slide;
+    @Input() public animationType: HorizontalAnimationType = HorizontalAnimationType.slide;
 
     /**
      * The custom template, if any, that should be used when rendering carousel indicators
@@ -647,18 +647,18 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
                 this.incomingSlide.direction = event.deltaX < 0 ? Direction.NEXT : Direction.PREV;
                 this.incomingSlide.previous = false;
 
-                this.animationPosition = this.animationType === CarouselAnimationType.fade ?
+                this.animationPosition = this.animationType === HorizontalAnimationType.fade ?
                     deltaX / slideWidth : (slideWidth - deltaX) / slideWidth;
 
                 if (velocity > 1) {
-                    this.newDuration = this.animationDuration / velocity;
+                    this.newDuration = this.defaultAnimationDuration / velocity;
                 }
                 this.incomingSlide.active = true;
             } else {
                 this.currentItem.direction = event.deltaX > 0 ? Direction.NEXT : Direction.PREV;
                 this.previousItem = this.incomingSlide;
                 this.previousItem.previous = true;
-                this.animationPosition = this.animationType === CarouselAnimationType.fade ?
+                this.animationPosition = this.animationType === HorizontalAnimationType.fade ?
                     Math.abs((slideWidth - deltaX) / slideWidth) : deltaX / slideWidth;
                 this.playAnimations();
             }
@@ -912,7 +912,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         }
         this.incomingSlide.previous = true;
 
-        if (this.animationType === CarouselAnimationType.fade) {
+        if (this.animationType === HorizontalAnimationType.fade) {
             this.currentItem.nativeElement.style.opacity = `${Math.abs(offset) / slideWidth}`;
         } else {
             this.currentItem.nativeElement.style.transform = `translateX(${deltaX}px)`;