feat(stepper): linear mode init implementation

Author: teodosiah

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

@@ -30,12 +30,13 @@ export enum IgxStepType {
     Full
 }
 
-export enum IgxStepperLabelPosition {
-    Bottom,
-    Top,
-    End,
-    Start
-}
+export const IgxStepperLabelPosition = mkenum({
+    Bottom: 'bottom',
+    Top: 'top',
+    End: 'end',
+    Start: 'start'
+});
+export type IgxStepperLabelPosition = (typeof IgxStepperLabelPosition)[keyof typeof IgxStepperLabelPosition];
 
 export enum IgxStepperProgressLine {
     Solid,

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

@@ -9,7 +9,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { growVerIn, growVerOut } from '../animations/grow';
 import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
-import { IgxStepperOrienatation, IGX_STEPPER_COMPONENT, IStepToggledEventArgs, IStepTogglingEventArgs } from './common';
+import {
+    IgxStepperLabelPosition, IgxStepperOrienatation,
+    IgxStepType, IGX_STEPPER_COMPONENT, IStepToggledEventArgs, IStepTogglingEventArgs
+} from './common';
 import {
     IgxStepIconDirective, IgxStepInvalidIconDirective,
     IgxStepLabelDirective, IgxStepValidIconDirective
@@ -31,6 +34,7 @@ import { IgxStepperService } from './stepper.service';
 })
 export class IgxStepperComponent extends IgxCarouselComponentBase implements OnInit, AfterViewInit, OnDestroy {
 
+    /** @hidden @internal **/
     @HostBinding('class.igx-stepper')
     public cssClass = 'igx-stepper';
 
@@ -100,7 +104,18 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
      * ```
      */
     @Input()
-    public linear = false;
+    public get linear(): boolean {
+        return this._linear;
+    }
+
+    public set linear(value: boolean) {
+        this._linear = value;
+        if (this._linear) {
+            this.calculateLinearDisabledSteps();
+        } else {
+            this.stepperService.linearDisabledSteps.clear();
+        }
+    }
 
     /**
      * Get/Set the stepper orientation.
@@ -124,9 +139,69 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
         this._orientation = value;
     }
 
+    /**
+     * Get/Set the type of the steps.
+     *
+     * ```typescript
+     * this.stepper.stepType = IgxStepType.Indicator;
+     * ```
+     */
+    @Input()
+    public stepType = IgxStepType.Full;
+
+    /**
+     * Get/Set the position of the steps label.
+     *
+     * ```typescript
+     * this.stepper.labelPosition = IgxStepperLabelPosition.Top;
+     * ```
+     */
+    @Input()
+    public labelPosition = IgxStepperLabelPosition.Bottom;
+
+    /**
+     * Get all steps.
+     *
+     * ```typescript
+     * const steps: IgxStepComponent[] = this.stepper.steps;
+     * ```
+     */
+    public get steps(): IgxStepComponent[] {
+        return this._steps?.toArray() || [];
+    }
+
+    /** @hidden @internal */
+    public get nativeElement() {
+        return this.element.nativeElement;
+    }
+
+    /**
+     * Emitted when the stepper's active step is changing.
+     *
+     *```html
+     * <igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
+     * </igx-stepper>
+     * ```
+     *
+     *```typescript
+     * public handleActiveStepChanging(event: IStepperCancelableEventArgs) {
+     *  if (event.newIndex < event.oldIndex) {
+     *      event.cancel = true;
+     *  }
+     * }
+     *```
+     */
     @Output()
     public activeStepChanging = new EventEmitter<IStepTogglingEventArgs>();
 
+    /**
+     * Emitted when the active step is changed.
+     *
+     * @example
+     * ```
+     * <igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper>
+     * ```
+     */
     @Output()
     public activeStepChanged = new EventEmitter<IStepToggledEventArgs>();
 
@@ -140,6 +215,7 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
     private destroy$ = new Subject<void>();
     private unsubChildren$ = new Subject<void>();
     private _orientation: IgxStepperOrienatation | string = IgxStepperOrienatation.Vertical;
+    private _linear = false;
 
     constructor(
         builder: AnimationBuilder,
@@ -150,19 +226,6 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
         // this.navService.register(this);
     }
 
-    public get steps(): IgxStepComponent[] {
-        return this._steps?.toArray() || [];
-    }
-
-    /** @hidden @internal */
-    public get nativeElement() {
-        return this.element.nativeElement;
-    }
-
-    /** @hidden @internal */
-    public handleKeydown(event: KeyboardEvent) {
-        // this.navService.handleKeydown(event);
-    }
 
     /** @hidden @internal */
     public ngOnInit() {
@@ -196,6 +259,49 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
         this.destroy$.complete();
     }
 
+    /** @hidden @internal */
+    public handleKeydown(event: KeyboardEvent) {
+        // this.navService.handleKeydown(event);
+    }
+
+    /** @hidden @internal */
+    public calculateLinearDisabledSteps() {
+        if (this.stepperService.activeStep.isValid) {
+            const firstRequiredIndex = this.stepperService.getNextRequiredStep();
+            if (firstRequiredIndex !== -1) {
+                this.steps.forEach(s => {
+                    if (s.index > this.stepperService.activeStep.index) {
+                        if (s.index <= firstRequiredIndex) {
+                            this.stepperService.linearDisabledSteps.delete(s);
+                        } else {
+                            this.stepperService.linearDisabledSteps.add(s);
+                        }
+                    }
+                });
+            } else {
+                this.stepperService.linearDisabledSteps.clear();
+            }
+        } else {
+            this.steps.forEach(s => {
+                if (s.index > this.stepperService.activeStep.index) {
+                    this.stepperService.linearDisabledSteps.add(s);
+                }
+            });
+        }
+    }
+
+    public navigateTo(index: number) {
+        if (!this.steps[index]) {
+            return;
+        }
+        const step = this.steps[index];
+        if (step.disabled || this.stepperService.linearDisabledSteps.has(step)) {
+            return;
+        }
+
+        this.stepperService.expand(step);
+    }
+
     public playHorizontalAnimations() {
         this.previousItem = this.stepperService.previousActiveStep;
         this.currentItem = this.stepperService.activeStep;

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

@@ -1,5 +1,5 @@
 <ng-template #defaultLabel>
-    <ng-content select='[igxStepLabel]'></ng-content>
+    <ng-content *ngIf="isLabelVisible" select='[igxStepLabel]'></ng-content>
 </ng-template>
 
 <ng-template #contentTemplate>
@@ -9,7 +9,7 @@
 </ng-template>
 
 <div class="igx-stepper__step-header" [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
-    <ng-content select='[igxStepIcon]'></ng-content>
+    <ng-content *ngIf="isIndicatorVisible" select='[igxStepIcon]'></ng-content>
     <div class="igx-stepper__title-wrapper">
         <ng-container *ngTemplateOutlet="defaultLabel"></ng-container>
     </div>