@lanaco/lnc-react-ui/dist/KanbanCard-ffmclwO4.js

React component library

import { jsx as o, jsxs as g } from "react/jsx-runtime";
import { forwardRef as c, memo as k } from "react";
import { s as p } from "./emotion-styled.browser.esm-DfbrHHed.js";
import N from "./Icon.js";
import z from "./DropdownMenu.js";
import C from "./DropdownItem.js";
import { c as _ } from "./index-fN7hCOo3.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const K = "_Action_bw0a9_5", j = {
  Action: K
}, B = c(
  ({ active: r, className: a, cursor: s, style: l, ...t }, n) => /* @__PURE__ */ o(
    "button",
    {
      ref: n,
      ...t,
      className: _(j.Action, a),
      tabIndex: 0,
      style: {
        ...l,
        cursor: s,
        "--fill": r == null ? void 0 : r.fill,
        "--background": r == null ? void 0 : r.background
      }
    }
  )
), H = c((r, a) => /* @__PURE__ */ o(B, { ref: a, cursor: "grab", "data-cypress": "draggable-handle", ...r, children: /* @__PURE__ */ o("svg", { viewBox: "0 0 20 20", width: "12", children: /* @__PURE__ */ o("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) })), I = p.div`
  height: 100%;
  width: 100%;
  padding: ${(r) => `18px 20px 18px ${r.handle == !0 ? "10px" : "20px"}`};
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  display: flex;
  gap: 8px;
  & .card-action-lnc {
    position: absolute;
    right: 10px;
    cursor: pointer;
  }

  & > .kanban-card-content {
    ${(r) => r.clickable && "cursor: pointer;"}
  }
`, M = p.div`
  display: flex;

  & > *:first-of-type:not(:last-of-type) {
    opacity: 0;
  }

  & > *:first-of-type:not(:last-of-type):focus-visible {
    opacity: 1;
  }
`, R = k(
  c(
    ({
      containerId: r,
      item: a,
      handle: s = !0,
      handleProps: l,
      actionsMenu: t = !1,
      actions: n = [],
      onDetails: i,
      color: d = "primary",
      size: m = "small",
      className: f = "",
      style: b = {},
      children: h,
      ...u
    }, A) => {
      const w = $();
      return /* @__PURE__ */ g(
        I,
        {
          ref: A,
          handle: s,
          theme: w,
          className: f,
          style: b,
          clickable: !!i,
          ...u,
          children: [
            s && /* @__PURE__ */ o(M, { className: "Actions", children: /* @__PURE__ */ o(H, { ...l }) }),
            t && /* @__PURE__ */ o(
              z,
              {
                className: "card-action-lnc",
                horizontalAlignment: "right",
                verticalAlignment: "bottom",
                color: d,
                size: m,
                control: /* @__PURE__ */ o(
                  N,
                  {
                    color: "neutral",
                    className: "card-action-lnc",
                    icon: "ellipsis-v"
                  }
                ),
                children: n == null ? void 0 : n.map((e, y) => {
                  if ((e == null ? void 0 : e.show) != !1)
                    return /* @__PURE__ */ o(
                      C,
                      {
                        icon: e.icon,
                        disabled: e.enable == !1,
                        onClick: (x) => e.onAction(x, a, r),
                        children: e.name
                      },
                      y
                    );
                })
              }
            ),
            /* @__PURE__ */ o(
              "div",
              {
                className: "kanban-card-content-lnc",
                onClick: (e) => {
                  i && i(e, a, r);
                },
                children: h
              }
            )
          ]
        }
      );
    }
  )
);
R.displayName = "KANBAN_CARD";
export {
  H,
  R as K
};