\n * \n * ({\n * ...item,\n * selected: index === selectedId,\n * }))\n * \"\n * @select=\"handleSelect\"\n * >\n * \n * Toggle the drawer state \n * \n * \n *
\n * \n *\n * \n * ```\n */\nvar DrawerContent = DrawerContentVue2;\nexport { DrawerContent, DrawerContentVue2 };","/**\n * @hidden\n */\nexport var DEFAULT_ANIMATION_DURATION = 400;\n/**\n * @hidden\n */\nexport var NO_ANIMATION = 0;\n","// @ts-ignore\nimport * as Vue from 'vue';\nvar allVue = Vue;\nvar gh = allVue.h;\nvar isV3 = allVue.version && allVue.version[0] === '3';\nvar inject = allVue.inject;\nimport { focusFirstFocusableChild, getDefaultSlots, getIconName, Icon } from '@progress/kendo-vue-common';\nimport { provideLocalizationService } from '@progress/kendo-vue-intl';\nimport { exclamationCircleIcon, checkOutlineIcon } from '@progress/kendo-svg-icons';\nimport { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';\nimport { messages, optionalText } from './messages/main';\n/**\n * @hidden\n */\nvar StepVue2 = {\n name: 'KendoStep',\n props: {\n current: Boolean,\n disabled: Boolean,\n icon: String,\n svgIcon: Object,\n index: Number,\n isValid: {\n type: Boolean,\n default: undefined\n },\n focused: Boolean,\n label: String,\n optional: Boolean,\n tabIndex: {\n type: Number,\n default: 0\n },\n text: String,\n animationDuration: [Boolean, Number],\n isVertical: Boolean,\n item: [String, Object, Boolean, Function],\n linear: Boolean,\n mode: String,\n numOfSteps: Number,\n value: Number,\n successIcon: String,\n successSvgIcon: Object,\n errorIcon: String,\n errorSvgIcon: Object\n },\n inject: {\n kendoLocalizationService: {\n default: null\n }\n },\n computed: {\n itemClassNames: function itemClassNames() {\n var _a = this.$props,\n current = _a.current,\n disabled = _a.disabled,\n focused = _a.focused,\n index = _a.index,\n isValid = _a.isValid,\n optional = _a.optional;\n return {\n 'k-step': true,\n 'k-step-first': index === 0,\n 'k-step-last': this.numOfSteps && index === this.numOfSteps - 1,\n 'k-step-done': index < this.value,\n 'k-step-current': current,\n 'k-step-optional': optional,\n 'k-disabled': disabled,\n 'k-focus': focused,\n 'k-step-error': isValid !== undefined && !isValid,\n 'k-step-success': isValid\n };\n },\n itemStyles: function itemStyles() {\n var index = this.$props.index;\n var allowClick = !this.linear || index === this.value - 1 || index === this.value || index === this.value + 1;\n return {\n maxWidth: !this.isVertical ? \"calc(100% / \".concat(this.numOfSteps, \")\") : undefined,\n pointerEvents: !allowClick ? 'none' : undefined\n };\n }\n },\n watch: {\n focused: function focused(newValue) {\n this.aElement = this.$refs.aElement;\n if (this.aElement && newValue) {\n this.aElement.focus();\n }\n }\n },\n // @ts-ignore\n setup: !isV3 ? undefined : function () {\n var v3 = !!isV3;\n var kendoLocalizationService = inject('kendoLocalizationService', {});\n return {\n v3: v3,\n kendoLocalizationService: kendoLocalizationService\n };\n },\n // @ts-ignore\n render: function render(createElement) {\n var h = gh || createElement;\n var defaultSlots = getDefaultSlots(this);\n var _a = this.$props,\n current = _a.current,\n disabled = _a.disabled,\n focused = _a.focused,\n icon = _a.icon,\n svgIcon = _a.svgIcon,\n index = _a.index,\n isValid = _a.isValid,\n label = _a.label,\n optional = _a.optional,\n tabIndex = _a.tabIndex,\n text = _a.text,\n animationDuration = _a.animationDuration,\n item = _a.item,\n linear = _a.linear,\n mode = _a.mode,\n value = _a.value,\n successIcon = _a.successIcon,\n successSvgIcon = _a.successSvgIcon,\n errorIcon = _a.errorIcon,\n errorSvgIcon = _a.errorSvgIcon;\n var allowClick = !linear || index === value - 1 || index === value || index === value + 1;\n var isInLabel = mode === 'labels' || (Boolean(icon) || Boolean(svgIcon)) && Boolean(label);\n var localizationService = provideLocalizationService(this);\n var localizeMessage = function localizeMessage(message) {\n return localizationService.toLanguageString(message, messages[message]);\n };\n var optionalMessage = localizeMessage(optionalText);\n var progressAnimation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? DEFAULT_ANIMATION_DURATION : NO_ANIMATION;\n var validationIconNames = isValid ? successIcon || 'check-circle' : errorIcon || 'exclamation-circle';\n var validationSvgIcon = isValid ? successSvgIcon || checkOutlineIcon : errorSvgIcon || exclamationCircleIcon;\n var validationIcons = h(Icon, {\n \"class\": 'k-step-indicator-icon',\n name: getIconName(validationIconNames),\n attrs: this.v3 ? undefined : {\n name: getIconName(validationIconNames),\n icon: validationSvgIcon,\n \"aria-hidden\": \"true\"\n },\n icon: validationSvgIcon,\n \"aria-hidden\": \"true\"\n });\n var stepIndicator = function stepIndicator() {\n return mode !== 'labels' ? h(\"span\", {\n \"class\": \"k-step-indicator\",\n \"aria-hidden\": true,\n attrs: this.v3 ? undefined : {\n \"aria-hidden\": true\n },\n style: {\n transitionDuration: progressAnimation + 'ms'\n }\n }, [icon || svgIcon ? !isInLabel && isValid !== undefined ? validationIcons : h(Icon, {\n \"class\": \"k-step-indicator-icon\",\n name: icon,\n attrs: this.v3 ? undefined : {\n name: icon,\n icon: svgIcon\n },\n icon: svgIcon\n }) : isValid !== undefined ? validationIcons : h(\"span\", {\n \"class\": \"k-step-indicator-text\"\n }, [text ? text : index + 1])]) : null;\n };\n var stepLabel = function stepLabel() {\n return h(\"span\", {\n \"class\": \"k-step-label\"\n }, [label && h(\"span\", {\n \"class\": \"k-step-text\"\n }, [label]), isInLabel && isValid !== undefined && validationIcons, optional && h(\"span\", {\n \"class\": \"k-step-label-optional\"\n }, [optionalMessage])]);\n };\n return h(\"li\", {\n \"class\": this.itemClassNames,\n style: this.itemStyles\n }, [h(\"a\", {\n ref: \"aElement\",\n \"class\": \"k-step-link\",\n title: label ? label : undefined,\n attrs: this.v3 ? undefined : {\n title: label ? label : undefined,\n tabIndex: tabIndex ? tabIndex : current ? 0 : -1,\n \"aria-current\": current ? true : undefined,\n \"aria-disabled\": disabled || !allowClick || undefined,\n \"aria-invalid\": isValid !== undefined && !isValid || undefined\n },\n onClick: this.handleClick,\n on: this.v3 ? undefined : {\n \"click\": this.handleClick,\n \"focusin\": this.handleFocus\n },\n onFocusin: this.handleFocus,\n tabIndex: tabIndex ? tabIndex : current ? 0 : -1,\n \"aria-current\": current ? true : undefined,\n \"aria-disabled\": disabled || !allowClick || undefined,\n \"aria-invalid\": isValid !== undefined && !isValid || undefined\n }, [!item ? [stepIndicator.call(this), stepLabel.call(this)] : defaultSlots])]);\n },\n methods: {\n focus: function focus() {\n if (this.$el) {\n focusFirstFocusableChild(this.$el);\n }\n },\n handleClick: function handleClick(event) {\n if (!this.disabled) {\n this.$emit('change', {\n event: event,\n value: this.index,\n component: this\n });\n }\n },\n handleFocus: function handleFocus(event) {\n if (!this.disabled) {\n this.$emit('focus', event);\n }\n }\n }\n};\n/**\n * Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).\n *\n * ```jsx\n *