@progress/kendo-react-taskboard 5.3.0-dev.202205041411

package/dist/es/TaskBoardColumnBase.js

@@ -0,0 +1,90 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, taskBoardEditColumnButton, taskBoardAddCardButton, taskBoardDeleteColumnButton, taskBoardDelColumnDialogMsg, taskBoardDelColumnDialogTitle, taskBoardDelColumnConfirmBtn, taskBoardDelColumnCancelBtn } from './messages';
+import { TASKBOARD_PLACEHOLDER } from './constants';
+import { TaskBoardColumnHeader } from './column/ColumnHeader';
+import { TaskBoardColumnBody } from './column/ColumnBody';
+import { TaskBoardConfirmDialog } from './TaskBoardConfirmDialog';
+import { TaskBoardEditCard } from './TaskBoardEditCard';
+import { TaskBoardAddCard } from './TaskBoardAddCard';
+import { TaskBoardCardBase } from './TaskBoardCardBase';
+/**
+ * Represents the TaskBoardColumnBase component.
+ */
+export var TaskBoardColumnBase = function (props) {
+    var _a;
+    var _b = React.useState(false), addCard = _b[0], setAddCard = _b[1];
+    var _c = React.useState(false), editCardPane = _c[0], setEditCardPane = _c[1];
+    var _d = React.useState(false), confirmColumnDeleteVisible = _d[0], setConfirmColumnDeleteVisible = _d[1];
+    var _e = React.useState(), taskToEdit = _e[0], setTaskToEdit = _e[1];
+    var dragTargetRef = props.dragTargetRef, column = props.column, onColumnChange = props.onColumnChange, tasks = props.tasks, elementRef = props.elementRef, style = props.style, onTaskCreate = props.onTaskCreate, onTaskEdit = props.onTaskEdit, onTaskDelete = props.onTaskDelete;
+    var localization = useLocalization();
+    var onTitleChange = React.useCallback(function (e) {
+        var newColumn = __assign({}, column, { title: e.value });
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onColumnEnterEdit = React.useCallback(function () {
+        var newColumn = __assign({}, column, { edit: true });
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onColumnExitEdit = React.useCallback(function () {
+        var newColumn = __assign({}, column, { edit: false });
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onConfirmColumnDelete = React.useCallback(function () {
+        var newColumn = null;
+        onColumnChange.call(undefined, newColumn, column);
+    }, [column, onColumnChange]);
+    var onColumnDelete = function () {
+        setConfirmColumnDeleteVisible(!confirmColumnDeleteVisible);
+    };
+    var showAddCardDialog = function () {
+        setAddCard(true);
+    };
+    var showEditCardPane = function (task) {
+        setEditCardPane(true);
+        setTaskToEdit(task);
+    };
+    var hideCloseModal = function () {
+        setAddCard(false);
+        setEditCardPane(false);
+    };
+    var onNewTask = React.useCallback(function (task) {
+        setAddCard(false);
+        onTaskCreate.call(undefined, __assign({}, task, { status: column.status }));
+    }, [onTaskCreate, column]);
+    var editTask = React.useCallback(function (edited, prevTask) {
+        setEditCardPane(false);
+        onTaskEdit.call(undefined, edited, prevTask);
+    }, [onTaskEdit]);
+    var deleteTask = React.useCallback(function (task) {
+        onTaskDelete.call(undefined, task);
+    }, [onTaskDelete]);
+    if (column.isPlaceholder && dragTargetRef && dragTargetRef.current) {
+        var width = dragTargetRef.current ? dragTargetRef.current.width : 0;
+        var height = dragTargetRef.current ? dragTargetRef.current.height : 0;
+        return (React.createElement("div", __assign({ style: { width: width, height: height }, className: 'k-taskboard-column k-taskboard-drag-placeholder' }, (_a = {}, _a[TASKBOARD_PLACEHOLDER] = true, _a))));
+    }
+    return (React.createElement(props.columnComponent, { column: props.column, tasks: tasks, priorities: props.priorities, style: Boolean(dragTargetRef) ? __assign({ overflow: 'visible' }, style) : style, tabIndex: props.tabIndex, elementRef: elementRef, dragTargetRef: dragTargetRef, onTaskCreate: onNewTask, onTaskEdit: editTask, onTaskDelete: deleteTask, card: props.cardComponent, header: TaskBoardColumnHeader, body: TaskBoardColumnBody, confirmDialog: TaskBoardConfirmDialog, editCardDialog: TaskBoardEditCard, addCardDialog: TaskBoardAddCard, onTitleChange: onTitleChange, onColumnEnterEdit: onColumnEnterEdit, onColumnExitEdit: onColumnExitEdit, onColumnConfirmDelete: onConfirmColumnDelete, onShowAddCardDialog: showAddCardDialog, onShowEditCardPane: showEditCardPane, onColumnDelete: onColumnDelete, onCloseDialog: hideCloseModal, showAddCard: addCard, showEditCard: editCardPane, showColumnConfirmDelete: confirmColumnDeleteVisible, editedTask: taskToEdit, confirmDialogMessage: localization.toLanguageString(taskBoardDelColumnDialogMsg, messages[taskBoardDelColumnDialogMsg]), confirmDialogTitle: localization.toLanguageString(taskBoardDelColumnDialogTitle, messages[taskBoardDelColumnDialogTitle]), confirmDialogConfirmButton: localization.toLanguageString(taskBoardDelColumnConfirmBtn, messages[taskBoardDelColumnConfirmBtn]), confirmDialogCancelButton: localization.toLanguageString(taskBoardDelColumnCancelBtn, messages[taskBoardDelColumnCancelBtn]), editButtonTitle: localization.toLanguageString(taskBoardEditColumnButton, messages[taskBoardEditColumnButton]), addButtonTitle: localization.toLanguageString(taskBoardAddCardButton, messages[taskBoardAddCardButton]), closeButtonTitle: localization.toLanguageString(taskBoardDeleteColumnButton, messages[taskBoardDeleteColumnButton]) }, tasks && tasks.map(function (task) {
+        return (React.createElement(TaskBoardCardBase, { key: task.id, tabIndex: props.tabIndex, task: task, disabled: Boolean(props.column.edit), onDeleteTask: function () { return deleteTask(task); }, showEditPane: function () { return showEditCardPane(task); }, dragTargetRef: props.dragTargetRef, style: { borderLeftColor: task.priority.color }, cardComponent: props.cardComponent }));
+    })));
+};
+var defaultProps = {};
+TaskBoardColumnBase.propTypes = {
+    column: PropTypes.object.isRequired,
+    taskMap: PropTypes.object
+};
+TaskBoardColumnBase.defaultProps = defaultProps;
+TaskBoardColumnBase.displayName = 'KendoReactTaskBoardColumn';

package/dist/es/TaskBoardConfirmDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardConfirmDialog component
+ */
+export interface TaskBoardConfirmDialogProps {
+    /**
+     * The dialog message.
+     */
+    dialogMessage: React.ReactNode;
+    /**
+     * The dialog title.
+     */
+    dialogTitle: string;
+    /**
+     * The dialog confirm button.
+     */
+    dialogConfirmButton: React.ReactNode;
+    /**
+     * The dialog cancel button.
+     */
+    dialogCancelButton: React.ReactNode;
+    /**
+     * Fires when the dialog is closed.
+     */
+    onClose: () => void;
+    /**
+     * Fires when the dialog is confirmed.
+     */
+    onConfirm: () => void;
+}
+/**
+ * Represents the TaskBoardConfirmDialog component.
+ */
+export declare const TaskBoardConfirmDialog: {
+    (props: TaskBoardConfirmDialogProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/TaskBoardConfirmDialog.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
+import { Button } from '@progress/kendo-react-buttons';
+/**
+ * Represents the TaskBoardConfirmDialog component.
+ */
+export var TaskBoardConfirmDialog = function (props) {
+    var onClose = props.onClose, onConfirm = props.onConfirm, dialogMessage = props.dialogMessage, dialogTitle = props.dialogTitle, dialogConfirmButton = props.dialogConfirmButton, dialogCancelButton = props.dialogCancelButton;
+    return (React.createElement(Dialog, { title: dialogTitle, closeIcon: false },
+        dialogMessage,
+        React.createElement(DialogActionsBar, { layout: 'end' },
+            React.createElement(Button, { themeColor: 'primary', onClick: onConfirm }, dialogConfirmButton),
+            React.createElement(Button, { onClick: onClose }, dialogCancelButton))));
+};
+TaskBoardConfirmDialog.propTypes = {
+    onClose: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    dialogMessage: PropTypes.string.isRequired,
+    dialogTitle: PropTypes.string.isRequired,
+    dialogConfirmButton: PropTypes.string.isRequired,
+    dialogCancelButton: PropTypes.string.isRequired
+};
+TaskBoardConfirmDialog.displayName = 'KendoReactTaskBoardConfirmDialog';

package/dist/es/TaskBoardEditCard.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TaskBoardTaskModel } from './TaskBoard';
+import { TaskBoardAddCardProps } from './TaskBoardAddCard';
+/**
+ * Represents the props of the TaskBoardEditCard component
+ */
+export interface TaskBoardEditCardProps extends TaskBoardAddCardProps {
+    /**
+     * Determines the task of the TaskBoardEditCard component.
+     */
+    task: TaskBoardTaskModel;
+}
+/**
+ * Represents the TaskBoardEditCard component.
+ */
+export declare const TaskBoardEditCard: {
+    (props: TaskBoardEditCardProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/es/TaskBoardEditCard.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, taskBoardEditCardPaneTitle, taskBoardEditCardPaneSaveBtn, taskBoardEditPaneCancelBtn, taskBoardEditPaneTitleLabel, taskBoardEditPaneDescriptionLabel, taskBoardEditPanePriorityLabel, taskBoardAddCardTitleLabel, taskBoardAddCardDescriptionLabel, taskBoardAddCardPriorityLabel } from './messages';
+import { useTaskEditing } from './hooks/taskEditing';
+/**
+ * Represents the TaskBoardEditCard component.
+ */
+export var TaskBoardEditCard = function (props) {
+    var _a = useTaskEditing(props), onTitleChange = _a.onTitleChange, title = _a.title, onDescriptionChange = _a.onDescriptionChange, description = _a.description, onPriorityChange = _a.onPriorityChange, priority = _a.priority, onSave = _a.onSave;
+    var localization = useLocalization();
+    return (React.createElement(props.editPane, { header: localization.toLanguageString(taskBoardEditCardPaneTitle, messages[taskBoardEditCardPaneTitle]) + props.task.title, titleInputTitle: localization.toLanguageString(taskBoardAddCardTitleLabel, messages[taskBoardAddCardTitleLabel]), descriptionInputTitle: localization.toLanguageString(taskBoardAddCardDescriptionLabel, messages[taskBoardAddCardDescriptionLabel]), priorityDropDownTitle: localization.toLanguageString(taskBoardAddCardPriorityLabel, messages[taskBoardAddCardPriorityLabel]), task: props.task, saveButton: localization.toLanguageString(taskBoardEditCardPaneSaveBtn, messages[taskBoardEditCardPaneSaveBtn]), cancelButton: localization.toLanguageString(taskBoardEditPaneCancelBtn, messages[taskBoardEditPaneCancelBtn]), priorities: props.priorities, titleLabel: localization.toLanguageString(taskBoardEditPaneTitleLabel, messages[taskBoardEditPaneTitleLabel]), descriptionLabel: localization.toLanguageString(taskBoardEditPaneDescriptionLabel, messages[taskBoardEditPaneDescriptionLabel]), priorityLabel: localization.toLanguageString(taskBoardEditPanePriorityLabel, messages[taskBoardEditPanePriorityLabel]), onSave: onSave, onClose: props.onClose, onTitleChange: onTitleChange, title: title, onDescriptionChange: onDescriptionChange, description: description, onPriorityChange: onPriorityChange, priority: priority }));
+};
+var defaultProps = {};
+TaskBoardEditCard.propTypes = {};
+TaskBoardEditCard.defaultProps = defaultProps;
+TaskBoardEditCard.displayName = 'KendoReactTaskBoardEditCard';

package/dist/es/TaskBoardTaskEditPane.d.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
+import { InputChangeEvent } from '@progress/kendo-react-inputs';
+import { TaskBoardPriority, TaskBoardTaskModel } from './TaskBoard';
+/**
+ * Represents the props of the TaskBoardTaskEditPane component
+ */
+export interface TaskBoardTaskEditPaneProps {
+    /**
+     * Represents the rendered header of the TaskBoardTaskEditPane.
+     */
+    header: string;
+    /**
+     * Represents the save button of the TaskBoardTaskEditPane.
+     */
+    saveButton: React.ReactNode;
+    /**
+     * Represents the cancel button of the TaskBoardTaskEditPane.
+     */
+    cancelButton: React.ReactNode;
+    /**
+     * Represents the titleInput title of the TaskBoardTaskEditPane.
+     */
+    titleInputTitle: string;
+    /**
+     * Represents the descriptionInput title of the TaskBoardTaskEditPane.
+     */
+    descriptionInputTitle: string;
+    /**
+     * Represents the priorityDropDownTitle title of the TaskBoardTaskEditPane.
+     */
+    priorityDropDownTitle: string;
+    /**
+     * Represents the title label of the TaskBoardTaskEditPane.
+     */
+    titleLabel: React.ReactNode;
+    /**
+     * Represents the description label of the TaskBoardTaskEditPane.
+     */
+    descriptionLabel: React.ReactNode;
+    /**
+     * Represents the priority label of the TaskBoardTaskEditPane.
+     */
+    priorityLabel: React.ReactNode;
+    /**
+     * Represents the rendered task of the TaskBoardTaskEditPane.
+     */
+    task?: TaskBoardTaskModel;
+    /**
+     * Determines the priority.
+     */
+    priority: TaskBoardPriority;
+    /**
+     * Determines the rendered priorities.
+     */
+    priorities: TaskBoardPriority[];
+    /**
+     * Represents the title of the TaskBoardTaskEditPane.
+     */
+    title: string;
+    /**
+     * The rendered description.
+     */
+    description: string;
+    /**
+     * Fires on `onSave` event.
+     */
+    onSave: () => void;
+    /**
+     * Fires on `onClose` event.
+     */
+    onClose: () => void;
+    /**
+     * Fires when a title is changed.
+     */
+    onTitleChange: (event: InputChangeEvent) => void;
+    /**
+     * Fires when a description is changed.
+     */
+    onDescriptionChange: (event: InputChangeEvent) => void;
+    /**
+     * Fires when a priority has been changed.
+     */
+    onPriorityChange: (event: DropDownListChangeEvent) => void;
+}
+/**
+ * Represents the TaskBoardTaskEditPane component.
+ */
+export declare const TaskBoardTaskEditPane: {
+    (props: TaskBoardTaskEditPaneProps): JSX.Element;
+    defaultProps: {};
+    displayName: string;
+};

package/dist/es/TaskBoardTaskEditPane.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { DropDownList } from '@progress/kendo-react-dropdowns';
+import { Button } from '@progress/kendo-react-buttons';
+import { Input } from '@progress/kendo-react-inputs';
+import { Label } from '@progress/kendo-react-labels';
+import { FieldWrapper } from '@progress/kendo-react-form';
+import { itemRender, valueRender } from './utils';
+/**
+ * Represents the TaskBoardTaskEditPane component.
+ */
+export var TaskBoardTaskEditPane = function (props) {
+    return (React.createElement("div", { className: 'k-taskboard-pane k-taskboard-edit-pane' },
+        React.createElement("div", { className: 'k-taskboard-pane-header' },
+            React.createElement("div", { className: 'k-taskboard-pane-header-text' }, props.header),
+            React.createElement("span", { className: "k-spacer" }),
+            React.createElement("div", { className: "k-taskboard-pane-header-actions" },
+                React.createElement(Button, { icon: 'close', fillMode: "flat", onClick: props.onClose }))),
+        React.createElement("div", { className: "k-taskboard-pane-content" },
+            React.createElement("div", { role: "form", "data-role": "form", className: "k-form" },
+                React.createElement(FieldWrapper, null,
+                    React.createElement(Label, { editorId: 'title' }, props.titleLabel),
+                    React.createElement(Input, { id: 'title', onChange: props.onTitleChange, value: props.title, title: props.titleInputTitle })),
+                React.createElement(FieldWrapper, null,
+                    React.createElement(Label, { editorId: 'description' }, props.descriptionLabel),
+                    React.createElement(Input, { id: 'description', onChange: props.onDescriptionChange, value: props.description, title: props.descriptionInputTitle })),
+                React.createElement(FieldWrapper, null,
+                    React.createElement(Label, { editorId: 'priority' }, props.priorityLabel),
+                    React.createElement(DropDownList, { id: 'priority', data: props.priorities, value: props.priority, onChange: props.onPriorityChange, itemRender: itemRender, valueRender: valueRender, textField: "priority", dataItemKey: "priority", title: props.priorityDropDownTitle })))),
+        React.createElement("div", { className: "k-taskboard-pane-actions k-actions k-hstack k-justify-content-end" },
+            React.createElement(Button, { onClick: props.onClose }, props.cancelButton),
+            React.createElement(Button, { themeColor: 'primary', onClick: props.onSave, disabled: !props.title || !props.description }, props.saveButton))));
+};
+var defaultProps = {};
+TaskBoardTaskEditPane.propTypes = {};
+TaskBoardTaskEditPane.defaultProps = defaultProps;
+TaskBoardTaskEditPane.displayName = 'KendoReactTaskBoardEditPane';

package/dist/es/TaskBoardToolbar.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Represents the props of the TaskBoardToolbar component
+ */
+export interface TaskBoardToolbarProps {
+    /**
+     * The React elements that will be rendered inside the toolbar of the TaskBoard.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the TaskBoardToolbar element.
+     */
+    className?: string | Array<string>;
+    /**
+     * Represents the styles that are applied to the TaskBoardToolbar.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Represents the TaskBoardToolbar component.
+ */
+export declare const TaskBoardToolbar: {
+    (props: TaskBoardToolbarProps): JSX.Element;
+    defaultProps: TaskBoardToolbarProps;
+    displayName: string;
+};

package/dist/es/TaskBoardToolbar.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { classNames } from '@progress/kendo-react-common';
+/**
+ * Represents the TaskBoardToolbar component.
+ */
+export var TaskBoardToolbar = function (props) {
+    var className = props.className, style = props.style, children = props.children;
+    return (React.createElement("div", { style: style, className: classNames('k-taskboard-header', className) },
+        React.createElement("div", { className: 'k-taskboard-toolbar k-toolbar' }, children)));
+};
+var defaultProps = {};
+TaskBoardToolbar.propTypes = {
+    children: PropTypes.node
+};
+TaskBoardToolbar.defaultProps = defaultProps;
+TaskBoardToolbar.displayName = 'KendoReactTaskBoardToolbar';

package/dist/es/card/Card.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { CardProps, CardHandle, MenuSelectEvent } from '@progress/kendo-react-layout';
+import { TaskBoardConfirmDialogProps } from '../TaskBoardConfirmDialog';
+import { TaskBoardCardHeaderProps } from './CardHeader';
+import { TaskBoardCardBodyProps } from './CardBody';
+import { TaskBoardPreviewDialogProps } from './PreviewDialog';
+import { TaskBoardTaskModel } from '../TaskBoard';
+import { Popup } from '@progress/kendo-react-popup';
+/**
+ * Represents the props of the TaskBoardCard component.
+ */
+export interface TaskBoardCardProps {
+    /**
+     * The rendered task.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * The applied styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the `tabIndex` that will be added to the TaskBoard Card element.
+     */
+    tabIndex?: number;
+    /**
+     * The disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the CardHandle reference.
+     */
+    elementRef?: React.RefObject<CardHandle>;
+    /**
+     * Determines the menu visibility.
+     */
+    showMenu: boolean;
+    /**
+     * Determines the visibility of the delete and confirm items.
+     */
+    showDeleteConfirm: boolean;
+    /**
+     * Determines the visibility of the previous pane.
+     */
+    showTaskPreviewPane: boolean;
+    /**
+     * Represents the menu items.
+     */
+    menuItems: any[];
+    /**
+     * Represents the popup reference.
+     */
+    popupRef: React.RefObject<Popup>;
+    /**
+     * Represents the confirm dialog message of the TaskBoardCard.
+     */
+    confirmDialogMessage: React.ReactNode;
+    /**
+     * Represents the confirm dialog title of the TaskBoardCard.
+     */
+    confirmDialogTitle: string;
+    /**
+     * Represents the confirm dialog confirm button.
+     */
+    confirmDialogConfirmButton: React.ReactNode;
+    /**
+     * Represents the cancel dialog confirm button.
+     */
+    confirmDialogCancelButton: React.ReactNode;
+    /**
+     * Represents the preview dialog priority label.
+     */
+    previewDialogPriorityLabel: string;
+    /**
+     * Represents the preview dialog delete node.
+     */
+    previewDialogDelete: React.ReactNode;
+    /**
+     * Represents the preview dialog edit node.
+     */
+    previewDialogEdit: React.ReactNode;
+    /**
+     * Fires on show of the preview pane.
+     */
+    onShowPreviewPane: () => void;
+    /**
+     * Fires on menu item selection.
+     */
+    onMenuItemSelect: (event: MenuSelectEvent) => void;
+    /**
+     * Fires when the menu is shown.
+     */
+    onShowMenu: () => void;
+    /**
+     * Fires when the menu is hidden.
+     */
+    onHideMenu: () => void;
+    /**
+     * Fires on blur of the menu button.
+     */
+    onMenuButtonBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when task is deleted.
+     */
+    onTaskDelete: () => void;
+    /**
+     * Fires when task is edited.
+     */
+    onTaskEdit: () => void;
+    /**
+     * Fires on close/confirm dialog.
+     */
+    onCloseConfirmDialog: () => void;
+    /**
+     * Represents the Card component.
+     */
+    card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<CardHandle>>;
+    /**
+     * Represents the TaskBoardCardHeader component.
+     */
+    cardHeader: React.ComponentType<TaskBoardCardHeaderProps>;
+    /**
+     * Represents the TaskBoardCardBody component.
+     */
+    cardBody: React.ComponentType<TaskBoardCardBodyProps>;
+    /**
+     * Represents the TaskBoardConfirmDialog component.
+     */
+    confirmDialog: React.ComponentType<TaskBoardConfirmDialogProps>;
+    /**
+     * Represents the TaskBoardPreviewDialog component.
+     */
+    previewDialog: React.ComponentType<TaskBoardPreviewDialogProps>;
+}
+/**
+ * Represents the TaskBoardCard component.
+ */
+export declare const TaskBoardCard: {
+    (props: TaskBoardCardProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/card/Card.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+import { TASKBOARD_ITEM_ID, TASKBOARD_ITEM_TYPE, TASKBOARD_TASK } from '../constants';
+/**
+ * Represents the TaskBoardCard component.
+ */
+export var TaskBoardCard = function (props) {
+    var _a;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(props.card, __assign({ key: String(props.task.id), ref: props.elementRef, style: props.style, className: classNames('k-taskboard-card k-cursor-move k-taskboard-card-category', {
+                'k-disabled': props.disabled
+            }) }, (_a = {},
+            _a[TASKBOARD_ITEM_TYPE] = TASKBOARD_TASK,
+            _a[TASKBOARD_ITEM_ID] = props.task.id,
+            _a.tabIndex = props.tabIndex,
+            _a)),
+            React.createElement(props.cardHeader, { showMenu: props.showMenu, menuItems: props.menuItems, popupRef: props.popupRef, title: props.task.title, task: props.task, onShowPreviewPane: props.onShowPreviewPane, onShowMenu: props.onShowMenu, onHideMenu: props.onHideMenu, onMenuButtonBlur: props.onMenuButtonBlur, onMenuItemSelect: props.onMenuItemSelect }),
+            React.createElement(props.cardBody, { task: props.task }, props.task.description)),
+        props.showDeleteConfirm && (React.createElement(props.confirmDialog, { onConfirm: props.onTaskDelete, onClose: props.onCloseConfirmDialog, dialogMessage: props.confirmDialogMessage, dialogTitle: props.confirmDialogTitle, dialogConfirmButton: props.confirmDialogConfirmButton, dialogCancelButton: props.confirmDialogCancelButton })),
+        props.showTaskPreviewPane && (React.createElement(props.previewDialog, { title: props.task.title, description: props.task.description, priorityLabel: props.previewDialogPriorityLabel, delete: props.previewDialogDelete, edit: props.previewDialogEdit, onShowTaskPreviewPane: props.onShowPreviewPane, onDeleteTask: props.onTaskDelete, onTaskEdit: props.onTaskEdit, priority: props.task.priority }))));
+};
+TaskBoardCard.displayName = 'KendoReactTaskBoardCard';

package/dist/es/card/CardBody.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardCardBody component.
+ */
+export interface TaskBoardCardBodyProps {
+    /**
+     * Determines the children nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Determines the TaskBoardTask.
+     */
+    task: TaskBoardTaskModel;
+}
+/**
+ * Represents the TaskBoardCardBody component.
+ */
+export declare const TaskBoardCardBody: {
+    (props: TaskBoardCardBodyProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/card/CardBody.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { CardBody } from '@progress/kendo-react-layout';
+/**
+ * Represents the TaskBoardCardBody component.
+ */
+export var TaskBoardCardBody = function (props) {
+    return (React.createElement(CardBody, null, props.children));
+};
+TaskBoardCardBody.displayName = 'KendoReactTaskBoardCardBody';

package/dist/es/card/CardHeader.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { MenuSelectEvent } from '@progress/kendo-react-layout';
+import { Popup } from '@progress/kendo-react-popup';
+import { TaskBoardTaskModel } from '../TaskBoard';
+/**
+ * Represents the props of the TaskBoardCardHeader component.
+ */
+export interface TaskBoardCardHeaderProps {
+    /**
+     * Determines the visibility of the show menu.
+     */
+    showMenu: boolean;
+    /**
+     * Represents the menu items.
+     */
+    menuItems: any[];
+    /**
+     * Specifies the popup reference.
+     */
+    popupRef: React.RefObject<Popup>;
+    /**
+     * The rendered title.
+     */
+    title: React.ReactNode;
+    /**
+     * The rendered task.
+     */
+    task: TaskBoardTaskModel;
+    /**
+     * Fires when the preview pane is shown.
+     */
+    onShowPreviewPane: () => void;
+    /**
+     * Fires when the menu is shown.
+     */
+    onShowMenu: () => void;
+    /**
+     * Fires when the menu is hidden.
+     */
+    onHideMenu: () => void;
+    /**
+     * Fires on blur of the menu button.
+     */
+    onMenuButtonBlur: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when menu item is selected.
+     */
+    onMenuItemSelect: (event: MenuSelectEvent) => void;
+}
+/**
+ * Represents the TaskBoardCardHeader component.
+ */
+export declare const TaskBoardCardHeader: {
+    (props: TaskBoardCardHeaderProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/card/CardHeader.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { CardHeader, Menu } from '@progress/kendo-react-layout';
+import { Popup } from '@progress/kendo-react-popup';
+/**
+ * Represents the TaskBoardCardHeader component.
+ */
+export var TaskBoardCardHeader = function (props) {
+    var buttonRef = React.useRef();
+    return (React.createElement(CardHeader, { className: "k-hbox" },
+        React.createElement("span", { className: 'k-card-title k-link', onClick: props.onShowPreviewPane }, props.title),
+        React.createElement("span", { className: 'k-spacer' }),
+        React.createElement("div", { className: 'k-card-header-actions' },
+            React.createElement(Button, { fillMode: "flat", icon: "more-vertical", ref: buttonRef, onClick: props.showMenu ? props.onHideMenu : props.onShowMenu, onBlur: props.onMenuButtonBlur }),
+            React.createElement(Popup, { anchor: buttonRef.current && buttonRef.current.element, show: props.showMenu, ref: props.popupRef },
+                React.createElement(Menu, { vertical: true, onSelect: props.onMenuItemSelect, items: props.menuItems, className: 'k-context-menu' })))));
+};
+TaskBoardCardHeader.displayName = 'KendoReactTaskBoardCardHeader';