@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 j, inject as D, createVNode as n } from "vue";
import { getDefaultSlots as V, Icon as S, getIconName as M, focusFirstFocusableChild as T } from "@progress/kendo-vue-common";
import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
import { checkOutlineIcon as _, exclamationCircleIcon as U } from "@progress/kendo-svg-icons";
import { DEFAULT_ANIMATION_DURATION as K, NO_ANIMATION as R } from "./contants.mjs";
import { messages as W, optionalText as q } from "./messages/main.mjs";
const Z = /* @__PURE__ */ j({
  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: o,
        focused: r,
        index: l,
        isValid: t,
        optional: s
      } = this.$props;
      return {
        "k-step": !0,
        "k-step-first": l === 0,
        "k-step-last": this.numOfSteps && l === this.numOfSteps - 1,
        "k-step-done": l < this.value,
        "k-step-current": e,
        "k-step-optional": s,
        "k-disabled": o,
        "k-focus": r,
        "k-step-error": t !== void 0 && !t,
        "k-step-success": t
      };
    },
    itemStyles() {
      const {
        index: e
      } = this.$props, o = !this.linear || e === this.value - 1 || e === this.value || e === this.value + 1;
      return {
        maxWidth: this.isVertical ? void 0 : `calc(100% / ${this.numOfSteps})`,
        pointerEvents: o ? void 0 : "none"
      };
    }
  },
  watch: {
    focused(e) {
      this.aElement = this.$refs.aElement, this.aElement && e && this.aElement.focus();
    }
  },
  setup() {
    return {
      kendoLocalizationService: D("kendoLocalizationService", {})
    };
  },
  render() {
    const e = V(this), {
      current: o,
      disabled: r,
      focused: l,
      icon: t,
      svgIcon: s,
      index: c,
      isValid: i,
      label: a,
      optional: v,
      tabIndex: m,
      text: f,
      animationDuration: d,
      item: I,
      linear: g,
      mode: h,
      value: u,
      successIcon: x,
      successSvgIcon: N,
      errorIcon: O,
      errorSvgIcon: B
    } = this.$props, C = !g || c === u - 1 || c === u || c === u + 1, k = h === "labels" || (!!t || !!s) && !!a, F = w(this), L = ((b) => F.toLanguageString(b, W[b]))(q), $ = typeof d == "number" ? d : d !== !1 ? K : R, z = i ? x || "check-circle" : O || "exclamation-circle", y = i ? N || _ : B || U, p = n(S, {
      class: "k-step-indicator-icon",
      name: M(z),
      icon: y,
      "aria-hidden": "true"
    }, null), A = function() {
      return h !== "labels" ? n("span", {
        class: "k-step-indicator",
        "aria-hidden": !0,
        style: {
          transitionDuration: $ + "ms"
        }
      }, [t || s ? !k && i !== void 0 ? p : n(S, {
        class: "k-step-indicator-icon",
        name: t,
        icon: s
      }, null) : i !== void 0 ? p : n("span", {
        class: "k-step-indicator-text"
      }, [f || c + 1])]) : null;
    }, E = function() {
      return n("span", {
        class: "k-step-label"
      }, [a && n("span", {
        class: "k-step-text"
      }, [a]), k && i !== void 0 && p, v && n("span", {
        class: "k-step-label-optional"
      }, [L])]);
    };
    return n("li", {
      class: this.itemClassNames,
      style: this.itemStyles
    }, [n("a", {
      ref: "aElement",
      class: "k-step-link",
      title: a || void 0,
      onClick: this.handleClick,
      onFocusin: this.handleFocus,
      "tab-index": m || (o ? 0 : -1),
      "aria-current": o ? !0 : void 0,
      "aria-disabled": r || !C || void 0,
      "aria-invalid": i !== void 0 && !i || void 0
    }, [I ? e : [A.call(this), E.call(this)]])]);
  },
  methods: {
    focus() {
      this.$el && T(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 {
  Z as Step
};