material-steppers/dist/material-steppers.min.js

Angular Steppers directive for Angular Material

var StepperCtrl=function(){function e(e,t,r){this.$mdComponentRegistry=e,this.$attrs=t,this.$log=r,this.labelStep="Step",this.labelOf="of",this.steps=[],this.currentStep=0}return e.prototype.$onInit=function(){""===this.$attrs.mdMobileStepText&&(this.mobileStepText=!0),""===this.$attrs.mdLinear&&(this.linear=!0),""===this.$attrs.mdAlternative&&(this.alternative=!0)},e.prototype.$postLink=function(){this.$attrs.id||this.$log.warn("You must set an id attribute to your stepper"),this.registeredStepper=this.$mdComponentRegistry.register(this,this.$attrs.id)},e.prototype.$onDestroy=function(){this.registeredStepper&&this.registeredStepper()},e.prototype.$addStep=function(e){return this.steps.push(e)-1},e.prototype.next=function(){return this.currentStep<this.steps.length&&(this.clearError(),this.currentStep++,this.clearFeedback(),!0)},e.prototype.back=function(){return this.currentStep>0&&(this.clearError(),this.currentStep--,this.clearFeedback(),!0)},e.prototype.skip=function(){var e=this.steps[this.currentStep];return!!e.optional&&(this.currentStep++,this.clearFeedback(),!0)},e.prototype.error=function(e){var t=this.steps[this.currentStep];t.hasError=!0,t.message=e,this.clearFeedback()},e.prototype.clearError=function(){var e=this.steps[this.currentStep];e.hasError=!1},e.prototype["goto"]=function(e){return e<this.steps.length&&(this.currentStep=e,this.clearFeedback(),!0)},e.prototype.showFeedback=function(e){this.hasFeedback=!0,this.feedbackMessage=e},e.prototype.clearFeedback=function(){this.hasFeedback=!1},e.prototype.isCompleted=function(e){return this.linear&&e<this.currentStep},e.prototype.isActiveStep=function(e){return this.steps.indexOf(e)===this.currentStep},e.$inject=["$mdComponentRegistry","$attrs","$log"],e}(),StepperServiceFactory=["$mdComponentRegistry",function(e){return function(t){var r=e.get(t);return r||e.notFoundError(t),r}}],StepCtrl=function(){function e(e,t,r){this.$element=e,this.$compile=t,this.$scope=r}return e.prototype.$postLink=function(){this.stepNumber=this.$stepper.$addStep(this)},e.prototype.isActive=function(){var e=this.$stepper.isActiveStep(this);return e},e.$inject=["$element","$compile","$scope"],e}();angular.module("mdSteppers",["ngMaterial"]).factory("$mdStepper",StepperServiceFactory).directive("mdStepper",function(){return{transclude:!0,scope:{linear:"<?mdLinear",alternative:"<?mdAlternative",vertical:"<?mdVertical",mobileStepText:"<?mdMobileStepText",labelStep:"@?mdLabelStep",labelOf:"@?mdLabelOf"},bindToController:!0,controller:StepperCtrl,controllerAs:"stepper",templateUrl:"mdSteppers/mdStepper.tpl.html"}}).directive("mdStep",["$compile",function(e){return{require:"^^mdStepper",transclude:!0,scope:{label:"@mdLabel",optional:"@?mdOptional"},bindToController:!0,controller:StepCtrl,controllerAs:"$ctrl",link:function(t,r,s,p){function n(){var s=!!r.find(".md-step-body-overlay")[0];if(!s){var p=angular.element('<div class="md-step-body-overlay"></div>\n                            <div class="md-step-body-loading">\n                                <md-progress-circular md-mode="indeterminate"></md-progress-circular>\n                            </div>');e(p)(t),r.find(".md-steppers-scope").append(p)}}t.$ctrl.$stepper=p,t.$watch(function(){return t.$ctrl.isActive()},function(e){e?(r.addClass("md-active"),n()):r.removeClass("md-active")})},templateUrl:"mdSteppers/mdStep.tpl.html"}}]).config(["$mdIconProvider",function(e){e.icon("steppers-check","mdSteppers/ic_check_24px.svg"),e.icon("steppers-warning","mdSteppers/ic_warning_24px.svg")}]).run(["$templateCache",function(e){e.put("mdSteppers/ic_check_24px.svg",'<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\r\n    <path d="M0 0h24v24H0z" fill="none"/>\r\n    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>\r\n</svg>'),e.put("mdSteppers/ic_warning_24px.svg",'<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\r\n    <path d="M0 0h24v24H0z" fill="none"/>\r\n    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\r\n</svg>')}]),angular.module("mdSteppers").run(["$templateCache",function(e){e.put("mdSteppers/mdStep.tpl.html",'<div class="md-stepper" ng-class="{ \'md-active\': $ctrl.isActive() }">\r\n    <md-steppers-header class="md-steppers-header md-steppers-vertical">\r\n        <button class="md-stepper-indicator" ng-class="{\r\n                    \'md-active\': $ctrl.stepNumber === $ctrl.$stepper.currentStep,\r\n                    \'md-completed\': $ctrl.$stepper.isCompleted($ctrl.stepNumber),\r\n                    \'md-error\': $ctrl.hasError,\r\n                    \'md-stepper-optional\': $ctrl.optional || $ctrl.hasError\r\n                }" ng-click="$ctrl.$stepper.goto($ctrl.stepNumber)" ng-disabled="$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep">\r\n                <div class="md-stepper-indicator-wrapper">\r\n                    <div class="md-stepper-number" ng-hide="$ctrl.hasError">\r\n                    <span ng-if="!$ctrl.$stepper.isCompleted($ctrl.stepNumber)">{{ ::$ctrl.stepNumber+1 }}</span>\r\n                        <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="$ctrl.$stepper.isCompleted($ctrl.stepNumber)"></md-icon>\r\n                    </div>\r\n                    <div class="md-stepper-error-indicator" ng-show="$ctrl.hasError">\r\n                        <md-icon md-svg-icon="steppers-warning"></md-icon>\r\n                    </div>\r\n\r\n                    <div class="md-stepper-title">\r\n                        <span>{{ $ctrl.label }}</span>\r\n                        <small ng-if="$ctrl.optional && !$ctrl.hasError">{{ $ctrl.optional }}</small>\r\n                        <small class="md-stepper-error-message" ng-show="$ctrl.hasError">\r\n                            {{ $ctrl.message }}\r\n                        </small>\r\n                    </div>\r\n                </div>\r\n                </button>\r\n        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </md-steppers-header>\r\n    <md-steppers-scope layout="column" class="md-steppers-scope" ng-if="$ctrl.isActive()" ng-transclude></md-steppers-scope>\r\n</div>'),e.put("mdSteppers/mdStepper.tpl.html",'<div flex class="md-steppers" ng-class="{ \r\n    \'md-steppers-linear\': stepper.linear, \r\n    \'md-steppers-alternative\': stepper.alternative,\r\n    \'md-steppers-vertical\': stepper.vertical,\r\n    \'md-steppers-mobile-step-text\': stepper.mobileStepText,\r\n    \'md-steppers-has-feedback\': stepper.hasFeedback\r\n    }">\r\n    <div class="md-steppers-header-region">\r\n        <md-steppers-header class="md-steppers-header md-steppers-horizontal md-whiteframe-1dp">\r\n            <button class="md-stepper-indicator" ng-repeat="(stepNumber, $step) in stepper.steps track by $index" ng-class="{\r\n                \'md-active\': stepNumber === stepper.currentStep,\r\n                \'md-completed\': stepper.isCompleted(stepNumber),\r\n                \'md-error\': $step.hasError,\r\n                \'md-stepper-optional\': $step.optional || $step.hasError\r\n            }" ng-click="stepper.goto(stepNumber)" ng-disabled="stepper.linear || stepNumber === stepper.currentStep">\r\n            <div class="md-stepper-indicator-wrapper">\r\n                <div class="md-stepper-number" ng-hide="$step.hasError">\r\n                    <span ng-if="!stepper.isCompleted(stepNumber)">{{ ::stepNumber+1 }}</span>\r\n                    <md-icon md-svg-icon="steppers-check" class="md-stepper-icon" ng-if="stepper.isCompleted(stepNumber)"></md-icon>\r\n                </div>\r\n\r\n                <div class="md-stepper-error-indicator" ng-show="$step.hasError">\r\n                <md-icon md-svg-icon="steppers-warning"></md-icon>\r\n                </div>\r\n                <div class="md-stepper-title">\r\n                    <span>{{ $step.label }}</span>\r\n                    <small ng-if="$step.optional && !$step.hasError">{{ $step.optional }}</small>\r\n                    <small class="md-stepper-error-message" ng-show="$step.hasError">\r\n                        {{ $step.message }}\r\n                    </small>\r\n                </div>\r\n            </div>\r\n            </button>\r\n           \r\n        </md-steppers-header>\r\n        <md-steppers-mobile-header class="md-steppers-mobile-header">\r\n            <md-toolbar flex="none" class="md-whiteframe-1dp" style="background: #f6f6f6 !important; color: #202020 !important;">\r\n                <div class="md-toolbar-tools">\r\n                    <h3>\r\n                        <span>{{stepper.labelStep}} {{stepper.currentStep+1}} {{stepper.labelOf}} {{stepper.steps.length}}</span>\r\n                    </h3>\r\n                </div>\r\n            </md-toolbar>\r\n        </md-steppers-mobile-header>\r\n        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">\r\n            {{stepper.feedbackMessage}}\r\n        </div>\r\n    </div>\r\n    <md-steppers-content class="md-steppers-content" ng-transclude></md-steppers-content>\r\n    <div class="md-steppers-overlay"></div>\r\n</div>')}]);