\").append(stepLink);\n\n this._link();\n this._stepClasses();\n },\n\n _stepClasses: function() {\n var options = this.options,\n stepClasses = stepStyles.step;\n\n if (options.isFirstStep) {\n stepClasses += (SPACE + stepStyles.firstStep);\n }\n if (options.isLastStep) {\n stepClasses += (SPACE + stepStyles.lastStep);\n }\n if (!options.enabled) {\n stepClasses += (SPACE + stepStyles.disabledStep);\n }\n if (options.error) {\n stepClasses += (SPACE + stepStyles.errorStep);\n }\n if (options.previous) {\n stepClasses += (SPACE + stepStyles.doneStep);\n if (!options.error) {\n stepClasses += (SPACE + stepStyles.successStep);\n }\n } else if (options.selected) {\n stepClasses += (SPACE + stepStyles.currentStep);\n stepClasses += (SPACE + stepStyles.focusStep);\n }\n\n this.element.removeClass().addClass(stepClasses);\n }\n });\n\n var Stepper = Widget.extend({\n init: function(element, options) {\n var that = this;\n\n options = options || {};\n\n Widget.fn.init.call(that, element, options);\n\n that._indicatorAndLabel();\n\n that._wrapper();\n\n if (options.steps && options.steps.length) {\n that._processSteps(options.steps);\n that._progressBar();\n }\n\n that._attachEvents();\n\n that._resizeHandler = kendo.onResize(function() {\n that.resize();\n });\n },\n\n options: {\n orientation: \"horizontal\",\n linear: true,\n indicator: true,\n label: true,\n selectOnFocus: false,\n steps: null,\n name: \"Stepper\"\n },\n\n events: [ ACTIVATE, SELECT, \"kendoKeydown\" ],\n\n destroy: function() {\n var that = this;\n\n if (that.progressBar) {\n Widget.fn.destroy.call(that.progressBar);\n }\n\n Widget.fn.destroy.call(that);\n\n kendo.unbindResize(that._resizeHandler);\n\n that.wrapper.off(STEPPER);\n },\n\n setOptions: function(options) {\n var that = this;\n\n Widget.fn.setOptions.call(that, options);\n\n if (that.progressBar) {\n Widget.fn.destroy.call(that.progressBar);\n }\n\n that._indicatorAndLabel();\n\n that._addStepList();\n\n if (that.options.steps && that.options.steps.length) {\n that._processSteps(that.options.steps);\n that._progressBar();\n }\n },\n\n enable: function(value) {\n var steps = this.steps(),\n stepsOptions = this.options.steps;\n\n var enableStep = function(step, idx) {\n step.enable(value);\n stepsOptions[idx] = step.options;\n };\n\n if (value) {\n this.wrapper.removeAttr(ARIA_DISABLED);\n } else {\n this.wrapper.attr(ARIA_DISABLED, \"true\");\n }\n\n this.progressBar.enable(value);\n\n steps.forEach(enableStep);\n },\n\n insertAt: function(index, stepOptions) {\n var steps = this.options.steps,\n selectedStep;\n var findSelectedStep = function(step) {\n if (step.selected) {\n selectedStep = step;\n }\n };\n\n if (!stepOptions || isNaN(index)) {\n return;\n }\n if (index < 0) {\n index = steps.length + index;\n }\n if (index < 0) {\n return;\n }\n if (!steps) {\n steps = [];\n }\n\n if (steps.length === 0 || index >= steps.length) {\n index = steps.length;\n }\n\n steps.forEach(findSelectedStep);\n\n if (stepOptions.selected === true) {\n selectedStep.selected = false;\n }\n\n steps.splice(index, 0, stepOptions);\n\n this._createSteps();\n this._renderSteps();\n this._resetProgressBar();\n this._calculateDimensions();\n },\n\n next: function() {\n if (!this._steps || this._steps.length <= 1) {\n return;\n }\n\n var selectedStep = this.selectedStep;\n var selectedIndex = selectedStep.getIndex();\n\n if (selectedIndex + 1 === this._steps.length) {\n return;\n } else {\n this._select(selectedIndex + 1);\n }\n },\n\n previous: function() {\n if (!this._steps || this._steps.length <= 1) {\n return;\n }\n\n var selectedStep = this.selectedStep;\n var selectedIndex = selectedStep.getIndex();\n\n if (selectedIndex === 0) {\n return;\n } else {\n this._select(selectedIndex - 1);\n }\n },\n\n removeAt: function(index) {\n var steps = this.options.steps,\n removedStep, newSelected, newSelectedIndex;\n\n if (isNaN(index) || !steps || steps.length < 2 || index >= steps.length) {\n return;\n }\n if (index < 0) {\n index = steps.length + index;\n }\n if (index < 0) {\n return;\n }\n\n removedStep = steps.splice(index, 1)[0];\n\n if (removedStep.selected === true && steps.length > 0) {\n if (index > 0) {\n newSelectedIndex = index - 1;\n } else {\n newSelectedIndex = 0;\n }\n\n newSelected = steps[newSelectedIndex];\n\n if (typeof newSelected === \"string\") {\n newSelected = {\n label: newSelected\n };\n steps[newSelectedIndex] = newSelected;\n }\n\n newSelected.selected = true;\n newSelected.previous = false;\n }\n\n this._createSteps();\n this._renderSteps();\n this._resetProgressBar();\n this._calculateDimensions();\n },\n\n resize: function() {\n this._calculateDimensions();\n },\n\n select: function(stepIndex) {\n var that = this;\n\n if (stepIndex === undefined$1 || stepIndex === null || isNaN(stepIndex)) {\n return that.selectedStep;\n }\n\n if (stepIndex >= that._steps.length || stepIndex < 0) {\n return;\n }\n\n stepIndex = Number(stepIndex);\n\n that._select(stepIndex);\n },\n\n steps: function(steps) {\n if (steps === undefined$1) {\n return this._steps;\n }\n\n this._processSteps(steps);\n this._resetProgressBar();\n this._calculateDimensions();\n },\n\n _processSteps: function(steps) {\n var that = this,\n selectedStep;\n var findSelectedStep = function(step) {\n if (step.selected) {\n selectedStep = step;\n }\n };\n\n steps.forEach(findSelectedStep);\n\n if (!selectedStep) {\n if (typeof steps[0] === \"string\") {\n steps[0] = {\n label: steps[0]\n };\n }\n steps[0].selected = true;\n }\n\n that.options.steps = steps;\n\n that._createSteps();\n that._renderSteps();\n },\n\n _addStepList: function() {\n var that = this;\n\n that.wrapper.empty().append($(\"
\").addClass(stepperStyles.stepList));\n that._stepList = that.wrapper.find(DOT + stepperStyles.stepList);\n\n if (that.options.orientation === VERTICAL) {\n that._stepList.addClass(stepperStyles.stepListVertical);\n } else {\n that._stepList.addClass(stepperStyles.stepListHorizontal);\n }\n },\n\n _attachEvents: function() {\n var that = this;\n\n that.wrapper\n .on(CLICK + STEPPER, DOT + stepStyles.step, that._selectClickHandler.bind(that))\n .on(CLICK + STEPPER, that._wrapperClickHandler.bind(that))\n .on(FOCUSOUT + STEPPER, that._focusout.bind(that))\n .on(KEYDOWN + STEPPER, that, that._keydown.bind(that));\n },\n\n _calculateDimensions: function() {\n var orientation = this.options.orientation,\n numberOfSteps = this._steps.length,\n stepList = this._stepList,\n steps = stepList.find(DOT + stepStyles.step),\n stepWidth = stepList.width() / numberOfSteps,\n stepHeight = stepList.height() / numberOfSteps,\n progressElement = this.progressBar.element,\n margin = \"margin-left\",\n style = {};\n\n if (orientation === VERTICAL) {\n steps.css(\"max-height\", 100 / numberOfSteps + \"%\");\n progressElement.css({\n \"margin-top\": -1 * (stepList.height() - 16),\n \"height\": stepHeight * (numberOfSteps - 1)\n });\n } else {\n steps.css(\"max-width\", 100 / numberOfSteps + \"%\");\n\n if (kendo.support.isRtl(this.wrapper)) {\n margin = \"margin-right\";\n }\n style[margin] = stepWidth / 2;\n style.width = stepWidth * (numberOfSteps - 1);\n\n progressElement.css(style);\n }\n },\n\n _createStep: function(stepOptions, idx, isLastStep) {\n var that = this,\n isFirstStep = idx === 0,\n options = that.options,\n indicatorVisible = options.indicator,\n labelVisible = options.label;\n\n stepOptions = extend({}, stepOptions, {\n enabled: stepOptions.enabled === false ? false : true\n });\n\n stepOptions = extend({}, stepOptions, {\n isFirstStep: isFirstStep,\n isLastStep: isLastStep,\n indicatorVisible: indicatorVisible,\n labelVisible: labelVisible,\n index: idx\n });\n\n return new Step(stepOptions);\n },\n\n _createSteps: function() {\n var that = this,\n stepsOptions = that.options.steps,\n selected = false,\n step, idx, isLastStep, stepOpt;\n\n that._steps = [];\n\n for (idx = 0; idx < stepsOptions.length; idx++) {\n stepOpt = stepsOptions[idx];\n\n if (typeof stepOpt === \"string\") {\n stepOpt = {\n label: stepOpt\n };\n }\n\n if (stepOpt !== undefined$1) {\n isLastStep = idx === stepsOptions.length - 1;\n\n if (stepOpt.selected) {\n selected = true;\n } else {\n stepOpt = that._selectablePreviousState(stepOpt, selected, idx);\n }\n\n step = that._createStep(stepOpt, idx, isLastStep);\n that._steps.push(step);\n\n if (step.getSelected()) {\n that.selectedStep = step;\n }\n }\n }\n },\n\n _indicatorAndLabel: function() {\n if (!this.options.indicator && !this.options.label) {\n this.options.indicator = true;\n this.options.label = true;\n }\n },\n\n _focusout: function(e) {\n var that = this;\n\n if (!that.wrapper.get(0).contains(e.relatedTarget)) {\n setTimeout(function() {\n that._leaveStepper();\n });\n }\n },\n\n _focusStep: function(newStep) {\n var focusedStep = this.wrapper.find(DOT + stepStyles.focusStep),\n allStepLinks = this.wrapper.find(DOT + stepStyles.stepLink);\n\n if (newStep.length > 0) {\n focusedStep.removeClass(stepStyles.focusStep);\n allStepLinks.attr(TABINDEX, \"-1\");\n newStep.find(DOT + stepStyles.stepLink).removeAttr(TABINDEX)[0].focus();\n }\n },\n\n _focusNextStep: function() {\n var focusedStep = $(document.activeElement).closest(DOT + stepStyles.step),\n nextStep = focusedStep.next();\n\n this._focusStep(nextStep);\n },\n\n _focusPreviousStep: function() {\n var focusedStep = $(document.activeElement).closest(DOT + stepStyles.step),\n previousStep = focusedStep.prev();\n\n this._focusStep(previousStep);\n },\n\n _focusFirstStep: function() {\n var wrapper = this.wrapper,\n firstStep = wrapper.find(DOT + stepStyles.firstStep);\n\n this._focusStep(firstStep);\n },\n\n _focusLastStep: function() {\n var wrapper = this.wrapper,\n lastStep = wrapper.find(DOT + stepStyles.lastStep);\n\n this._focusStep(lastStep);\n },\n\n _keydown: function(e) {\n var that = this,\n keyCode = e.keyCode,\n focusedStepElement = $(document.activeElement).closest(DOT + stepStyles.step),\n focusedStepIndex = focusedStepElement.index(),\n stepsCount = that.steps().length;\n\n if (keyCode === keys.TAB) {\n if (e.shiftKey && focusedStepIndex > 0) {\n e.preventDefault();\n that._tabKey(e, -1);\n } else if (!e.shiftKey && focusedStepIndex < stepsCount - 1) {\n e.preventDefault();\n that._tabKey(e, +1);\n }\n } else if (keyCode > 34 && keyCode < 41) {\n e.preventDefault();\n that._navKeys(e);\n } else if (keyCode === keys.ENTER || keyCode === keys.SPACEBAR) {\n e.preventDefault();\n that._selectHandler(e, $(document.activeElement).closest(DOT + stepStyles.step));\n } else {\n e.preventDefault();\n }\n },\n\n _leaveStepper: function() {\n var selectedStep = this.wrapper.find(DOT + stepStyles.currentStep),\n allStepLinks = this.wrapper.find(DOT + stepStyles.stepLink);\n\n allStepLinks.removeClass(stepStyles.focusStep).attr(TABINDEX, \"-1\");\n\n selectedStep.addClass(stepStyles.focusStep);\n selectedStep.find(DOT + stepStyles.stepLink).removeAttr(TABINDEX);\n },\n\n _navKeys: function(e) {\n var selectOnFocus = this.options.selectOnFocus;\n\n if (selectOnFocus) {\n this._navKeysSelect(e);\n } else {\n this._navKeysFocus(e);\n }\n },\n\n _navKeysFocus: function(e) {\n var keyCode = e.keyCode,\n rtl = kendo.support.isRtl(this.wrapper),\n orientation = this.options.orientation;\n\n switch (keyCode) {\n case keys.DOWN:\n if (rtl && orientation !== VERTICAL) {\n this._focusPreviousStep();\n } else {\n this._focusNextStep();\n }\n break;\n case keys.RIGHT:\n if (rtl) {\n this._focusPreviousStep();\n } else {\n this._focusNextStep();\n }\n break;\n case keys.UP:\n if (rtl && orientation !== VERTICAL) {\n this._focusNextStep();\n } else {\n this._focusPreviousStep();\n }\n break;\n case keys.LEFT:\n if (rtl) {\n this._focusNextStep();\n } else {\n this._focusPreviousStep();\n }\n break;\n case keys.HOME:\n this._focusFirstStep();\n break;\n case keys.END:\n this._focusLastStep();\n break;\n }\n },\n\n _navKeysSelect: function(e) {\n var keyCode = e.keyCode,\n focusedStepIndex = $(document.activeElement).closest(DOT + stepStyles.step).index(),\n rtl = kendo.support.isRtl(this.wrapper),\n steps = this.steps(),\n orientation = this.options.orientation,\n targetStep;\n\n switch (keyCode) {\n case keys.DOWN:\n if (rtl && orientation !== VERTICAL) {\n targetStep = steps[focusedStepIndex - 1];\n } else {\n targetStep = steps[focusedStepIndex + 1];\n }\n break;\n case keys.RIGHT:\n if (rtl) {\n targetStep = steps[focusedStepIndex - 1];\n } else {\n targetStep = steps[focusedStepIndex + 1];\n }\n break;\n case keys.UP:\n if (rtl && orientation !== VERTICAL) {\n targetStep = steps[focusedStepIndex + 1];\n } else {\n targetStep = steps[focusedStepIndex - 1];\n }\n break;\n case keys.LEFT:\n if (rtl) {\n targetStep = steps[focusedStepIndex + 1];\n } else {\n targetStep = steps[focusedStepIndex - 1];\n }\n break;\n case keys.HOME:\n targetStep = steps[0];\n break;\n case keys.END:\n targetStep = steps[steps.length - 1];\n break;\n }\n\n if (targetStep) {\n this._focusStep(targetStep.element);\n this._selectHandlerOnKey(e, targetStep.element);\n }\n },\n\n _progressBar: function() {\n var wrapper = this.wrapper,\n progressBarOptions = this._progressOptions();\n\n this.progressBar = $(\"\").kendoProgressBar(progressBarOptions).getKendoProgressBar();\n this.progressBar.element.addClass(\"k-pos-absolute k-overflow-hidden\");\n\n // TODO: for 2021 R2 the following line must be removed!\n this.progressBar.element.css(\"position\", \"absolute\");\n\n this._calculateDimensions();\n\n wrapper.append(this.progressBar.element);\n },\n\n _progressOptions: function() {\n var options = this.options,\n orientation = options.orientation,\n stepsOptions = options.steps,\n numberOfSteps, progressBarOptions;\n\n if (!stepsOptions || stepsOptions.length === 0) {\n return;\n } else {\n numberOfSteps = stepsOptions.length;\n }\n\n progressBarOptions = {\n max: numberOfSteps - 1,\n value: this.select().getIndex(),\n orientation: orientation,\n showStatus: false\n };\n\n if (orientation === VERTICAL) {\n progressBarOptions.reverse = true;\n }\n\n return progressBarOptions;\n },\n\n _resetProgressBar: function() {\n var progressBar = this.progressBar,\n newOptions;\n\n if (!progressBar) {\n return;\n }\n\n newOptions = this._progressOptions();\n progressBar.setOptions(newOptions);\n },\n\n _renderSteps: function() {\n var steps = this._steps,\n stepsList = this._stepList,\n step, idx;\n\n stepsList.empty();\n\n for (idx = 0; idx < steps.length; idx++) {\n step = steps[idx];\n stepsList.append(step.element);\n }\n },\n\n _resetStep: function(i, index, forward) {\n var step = this._steps[i];\n\n if (i === index) {\n step.options.previous = false;\n step.options.selected = true;\n } else if ((forward || i > index) && (!forward || i < index)) {\n step.options.selected = false;\n step.options.previous = forward;\n }\n\n if (this.options.linear && (i < index - 1 || i > index + 1)) {\n step.options.selectable = false;\n } else {\n step.options.selectable = true;\n }\n\n step._link();\n step._stepClasses();\n this.options.steps[i] = step.options;\n },\n\n _select: function(index) {\n var options = this.options,\n linear = options.linear,\n selectedStep = this.select(),\n selectedIndex = selectedStep.getIndex(),\n stepsOptions = options.steps,\n targetStep = this._steps[index],\n forward, i, min, max;\n\n if (!targetStep || !targetStep.getEnabled()) {\n return;\n }\n\n if (index > selectedIndex) {\n forward = true;\n\n if (linear) {\n min = Math.max(selectedIndex - 1, 0);\n max = Math.min(index + 1, stepsOptions.length - 1);\n } else {\n min = selectedIndex;\n max = index;\n }\n } else {\n forward = false;\n\n if (linear) {\n min = Math.max(index - 1, 0);\n max = Math.min(selectedIndex + 1, stepsOptions.length - 1);\n } else {\n min = index;\n max = selectedIndex;\n }\n }\n\n for (i = min; i <= max; i ++) {\n this._resetStep(i, index, forward);\n }\n\n this.selectedStep = targetStep;\n this.progressBar.value(index);\n },\n\n _selectablePreviousState: function(stepOpt, selected, idx) {\n var stepsOptions = this.options.steps,\n linear = this.options.linear;\n\n if (!selected) {\n stepOpt.previous = true;\n if (linear && !stepsOptions[idx + 1].selected) {\n stepOpt.selectable = false;\n } else {\n stepOpt.selectable = true;\n }\n } else if (linear && !stepsOptions[idx - 1].selected) {\n stepOpt.selectable = false;\n } else {\n stepOpt.selectable = true;\n }\n\n return stepOpt;\n },\n\n _selectClickHandler: function(e) {\n var stepElement = $(e.target).closest(DOT + stepStyles.step);\n\n e.preventDefault();\n this._preventWrapperClick = true;\n this._selectHandler(e, stepElement);\n },\n\n _selectHandler: function(e, stepElement) {\n var that = this,\n step = that._steps[stepElement.index()],\n currentStep = this.select();\n\n if (!step || step.getIndex() === currentStep.getIndex() || !step.getEnabled() || !step.getSelectable()) {\n that._focusStep(currentStep.element);\n\n return;\n }\n\n if (!that.trigger(SELECT, { sender: that, originalEvent: e, step: step })) {\n that._select(step.getIndex());\n stepElement.find(DOT + stepStyles.stepLink)[0].focus();\n that.trigger(ACTIVATE, { sender: that, originalEvent: e, step: step });\n }\n },\n\n _selectHandlerOnKey: function(e, stepElement) {\n var that = this,\n step = that._steps[stepElement.index()];\n\n if (!step.getEnabled() || !step.getSelectable()) {\n return;\n }\n\n if (!that.trigger(SELECT, { sender: that, originalEvent: e, step: step })) {\n that._select(step.getIndex());\n stepElement.find(DOT + stepStyles.stepLink)[0].focus();\n that.trigger(ACTIVATE, { sender: that, originalEvent: e, step: step });\n }\n },\n\n _tabKey: function(e, shift) {\n var selectOnFocus = this.options.selectOnFocus,\n focusedStepElement = $(document.activeElement).closest(DOT + stepStyles.step),\n focusedStepIndex = focusedStepElement.index(),\n targetStep = $(focusedStepElement.parent().find(DOT + stepStyles.step)[focusedStepIndex + shift]);\n\n this._focusStep(targetStep);\n\n if (selectOnFocus) {\n this._selectHandlerOnKey(e, targetStep);\n }\n },\n\n _wrapper: function() {\n var that = this,\n element = that.element;\n\n that.wrapper = element;\n that.wrapper.addClass(stepperStyles.widget);\n\n if (that.options.linear) {\n that.wrapper.addClass(stepperStyles.stepperLinear);\n }\n\n this._addStepList();\n },\n\n _wrapperClickHandler: function(e) {\n var currentStep = this.select();\n\n if (!this._preventWrapperClick) {\n e.preventDefault();\n this._focusStep(currentStep.element);\n } else {\n this._preventWrapperClick = false;\n }\n }\n });\n\n kendo.stepper = {\n Step: Step\n };\n\n kendo.ui.plugin(Stepper);\n\n })(window.kendo.jQuery);\n\n}));\n"]}