import { a3 as h, dx as x, w as n, a4 as t, X as w, dr as B, bX as c, al as C, eF as v, a5 as y, eG as V, aG as S, S as T, U as $, H as s, ad as a, b$ as p, I as g, ae as l, af as i, am as r, c0 as P, ag as I, c6 as E, c7 as D, ah as M, aj as m, c1 as L, V as b, P as f, b_ as R } from "./56c67d3b.js";
import { useContext as u } from "react";
import "react-dom";
const j = h.div`
  display: flex;
`, A = h(R)`
  ${(o) => o.$animationStyle}
  width: 100%;
  display: flex;
  justify-content: ${(o) => o.$align};

  > button {
    width: ${(o) => o.$align !== "stretch" && "auto"};
    border: ${(o) => !o.$showBorder && "none"};
    box-shadow: ${(o) => !o.$showBorder && "none"};
  }
`, W = function() {
  const o = {
    value: x("value"),
    showText: n(b, !0),
    trueText: n(w, t("toggleButton.trueDefaultText")),
    falseText: n(w, t("toggleButton.falseDefaultText")),
    onEvent: B,
    disabled: c,
    loading: c,
    trueIcon: n(f, "/icon:solid/AngleUp"),
    falseIcon: n(f, "/icon:solid/AngleDown"),
    iconPosition: C,
    alignment: v,
    style: y(V, "style"),
    animationStyle: y(S, "animationStyle"),
    showBorder: n(b, !0),
    viewRef: T
  };
  return new $(o, (e) => {
    const d = e.showText && (e.value.value ? e.trueText : e.falseText) || void 0;
    return /* @__PURE__ */ s(A, {
      $disabled: e.disabled,
      $align: e.alignment,
      $showBorder: e.showBorder,
      $animationStyle: e.animationStyle,
      children: /* @__PURE__ */ a(p, {
        ref: e.viewRef,
        $buttonStyle: e.style,
        loading: e.loading,
        disabled: e.disabled,
        onClick: () => {
          e.onEvent("change"), e.value.onChange(!e.value.value);
        },
        children: [e.iconPosition === "right" && d, /* @__PURE__ */ s(j, {
          children: e.value.value ? e.trueIcon : e.falseIcon
        }), e.iconPosition === "left" && d]
      })
    });
  }).setPropertyViewFn((e) => /* @__PURE__ */ a(g, {
    children: [/* @__PURE__ */ s(l, {
      name: i.basic,
      children: e.value.propertyView({
        label: t("prop.defaultValue"),
        tooltip: t("toggleButton.valueDesc")
      })
    }), (u(r).editorModeStatus === "logic" || u(r).editorModeStatus === "both") && /* @__PURE__ */ a(g, {
      children: [/* @__PURE__ */ a(l, {
        name: i.interaction,
        children: [e.onEvent.getPropertyView(), P(e), I(e), E(e)]
      }), /* @__PURE__ */ a(l, {
        name: i.advanced,
        children: [e.showText.propertyView({
          label: t("toggleButton.showText")
        }), e.showText.getView() && e.trueText.propertyView({
          label: t("toggleButton.trueLabel")
        }), e.showText.getView() && e.falseText.propertyView({
          label: t("toggleButton.falseLabel")
        }), e.trueIcon.propertyView({
          label: t("toggleButton.trueIconLabel")
        }), e.falseIcon.propertyView({
          label: t("toggleButton.falseIconLabel")
        }), e.showText.getView() && e.iconPosition.propertyView({
          label: t("toggleButton.iconPosition"),
          radioButton: !0
        }), e.alignment.propertyView({
          label: t("toggleButton.alignment"),
          radioButton: !0
        })]
      })]
    }), (u(r).editorModeStatus === "layout" || u(r).editorModeStatus === "both") && /* @__PURE__ */ a(g, {
      children: [/* @__PURE__ */ a(l, {
        name: i.style,
        children: [e.showBorder.propertyView({
          label: t("toggleButton.showBorder")
        }), e.style.getPropertyView()]
      }), /* @__PURE__ */ s(l, {
        name: i.animationStyle,
        hasTooltip: !0,
        children: e.animationStyle.getPropertyView()
      })]
    })]
  })).setExposeMethodConfigs(D).build();
}(), G = M(W, [new m("value", t("dropdown.textDesc")), new m("loading", t("button.loadingDesc")), ...L]);
export {
  G as ToggleButtonComp
};
