import { a4 as e, aH as P, d1 as w, ab as b, aa as r, V as p, bX as $, dr as H, hA as B, a5 as x, hB as D, S as T, aG as E, w as f, U as W, a3 as I, aD as k, aE as M, f5 as F, H as s, e$ as N, eh as j, hC as v, c5 as O, ad as n, I as m, ae as o, af as l, am as u, c0 as R, ag as A, dn as U, ah as G, aj as c, c1 as X, ec as q } from "./56c67d3b.js";
import { useState as J, useEffect as K, useContext as d } from "react";
import "react-dom";
const L = [{
  label: e("step.sizeSmall"),
  value: "small"
}, {
  label: e("step.sizeDefault"),
  value: "default"
}], Q = [{
  label: e("step.typeDefault"),
  value: "default"
}, {
  label: e("step.typeNavigation"),
  value: "navigation"
}, {
  label: e("step.typeInline"),
  value: "inline"
}], S = [{
  label: e("step.directionHorizontal"),
  value: "horizontal"
}, {
  label: e("step.directionVertical"),
  value: "vertical"
}];
e("step.statusProcess"), e("step.statusWait"), e("step.statusFinish"), e("step.statusError");
const Y = {
  autoHeight: P,
  initialValue: w("1"),
  value: b("value"),
  stepStatus: b("process"),
  stepPercent: w("60"),
  size: r(L, "default"),
  displayType: r(Q, "default"),
  direction: r(S, "horizontal"),
  showDots: p,
  showIcons: p,
  selectable: p,
  labelPlacement: r(S, "horizontal"),
  disabled: $,
  onEvent: H,
  options: B,
  style: x(D, "style"),
  viewRef: T,
  animationStyle: x(E, "animationStyle"),
  showScrollBars: f(p, !1),
  minHorizontalWidth: f(q, "")
};
let y = function() {
  return new W(Y, (t) => {
    const V = I.div`
    ${(a) => a.$animationStyle}
      height: 100%;
      overflow-y: scroll;
      min-height: 24px;
      max-width: ${k(t.style.margin)};
      max-height: ${M(t.style.margin)};
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-decoration: ${t.style.textDecoration};
      font-style: ${t.style.fontStyle};
      font-weight: ${t.style.textWeight};
      font-size: ${t.style.textSize};
      text-transform: ${t.style.textTransform};
      margin: ${t.style.margin};
      rotate: ${t.style.rotation};
      padding: ${t.style.padding};
      border: ${t.style.borderWidth} solid ${t.style.border};
      border-radius: ${t.style.radius};
      ${F(t.style)}
      .ant-steps-item { padding-top: 5px !important; }
      .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
      .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
      .ant-steps.ant-steps-dot .ant-steps-item-process .ant-steps-icon .ant-steps-icon-dot { margin-top: 4px !important; }
      .ant-steps.ant-steps-default .ant-steps-item-icon .ant-steps-icon-dot { margin-top: 9px !important; }
      .ant-steps.ant-steps-small .ant-steps-item-icon .ant-steps-icon-dot { margin-top: 4px !important; }
      .ant-steps.ant-steps-dot .ant-steps-item-title { margin-top: 10px !important; }
      .ant-steps.ant-steps-default.ant-steps-with-progress.ant-steps-label-horizontal .ant-steps-item.ant-steps-item-custom div.ant-steps-item-icon { margin-top:4px !important; }
      .ant-steps.ant-steps-default.ant-steps-with-progress.ant-steps-label-vertical .ant-steps-item.ant-steps-item-custom div.ant-steps-item-icon { margin-top:17px !important; }
      .ant-steps.ant-steps-dot.ant-steps-small.ant-steps-with-progress .ant-steps-item-icon .ant-progress { inset-block-start: -8px !important; inset-inline-start: -11px !important; }
      .ant-steps.ant-steps-dot.ant-steps-default.ant-steps-with-progress .ant-steps-item-icon .ant-progress { inset-block-start: -7px !important; inset-inline-start: -13px !important; }
      .ant-steps.ant-steps-small.ant-steps-with-progress .ant-steps-item:not(.ant-steps-item-custom) .ant-progress { inset-block-start: -5px !important; inset-inline-start: -5px !important; }
      .ant-steps.ant-steps-default.ant-steps-with-progress .ant-steps-item:not(.ant-steps-item-custom) .ant-progress { inset-block-start: -5px !important; inset-inline-start: -5px !important; }
      .ant-steps.ant-steps-small.ant-steps-with-progress .ant-steps-item.ant-steps-item-custom .ant-progress { inset-block-start: -5px !important; inset-inline-start: -10px !important; }
      .ant-steps.ant-steps-default.ant-steps-with-progress .ant-steps-item.ant-steps-item-custom .ant-progress { inset-block-start: -4px !important; inset-inline-start: -13px !important; }
    `, [C, g] = J(t.initialValue.value - 1);
    K(() => {
      const a = Number(t.value.value);
      g(a - 1);
    }, [t.value.value]);
    const z = (a) => {
      var h;
      if (t.selectable == !1)
        return;
      const i = Math.max(0, a);
      g(i), ((h = t.options[i]) == null ? void 0 : h.value) !== void 0 && (t.value.onChange(i + 1 + ""), t.onEvent("change"));
    };
    return /* @__PURE__ */ s(N, {
      theme: {
        token: {
          colorPrimary: t.style.activeBackground,
          colorText: t.style.titleText,
          colorTextDescription: t.style.text,
          fontFamily: t.style.fontFamily
        }
      },
      children: /* @__PURE__ */ s(V, {
        style: t.style,
        $animationStyle: t.animationStyle,
        children: /* @__PURE__ */ s(j, {
          style: {
            height: t.autoHeight ? "auto" : "100%",
            minWidth: t.minHorizontalWidth,
            margin: "0px",
            padding: "0px"
          },
          overflow: "scroll",
          hideScrollbar: !t.showScrollBars,
          children: /* @__PURE__ */ s(v, {
            initial: t.initialValue.value - 1,
            current: C,
            onChange: z,
            percent: t.stepPercent.value,
            status: t.stepStatus.value,
            type: t.displayType,
            size: t.size,
            labelPlacement: t.labelPlacement,
            progressDot: t.showDots,
            direction: t.direction,
            children: t.options.map((a, i) => /* @__PURE__ */ s(v.Step, {
              style: {
                minWidth: t.minHorizontalWidth || "auto"
              },
              title: a.label,
              subTitle: a.subTitle,
              description: a.description,
              status: a.status,
              icon: t.showIcons && O(a.icon) && a.icon || void 0
            }, i))
          })
        })
      })
    });
  }).setPropertyViewFn((t) => /* @__PURE__ */ n(m, {
    children: [/* @__PURE__ */ n(o, {
      name: l.basic,
      children: [t.options.propertyView({}), t.initialValue.propertyView({
        label: e("step.initialValue"),
        tooltip: e("step.initialValueTooltip")
      })]
    }), ["logic", "both"].includes(d(u).editorModeStatus) && /* @__PURE__ */ s(m, {
      children: /* @__PURE__ */ n(o, {
        name: l.interaction,
        children: [t.onEvent.getPropertyView(), R(t), A(t), t.stepStatus.propertyView({
          label: e("step.status")
        }), t.stepPercent.propertyView({
          label: e("step.percent")
        }), t.selectable.propertyView({
          label: e("step.selectable")
        })]
      })
    }), ["layout", "both"].includes(d(u).editorModeStatus) && /* @__PURE__ */ n(o, {
      name: l.layout,
      children: [t.autoHeight.getPropertyView(), t.size.propertyView({
        label: e("step.size"),
        radioButton: !0
      }), t.displayType.propertyView({
        label: e("step.type"),
        radioButton: !1
      }), t.direction.propertyView({
        label: e("step.direction"),
        radioButton: !0
      }), t.direction.getView() == "horizontal" && t.labelPlacement.propertyView({
        label: e("step.labelPlacement"),
        radioButton: !0
      }), t.direction.getView() == "horizontal" && t.minHorizontalWidth.propertyView({
        label: e("prop.minHorizontalWidth"),
        placeholder: "100px"
      }), !t.autoHeight.getView() && t.showScrollBars.propertyView({
        label: e("prop.scrollbar")
      }), t.displayType.getView() != "inline" && !t.showIcons.getView() && t.showDots.propertyView({
        label: e("step.showDots")
      }), t.displayType.getView() != "inline" && !t.showDots.getView() && t.showIcons.propertyView({
        label: e("step.showIcons")
      })]
    }), ["layout", "both"].includes(d(u).editorModeStatus) && /* @__PURE__ */ n(m, {
      children: [/* @__PURE__ */ s(o, {
        name: l.style,
        children: t.style.getPropertyView()
      }), /* @__PURE__ */ s(o, {
        name: l.animationStyle,
        hasTooltip: !0,
        children: t.animationStyle.getPropertyView()
      })]
    })]
  })).setExposeMethodConfigs(U).build();
}();
y = class extends y {
  autoHeight() {
    return this.children.autoHeight.getView();
  }
};
const et = G(y, [new c("value", e("step.valueDesc")), new c("stepStatus", e("step.status")), new c("stepPercent", e("step.percent")), ...X]);
export {
  et as StepComp
};
