9b64da69c971bd68476439c20f3a9964b720e2c7
[motion-next.git] /
1 <div class="ms-stepper-horizontal">
2   <div class="ms-stepper-navigation-wrapper">
3     <div
4       class="ms-stepper-navigation"
5       layout="row"
6       layout-align="center center"
7     >
8       <md-button
9         class="ms-stepper-navigation-item"
10         ng-class="{'current': MsStepper.isStepCurrent(step.stepNumber), 'valid': MsStepper.isStepValid(step.stepNumber), 'disabled': MsStepper.isStepDisabled(step.stepNumber), 'optional': MsStepper.isStepOptional(step.stepNumber)}"
11         ng-click="MsStepper.gotoStep(step.stepNumber)"
12         ng-disabled="MsStepper.isStepDisabled(step.stepNumber)"
13         ng-repeat="step in MsStepper.steps | filter:MsStepper.filterHiddenStep"
14         layout="row"
15         layout-align="start center"
16       >
17         <div
18           class="step md-accent-bg"
19           layout="row"
20           layout-align="center center"
21         >
22           <span
23             ng-if="!MsStepper.isStepValid(step.stepNumber) || MsStepper.isStepOptional(step.stepNumber)"
24           >
25             {{$index + 1}}
26           </span>
27           <span
28             ng-if="MsStepper.isStepValid(step.stepNumber) && !MsStepper.isStepOptional(step.stepNumber)"
29           >
30             <i class="icon icon-check s18"></i>
31           </span>
32         </div>
33
34         <div layout="column" layout-align="start start">
35           <div class="title" translate="{{step.stepTitleTranslate}}">
36             {{step.stepTitle}}
37           </div>
38           <div
39             class="subtitle"
40             ng-if="MsStepper.isStepOptional(step.stepNumber)"
41           >
42             Optional
43           </div>
44         </div>
45       </md-button>
46     </div>
47   </div>
48
49   <div class="ms-stepper-steps" ng-transclude></div>
50
51   <div class="ms-stepper-controls" layout="row" layout-align="center center">
52     <md-button
53       class="md-accent md-raised"
54       ng-disabled="MsStepper.isFirstStep()"
55       ng-click="MsStepper.gotoPreviousStep()"
56     >
57       Back
58     </md-button>
59
60     <div class="ms-stepper-dots">
61       <span
62         ng-repeat="step in MsStepper.steps"
63         ng-hide="MsStepper.isStepHidden(step.stepNumber)"
64         ng-class="{'selected md-accent-bg':MsStepper.currentStepNumber === $index + 1}"
65       >
66       </span>
67     </div>
68
69     <md-button
70       class="md-accent md-raised"
71       ng-if="!MsStepper.isLastStep()"
72       ng-disabled="!MsStepper.isStepValid(MsStepper.currentStepNumber)"
73       ng-click="MsStepper.gotoNextStep()"
74     >
75       Next
76     </md-button>
77
78     <md-button
79       type="submit"
80       class="md-accent md-raised"
81       ng-click="MsStepper.resetForm()"
82       ng-if="MsStepper.isLastStep()"
83       ng-disabled="!MsStepper.isFormValid()"
84     >
85       Submit
86     </md-button>
87   </div>
88 </div>