docs(stepper): Created stepper examples for documentation (#10537)

Updates button logic setting button from true to !isLinear, including text indicator
of current state.
Creates editable and optional documentation examples
Imports into .MD file using special syntax

Author: raygervais

src/lib/stepper/stepper.md

@@ -112,10 +112,15 @@ are completed.
 If completion of a step in linear stepper is not required, then the `optional` attribute can be set
 on `mat-step`.
 
+<!-- example(stepper-optional) -->
+
+
 #### Editable step
 By default, steps are editable, which means users can return to previously completed steps and
 edit their responses. `editable="true"` can be set on `mat-step` to change the default.
 
+<!-- example(stepper-editable) -->
+
 #### Completed step
 By default, the `completed` attribute of a step returns `true` if the step is valid (in case of
 linear stepper) and the user has interacted with the step. The user, however, can also override

src/material-examples/stepper-editable/stepper-editable-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/stepper-editable/stepper-editable-example.html

@@ -0,0 +1,37 @@
+<button mat-raised-button (click)="isEditable = !isEditable">
+  {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}
+</button>
+
+<mat-horizontal-stepper [linear]="true" #stepper>
+  <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Address" formControlName="secondCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-horizontal-stepper>

src/material-examples/stepper-editable/stepper-editable-example.ts

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/**
+ * @title Stepper with editable steps
+ */
+@Component({
+  selector: 'stepper-editable-example',
+  templateUrl: 'stepper-editable-example.html',
+  styleUrls: ['stepper-editable-example.css']
+})
+export class StepperEditableExample {
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+  isEditable: boolean = false;
+
+  constructor(private _formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required]
+    });
+  }
+}

src/material-examples/stepper-optional/stepper-optional-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/stepper-optional/stepper-optional-example.html

@@ -0,0 +1,37 @@
+<button mat-raised-button (click)="isOptional = !isOptional">
+  {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}}
+</button>
+
+<mat-horizontal-stepper [linear]="true" #stepper>
+  <mat-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Address" formControlName="secondCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-horizontal-stepper>

src/material-examples/stepper-optional/stepper-optional-example.ts

@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/**
+ * @title Stepper with optional steps
+ */
+@Component({
+  selector: 'stepper-optional-example',
+  templateUrl: 'stepper-optional-example.html',
+  styleUrls: ['stepper-optional-example.css']
+})
+export class StepperOptionalExample {
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+  isOptional: boolean = false;
+
+  constructor(private _formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ''
+    });
+  }
+}

src/material-examples/stepper-overview/stepper-overview-example.html

@@ -1,6 +1,7 @@
-<button mat-raised-button (click)="isLinear = true" id="toggle-linear">Enable linear mode</button>
-
-<mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">
+<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
+  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+</button>
+<mat-horizontal-stepper [linear]="isLinear" #stepper>
   <mat-step [stepControl]="firstFormGroup">
     <form [formGroup]="firstFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>