feat(stepper): add initial files

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

@@ -0,0 +1 @@
+<ng-content select='igx-step'></ng-content>

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

@@ -0,0 +1,61 @@
+import { AfterContentInit, Component, ContentChildren, Input, NgModule, OnDestroy, QueryList } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { IgxAccordionModule } from '../accordion/accordion.module';
+import { IgxCarouselModule } from '../carousel/carousel.component';
+import { IBaseEventArgs } from '../core/utils';
+import { IgxStepComponent } from './step/igx-step.component';
+
+@Component({
+    selector: 'igx-stepper',
+    templateUrl: 'igx-stepper.component.html'
+})
+export class IgxStepperComponent implements AfterContentInit, OnDestroy {
+    @ContentChildren(IgxStepComponent)
+    public steps: QueryList<IgxStepComponent>;
+
+    @Input()
+    public linear: boolean;
+
+    private destroy$ = new Subject();
+
+    public navigateTo(id: number) {
+        this.steps.forEach(s => {
+            s.toggleActive(id);
+        });
+    }
+
+    public ngAfterContentInit() {
+        this.steps.forEach(s => {
+            s.activated.pipe(takeUntil(this.destroy$)).subscribe((e: IBaseEventArgs) => {
+                const stepperId = e.owner.id;
+                this.steps.forEach(_s => {
+                    _s.toggleActive(stepperId);
+                });
+            });
+        });
+    }
+
+    public ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+
+@NgModule({
+    imports: [
+        BrowserAnimationsModule,
+        IgxCarouselModule,
+        IgxAccordionModule
+    ],
+    declarations: [
+        IgxStepComponent,
+        IgxStepperComponent
+    ],
+    exports: [
+        IgxStepComponent,
+        IgxStepperComponent
+    ]
+})
+export class IgxStepperModule { }

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

@@ -0,0 +1,4 @@
+<ng-content select='igx-icon'></ng-content>
+<ng-content select='[igxLabel]'></ng-content>
+
+<ng-content *ngIf="active"></ng-content>

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

@@ -0,0 +1,53 @@
+import { Component, ContentChild, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { IBaseEventArgs, mkenum } from '../../core/utils';
+import { IgxIconComponent } from '../../icon/icon.component';
+import { IgxLabelDirective } from '../../input-group/public_api';
+
+let NEXT_ID = 0;
+
+@Component({
+    selector: 'igx-step',
+    templateUrl: 'igx-step.component.html'
+})
+export class IgxStepComponent {
+    @Input()
+    public id = NEXT_ID++;
+
+    @Input()
+    public skip: boolean;
+
+    @Input()
+    public interactable = true;
+
+    @ContentChild(IgxIconComponent)
+    public icon: IgxIconComponent;
+
+    @ContentChild(IgxLabelDirective)
+    public label: IgxLabelDirective;
+
+    @Output()
+    public activated = new EventEmitter<IBaseEventArgs>();
+
+    public active: boolean;
+
+    private get inactive() {
+        return this.skip || !this.interactable;
+    }
+
+    @HostListener('click')
+    public onClick() {
+        if (this.inactive) {
+            return;
+        }
+
+        this.activated.emit({ owner: this });
+    }
+
+    public toggleActive(id: number) {
+        if (this.inactive) {
+            return;
+        }
+
+        this.active = id === this.id;
+    }
+}

src/app/app.module.ts

@@ -153,6 +153,8 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
 import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
 import { PaginationSampleComponent } from './pagination/pagination.component';
 import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
+import { IgxStepperModule } from 'projects/igniteui-angular/src/lib/stepper/igx-stepper.component';
+import { IgxStepperSampleComponent } from './stepper/stepper.sample';
 
 const components = [
     AccordionSampleComponent,
@@ -286,7 +288,8 @@ const components = [
     GridNestedPropsSampleComponent,
     IgxColumnGroupingDirective,
     GridColumnTypesSampleComponent,
-    GridLocalizationSampleComponent
+    GridLocalizationSampleComponent,
+    IgxStepperSampleComponent
 ];
 
 @NgModule({
@@ -317,7 +320,8 @@ const components = [
         routing,
         HammerModule,
         IgxDateTimeEditorModule,
-        IgxButtonModule
+        IgxButtonModule,
+        IgxStepperModule
     ],
     providers: [
         LocalService,

src/app/app.routing.ts

@@ -95,6 +95,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
 import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
 import { PaginationSampleComponent } from './pagination/pagination.component';
 import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
+import { IgxStepperSampleComponent } from './stepper/stepper.sample';
 
 const appRoutes = [
     {
@@ -446,6 +447,10 @@ const appRoutes = [
     {
         path: 'pagination',
         Comment: PaginationSampleComponent
+    },
+    {
+        path: 'stepper',
+        component: IgxStepperSampleComponent
     }
 ];
 

src/app/routing.ts

@@ -125,6 +125,7 @@ import { GridLocalizationSampleComponent } from './grid-localization/grid-locali
 import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
 import { PaginationSampleComponent } from './pagination/pagination.component';
 import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
+import { IgxStepperSampleComponent as StepperSampleComponent } from './stepper/stepper.sample';
 
 const appRoutes = [
     {
@@ -598,6 +599,10 @@ const appRoutes = [
     },{
         path: 'pagination',
         component: PaginationSampleComponent
+    },
+    {
+        path: 'stepper',
+        component: StepperSampleComponent
     }
 ];
 

src/app/stepper/stepper.sample.html

@@ -0,0 +1,51 @@
+
+<!-- <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> -->
+
+<hr>
+
+<igx-stepper style="display: flex; flex-flow: row;" #stepper>
+    <igx-step #step style="margin-right: 100px;">
+        <igx-icon>done</igx-icon>
+        <label igxLabel>Step No 1</label>
+        <div>Test me daddy</div>
+    </igx-step>
+
+    <igx-step #step2 style="margin-right: 100px;">
+        <igx-icon>calendar_today</igx-icon>
+        <label igxLabel>Step No 2</label>
+        <igx-date-picker></igx-date-picker>
+    </igx-step>
+
+    <igx-step #step3 style="margin-right: 100px;">
+        <igx-icon>alarm</igx-icon>
+        <label igxLabel>Step No 3</label>
+        <igx-time-picker></igx-time-picker>
+    </igx-step>
+
+    <igx-step #step4 style="margin-right: 100px;">
+        <igx-icon>check_circle</igx-icon>
+        <label igxLabel>Step No 4</label>
+        <igx-select [placeholder]="'Pick One'">
+            <igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
+            <igx-select-item [value]="'Orange'">Orange</igx-select-item>
+            <igx-select-item [value]="'Grapes'">Grapes</igx-select-item>
+            <igx-select-item [value]="'Banana'">Banana</igx-select-item>
+        </igx-select>
+    </igx-step>
+
+    <igx-step #step5 [interactable]="false" style="margin-right: 100px;">
+        <igx-icon>delete</igx-icon>
+        <label igxLabel>Step No 5</label>
+        <div>
+            <button igxButton>Click me</button>
+        </div>
+    </igx-step>
+</igx-stepper>
+<br>
+<button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button>

src/app/stepper/stepper.sample.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    templateUrl: 'stepper.sample.html',
+    styleUrls: ['stepper.sample.scss']
+})
+export class IgxStepperSampleComponent { }