import { X as h, d5 as x, w as n, Y as t, S as w, cW as B, bI as y, ae as C, ev as v, Z as m, ew as S, az as T, N as V, U as p, F as s, a6 as a, G as g, a7 as l, a8 as i, af as r, bJ as $, a9 as I, bK as P, aa as E, ac as c, bL as D, O as b, L as f } from "./603b75d9.js";
import { useContext as u } from "react";
import { Button100 as L, buttonRefMethods as M, ButtonCompWrapper as R } from "./26dac75c.js";
import "react-dom";
const W = 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"};
  }
`, N = 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: y,
    loading: y,
    trueIcon: n(f, "/icon:solid/AngleUp"),
    falseIcon: n(f, "/icon:solid/AngleDown"),
    iconPosition: C,
    alignment: v,
    style: m(S, "style"),
    animationStyle: m(T, "animationStyle"),
    showBorder: n(b, !0),
    viewRef: V
  };
  return new p(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(L, {
        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(W, {
          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(), $(e), I(e), P(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(M).build();
}(), z = E(N, [new c("value", t("dropdown.textDesc")), new c("loading", t("button.loadingDesc")), ...D]);
export {
  z as ToggleButtonComp
};
