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

package/dist/es/server/ServerOrgChartNode.js

@@ -0,0 +1,57 @@
+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;
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+import { Avatar, CardTitle, CardSubtitle } from '@progress/kendo-react-layout';
+import { ExpandButton } from '../client/ExpandButton';
+import { OrgChartCard } from '../client/OrgChartCard';
+import { OrgChartCardBody } from '../client/OrgChartCardBody';
+var ORGCHARTNODE_CLASSNAME = 'k-orgchart-node';
+;
+/**
+ * @hidden
+ */
+export 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: 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, { node: node, style: { width: cardWidth, height: cardHeight }, "aria-level": level + 1, "aria-expanded": !!expanded, "aria-owns": id },
+            React.createElement(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(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(CardTitle, { className: "k-text-ellipsis" }, title),
+                        React.createElement("span", { className: "k-spacer" }),
+                        React.createElement(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, { expanded: expanded, node: node }),
+        plus && !!childLineWidth && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: childLineWidth, marginTop: -15 } })));
+};

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

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

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

@@ -0,0 +1,62 @@
+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);
+    }
+};
+export { loadTheme };

package/dist/es/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;

package/dist/es/utils/consts.js

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

package/dist/npm/OrgChart.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { OrgChartProps } from './client/ClientOrgChart';
+/**
+ * Represents the OrgChart component.
+ */
+export declare const OrgChart: React.FunctionComponent<OrgChartProps>;

package/dist/npm/OrgChart.js

@@ -0,0 +1,71 @@
+"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.OrgChart = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var package_metadata_1 = require("./package-metadata");
+var ServerOrgChart_1 = require("./server/ServerOrgChart");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var ServerGroupedOrgChart_1 = require("./server/ServerGroupedOrgChart");
+var ClientOrgChart_1 = require("./client/ClientOrgChart");
+/**
+ * Represents the OrgChart component.
+ */
+var OrgChart = function (props) {
+    var combinedProps = __assign({ tabIndex: 0, navigatable: true, expandField: 'expanded', ariaLabel: 'Org Chart', idField: 'id', childrenField: 'items', avatarField: 'avatar', titleField: 'title', subTitleField: 'subtitle' }, props);
+    var cardsColors = combinedProps.cardsColors, onExpandChange = combinedProps.onExpandChange, onKeyDown = combinedProps.onKeyDown, onItemAction = combinedProps.onItemAction, onGroupAction = combinedProps.onGroupAction, onGroupBlur = combinedProps.onGroupBlur, onGroupFocus = combinedProps.onGroupFocus, id = combinedProps.id, other = __rest(combinedProps, ["cardsColors", "onExpandChange", "onKeyDown", "onItemAction", "onGroupAction", "onGroupBlur", "onGroupFocus", "id"]);
+    var generateId = React.useRef((0, kendo_react_common_1.guid)());
+    (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    return (React.createElement(ClientOrgChart_1.ClientOrgChart, __assign({}, combinedProps), props.groupField
+        ? React.createElement(ServerGroupedOrgChart_1.ServerGroupedOrgChart, __assign({ id: id || generateId.current }, other), props.children)
+        : React.createElement(ServerOrgChart_1.ServerOrgChart, __assign({ id: id || generateId.current }, other), props.children)));
+};
+exports.OrgChart = OrgChart;
+exports.OrgChart.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    id: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    idField: PropTypes.string,
+    childrenField: PropTypes.string,
+    expandField: PropTypes.string,
+    titleField: PropTypes.string,
+    hasChildrenField: PropTypes.string,
+    subTitleField: PropTypes.string,
+    avatarField: PropTypes.string,
+    cardsColors: PropTypes.array,
+    data: PropTypes.array,
+    groupField: PropTypes.string,
+    cardHeight: PropTypes.number,
+    cardWidth: PropTypes.number,
+    groupTitleHeight: PropTypes.number,
+    groupSubtitleHeight: PropTypes.number,
+    verticalLine: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onExpandChange: PropTypes.func,
+    onItemAction: PropTypes.func,
+    onGroupAction: PropTypes.func
+};
+exports.OrgChart.displayName = 'KendoOrgChart';

package/dist/npm/OrgChartOperationDescriptors.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The descriptors of the data operations which are applied to the OrgChart component.
+ */
+export interface OrgChartOperationDescriptors {
+    /**
+     * The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
+     */
+    expand?: string[] | OrgChartOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
+     */
+    select?: string[] | OrgChartOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
+     */
+    check?: string[] | OrgChartCheckDescriptor;
+    /**
+     * When the operations are applied, the corresponding items and their parents are cloned.
+     * For performance reasons, OrgChart items are cloned only once.
+     * The name of the field which provides a Boolean representation of whether an item is already cloned.
+     * Defaults to `cloned`.
+     */
+    cloneField?: string;
+    /**
+     * The expand field of the item.
+     */
+    expandField?: string;
+    /**
+     * The select field of the item.
+     */
+    selectField?: string;
+    /**
+     * The check field of the item.
+     */
+    checkField?: string;
+    /**
+     * The children field of the item.
+     */
+    childrenField?: string;
+}
+/**
+ * The descriptor which is used for expanding, selecting, and checking.
+ */
+export interface OrgChartOperationDescriptor {
+    /**
+     * The IDs of the items to which the operation will be applied. By default, the OrgChart applies the hierarchical indices of the items. These indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
+     */
+    ids?: any[];
+    /**
+     * The name of the field which will provide a Boolean representation for the operation state of the item.
+     *
+     * The default fields are:
+     * * `expanded`—Indicates that an item is expanded.
+     * * `selected`—Indicates that an item is selected.
+     * * `checked`—Indicates that an item is checked.
+     */
+    operationField?: string;
+    /**
+     * The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
+     */
+    idField?: string;
+}
+/**
+ * The descriptor which is used for checking.
+ */
+export interface OrgChartCheckDescriptor extends OrgChartOperationDescriptor {
+    /**
+     * Determines if a parent item will have an indeterminate state when not all its children are checked.
+     */
+    applyCheckIndeterminate?: boolean;
+    /**
+     * The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
+     * Defaults to `checkIndeterminate`.
+     */
+    checkIndeterminateField?: string;
+}

package/dist/npm/OrgChartOperationDescriptors.js

@@ -0,0 +1,3 @@
+"use strict";
+/* eslint-disable max-len */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/client/ClientOrgChart.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { ServerOrgChartProps } from '../interfaces/SeverOrgChartProps';
+import { OrgChartActionEvent } from '../interfaces/OrgChartActionEvent';
+import { OrgChartExpandChangeEvent } from '../main';
+/**
+ * Represents the props of the [KendoReact OrgChart component]({% slug overview_orgchart %}).
+ */
+export interface OrgChartProps extends ServerOrgChartProps {
+    /**
+     * Specifies if the OrgChart can be navigatable with keyboard.
+     * Defaults to `true`.
+     */
+    navigatable?: boolean;
+    /**
+     * Fires when a node or group is expanded.
+     */
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the item action event.
+     */
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the item double click action event.
+     */
+    onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the item contextmenu action event.
+     */
+    onItemContextMenu?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the group action event.
+     */
+    onGroupAction?: (ev: OrgChartActionEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupBlur?: (ev: OrgChartActionEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupFocus?: (ev: OrgChartActionEvent) => void;
+}
+declare type OrgChartEventsContextType = {
+    cardColors?: string[];
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    onKeyDown?: (ev: OrgChartActionEvent) => void;
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    onItemContextMenu?: (ev: OrgChartActionEvent) => void;
+    onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
+    onGroupAction?: (ev: OrgChartActionEvent) => void;
+    onGroupBlur?: (ev: OrgChartActionEvent) => void;
+    onGroupFocus?: (ev: OrgChartActionEvent) => void;
+};
+export declare const OrgChartEventsContextContext: React.Context<OrgChartEventsContextType>;
+/**
+ * @hidden
+ */
+export declare const ClientOrgChart: {
+    (props: OrgChartProps): JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        id: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        idField: PropTypes.Requireable<string>;
+        childrenField: PropTypes.Requireable<string>;
+        expandField: PropTypes.Requireable<string>;
+        titleField: PropTypes.Requireable<string>;
+        hasChildrenField: PropTypes.Requireable<string>;
+        subTitleField: PropTypes.Requireable<string>;
+        avatarField: PropTypes.Requireable<string>;
+        cardsColors: PropTypes.Requireable<any[]>;
+        data: PropTypes.Requireable<any[]>;
+        groupField: PropTypes.Requireable<string>;
+        cardHeight: PropTypes.Requireable<number>;
+        cardWidth: PropTypes.Requireable<number>;
+        groupTitleHeight: PropTypes.Requireable<number>;
+        groupSubtitleHeight: PropTypes.Requireable<number>;
+        verticalLine: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemAction: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupAction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    displayName: string;
+};
+export {};