import { a3 as w, f5 as $, a4 as o, M, X as l, w as d, bX as T, bY as D, ad as y, I as S, c0 as z, ag as p, ay as A, V as s, aa as C, gK as P, a5 as m, gL as O, gM as x, aG as F, gN as H, H as a, aI as B, gO as v, gP as W, am as b, ae as n, af as r, ah as R, ai as U, P as k } from "./56c67d3b.js";
import { useRef as L, useState as V, useEffect as _, useContext as g } from "react";
import "react-dom";
const {
  Meta: N
} = v, j = w.div`
  height: 100%;
  width: 100%;
  .ant-card-small >.ant-card-head {
    border: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.border;
}};
    border-style: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.borderStyle;
}};
    border-width: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.borderWidth;
}};
    border-radius: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.radius;
}};
    font-size: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.textSize;
}};
    font-style: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.fontStyle;
}};
    font-family: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.fontFamily;
}};
    font-weight: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.textWeight;
}};
    text-transform: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.textTransform;
}};
    text-decoration: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.textDecoration;
}};
    color: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.text;
}};
    rotate: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.rotation;
}};
    margin: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.margin;
}};
    padding: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.padding;
}};
    ${(t) => $(t.$headerStyle)}
  }
  .ant-card-head-title{
    font-size: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.textSize;
}};
    font-family: ${(t) => {
  var e;
  return (e = t.$headerStyle) == null ? void 0 : e.fontFamily;
}};
  }
  .ant-card .ant-card-actions {
    border-top: 1px solid ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.border;
}};
  }
  .ant-card .ant-card-actions>li:not(:last-child) {
    border-inline-end: 1px solid ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.border;
}};
  }
  .ant-card .ant-card-actions {
    ${(t) => t.$style && $(t.$style)}
  }
  .ant-card .ant-card-body {
    border: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.border;
}};
    border-style: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.borderStyle;
}};
    border-width: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.borderWidth;
}};
    border-radius: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.radius;
}};
    rotate: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.rotation;
}};
    margin: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.margin;
}};
    padding: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.padding;
}};
    ${(t) => $(t.$bodyStyle)}
  }
  .ant-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.margin;
}};
    padding: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.padding;
}};
    border: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.border;
}};
    rotate: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.rotation;
}};
    border-style: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.borderStyle;
}};
    border-radius: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.radius;
}};
    border-width: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.borderWidth;
}};
    box-shadow: ${(t) => {
  var e, c;
  return `${(e = t.$style) == null ? void 0 : e.boxShadow} ${(c = t.$style) == null ? void 0 : c.boxShadowColor}`;
}};
    ${(t) => t.$style && $(t.$style)}
    ${(t) => t.$animationStyle}
  }
  .ant-card-body {
    display: ${(t) => t.$showMate ? "" : "none"};
    height: ${(t) => t.$cardType == "custom" ? "100%" : "auto"};
  }
  .ant-card-body .ant-card-meta .ant-card-meta-title{
    color: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.text;
}} !important;
    font-size: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textSize;
}};
    font-style: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.fontStyle;
}};
    font-family: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.fontFamily;
}};
    font-weight: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textWeight;
}};
    text-transform: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textTransform;
}};
    text-decoration: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textDecoration;
}};
  }
  .ant-card-body .ant-card-meta .ant-card-meta-description{
    color: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.text;
}} !important;
    font-size: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textSize;
}};
    font-style: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.fontStyle;
}};
    font-family: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.fontFamily;
}};
    font-weight: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textWeight;
}};
    text-transform: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textTransform;
}};
    text-decoration: ${(t) => {
  var e;
  return (e = t.$bodyStyle) == null ? void 0 : e.textDecoration;
}};
  }
`, G = w.div`
  height: 100%;
  width: 100%;
`, X = w.div`
  pointer-events: ${(t) => t.disabled ? "none" : ""};
  svg {
    color: ${(t) => {
  var e;
  return t.disabled ? "#d9d9d9" : (e = t.$style) == null ? void 0 : e.IconColor;
}};
  }
  &:hover {
    svg {
      color: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.activateColor;
}};
    }
}
`, Y = [{
  label: o("card.common"),
  value: "common"
}, {
  label: o("card.custom"),
  value: "custom"
}], K = [{
  label: o("card.default"),
  value: "default"
}, {
  label: o("card.small"),
  value: "small"
}], q = new M({
  label: l,
  icon: d(k, "/icon:antd/settingoutlined"),
  disabled: T,
  hidden: T,
  onEvent: D
}, (t) => t).setPropertyViewFn((t) => /* @__PURE__ */ y(S, {
  children: [t.icon.propertyView({
    label: o("button.icon")
  }), z(t), p(t), t.onEvent.getPropertyView()]
})).build(), J = A(q, {
  initOptions: [{
    label: o("optionsControl.optionI", {
      i: 1
    }),
    icon: "/icon:antd/settingoutlined"
  }, {
    label: o("optionsControl.optionI", {
      i: 2
    }),
    icon: "/icon:antd/editoutlined"
  }, {
    label: o("optionsControl.optionI", {
      i: 3
    }),
    icon: "/icon:antd/ellipsisoutlined"
  }]
}), Q = function() {
  const t = {
    showTitle: s.DEFAULT_TRUE,
    title: d(l, o("card.title")),
    size: C(K, "small"),
    extraTitle: d(l, o("card.more")),
    cardType: C(Y, "common"),
    CoverImg: s.DEFAULT_TRUE,
    imgSrc: d(l, "https://lowcoder.cloud/images/e0a89736c6be4393893d2981ac1fd753.png"),
    imgHeight: d(l, "auto"),
    showMeta: s.DEFAULT_TRUE,
    metaTitle: d(l, o("card.metaTitle")),
    metaDesc: d(l, o("card.metaDesc")),
    hoverable: s.DEFAULT_TRUE,
    showActionIcon: s.DEFAULT_TRUE,
    actionOptions: J,
    onEvent: P,
    style: m(O, "style"),
    headerStyle: m(x, "headerStyle"),
    bodyStyle: m(x, "bodyStyle"),
    animationStyle: m(F, "animationStyle")
  };
  return new H(t, (e) => {
    e.container.showHeader = !1, e.container.style = Object.assign(e.container.style, {
      CONTAINER_BODY_PADDING: e.style.containerBodyPadding,
      border: "#00000000",
      background: e.style.background
    });
    const c = L(null), [h, E] = V(0), [u, I] = V(0);
    _(() => {
      u && h && f();
    }, [u, h]);
    const f = () => {
      const i = c.current;
      E((i == null ? void 0 : i.clientWidth) ?? 0), I((i == null ? void 0 : i.clientHeight) ?? 0);
    };
    return /* @__PURE__ */ a(B, {
      onResize: f,
      children: /* @__PURE__ */ a(j, {
        ref: c,
        $style: e.style,
        $animationStyle: e.animationStyle,
        $headerStyle: e.headerStyle,
        $bodyStyle: e.bodyStyle,
        $showMate: e.showMeta || e.cardType == "custom",
        $cardType: e.cardType,
        onMouseEnter: () => e.onEvent("focus"),
        onMouseLeave: () => e.onEvent("blur"),
        onClick: () => e.onEvent("click"),
        children: /* @__PURE__ */ y(v, {
          style: {
            width: h,
            height: "100%"
          },
          size: e.size,
          hoverable: e.hoverable,
          title: e.showTitle && e.title,
          extra: e.showTitle && /* @__PURE__ */ a("a", {
            href: "#",
            onClick: () => e.onEvent("clickExtra"),
            children: e.extraTitle
          }),
          cover: e.cardType == "common" && e.CoverImg && /* @__PURE__ */ a("img", {
            src: e.imgSrc,
            height: e.imgHeight
          }),
          actions: e.cardType == "common" && e.showActionIcon ? e.actionOptions.filter((i) => !i.hidden).map((i) => /* @__PURE__ */ a(X, {
            onClick: () => i.onEvent("click"),
            disabled: i.disabled,
            $style: e.style,
            children: i.icon
          })) : [],
          children: [e.cardType == "common" && e.showMeta && /* @__PURE__ */ a(N, {
            title: e.metaTitle,
            description: e.metaDesc
          }), e.cardType == "custom" && /* @__PURE__ */ a(G, {
            children: /* @__PURE__ */ a(W, {
              ...e
            })
          })]
        })
      })
    });
  }).setPropertyViewFn((e) => /* @__PURE__ */ y(S, {
    children: [(g(b).editorModeStatus === "logic" || g(b).editorModeStatus === "both") && /* @__PURE__ */ y(S, {
      children: [/* @__PURE__ */ y(n, {
        name: r.basic,
        children: [e.size.propertyView({
          label: o("card.titleSize"),
          radioButton: !0
        }), e.showTitle.propertyView({
          label: o("card.showTitle")
        }), e.showTitle.getView() && e.title.propertyView({
          label: o("card.title")
        }), e.showTitle.getView() && e.extraTitle.propertyView({
          label: o("card.extraTitle")
        }), e.cardType.getView() == "common" && e.CoverImg.propertyView({
          label: o("card.CoverImg")
        }), e.cardType.getView() == "common" && e.CoverImg.getView() && e.imgSrc.propertyView({
          label: o("card.imgSrc")
        }), e.cardType.getView() == "common" && e.CoverImg.getView() && e.imgHeight.propertyView({
          label: o("card.imgHeight")
        }), e.cardType.getView() == "common" && e.showMeta.propertyView({
          label: o("card.showMeta")
        }), e.cardType.getView() == "common" && e.showMeta.getView() && e.metaTitle.propertyView({
          label: o("card.metaTitle")
        }), e.cardType.getView() == "common" && e.showMeta.getView() && e.metaDesc.propertyView({
          label: o("card.metaDesc")
        }), e.cardType.getView() == "common" && e.showActionIcon.propertyView({
          label: o("card.showActionIcon")
        }), e.cardType.getView() == "common" && e.showActionIcon.getView() && e.actionOptions.propertyView({
          title: o("card.actionOptions")
        })]
      }), /* @__PURE__ */ y(n, {
        name: r.interaction,
        children: [p(e), e.onEvent.getPropertyView()]
      })]
    }), (g(b).editorModeStatus === "layout" || g(b).editorModeStatus === "both") && /* @__PURE__ */ y(S, {
      children: [/* @__PURE__ */ a(n, {
        name: r.layout,
        children: e.cardType.propertyView({
          label: o("card.cardType"),
          radioButton: !0
        })
      }), /* @__PURE__ */ a(n, {
        name: r.style,
        children: e.style.getPropertyView()
      }), /* @__PURE__ */ a(n, {
        name: r.headerStyle,
        children: e.headerStyle.getPropertyView()
      }), /* @__PURE__ */ a(n, {
        name: r.bodyStyle,
        children: e.bodyStyle.getPropertyView()
      }), /* @__PURE__ */ a(n, {
        name: r.animationStyle,
        hasTooltip: !0,
        children: e.animationStyle.getPropertyView()
      })]
    })]
  })).build();
}(), oe = R(Q, [U]);
export {
  oe as CardComp,
  Q as ContainerBaseComp
};
