Fix(stepper): Calculate disabled steps when linear mode is set initially (#12929)

* fix(stepper): calculate disabled steps when linear mode is set initially

* fix(stepper): add requested changes

Author: teodosiah

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

@@ -79,7 +79,8 @@ describe('Rendering Tests', () => {
         waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
-                    IgxStepperSampleTestComponent
+                    IgxStepperSampleTestComponent,
+                    IgxStepperLinearComponent
                 ],
                 imports: [
                     NoopAnimationsModule,
@@ -148,6 +149,22 @@ describe('Rendering Tests', () => {
             expect(serviceCollapseSpy).toHaveBeenCalledOnceWith(stepper.steps[0]);
         }));
 
+        it('should calculate disabled steps properly when the stepper is initially in linear mode', fakeAsync(()=>{
+            const fixture = TestBed.createComponent(IgxStepperLinearComponent);
+            fixture.detectChanges();
+            const linearStepper = fixture.componentInstance.stepper;
+
+            const serviceExpandSpy = spyOn((linearStepper as any).stepperService, 'expand').and.callThrough();
+            linearStepper.next();
+            fixture.detectChanges();
+            tick();
+
+            expect(linearStepper.steps[1].active).toBeFalsy();
+            expect(linearStepper.steps[0].active).toBeTruthy();
+            expect(linearStepper.steps[1].linearDisabled).toBeTruthy();
+            expect(serviceExpandSpy).not.toHaveBeenCalled();
+        }));
+
         it('should not allow moving forward to next step in linear mode if the previous step is invalid', fakeAsync(() => {
             const serviceExpandSpy = spyOn((stepper as any).stepperService, 'expand').and.callThrough();
             stepper.orientation = IgxStepperOrientation.Horizontal;
@@ -1292,3 +1309,21 @@ export class IgxStepperSampleTestComponent {
     public displayHiddenStep = false;
 
 }
+
+@Component({
+    template: `
+     <igx-stepper #stepper [linear]="true">
+        <igx-step #step1 [isValid]="false">
+        </igx-step>
+
+        <igx-step #step2 [isValid]="false">
+        </igx-step>
+
+        <igx-step #step3 [isValid]="false">
+        </igx-step>
+    </igx-stepper>
+    `
+})
+export class IgxStepperLinearComponent {
+    @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;
+}

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

@@ -378,6 +378,10 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
             this.activateFirstStep(true);
         }
 
+        if (this.linear) {
+            this.stepperService.calculateLinearDisabledSteps();
+        }
+
         this.handleStepChanges();
     }