import { Y as e, aA as P, cJ as w, a4 as b, a3 as r, O as p, bI as $, cW as B, ib as H, Z as x, ic as D, N as T, az as W, w as f, U as E, X as k, aw as I, ax as M, dh as F, F as a, eR as N, dk as O, id as v, bU as R, a6 as n, G as m, a7 as o, a8 as l, af as u, bJ as j, a9 as A, aa as U, ac as c, bL as J, d$ as G } from "./603b75d9.js";
import { selectDivRefMethods as L } from "./00d44232.js";
import { useState as X, useEffect as Y, useContext as d } from "react";
import "react-dom";
const Z = [{
  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 K = {
  autoHeight: P,
  initialValue: w("1"),
  value: b("value"),
  stepStatus: b("process"),
  stepPercent: w("60"),
  size: r(Z, "default"),
  displayType: r(q, "default"),
  direction: r(S, "horizontal"),
  showDots: p,
  showIcons: p,
  selectable: p,
  labelPlacement: r(S, "horizontal"),
  disabled: $,
  onEvent: B,
  options: H,
  style: x(D, "style"),
  viewRef: T,
  animationStyle: x(W, "animationStyle"),
  showScrollBars: f(p, !1),
  minHorizontalWidth: f(G, "")
};
let y = function() {
  return new E(K, (t) => {
    const V = k.div`
    ${(s) => s.$animationStyle}
      height: 100%;
      overflow-y: scroll;
      min-height: 24px;
      max-width: ${I(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] = X(t.initialValue.value - 1);
    Y(() => {
      const s = Number(t.value.value);
      g(s - 1);
    }, [t.value.value]);
    const z = (s) => {
      var h;
      if (t.selectable == !1)
        return;
      const i = Math.max(0, s);
      g(i), ((h = t.options[i]) == null ? void 0 : h.value) !== void 0 && (t.value.onChange(i + 1 + ""), t.onEvent("change"));
    };
    return /* @__PURE__ */ a(N, {
      theme: {
        token: {
          colorPrimary: t.style.activeBackground,
          colorText: t.style.titleText,
          colorTextDescription: t.style.text,
          fontFamily: t.style.fontFamily
        }
      },
      children: /* @__PURE__ */ a(V, {
        style: t.style,
        $animationStyle: t.animationStyle,
        children: /* @__PURE__ */ a(O, {
          style: {
            height: t.autoHeight ? "auto" : "100%",
            minWidth: t.minHorizontalWidth,
            margin: "0px",
            padding: "0px"
          },
          overflow: "scroll",
          hideScrollbar: !t.showScrollBars,
          children: /* @__PURE__ */ a(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((s, i) => /* @__PURE__ */ a(v.Step, {
              style: {
                minWidth: t.minHorizontalWidth || "100%"
              },
              title: s.label,
              subTitle: s.subTitle,
              description: s.description,
              status: s.status,
              icon: t.showIcons && R(s.icon) && s.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__ */ a(m, {
      children: /* @__PURE__ */ n(o, {
        name: l.interaction,
        children: [t.onEvent.getPropertyView(), j(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__ */ a(o, {
        name: l.style,
        children: t.style.getPropertyView()
      }), /* @__PURE__ */ a(o, {
        name: l.animationStyle,
        hasTooltip: !0,
        children: t.animationStyle.getPropertyView()
      })]
    })]
  })).setExposeMethodConfigs(L).build();
}();
y = class extends y {
  autoHeight() {
    return this.children.autoHeight.getView();
  }
};
const st = U(y, [new c("value", e("step.valueDesc")), new c("stepStatus", e("step.status")), new c("stepPercent", e("step.percent")), ...J]);
export {
  st as StepComp
};
