docs(cdk/stepper): add linear stepper example

 (#19518)

Author: nielsr98

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.css

@@ -0,0 +1,3 @@
+.example-toggle-linear-button {
+  margin-left: 10px;
+}

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.html

@@ -0,0 +1,17 @@
+<example-custom-linear-stepper [linear]="isLinear">
+  <cdk-step [stepControl]="firstFormGroup">
+    <label for="stepOneInput">Step 1 input</label>
+    <form [formGroup]="firstFormGroup">
+      <input placeholder="Input" formControlName="firstControl" id="stepOneInput" required>
+    </form>
+  </cdk-step>
+  <cdk-step [stepControl]="secondFormGroup">
+    <label for="stepTwoInput">Step 2 input</label>
+    <form [formGroup]="secondFormGroup">
+      <input placeholder="Input" formControlName="secondControl" id="stepTwoInput" required>
+    </form>
+  </cdk-step>
+</example-custom-linear-stepper>
+<button class="example-toggle-linear-button" (click)="toggleLinearity()">
+  {{isLinear ? 'Disable linear mode' : 'Enable linear mode'}}
+</button>

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts

@@ -0,0 +1,41 @@
+import {Component} from '@angular/core';
+import {CdkStepper} from '@angular/cdk/stepper';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/** @title A custom CDK linear stepper with forms */
+@Component({
+  selector: 'cdk-linear-stepper-with-form',
+  templateUrl: './cdk-linear-stepper-with-form-example.html',
+  styleUrls: ['./cdk-linear-stepper-with-form-example.css']
+})
+export class CdkLinearStepperWithFormExample {
+  isLinear = true;
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+
+  constructor(private readonly _formBuilder: FormBuilder) {
+      this.firstFormGroup = this._formBuilder.group({
+          firstControl: ['', Validators.required]
+      });
+      this.secondFormGroup = this._formBuilder.group({
+          secondControl: ['', Validators.required]
+      });
+  }
+
+  toggleLinearity() {
+      this.isLinear = !this.isLinear;
+  }
+}
+
+/** Custom CDK linear stepper component */
+@Component({
+  selector: 'example-custom-linear-stepper',
+  templateUrl: './example-custom-linear-stepper.html',
+  styleUrls: ['./example-custom-linear-stepper.css'],
+  providers: [{provide: CdkStepper, useExisting: CustomLinearStepper}]
+})
+export class CustomLinearStepper extends CdkStepper {
+  selectStepByIndex(index: number): void {
+    this.selectedIndex = index;
+  }
+}

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.css

@@ -0,0 +1,29 @@
+.example-container {
+  border: 1px solid black;
+  padding: 10px;
+  margin: 10px;
+}
+
+.example-step-navigation-bar {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 10px;
+}
+
+.example-step {
+  background: transparent;
+  border: 0;
+  margin: 0 10px;
+  padding: 10px;
+  color: black;
+}
+
+.example-step.example-active {
+  border-bottom: 1px solid blue;
+  color: blue;
+}
+
+.example-nav-button {
+  background: transparent;
+  border: 0;
+}

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html

@@ -0,0 +1,20 @@
+<section class="example-container">
+  <header>
+    <h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2>
+  </header>
+
+  <div [ngTemplateOutlet]="selected ? selected.content : null"></div>
+
+  <footer class="example-step-navigation-bar">
+    <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
+    <button
+      class="example-step"
+      [class.example-active]="selectedIndex === i"
+      *ngFor="let step of steps; let i = index"
+      (click)="selectStepByIndex(i)"
+    >
+      Step {{ i + 1 }}
+    </button>
+    <button class="example-nav-button" cdkStepperNext>&rarr;</button>
+  </footer>
+</section>

src/components-examples/cdk/stepper/index.ts

@@ -5,22 +5,32 @@ import {
   CdkCustomStepperWithoutFormExample,
   CustomStepper
 } from './cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example';
+import {
+    CdkLinearStepperWithFormExample,
+    CustomLinearStepper
+} from './cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example';
+import {ReactiveFormsModule} from '@angular/forms';
 
 export {
   CdkCustomStepperWithoutFormExample,
   CustomStepper,
+  CdkLinearStepperWithFormExample,
+  CustomLinearStepper
 };
 
 const EXAMPLES = [
   CdkCustomStepperWithoutFormExample,
   CustomStepper,
+  CdkLinearStepperWithFormExample,
+  CustomLinearStepper
 ];
 
 @NgModule({
-  imports: [
-    CdkStepperModule,
-    CommonModule,
-  ],
+    imports: [
+        CdkStepperModule,
+        CommonModule,
+        ReactiveFormsModule,
+    ],
   declarations: EXAMPLES,
   exports: EXAMPLES,
   entryComponents: EXAMPLES,