@progress/kendo-react-taskboard 6.1.1 → 7.0.0-develop.10

package/index.mjs

@@ -0,0 +1,834 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as t from "react";
+import * as S from "prop-types";
+import { validatePackage as at } from "@progress/kendo-licensing";
+import { classNames as ne, clone as Ye, useDraggable as nt, noop as Ue } from "@progress/kendo-react-common";
+import { useLocalization as ue } from "@progress/kendo-react-intl";
+import { Button as w } from "@progress/kendo-react-buttons";
+import { Input as fe } from "@progress/kendo-react-inputs";
+import { pencilIcon as We, plusIcon as ot, xIcon as qe, moreVerticalIcon as it, trashIcon as lt } from "@progress/kendo-svg-icons";
+import { Dialog as rt, DialogActionsBar as st } from "@progress/kendo-react-dialogs";
+import { CardHeader as dt, Menu as ct, CardBody as ut, Card as mt } from "@progress/kendo-react-layout";
+import { Popup as gt } from "@progress/kendo-react-popup";
+import { DropDownList as kt } from "@progress/kendo-react-dropdowns";
+import { Label as ke } from "@progress/kendo-react-labels";
+import { FieldWrapper as Ce } from "@progress/kendo-react-form";
+const Ct = {
+  name: "@progress/kendo-react-taskboard",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1701439799,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+}, ft = "taskBoard.toolbarAddColumnButton", Bt = "taskBoard.toolbarSearchField", Be = "taskBoard.editColumnButton", Te = "taskBoard.addCardButton", Ee = "taskBoard.deleteColumnButton", De = "taskBoard.editCardButton", he = "taskBoard.deleteCardButton", be = "taskBoard.deleteTaskDialogMessage", ye = "taskBoard.deleteTaskDialogTitle", ve = "taskBoard.deleteTaskConfirmButton", Se = "taskBoard.deleteTaskCancelButton", we = "taskBoard.addCardTitle", G = "taskBoard.addCardTitleLabel", J = "taskBoard.addCardDescriptionLabel", Q = "taskBoard.addCardPriorityLabel", Pe = "taskBoard.addCardCreateButton", Ie = "taskBoard.deleteColumnDialogMessage", Re = "taskBoard.deleteColumnDialogTitle", Le = "taskBoard.deleteColumnConfirmButton", Ne = "taskBoard.deleteColumnCancelButton", xe = "taskBoard.editCardPaneTitle", Me = "taskBoard.editCardPaneSaveButton", Z = "taskBoard.editPaneTitleLabel", p = "taskBoard.editPaneDescriptionLabel", ee = "taskBoard.editPanePriorityLabel", te = "taskBoard.editPaneCancelButton", Ae = "taskBoard.previewPanePriorityLabel", Ke = "taskBoard.previewPaneDeleteButton", He = "taskBoard.previewPaneEditButton", i = {
+  [ft]: "Add column",
+  [Bt]: "Search",
+  [Be]: "Edit column",
+  [Te]: "Add card",
+  [Ee]: "Delete column",
+  [De]: "Edit card",
+  [he]: "Delete card",
+  [be]: "Are you sure you want to delete this card?",
+  [ye]: "Delete Card",
+  [ve]: "Delete",
+  [Se]: "Cancel",
+  [Ie]: "Are you sure you want to delete this column?",
+  [Re]: "Delete column?",
+  [Le]: "Delete",
+  [Ne]: "Cancel",
+  [we]: "Create new card",
+  [Pe]: "Create",
+  [te]: "Cancel",
+  [xe]: "Edit",
+  [Me]: "Save changes",
+  [Z]: "Title:",
+  [p]: "Description:",
+  [ee]: "Priority:",
+  [G]: "Title",
+  [J]: "Description",
+  [Q]: "Priority",
+  [Ae]: "Priority:",
+  [Ke]: "Delete",
+  [He]: "Edit"
+}, Fe = "data-taskboard-type", _e = "data-taskboard-id", ze = "data-taskboard-placeholder", X = "column", $ = "task", $e = (e) => {
+  const { edit: n, title: o } = e.column;
+  return /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-header-text k-text-ellipsis" }, n ? /* @__PURE__ */ t.createElement(
+    fe,
+    {
+      value: o,
+      onChange: e.onTitleChange,
+      onBlur: e.onColumnExitEdit,
+      autoFocus: !0
+    }
+  ) : o), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: ne("k-taskboard-column-header-actions", { "k-disabled": n }) }, /* @__PURE__ */ t.createElement(
+    w,
+    {
+      fillMode: "flat",
+      icon: "pencil",
+      svgIcon: We,
+      title: e.editButtonTitle,
+      onClick: e.onColumnEnterEdit
+    }
+  ), /* @__PURE__ */ t.createElement(
+    w,
+    {
+      fillMode: "flat",
+      icon: "plus",
+      svgIcon: ot,
+      title: e.addButtonTitle,
+      onClick: e.onShowAddCardDialog
+    }
+  ), /* @__PURE__ */ t.createElement(
+    w,
+    {
+      fillMode: "flat",
+      icon: "x",
+      svgIcon: qe,
+      title: e.closeButtonTitle,
+      onClick: e.onColumnDelete
+    }
+  )));
+};
+$e.displayName = "KendoReactTaskBoardColumnHeader";
+const Ge = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-cards-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-column-cards" }, e.children));
+Ge.displayName = "KendoReactTaskBoardColumnBody";
+const me = (e) => {
+  const { onClose: n, onConfirm: o, dialogMessage: s, dialogTitle: B, dialogConfirmButton: c, dialogCancelButton: d } = e;
+  return /* @__PURE__ */ t.createElement(rt, { title: B, closeIcon: !1 }, s, /* @__PURE__ */ t.createElement(st, { layout: "end" }, /* @__PURE__ */ t.createElement(w, { themeColor: "primary", onClick: o }, c), /* @__PURE__ */ t.createElement(w, { onClick: n }, d)));
+};
+me.propTypes = {
+  onClose: S.func.isRequired,
+  onConfirm: S.func.isRequired,
+  dialogMessage: S.string.isRequired,
+  dialogTitle: S.string.isRequired,
+  dialogConfirmButton: S.string.isRequired,
+  dialogCancelButton: S.string.isRequired
+};
+me.displayName = "KendoReactTaskBoardConfirmDialog";
+const Je = ({ onSave: e, task: n, priorities: o }) => {
+  const [s, B] = t.useState(n ? n.title : ""), [c, d] = t.useState(n ? n.description : ""), [u, l] = t.useState(n ? n.priority : o[0]), D = t.useCallback((k) => {
+    B(k.value);
+  }, []), f = t.useCallback((k) => {
+    d(k.value);
+  }, []), h = t.useCallback((k) => {
+    l(k.target.value);
+  }, []), P = t.useCallback((k) => {
+    const C = { id: void 0, status: "", ...n || {}, title: s, description: c, priority: u };
+    e.call(void 0, C, n);
+  }, [e, n, s, c, u]);
+  return { onTitleChange: D, title: s, onDescriptionChange: f, description: c, onPriorityChange: h, priority: u, onSave: P };
+}, Ve = (e) => {
+  const { onTitleChange: n, title: o, onDescriptionChange: s, description: B, onPriorityChange: c, priority: d, onSave: u } = Je(e), l = ue();
+  return /* @__PURE__ */ t.createElement(
+    e.editPane,
+    {
+      header: l.toLanguageString(xe, i[xe]) + e.task.title,
+      titleInputTitle: l.toLanguageString(G, i[G]),
+      descriptionInputTitle: l.toLanguageString(J, i[J]),
+      priorityDropDownTitle: l.toLanguageString(Q, i[Q]),
+      task: e.task,
+      saveButton: l.toLanguageString(Me, i[Me]),
+      cancelButton: l.toLanguageString(te, i[te]),
+      priorities: e.priorities,
+      titleLabel: l.toLanguageString(Z, i[Z]),
+      descriptionLabel: l.toLanguageString(p, i[p]),
+      priorityLabel: l.toLanguageString(ee, i[ee]),
+      onSave: u,
+      onClose: e.onClose,
+      onTitleChange: n,
+      title: o,
+      onDescriptionChange: s,
+      description: B,
+      onPriorityChange: c,
+      priority: d
+    }
+  );
+};
+Ve.propTypes = {};
+Ve.displayName = "KendoReactTaskBoardEditCard";
+const je = (e) => {
+  const { onTitleChange: n, title: o, onDescriptionChange: s, description: B, onPriorityChange: c, priority: d, onSave: u } = Je(e), l = ue();
+  return /* @__PURE__ */ t.createElement(
+    e.editPane,
+    {
+      header: l.toLanguageString(we, i[we]),
+      titleInputTitle: l.toLanguageString(G, i[G]),
+      descriptionInputTitle: l.toLanguageString(J, i[J]),
+      priorityDropDownTitle: l.toLanguageString(Q, i[Q]),
+      titleLabel: l.toLanguageString(Z, i[Z]),
+      descriptionLabel: l.toLanguageString(p, i[p]),
+      priorityLabel: l.toLanguageString(ee, i[ee]),
+      saveButton: l.toLanguageString(Pe, i[Pe]),
+      cancelButton: l.toLanguageString(te, i[te]),
+      priorities: e.priorities,
+      onSave: u,
+      onClose: e.onClose,
+      onTitleChange: n,
+      title: o,
+      onDescriptionChange: s,
+      description: B,
+      onPriorityChange: c,
+      priority: d
+    }
+  );
+};
+je.propTypes = {};
+je.displayName = "KendoReactTaskBoardAddCard";
+const Qe = (e) => {
+  const n = t.useRef();
+  return /* @__PURE__ */ t.createElement(dt, { className: "k-hbox" }, /* @__PURE__ */ t.createElement(
+    "span",
+    {
+      className: "k-card-title k-link",
+      onClick: e.onShowPreviewPane
+    },
+    e.title
+  ), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-card-header-actions" }, /* @__PURE__ */ t.createElement(
+    w,
+    {
+      fillMode: "flat",
+      icon: "more-vertical",
+      svgIcon: it,
+      ref: n,
+      onClick: e.showMenu ? e.onHideMenu : e.onShowMenu,
+      onBlur: e.onMenuButtonBlur
+    }
+  ), /* @__PURE__ */ t.createElement(gt, { anchor: n.current && n.current.element, show: e.showMenu, ref: e.popupRef }, /* @__PURE__ */ t.createElement(ct, { vertical: !0, onSelect: e.onMenuItemSelect, items: e.menuItems, className: "k-context-menu" }))));
+};
+Qe.displayName = "KendoReactTaskBoardCardHeader";
+const Ze = (e) => /* @__PURE__ */ t.createElement(ut, null, e.children);
+Ze.displayName = "KendoReactTaskBoardCardBody";
+const pe = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane k-taskboard-preview-pane" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-text" }, e.title), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ t.createElement(w, { icon: "x", svgIcon: qe, fillMode: "flat", onClick: e.onClosePreviewPane }))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ t.createElement("p", null, e.description), /* @__PURE__ */ t.createElement("p", null, e.priorityLabel, " ", /* @__PURE__ */ t.createElement("span", { style: { backgroundColor: e.priority.color } }, " "), " ", e.priority.priority)), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ t.createElement(w, { onClick: e.onTaskDelete }, e.delete), /* @__PURE__ */ t.createElement(w, { themeColor: "primary", onClick: e.onTaskEdit }, e.edit)));
+pe.displayName = "KendoReactTaskBoardPreviewDialog";
+const oe = (e) => {
+  const { onDeleteTask: n, showEditPane: o, task: s, style: B, dragTargetRef: c, elementRef: d } = e, [u, l] = t.useState(!1), [D, f] = t.useState(!1), [h, P] = t.useState(!1), k = t.useRef(null), C = ue(), I = [
+    {
+      text: C.toLanguageString(De, i[De]),
+      icon: "pencil",
+      svgIcon: We,
+      data: () => {
+        o(s), l(!u);
+      }
+    },
+    {
+      text: C.toLanguageString(he, i[he]),
+      icon: "trash",
+      svgIcon: lt,
+      data: () => {
+        f(!D), l(!u);
+      }
+    }
+  ], x = (_) => {
+    _.item.data();
+  }, L = () => {
+    l(!0);
+  }, y = () => {
+    l(!1);
+  }, M = (_) => {
+    const z = k.current && k.current.element;
+    z && z.contains(_.relatedTarget) || l(!1);
+  }, F = () => {
+    f(!D);
+  }, A = () => {
+    P(!0);
+  }, Y = () => {
+    P(!1);
+  }, K = () => {
+    o(s), A();
+  };
+  return s.isPlaceholder && c && c.current ? /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      style: { width: c.current.width, height: c.current.height },
+      className: "k-taskboard-drag-placeholder",
+      [ze]: !0
+    }
+  ) : /* @__PURE__ */ t.createElement(
+    e.cardComponent,
+    {
+      task: s,
+      style: B,
+      tabIndex: e.tabIndex,
+      disabled: e.disabled,
+      elementRef: d,
+      showMenu: u,
+      showDeleteConfirm: D,
+      showTaskPreviewPane: h,
+      menuItems: I,
+      popupRef: k,
+      confirmDialogMessage: C.toLanguageString(be, i[be]),
+      confirmDialogTitle: C.toLanguageString(ye, i[ye]),
+      confirmDialogConfirmButton: C.toLanguageString(ve, i[ve]),
+      confirmDialogCancelButton: C.toLanguageString(Se, i[Se]),
+      previewDialogPriorityLabel: C.toLanguageString(Ae, i[Ae]),
+      previewDialogDelete: C.toLanguageString(Ke, i[Ke]),
+      previewDialogEdit: C.toLanguageString(He, i[He]),
+      onShowPreviewPane: A,
+      onClosePreviewPane: Y,
+      onMenuItemSelect: x,
+      onShowMenu: L,
+      onHideMenu: y,
+      onMenuButtonBlur: M,
+      onTaskDelete: n,
+      onTaskEdit: K,
+      onCloseConfirmDialog: F,
+      card: mt,
+      cardHeader: Qe,
+      cardBody: Ze,
+      confirmDialog: me,
+      previewDialog: pe
+    }
+  );
+}, Tt = {};
+oe.propTypes = {
+  task: S.object.isRequired
+};
+oe.defaultProps = Tt;
+oe.displayName = "KendoReactTaskBoardCardBase";
+const ae = (e) => {
+  const [n, o] = t.useState(!1), [s, B] = t.useState(!1), [c, d] = t.useState(!1), [u, l] = t.useState(), {
+    dragTargetRef: D,
+    column: f,
+    onColumnChange: h,
+    tasks: P,
+    elementRef: k,
+    style: C,
+    onTaskCreate: I,
+    onTaskEdit: x,
+    onTaskDelete: L
+  } = e, y = ue(), M = t.useCallback((m) => {
+    const H = { ...f, title: m.value };
+    h.call(void 0, H, f);
+  }, [f, h]), F = t.useCallback(() => {
+    const m = { ...f, edit: !0 };
+    h.call(void 0, m, f);
+  }, [f, h]), A = t.useCallback(() => {
+    const m = { ...f, edit: !1 };
+    h.call(void 0, m, f);
+  }, [f, h]), Y = t.useCallback(() => {
+    h.call(void 0, null, f);
+  }, [f, h]), K = () => {
+    d(!c);
+  }, _ = () => {
+    o(!0);
+  }, z = (m) => {
+    B(!0), l(m);
+  }, ge = () => {
+    o(!1), B(!1);
+  }, E = t.useCallback((m) => {
+    o(!1), I.call(void 0, { ...m, status: f.status });
+  }, [I, f]), ie = t.useCallback((m, H) => {
+    B(!1), x.call(void 0, m, H);
+  }, [x]), W = t.useCallback((m) => {
+    L.call(void 0, m);
+  }, [L]);
+  if (f.isPlaceholder && D && D.current) {
+    const m = D.current ? D.current.width : 0, H = D.current ? D.current.height : 0;
+    return /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        style: { width: m, height: H },
+        className: "k-taskboard-column k-taskboard-drag-placeholder",
+        [ze]: !0
+      }
+    );
+  }
+  return /* @__PURE__ */ t.createElement(
+    e.columnComponent,
+    {
+      column: e.column,
+      tasks: P,
+      priorities: e.priorities,
+      style: D ? { overflow: "visible", ...C } : C,
+      tabIndex: e.tabIndex,
+      elementRef: k,
+      onTaskCreate: E,
+      onTaskEdit: ie,
+      onTaskDelete: W,
+      card: e.cardComponent,
+      header: $e,
+      body: Ge,
+      confirmDialog: me,
+      editCardDialog: Ve,
+      addCardDialog: je,
+      onTitleChange: M,
+      onColumnEnterEdit: F,
+      onColumnExitEdit: A,
+      onColumnConfirmDelete: Y,
+      onShowAddCardDialog: _,
+      onShowEditCardPane: z,
+      onColumnDelete: K,
+      onCloseDialog: ge,
+      showAddCard: n,
+      showEditCard: s,
+      showColumnConfirmDelete: c,
+      editedTask: u,
+      confirmDialogMessage: y.toLanguageString(Ie, i[Ie]),
+      confirmDialogTitle: y.toLanguageString(Re, i[Re]),
+      confirmDialogConfirmButton: y.toLanguageString(Le, i[Le]),
+      confirmDialogCancelButton: y.toLanguageString(Ne, i[Ne]),
+      editButtonTitle: y.toLanguageString(Be, i[Be]),
+      addButtonTitle: y.toLanguageString(Te, i[Te]),
+      closeButtonTitle: y.toLanguageString(Ee, i[Ee])
+    },
+    P && P.map((m) => /* @__PURE__ */ t.createElement(
+      oe,
+      {
+        key: m.id,
+        tabIndex: e.tabIndex,
+        task: m,
+        disabled: !!e.column.edit,
+        onDeleteTask: () => W(m),
+        showEditPane: () => z(m),
+        dragTargetRef: e.dragTargetRef,
+        style: { borderLeftColor: m.priority.color },
+        cardComponent: e.cardComponent
+      }
+    ))
+  );
+}, Et = {};
+ae.propTypes = {
+  column: S.object.isRequired,
+  taskMap: S.object
+};
+ae.defaultProps = Et;
+ae.displayName = "KendoReactTaskBoardColumn";
+const Dt = (e, n, o) => {
+  let s = -1, B = -1;
+  for (let c = 0; c < o.length; c++) {
+    const d = String(o[c].id);
+    if (d === e && (B = c), d === n && (s = c), s !== -1 && B !== -1)
+      return {
+        dragIndex: B,
+        dropIndex: s
+      };
+  }
+  return null;
+}, Xe = (e) => {
+  for (; e; ) {
+    if (!e.getAttribute)
+      return null;
+    const n = e.getAttribute(_e);
+    if (n)
+      return {
+        id: n,
+        type: e.getAttribute(Fe) || "",
+        element: e
+      };
+    e = e.parentNode;
+  }
+  return null;
+}, ht = (e, n) => {
+  const o = n.dataItem.color, s = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { style: { backgroundColor: o } }, " "), e.props.children);
+  return t.cloneElement(e, e.props, s);
+}, bt = (e, n) => {
+  if (!n)
+    return e;
+  const o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("span", { style: { backgroundColor: n.color } }, " "), /* @__PURE__ */ t.createElement("span", null, "  ", e.props.children));
+  return t.cloneElement(e, { ...e.props }, o);
+}, de = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  e.card,
+  {
+    key: String(e.task.id),
+    ref: e.elementRef,
+    style: e.style,
+    className: ne("k-taskboard-card k-cursor-move k-taskboard-card-category", {
+      "k-disabled": e.disabled
+    }),
+    [Fe]: $,
+    [_e]: e.task.id,
+    tabIndex: e.tabIndex
+  },
+  /* @__PURE__ */ t.createElement(
+    e.cardHeader,
+    {
+      showMenu: e.showMenu,
+      menuItems: e.menuItems,
+      popupRef: e.popupRef,
+      title: e.task.title,
+      task: e.task,
+      onShowPreviewPane: e.onShowPreviewPane,
+      onShowMenu: e.onShowMenu,
+      onHideMenu: e.onHideMenu,
+      onMenuButtonBlur: e.onMenuButtonBlur,
+      onMenuItemSelect: e.onMenuItemSelect
+    }
+  ),
+  /* @__PURE__ */ t.createElement(e.cardBody, { task: e.task }, e.task.description)
+), e.showDeleteConfirm && /* @__PURE__ */ t.createElement(
+  e.confirmDialog,
+  {
+    onConfirm: e.onTaskDelete,
+    onClose: e.onCloseConfirmDialog,
+    dialogMessage: e.confirmDialogMessage,
+    dialogTitle: e.confirmDialogTitle,
+    dialogConfirmButton: e.confirmDialogConfirmButton,
+    dialogCancelButton: e.confirmDialogCancelButton
+  }
+), e.showTaskPreviewPane && /* @__PURE__ */ t.createElement(
+  e.previewDialog,
+  {
+    title: e.task.title,
+    description: e.task.description,
+    priorityLabel: e.previewDialogPriorityLabel,
+    delete: e.previewDialogDelete,
+    edit: e.previewDialogEdit,
+    onClosePreviewPane: e.onClosePreviewPane,
+    onTaskDelete: e.onTaskDelete,
+    onTaskEdit: e.onTaskEdit,
+    priority: e.task.priority
+  }
+));
+de.displayName = "KendoReactTaskBoardCard";
+const ce = (e) => /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane k-taskboard-edit-pane" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header" }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-text" }, e.header), /* @__PURE__ */ t.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-header-actions" }, /* @__PURE__ */ t.createElement(w, { icon: "x", svgIcon: qe, fillMode: "flat", onClick: e.onClose }))), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-content" }, /* @__PURE__ */ t.createElement(
+  "div",
+  {
+    role: "form",
+    "data-role": "form",
+    className: "k-form"
+  },
+  /* @__PURE__ */ t.createElement(Ce, null, /* @__PURE__ */ t.createElement(ke, { editorId: "title" }, e.titleLabel), /* @__PURE__ */ t.createElement(
+    fe,
+    {
+      id: "title",
+      onChange: e.onTitleChange,
+      value: e.title,
+      title: e.titleInputTitle
+    }
+  )),
+  /* @__PURE__ */ t.createElement(Ce, null, /* @__PURE__ */ t.createElement(ke, { editorId: "description" }, e.descriptionLabel), /* @__PURE__ */ t.createElement(
+    fe,
+    {
+      id: "description",
+      onChange: e.onDescriptionChange,
+      value: e.description,
+      title: e.descriptionInputTitle
+    }
+  )),
+  /* @__PURE__ */ t.createElement(Ce, null, /* @__PURE__ */ t.createElement(ke, { editorId: "priority" }, e.priorityLabel), /* @__PURE__ */ t.createElement(
+    kt,
+    {
+      id: "priority",
+      data: e.priorities,
+      value: e.priority,
+      onChange: e.onPriorityChange,
+      itemRender: ht,
+      valueRender: bt,
+      textField: "priority",
+      dataItemKey: "priority",
+      title: e.priorityDropDownTitle
+    }
+  ))
+)), /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" }, /* @__PURE__ */ t.createElement(w, { onClick: e.onClose }, e.cancelButton), /* @__PURE__ */ t.createElement(
+  w,
+  {
+    themeColor: "primary",
+    onClick: e.onSave,
+    disabled: !e.title || !e.description
+  },
+  e.saveButton
+)));
+ce.propTypes = {};
+ce.displayName = "KendoReactTaskBoardEditPane";
+const Oe = (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  "div",
+  {
+    ref: e.elementRef,
+    style: e.style,
+    className: ne("k-taskboard-column", {
+      "k-taskboard-column-edit": e.column.edit
+    }),
+    tabIndex: e.tabIndex,
+    [Fe]: X,
+    [_e]: e.column.id
+  },
+  /* @__PURE__ */ t.createElement(
+    e.header,
+    {
+      column: e.column,
+      tasks: e.tasks,
+      onTitleChange: e.onTitleChange,
+      onColumnExitEdit: e.onColumnExitEdit,
+      editButtonTitle: e.editButtonTitle,
+      onColumnEnterEdit: e.onColumnEnterEdit,
+      addButtonTitle: e.addButtonTitle,
+      onShowAddCardDialog: e.onShowAddCardDialog,
+      closeButtonTitle: e.closeButtonTitle,
+      onColumnDelete: e.onColumnDelete
+    }
+  ),
+  /* @__PURE__ */ t.createElement(e.body, null, e.children)
+), e.showAddCard && /* @__PURE__ */ t.createElement(
+  e.addCardDialog,
+  {
+    onClose: e.onCloseDialog,
+    onSave: e.onTaskCreate,
+    priorities: e.priorities,
+    editPane: ce
+  }
+), e.showEditCard && e.editedTask && /* @__PURE__ */ t.createElement(
+  e.editCardDialog,
+  {
+    onClose: e.onCloseDialog,
+    onSave: e.onTaskEdit,
+    task: e.editedTask,
+    priorities: e.priorities,
+    editPane: ce
+  }
+), e.showColumnConfirmDelete && /* @__PURE__ */ t.createElement(
+  e.confirmDialog,
+  {
+    onClose: e.onColumnDelete,
+    onConfirm: e.onColumnConfirmDelete,
+    dialogMessage: e.confirmDialogMessage,
+    dialogTitle: e.confirmDialogTitle,
+    dialogConfirmButton: e.confirmDialogConfirmButton,
+    dialogCancelButton: e.confirmDialogCancelButton
+  }
+));
+Oe.displayName = "KendoReactTaskBoardColumn";
+const et = t.forwardRef((e, n) => {
+  at(Ct);
+  const { columnData: o = [], className: s, style: B, id: c, taskData: d = [], onChange: u } = e, l = t.useRef(null), D = t.useRef(null);
+  t.useImperativeHandle(l, () => ({ props: e })), t.useImperativeHandle(n, () => l.current);
+  const h = t.Children.toArray(e.children).filter((a) => a && a.type && a.type.displayName === "KendoReactTaskBoardToolbar"), P = t.useRef(null), k = t.useRef(null), C = t.useRef(null), [I, x] = t.useState(null), [L, y] = t.useState(null), [M, F] = t.useState({ top: 0, left: 0 }), A = t.useRef(null), Y = t.useRef(null), K = t.useMemo(() => {
+    const a = {};
+    return (I || d).forEach((g) => {
+      const r = g.status;
+      a[r] || (a[r] = []), a[r].push(g);
+    }), a;
+  }, [d, I]), _ = t.useCallback(
+    (a) => {
+      const g = a.originalEvent.target;
+      if (g.closest("button,input,.k-link,.k-taskboard-preview-pane"))
+        return;
+      const r = Xe(g), T = D.current;
+      if (r && T) {
+        const b = r.type === X;
+        if (b && !g.closest(".k-taskboard-column-header"))
+          return;
+        const U = r.element.getBoundingClientRect(), V = T.getBoundingClientRect();
+        C.current = {
+          x: a.clientX - U.left + V.left,
+          y: a.clientY - U.top + V.top
+        };
+        const R = b ? o : d, le = b ? y : x, N = R.findIndex((re) => String(re.id) === r.id), q = R[N];
+        if (N === -1 || q.edit)
+          return;
+        const v = Ye(q);
+        v.isPlaceholder = !0;
+        const j = [...R];
+        j[N] = v, k.current = {
+          ...r,
+          index: N,
+          item: q,
+          width: U.width,
+          height: U.height
+        }, F({
+          top: a.clientY - C.current.y,
+          left: a.clientX - C.current.x
+        }), le(j);
+      }
+    },
+    [o, d]
+  ), z = t.useCallback(
+    (a) => {
+      const g = k.current, r = A.current && A.current.element || Y.current;
+      if (g && r) {
+        F({
+          top: a.clientY - C.current.y,
+          left: a.clientX - C.current.x
+        }), r.style.visibility = "hidden";
+        const T = document.elementFromPoint(a.clientX, a.clientY);
+        if (r.style.visibility = "", T && T.getAttribute(ze))
+          return;
+        const b = T && Xe(T);
+        if (b) {
+          let O;
+          const U = b.type === g.type, V = g.type === X, R = (V ? L : I) || [], le = V ? y : x;
+          if (V || U) {
+            if (O = Dt(g.id, b.id, R), O) {
+              const N = R[O.dragIndex], q = R[O.dropIndex], v = Ye(N);
+              V || (v.status = q.status);
+              const j = [...R];
+              j.splice(O.dragIndex, 1), j.splice(O.dropIndex, 0, v), g.index = O.dropIndex, le(j);
+            }
+          } else {
+            const N = R.findIndex((v) => String(v.id) === g.id), q = o.findIndex((v) => String(v.id) === b.id);
+            if (N !== -1 && q !== -1) {
+              const v = R[N], re = o[q].status;
+              if (K[re])
+                return;
+              v.status = re;
+              const se = [...R];
+              se.splice(N, 1), se.push(v), g.index = se.length - 1, le(se);
+            }
+          }
+        }
+      }
+    },
+    [L, I, o, K]
+  ), ge = t.useCallback(
+    () => {
+      const a = k.current;
+      if (u && a) {
+        const r = (a.type === X ? L : I) || [], T = r[a.index];
+        delete T.isPlaceholder;
+        const b = {
+          data: r,
+          type: a.type,
+          previousItem: a.item,
+          item: T
+        };
+        u.call(void 0, b);
+      }
+      k.current = null, C.current = null, x(null), y(null), F({ top: 0, left: 0 });
+    },
+    [L, I, u]
+  );
+  nt(P, {
+    onDragStart: _,
+    onDrag: z,
+    onDragEnd: ge
+  });
+  const E = k.current, ie = t.useCallback((a) => {
+    const r = {
+      data: [...d, a],
+      type: $,
+      previousItem: null,
+      item: a
+    };
+    u.call(void 0, r);
+  }, [u, d]), W = t.useCallback((a, g) => {
+    const r = d.slice(), T = d.indexOf(g);
+    T !== -1 && r.splice(T, 1, a);
+    const b = {
+      data: r,
+      type: $,
+      previousItem: g,
+      item: a
+    };
+    u.call(void 0, b);
+  }, [u, d]), m = t.useCallback((a) => {
+    const r = {
+      data: d.filter((T) => T !== a),
+      type: $,
+      previousItem: a,
+      item: null
+    };
+    u.call(void 0, r);
+  }, [u, d]), H = t.useCallback((a, g) => {
+    const r = o.slice(), T = r.indexOf(g);
+    T !== -1 && (a ? r.splice(T, 1, a) : r.splice(T, 1));
+    const b = {
+      data: r,
+      type: X,
+      previousItem: g,
+      item: a
+    };
+    u.call(void 0, b);
+  }, [u, o]);
+  return /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      id: c,
+      style: B,
+      ref: D,
+      className: ne("k-widget k-taskboard", s)
+    },
+    h,
+    /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-content", style: E ? { userSelect: "none" } : void 0 }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-columns-container", ref: P }, (L || o).map((a) => /* @__PURE__ */ t.createElement(
+      ae,
+      {
+        key: a.id,
+        tabIndex: e.tabIndex,
+        column: a,
+        tasks: K[a.status] || [],
+        dragTargetRef: k,
+        onTaskCreate: ie,
+        onTaskEdit: W,
+        onTaskDelete: m,
+        onColumnChange: H,
+        columnComponent: e.column || Oe,
+        cardComponent: e.card || de,
+        priorities: e.priorities
+      }
+    )))),
+    E && E.type === $ && /* @__PURE__ */ t.createElement(
+      oe,
+      {
+        elementRef: A,
+        style: {
+          position: "absolute",
+          width: E.width,
+          height: E.height,
+          top: M.top,
+          left: M.left,
+          zIndex: 10,
+          borderLeftColor: E.item.priority ? E.item.priority.color : E.item.color
+        },
+        task: E.item,
+        dragTargetRef: k,
+        cardComponent: e.card || de,
+        onDeleteTask: Ue,
+        showEditPane: Ue
+      }
+    ),
+    E && E.type === X && /* @__PURE__ */ t.createElement(
+      ae,
+      {
+        elementRef: Y,
+        style: {
+          position: "absolute",
+          width: E.width,
+          height: E.height,
+          top: M.top,
+          left: M.left,
+          zIndex: 10
+        },
+        cardComponent: e.card || de,
+        columnComponent: e.column || Oe,
+        column: E.item,
+        tasks: K[E.item.status],
+        priorities: e.priorities,
+        dragTargetRef: k,
+        onTaskDelete: m,
+        onColumnChange: H,
+        onTaskEdit: W,
+        onTaskCreate: ie
+      }
+    )
+  );
+});
+et.propTypes = {
+  columnData: S.array.isRequired,
+  taskData: S.array.isRequired
+};
+et.displayName = "KendoReactTaskBoard";
+const tt = (e) => {
+  const { className: n, style: o, children: s } = e;
+  return /* @__PURE__ */ t.createElement("div", { style: o, className: ne("k-taskboard-header", n) }, /* @__PURE__ */ t.createElement("div", { className: "k-taskboard-toolbar k-toolbar" }, s));
+};
+tt.propTypes = {
+  children: S.node
+};
+tt.displayName = "KendoReactTaskBoardToolbar";
+export {
+  et as TaskBoard,
+  je as TaskBoardAddCard,
+  de as TaskBoardCard,
+  Ze as TaskBoardCardBody,
+  Qe as TaskBoardCardHeader,
+  Oe as TaskBoardColumn,
+  Ge as TaskBoardColumnBody,
+  $e as TaskBoardColumnHeader,
+  me as TaskBoardConfirmDialog,
+  Ve as TaskBoardEditCard,
+  pe as TaskBoardPreviewDialog,
+  ce as TaskBoardTaskEditPane,
+  tt as TaskBoardToolbar,
+  Je as useTaskEditing
+};