@progress/kendo-react-orgchart 5.20.0-dev.202310061256

package/dist/npm/server/ServerOrgChart.js

@@ -0,0 +1,196 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerOrgChart = void 0;
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var ServerOrgChartNode_1 = require("./ServerOrgChartNode");
+var consts_1 = require("../utils/consts");
+var setDataByGroups = function (_a) {
+    var dataByGroups = _a.dataByGroups, _b = _a.data, data = _b === void 0 ? [] : _b, cardWidth = _a.cardWidth, childrenField = _a.childrenField, idField = _a.idField, expandField = _a.expandField, hasChildrenField = _a.hasChildrenField, groupField = _a.groupField, _c = _a.level, level = _c === void 0 ? 1 : _c, _d = _a.parentId, parentId = _d === void 0 ? 0 : _d;
+    data.forEach(function (element) {
+        var items = element[childrenField];
+        var expanded = element[expandField];
+        if (expanded && items && items.length) {
+            var hasChildren = items.some(function (it) { return it[childrenField] && it[childrenField].length
+                || (hasChildrenField && it[hasChildrenField]); });
+            var orientation_1 = hasChildren ? 'horizontal' : 'vertical';
+            var width = hasChildren ? null : cardWidth;
+            dataByGroups.push({
+                ids: [element[idField]],
+                items: items,
+                level: level,
+                parentId: parentId,
+                hasChildren: hasChildren,
+                orientation: orientation_1,
+                width: width
+            });
+            setDataByGroups({
+                dataByGroups: dataByGroups,
+                data: element[childrenField],
+                childrenField: childrenField,
+                cardWidth: cardWidth,
+                idField: idField,
+                expandField: expandField,
+                hasChildrenField: hasChildrenField,
+                groupField: groupField,
+                level: level + 1,
+                parentId: element[idField]
+            });
+        }
+    });
+};
+var setGroupsWidths = function (dataByGroups, cardWidth) {
+    var nodeWidth = cardWidth || consts_1.NODE_WIDTH;
+    var groupsFromLeavesToRoot = dataByGroups.sort(function (a, b) { return b.level - a.level; });
+    groupsFromLeavesToRoot.forEach(function (group) {
+        if (!group.width) {
+            var childGroups = groupsFromLeavesToRoot.filter(function (gr) { return group.ids.includes(gr.parentId); });
+            var maxChildGroupWidth = childGroups.length
+                ? Math.max.apply(Math, childGroups.map(function (chg) { return chg.width || 0; })) : nodeWidth;
+            var subItemsLength = group.orientation === 'horizontal' ? group.items.length : 1;
+            var newGroupWidth = maxChildGroupWidth * subItemsLength + consts_1.HORIZONTAL_GAP * (subItemsLength - 1);
+            group.width = newGroupWidth;
+        }
+    });
+};
+var setGroupsLeft = function (dataByGroups, childrenField, idField) {
+    var groupsFromRootToLeaves = dataByGroups.sort(function (a, b) { return a.level - b.level; });
+    groupsFromRootToLeaves.forEach(function (group) {
+        if (group.level === 0) {
+            return;
+        }
+        var parentGroup = groupsFromRootToLeaves.find(function (gr) { return gr.ids.includes(group.parentId); });
+        var groupIndex = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items.findIndex(function (g) { return group.ids.includes(g[idField]); })) || 0;
+        var subLinks = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items) || [];
+        var subLinkWidth = parentGroup.width
+            ? (parentGroup.width - ((subLinks.length - 1) * consts_1.HORIZONTAL_GAP)) / subLinks.length
+            : 0;
+        if (!group.left) {
+            var newLeft_1 = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.left) || 0;
+            subLinks.forEach(function (_subG, index) {
+                if (index < groupIndex) {
+                    newLeft_1 += subLinkWidth + consts_1.HORIZONTAL_GAP;
+                }
+            });
+            group.left = newLeft_1;
+        }
+        var parentWidth = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.width) || 0;
+        var parentGroupItems = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items.length) || 1;
+        var newWidth = ((parentWidth) - ((parentGroupItems - 1) * consts_1.HORIZONTAL_GAP)) / parentGroupItems;
+        group.width = newWidth;
+        var childLineWidths = parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items.map(function (subitem) {
+            var groupNodesCount = subitem[childrenField] ? subitem[childrenField].length : 0;
+            var subItem = groupsFromRootToLeaves.find(function (gr) { return gr.ids.includes(subitem[idField]); });
+            var subItemWidth = (subItem === null || subItem === void 0 ? void 0 : subItem.width) || 0;
+            if ((subItem === null || subItem === void 0 ? void 0 : subItem.orientation) === 'vertical' || groupNodesCount === 0 || !subitem.expanded) {
+                return 0;
+            }
+            return subItemWidth - ((subItemWidth - (groupNodesCount - 1) * consts_1.HORIZONTAL_GAP)) / (groupNodesCount);
+        });
+        if (parentGroup) {
+            parentGroup.childLineWidths = childLineWidths;
+        }
+    });
+};
+var setGroupsTop = function (dataByGroups, cardHeight, verticalLine) {
+    var nodeHeight = cardHeight || consts_1.NODE_HEIGHT;
+    var vLineHeight = verticalLine || consts_1.VERTICAL_LINE;
+    dataByGroups.forEach(function (group) {
+        var level = group.level;
+        var newTop = ((nodeHeight + vLineHeight) * level) + (consts_1.VERTICAL_LINE * (level ? level - 1 : 0)) -
+            ((vLineHeight - consts_1.VERTICAL_LINE) * (level ? 1 : 0));
+        group.top = newTop;
+    });
+};
+var getHeight = function (dataByGroups, cardHeight, verticalLine) {
+    var nodeHeight = cardHeight || consts_1.NODE_HEIGHT;
+    var vLineHeight = verticalLine || consts_1.VERTICAL_LINE;
+    var newHeight = Math.max.apply(Math, dataByGroups.map(function (group) {
+        var top = group.top || 0;
+        var itemsLength = group.items.length;
+        var height = group.orientation === 'horizontal'
+            ? nodeHeight + vLineHeight + vLineHeight
+            : itemsLength * (nodeHeight + vLineHeight);
+        return top + height;
+    }));
+    return newHeight;
+};
+/**
+ * @hidden
+ */
+var ServerOrgChart = function (props) {
+    var defaultProps = {
+        width: '100%',
+        data: [],
+        ariaLabel: 'Org Chart',
+        idField: 'id',
+        childrenField: 'items',
+        avatarField: 'avatar',
+        titleField: 'title',
+        subTitleField: 'subtitle',
+        expandField: 'expanded'
+    };
+    var _a = __assign(__assign({}, defaultProps), props), id = _a.id, width = _a.width, data = _a.data, groupField = _a.groupField, cardWidth = _a.cardWidth, cardHeight = _a.cardHeight, verticalLine = _a.verticalLine, idField = _a.idField, childrenField = _a.childrenField, hasChildrenField = _a.hasChildrenField, expandField = _a.expandField, avatarField = _a.avatarField, titleField = _a.titleField, subTitleField = _a.subTitleField, ariaLabel = _a.ariaLabel, itemRender = _a.itemRender, height = _a.height;
+    var dataByGroups = [{
+            items: data,
+            level: 0,
+            hasChildren: true,
+            orientation: 'horizontal',
+            ids: [0],
+            parentId: null,
+            width: null
+        }];
+    setDataByGroups({
+        dataByGroups: dataByGroups,
+        data: data,
+        cardWidth: cardWidth,
+        expandField: expandField,
+        hasChildrenField: hasChildrenField,
+        childrenField: childrenField,
+        idField: idField,
+        groupField: groupField
+    });
+    setGroupsWidths(dataByGroups, cardWidth);
+    setGroupsLeft(dataByGroups, childrenField, idField);
+    setGroupsTop(dataByGroups, cardHeight, verticalLine);
+    var calculatedHeight = getHeight(dataByGroups, cardHeight, verticalLine);
+    return (React.createElement("div", { className: "k-orgchart-container", style: { width: width, height: height || calculatedHeight } }, dataByGroups.map(function (group) {
+        var _a, _b;
+        var level = group.level;
+        var groupInnerItems = group.items;
+        var justifyContent = level === 0 ? 'center' : 'around';
+        var groupOrientation = group.orientation;
+        return (React.createElement("div", { role: level === 0 ? 'tree' : 'group', id: id + '-' + level + '-' + group.ids[0], "aria-label": level === 0 ? ariaLabel : undefined, "aria-orientation": level === 0 ? groupOrientation : undefined, key: group.ids[0] + '_' + level, className: (0, kendo_react_common_1.classNames)('k-orgchart-group', "k-orgchart-level-".concat(level), 'k-pos-absolute', (_a = {},
+                _a["k-".concat(kendo_react_common_1.kendoThemeMaps.orientationMap[groupOrientation])] = groupOrientation,
+                _a["k-justify-content-".concat(justifyContent)] = justifyContent,
+                _a)), style: {
+                width: group.width || '100%',
+                left: group.left,
+                top: group.top
+            } }, groupInnerItems.length > 0 &&
+            React.createElement("div", { role: "group", style: { width: '100%' }, className: (0, kendo_react_common_1.classNames)('k-orgchart-node-container', 'k-justify-content-around', (_b = {},
+                    _b["k-".concat(kendo_react_common_1.kendoThemeMaps.orientationMap[group.orientation])] = group.orientation,
+                    _b)) }, groupInnerItems.map(function (node, index) {
+                var hasChildren = node[childrenField] && node[childrenField].length
+                    || (hasChildrenField && node[hasChildrenField]);
+                var hasDownLine = hasChildren || (group.orientation === 'vertical' && index !== groupInnerItems.length - 1);
+                var hasVertLine = group.orientation === 'vertical' && index !== 0 ? 0 : verticalLine || consts_1.VERTICAL_LINE;
+                var maxSubGroupWidth = group.childLineWidths ? Math.max.apply(Math, group.childLineWidths) : undefined;
+                var expandedNode = node[expandField];
+                return (React.createElement(ServerOrgChartNode_1.ServerOrgChartNode, { id: id + '-' + (level + 1) + '-' + node[idField], style: { width: maxSubGroupWidth }, itemRender: itemRender, cardHeight: cardHeight, cardWidth: cardWidth, verticalLine: hasVertLine, key: index, level: level, avatar: node[avatarField], title: node[titleField], subtitle: node[subTitleField], line: hasDownLine, expanded: expandedNode, node: node, childLineWidth: (hasChildren && expandedNode && group.orientation === 'horizontal') ? group.childLineWidths[index] : 0, plus: hasChildren }, node.text));
+            }))));
+    })));
+};
+exports.ServerOrgChart = ServerOrgChart;
+exports.ServerOrgChart.displayName = 'KendoServerOrgChart';

package/dist/npm/server/ServerOrgChartGroup.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface OrgChartGroupTitleProps {
+    /**
+     * The styles that are applied to the OrgChart group title.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The default class that is applied to the OrgChart group title.
+     */
+    className?: string;
+    /**
+     * The default title that are passed to the OrgChart group.
+     */
+    title?: string;
+    /**
+     * The collection of inner items of the group.
+     */
+    items?: any[];
+    /**
+     * The level of the group.
+     */
+    level?: number;
+    /**
+     * The expanded state of the group.
+     */
+    expanded?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface OrgChartGroupSubtitleProps {
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The default class that is applied to the OrgChart group title.
+     */
+    className?: string;
+    /**
+     * The default subtitle that are passed to the OrgChart group.
+     */
+    subtitle?: string;
+    /**
+     * The collection of inner items of the group.
+     */
+    items?: any[];
+    /**
+     * The level of the group.
+     */
+    level?: number;
+    /**
+     * The expanded state of the group.
+     */
+    expanded?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ServerOrgChartGroupProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional classes to the OrgChart.
+     */
+    className?: string;
+    id?: string;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    title?: string;
+    subtitle?: string;
+    line?: boolean;
+    plus?: boolean;
+    focus?: boolean;
+    expanded?: boolean;
+    nodes?: any[];
+    level: number;
+    groupTitleHeight?: number;
+    groupSubtitleHeight?: number;
+    childLineWidth?: number;
+    verticalLine?: number;
+    orientation?: 'horizontal' | 'vertical';
+    groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
+    groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
+}
+/**
+ * @hidden
+ */
+export declare const ServerOrgChartGroup: React.FunctionComponent<ServerOrgChartGroupProps>;

package/dist/npm/server/ServerOrgChartGroup.js

@@ -0,0 +1,63 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerOrgChartGroup = void 0;
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var ExpandButton_1 = require("../client/ExpandButton");
+var OrgChartGroupContainer_1 = require("../client/OrgChartGroupContainer");
+var consts_1 = require("../utils/consts");
+var ORGCHARTGROUP_CLASSNAME = 'k-orgchart-node-group';
+var ORGCHART_NODE_GROUP_TITLE_CLASSNAME = 'k-orgchart-node-group-title';
+var ORGCHART_NODE_GROUP_SUBTITLE_CLASSNAME = 'k-orgchart-node-group-subtitle';
+/**
+ * @hidden
+ */
+var ServerOrgChartGroup = function (props) {
+    var _a;
+    var defaultProps = {
+        orientation: 'horizontal'
+    };
+    var _b = __assign(__assign({}, defaultProps), props), id = _b.id, title = _b.title, subtitle = _b.subtitle, line = _b.line, plus = _b.plus, focus = _b.focus, level = _b.level, verticalLine = _b.verticalLine, childLineWidth = _b.childLineWidth, orientation = _b.orientation, expanded = _b.expanded, nodes = _b.nodes, groupTitleHeight = _b.groupTitleHeight, groupSubtitleHeight = _b.groupSubtitleHeight, groupTitleRender = _b.groupTitleRender, groupSubtitleRender = _b.groupSubtitleRender, other = __rest(_b, ["id", "title", "subtitle", "line", "plus", "focus", "level", "verticalLine", "childLineWidth", "orientation", "expanded", "nodes", "groupTitleHeight", "groupSubtitleHeight", "groupTitleRender", "groupSubtitleRender"]);
+    var TitleRender = groupTitleRender;
+    var SubtitleRender = groupSubtitleRender;
+    var titleStyle = { height: groupTitleHeight || consts_1.GROUP_TITLE_HEIGHT };
+    var subtitleStyle = { height: groupSubtitleHeight || consts_1.GROUP_SUBTITLE_HEIGHT };
+    return (React.createElement("div", __assign({}, other, { className: (0, kendo_react_common_1.classNames)(props.className, ORGCHARTGROUP_CLASSNAME, 'k-vstack', 'k-align-items-center') }),
+        level !== 0 && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top", style: { height: verticalLine } }),
+        React.createElement(OrgChartGroupContainer_1.OrgChartGroupContainer, { nodes: nodes, "aria-expanded": !!expanded, "aria-keyshortcuts": "Enter", "aria-level": level + 1, "aria-owns": id },
+            TitleRender
+                ? React.createElement(TitleRender, { style: titleStyle, className: ORGCHART_NODE_GROUP_TITLE_CLASSNAME, title: title, items: nodes, level: level, expanded: expanded })
+                : React.createElement("div", { className: ORGCHART_NODE_GROUP_TITLE_CLASSNAME, style: titleStyle }, title),
+            SubtitleRender
+                ? React.createElement(SubtitleRender, { style: subtitleStyle, className: ORGCHART_NODE_GROUP_SUBTITLE_CLASSNAME, subtitle: subtitle, items: nodes, level: level, expanded: expanded })
+                : React.createElement("div", { className: ORGCHART_NODE_GROUP_SUBTITLE_CLASSNAME, style: subtitleStyle }, subtitle),
+            React.createElement("div", { role: "group", style: { width: '100%' }, className: (0, kendo_react_common_1.classNames)('k-orgchart-node-container', 'k-justify-content-around', (_a = {},
+                    _a["k-".concat(kendo_react_common_1.kendoThemeMaps.orientationMap[orientation] || orientation)] = orientation,
+                    _a)) }, props.children)),
+        line && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        plus && React.createElement(ExpandButton_1.ExpandButton, { expanded: expanded, nodes: nodes }),
+        plus && !!childLineWidth && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: childLineWidth, marginTop: -15 } })));
+};
+exports.ServerOrgChartGroup = ServerOrgChartGroup;

package/dist/npm/server/ServerOrgChartNode.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { OrgChartActionEvent, OrgChartExpandChangeEvent } from '../main';
+/**
+ * The props that are passed to the itemRender component.
+ */
+export interface OrgChartItemRenderProps {
+    /**
+     * The item passed to the ItemRender.
+     */
+    item?: any;
+    /**
+     * The title of the item.
+     */
+    title?: string;
+    /**
+     * The subtitle of the item.
+     */
+    subtitle?: string;
+    /**
+     * The level of the item.
+     */
+    level?: number;
+    /**
+     * The expanded state of the item.
+     */
+    expanded?: boolean;
+    /**
+     * The color of the item.
+     */
+    color?: string;
+}
+/**
+ * @hidden
+ */
+export interface ServerOrgChartNodeProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional classes to the OrgChart.
+     */
+    className?: string;
+    /**
+     * Passes the OrgChart id to the node.
+     */
+    id?: string;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    level: number;
+    childLineWidth?: number;
+    title?: string;
+    subtitle?: string;
+    details?: boolean;
+    color?: string;
+    line?: boolean;
+    plus?: boolean;
+    expanded?: boolean;
+    avatar?: string;
+    avatarType?: string;
+    cardHeight?: number;
+    cardWidth?: number;
+    verticalLine?: number;
+    itemRender?: React.ComponentType<OrgChartItemRenderProps>;
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    onItemKeyDown?: (ev: OrgChartActionEvent) => void;
+    node?: any;
+}
+/**
+ * @hidden
+ */
+export declare const ServerOrgChartNode: React.FunctionComponent<ServerOrgChartNodeProps>;

package/dist/npm/server/ServerOrgChartNode.js

@@ -0,0 +1,61 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerOrgChartNode = void 0;
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var ExpandButton_1 = require("../client/ExpandButton");
+var OrgChartCard_1 = require("../client/OrgChartCard");
+var OrgChartCardBody_1 = require("../client/OrgChartCardBody");
+var ORGCHARTNODE_CLASSNAME = 'k-orgchart-node';
+;
+/**
+ * @hidden
+ */
+var ServerOrgChartNode = function (props) {
+    var defaultProps = {
+        avatarType: 'image'
+    };
+    var _a = __assign(__assign({}, props), defaultProps), id = _a.id, title = _a.title, subtitle = _a.subtitle, level = _a.level, childLineWidth = _a.childLineWidth, cardWidth = _a.cardWidth, cardHeight = _a.cardHeight, verticalLine = _a.verticalLine, color = _a.color, line = _a.line, plus = _a.plus, expanded = _a.expanded, node = _a.node, avatar = _a.avatar, avatarType = _a.avatarType, itemRender = _a.itemRender, other = __rest(_a, ["id", "title", "subtitle", "level", "childLineWidth", "cardWidth", "cardHeight", "verticalLine", "color", "line", "plus", "expanded", "node", "avatar", "avatarType", "itemRender"]);
+    var ItemRender = itemRender;
+    return (React.createElement("div", __assign({}, other, { className: (0, kendo_react_common_1.classNames)(props.className, ORGCHARTNODE_CLASSNAME, 'k-vstack', 'k-align-items-center') }),
+        level !== 0 && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top", style: { height: verticalLine } }),
+        React.createElement(OrgChartCard_1.OrgChartCard, { node: node, style: { width: cardWidth, height: cardHeight }, "aria-level": level + 1, "aria-expanded": !!expanded, "aria-owns": id },
+            React.createElement(OrgChartCardBody_1.OrgChartCardBody, { level: level }, ItemRender
+                ? React.createElement(ItemRender, { item: node, title: title, subtitle: subtitle, level: level, expanded: expanded, color: color })
+                : React.createElement(React.Fragment, null,
+                    React.createElement(kendo_react_layout_1.Avatar, { type: avatarType, themeColor: "secondary" }, avatarType === 'image'
+                        ? React.createElement("img", { src: avatar, alt: "KendoReact Avatar Customer Image" })
+                        : avatar),
+                    React.createElement("div", { className: "k-card-title-wrap k-vstack" },
+                        React.createElement(kendo_react_layout_1.CardTitle, { className: "k-text-ellipsis" }, title),
+                        React.createElement("span", { className: "k-spacer" }),
+                        React.createElement(kendo_react_layout_1.CardSubtitle, { className: "k-text-ellipsis" }, subtitle)),
+                    React.createElement("span", { className: "k-spacer" })))),
+        line && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        plus && React.createElement(ExpandButton_1.ExpandButton, { expanded: expanded, node: node }),
+        plus && !!childLineWidth && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: childLineWidth, marginTop: -15 } })));
+};
+exports.ServerOrgChartNode = ServerOrgChartNode;

package/dist/npm/theming/theme-service.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @hidden
+ */
+declare const loadTheme: (done: any, doc: Document) => void;
+export { loadTheme };

package/dist/npm/theming/theme-service.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTheme = void 0;
+var computedBackgroundColor = function (element) { return window.getComputedStyle(element).backgroundColor; };
+var letterPos = function (letter) { return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0); };
+var seriesPos = function (name) {
+    var alpha = name.match(/series-([a-z])$/);
+    if (alpha !== null) {
+        return letterPos(alpha[1]);
+    }
+    var num = name.split('--series-')[1];
+    return parseInt(num, 10) - 1;
+};
+var SERIES_COLORS = 30;
+var seriesTemplate = function () {
+    var result = "\n      <div class=\"k-var--series-a\"></div>\n      <div class=\"k-var--series-b\"></div>\n      <div class=\"k-var--series-c\"></div>\n      <div class=\"k-var--series-d\"></div>\n      <div class=\"k-var--series-e\"></div>\n      <div class=\"k-var--series-f\"></div>\n";
+    for (var i = 0; i < SERIES_COLORS; i++) {
+        result += "\n      <div class=\"k-var--series-".concat(i + 1, "\"></div>");
+    }
+    return result;
+};
+var template = "\n    <div class=\"k-var--series-unset\"></div>\n    <div class=\"k-var--series\">\n      ".concat(seriesTemplate(), "\n    </div>\n");
+/**
+ * @hidden
+ */
+var ThemeService = /** @class */ (function () {
+    function ThemeService() {
+    }
+    ThemeService.prototype.getSeriesColors = function () {
+        var element = this.element;
+        var series = [].slice.call(element.querySelectorAll('.k-var--series div'));
+        var unsetColor = computedBackgroundColor(element.querySelector('.k-var--series-unset'));
+        var seriesColors = series.reduce(function (arr, el) {
+            var pos = seriesPos(el.className);
+            var color = computedBackgroundColor(el);
+            if (color !== unsetColor) {
+                arr[pos] = color;
+            }
+            return arr;
+        }, [] // Will populate the series colors in this array
+        );
+        return seriesColors;
+    };
+    return ThemeService;
+}());
+/**
+ * @hidden
+ */
+var loadTheme = function (done, doc) {
+    var service = new ThemeService();
+    var container = service.element = doc.createElement('div');
+    container.style.display = 'none';
+    container.innerHTML = template;
+    doc.body.appendChild(container);
+    var seriesColors;
+    try {
+        seriesColors = service.getSeriesColors();
+    }
+    finally {
+        doc.body.removeChild(service.element);
+        delete service.element;
+        done(seriesColors);
+    }
+};
+exports.loadTheme = loadTheme;

package/dist/npm/utils/consts.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @hidden
+ */
+export declare const EXPAND_FIELD = "expanded";
+/**
+ * @hidden
+ */
+export declare const TEXT_FIELD = "text";
+/**
+ * @hidden
+ */
+export declare const DISABLED_FIELD = "disabled";
+/**
+ * @hidden
+ */
+export declare const CHILDREN_FIELD = "items";
+/**
+ * @hidden
+ */
+export declare const HAS_CHILDREN_FIELD = "hasChildren";
+/**
+ * @hidden
+ */
+export declare const SELECT_FIELD = "selected";
+/**
+ * @hidden
+ */
+export declare const CHECK_FIELD = "checked";
+/**
+ * @hidden
+ */
+export declare const CHECK_INDETERMINATE_FIELD = "checkIndeterminate";
+/**
+ * @hidden
+ */
+export declare const DOM_KENDO_ITEM_ID_FIELD = "_kendoItemId";
+/**
+ * @hidden
+ */
+export declare const DOM_KENDO_TREEVIEW_GUID_FIELD = "_kendoOrgChartGuid";
+/**
+ * @hidden
+ */
+export declare const ORGCHART_CLASSNAME = "k-orgchart";
+/**
+ * @hidden
+ */
+export declare const NODE_HEIGHT = 80;
+/**
+ * @hidden
+ */
+export declare const NODE_WIDTH = 300;
+/**
+ * @hidden
+ */
+export declare const HORIZONTAL_GAP = 25;
+/**
+ * @hidden
+ */
+export declare const VERTICAL_LINE = 40;
+/**
+ * @hidden
+ */
+export declare const GROUP_TITLE_HEIGHT = 20;
+/**
+ * @hidden
+ */
+export declare const GROUP_SUBTITLE_HEIGHT = 20;
+/**
+ * @hidden
+ */
+export declare const GROUP_PADDINGS = 82;