public/templates/core/directives/ms-stepper/templates/horizontal/horizontal.html/horizontal.html

   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>