@progress/kendo-vue-layout/stepper/Step.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as E, createVNode as n, inject as j } from "vue";
import { focusFirstFocusableChild as D, Icon as p, getDefaultSlots as V, getIconName as M } from "@progress/kendo-vue-common";
import { provideLocalizationService as T } from "@progress/kendo-vue-intl";
import { checkOutlineIcon as w, exclamationCircleIcon as _ } from "@progress/kendo-svg-icons";
import { DEFAULT_ANIMATION_DURATION as U, NO_ANIMATION as K } from "./contants.mjs";
import { messages as R, optionalText as W } from "./messages/main.mjs";
const Y = /* @__PURE__ */ E({
  name: "KendoStep",
  props: {
    current: Boolean,
    disabled: Boolean,
    icon: String,
    svgIcon: Object,
    index: Number,
    isValid: {
      type: Boolean,
      default: void 0
    },
    focused: Boolean,
    label: String,
    optional: Boolean,
    tabIndex: {
      type: Number,
      default: 0
    },
    text: String,
    animationDuration: [Boolean, Number],
    isVertical: Boolean,
    item: [String, Object, Boolean, Function],
    linear: Boolean,
    mode: String,
    numOfSteps: Number,
    value: Number,
    successIcon: String,
    successSvgIcon: Object,
    errorIcon: String,
    errorSvgIcon: Object,
    onChange: Function,
    onFocus: Function
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  computed: {
    itemClassNames() {
      const {
        current: e,
        disabled: t,
        focused: i,
        index: o,
        isValid: s,
        optional: r
      } = this.$props;
      return {
        "k-step": !0,
        "k-step-first": o === 0,
        "k-step-last": this.numOfSteps && o === this.numOfSteps - 1,
        "k-step-done": o < this.value,
        "k-step-current": e,
        "k-step-optional": r,
        "k-disabled": t,
        "k-focus": i,
        "k-step-error": s !== void 0 && !s,
        "k-step-success": s
      };
    },
    itemStyles() {
      const {
        index: e
      } = this.$props, t = !this.linear || e === this.value - 1 || e === this.value || e === this.value + 1;
      return {
        maxWidth: this.isVertical ? void 0 : `calc(100% / ${this.numOfSteps})`,
        pointerEvents: t ? void 0 : "none"
      };
    }
  },
  watch: {
    focused(e) {
      this.aElement = this.$refs.aElement, this.aElement && e && this.aElement.focus();
    }
  },
  setup() {
    return {
      kendoLocalizationService: j("kendoLocalizationService", {})
    };
  },
  render() {
    const e = V(this), {
      current: t,
      disabled: i,
      focused: o,
      icon: s,
      svgIcon: r,
      index: a,
      isValid: l,
      label: c,
      optional: k,
      tabIndex: m,
      text: S,
      animationDuration: d,
      item: b,
      linear: g,
      mode: I,
      value: u,
      successIcon: v,
      successSvgIcon: x,
      errorIcon: N,
      errorSvgIcon: C
    } = this.$props, O = !g || a === u - 1 || a === u || a === u + 1, F = T(this), B = ((h) => F.toLanguageString(h, R[h]))(W), $ = typeof d == "number" ? d : d !== !1 ? U : K, z = l ? v || "check-circle" : N || "exclamation-circle", L = l ? x || w : C || _, f = n(p, {
      class: "k-step-indicator-icon",
      name: M(z),
      icon: L,
      "aria-hidden": "true"
    }, null), y = function() {
      return I !== "labels" ? n("span", {
        class: "k-step-indicator",
        "aria-hidden": !0,
        style: {
          transitionDuration: $ + "ms"
        }
      }, [this.getStepIndicatorContent(c, s, r, S, a, l, f)]) : null;
    }, A = function() {
      return n("span", {
        class: "k-step-label"
      }, [c && n("span", {
        class: "k-step-text"
      }, [c]), c && l !== void 0 && f, k && n("span", {
        class: "k-step-label-optional"
      }, [B])]);
    };
    return n("li", {
      class: this.itemClassNames,
      style: this.itemStyles
    }, [n("a", {
      ref: "aElement",
      class: "k-step-link",
      title: c || void 0,
      onClick: this.handleClick,
      onFocusin: this.handleFocus,
      "tab-index": m || (t ? 0 : -1),
      "aria-current": t ? !0 : void 0,
      "aria-disabled": i || !O || void 0,
      "aria-invalid": l !== void 0 && !l || void 0
    }, [b ? e : [y.call(this), A.call(this)]])]);
  },
  methods: {
    getStepIndicatorContent(e, t, i, o, s, r, a) {
      return e ? t || i ? n(p, {
        class: "k-step-indicator-icon",
        name: t,
        icon: i
      }, null) : n("span", {
        class: "k-step-indicator-text"
      }, [o || s + 1]) : r !== void 0 ? a : t || i ? n(p, {
        class: "k-step-indicator-icon",
        name: t,
        icon: i
      }, null) : n("span", {
        class: "k-step-indicator-text"
      }, [o || s + 1]);
    },
    focus() {
      this.$el && D(this.$el);
    },
    handleClick(e) {
      this.disabled || this.$emit("change", {
        event: e,
        value: this.index,
        component: this
      });
    },
    handleFocus(e) {
      this.disabled || this.$emit("focus", e);
    }
  }
});
export {
  Y as Step
};