@progress/kendo-react-orgchart 9.4.0-develop.1 → 9.4.0-develop.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/OrgChart.js +1 -1
- package/OrgChart.mjs +6 -7
- package/client/ClientOrgChart.js +1 -1
- package/client/ClientOrgChart.mjs +0 -1
- package/client/ExpandButton.js +1 -1
- package/client/ExpandButton.mjs +9 -10
- package/client/OrgChartCard.js +1 -1
- package/client/OrgChartCard.mjs +0 -1
- package/client/OrgChartCardBody.js +1 -1
- package/client/OrgChartCardBody.mjs +4 -5
- package/client/OrgChartGroupContainer.js +1 -1
- package/client/OrgChartGroupContainer.mjs +15 -16
- package/dist/cdn/js/kendo-react-orgchart.js +8 -1
- package/index.js +2 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -3
- package/package.json +5 -5
- package/processOrgChartItems.js +1 -1
- package/processOrgChartItems.mjs +26 -27
- package/server/ServerGroupedOrgChart.js +1 -1
- package/server/ServerGroupedOrgChart.mjs +0 -1
- package/server/ServerOrgChart.js +1 -1
- package/server/ServerOrgChart.mjs +34 -35
- package/server/ServerOrgChartGroup.js +1 -1
- package/server/ServerOrgChartGroup.mjs +6 -7
- package/server/ServerOrgChartNode.js +1 -1
- package/server/ServerOrgChartNode.mjs +6 -7
- package/theming/theme-service.js +2 -2
- package/theming/theme-service.mjs +0 -1
- package/utils/consts.js +1 -1
- package/utils/consts.mjs +6 -7
package/OrgChart.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),e=require("prop-types"),g=require("./package-metadata.js"),p=require("./server/ServerOrgChart.js"),u=require("@progress/kendo-react-common"),h=require("./server/ServerGroupedOrgChart.js"),b=require("./client/ClientOrgChart.js");function m(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>r[n]})}}return t.default=r,Object.freeze(t)}const a=m(s),o=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...r},{cardsColors:n,onExpandChange:i,onKeyDown:C,onItemAction:O,onGroupAction:F,onGroupBlur:f,onGroupFocus:y,id:d,...c}=t,l=a.useRef(u.useId());return u.validatePackage(g.packageMetadata),a.createElement(b.ClientOrgChart,{...t},r.groupField?a.createElement(h.ServerGroupedOrgChart,{id:d||l.current,...c},r.children):a.createElement(p.ServerOrgChart,{id:d||l.current,...c},r.children))};o.propTypes={className:e.string,style:e.object,id:e.string,ariaLabel:e.string,idField:e.string,childrenField:e.string,expandField:e.string,titleField:e.string,hasChildrenField:e.string,subtitleField:e.string,avatarField:e.string,cardsColors:e.array,data:e.array,groupField:e.string,cardHeight:e.number,cardWidth:e.number,groupTitleHeight:e.number,groupSubtitleHeight:e.number,verticalLine:e.number,height:e.oneOfType([e.string,e.number]),onExpandChange:e.func,onItemAction:e.func,onGroupAction:e.func};o.displayName="KendoOrgChart";exports.OrgChart=o;
|
package/OrgChart.mjs
CHANGED
|
@@ -5,14 +5,13 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as t from "react";
|
|
10
9
|
import e from "prop-types";
|
|
11
10
|
import { packageMetadata as l } from "./package-metadata.mjs";
|
|
12
|
-
import { ServerOrgChart as
|
|
13
|
-
import { useId as
|
|
14
|
-
import { ServerGroupedOrgChart as
|
|
15
|
-
import { ClientOrgChart as
|
|
11
|
+
import { ServerOrgChart as g } from "./server/ServerOrgChart.mjs";
|
|
12
|
+
import { useId as s, validatePackage as c } from "@progress/kendo-react-common";
|
|
13
|
+
import { ServerGroupedOrgChart as m } from "./server/ServerGroupedOrgChart.mjs";
|
|
14
|
+
import { ClientOrgChart as u } from "./client/ClientOrgChart.mjs";
|
|
16
15
|
const d = (r) => {
|
|
17
16
|
const i = {
|
|
18
17
|
tabIndex: 0,
|
|
@@ -36,8 +35,8 @@ const d = (r) => {
|
|
|
36
35
|
onGroupFocus: v,
|
|
37
36
|
id: a,
|
|
38
37
|
...n
|
|
39
|
-
} = i, o = t.useRef(
|
|
40
|
-
return
|
|
38
|
+
} = i, o = t.useRef(s());
|
|
39
|
+
return c(l), /* @__PURE__ */ t.createElement(u, { ...i }, r.groupField ? /* @__PURE__ */ t.createElement(m, { id: a || o.current, ...n }, r.children) : /* @__PURE__ */ t.createElement(g, { id: a || o.current, ...n }, r.children));
|
|
41
40
|
};
|
|
42
41
|
d.propTypes = {
|
|
43
42
|
className: e.string,
|
package/client/ClientOrgChart.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),x=require("@progress/kendo-react-common"),Q=require("../theming/theme-service.js"),V=require("../utils/consts.js");function X(c){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const C=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(n,u,C.get?C:{enumerable:!0,get:()=>c[u]})}}return n.default=c,Object.freeze(n)}const d=X(J),I=d.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),E=c=>{const n={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...c},{navigatable:u,id:C,tabIndex:b,className:D,style:O,data:Y,groupField:Z,cardWidth:ee,cardHeight:te,groupTitleHeight:ne,groupSubtitleHeight:oe,verticalLine:re,idField:ie,childrenField:ae,expandField:ce,hasChildrenField:le,avatarField:se,titleField:de,subtitleField:ue,onExpandChange:ge,onItemAction:p,onItemDoubleClick:he,onItemContextMenu:pe,onKeyDown:me,onGroupAction:k,onGroupBlur:fe,onGroupFocus:Ce,cardsColors:y,ariaLabel:be,itemRender:ve,groupTitleRender:Fe,groupSubtitleRender:xe,height:Ee,children:ke,...S}=n,v=d.useRef(null),l=d.useRef(new x.Navigation({tabIndex:b,root:v,selectors:[n.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[w,G]=d.useState([]),g=d.useRef(null),N=(e,t,i)=>{i.preventDefault(),t.focusNext(e)},R=(e,t,i)=>{i.preventDefault(),t.focusPrevious(e)},P=(e,t,i,r)=>{var s;if(i.preventDefault(),(n.groupField?r.items.some(f=>f[n.expandField]):r.item[n.expandField])&&n.onExpandChange)n.onExpandChange.call(void 0,r);else{const F=(s=e.closest(".k-orgchart-group"))==null?void 0:s.getAttribute("id"),m=document.querySelector(`[aria-owns="${F}"]`);m?t.focusElement(m,e):t.focusPrevious(e)}},T=(e,t,i,r)=>{var m;i.preventDefault();const a=n.groupField?r.items.some(h=>h[n.expandField]):r.item[n.expandField],s=n.groupField?r.items.find(h=>h[n.childrenField]):r.item[n.childrenField],f=n.groupField?r.items.some(h=>n.hasChildrenField&&h[n.hasChildrenField]):n.hasChildrenField&&r.item[n.hasChildrenField],F=n.groupField?s&&s[n.childrenField]&&s[n.childrenField].length:s&&s.length;if((f||F)&&!a&&n.onExpandChange)n.onExpandChange.call(void 0,r);else{const h=n.groupField?".k-orgchart-node-group-container":".k-orgchart-card",$=e.getAttribute("aria-owns"),A=(m=document.getElementById($))==null?void 0:m.querySelector(h);A?t.focusElement(A,e):t.focusNext(e)}},H=(e,t,i)=>{i.preventDefault(),t.focusElement(t.first,null)},L=(e,t,i)=>{i.preventDefault(),t.focusElement(t.last,null)},M=(e,t,i,r)=>{i.stopPropagation();const a=e.className.indexOf("k-orgchart-node-group-container")!==-1;if(c.groupField&&a){g.current&&g.current.first&&g.current.focusElement(g.current.first,null);return}n.onItemAction&&n.onItemAction({event:i,item:r.item})},_=e=>{if(c.groupField){const t=e.closest(".k-orgchart-node-group-container");t&&l.current.focusElement(t,null)}};d.useEffect(()=>{if(u&&l.current.first&&l.current.first.setAttribute("tabindex",String(b)),!y){const e=v.current.ownerDocument||document;Q.loadTheme(t=>{G(t)},e)}},[u,b]);const j=e=>{if(n.navigatable){const t=e.event,i=t.key===" "?"Space":t.key,r=c.groupField&&t.target.className.indexOf("k-orgchart-card")!==-1&&g.current||l.current,a=t.target.closest(r.selectors.join(","));switch(i){case"ArrowUp":P(a,r,t,e);break;case"ArrowDown":T(a,r,t,e);break;case"ArrowLeft":R(a,r,t);break;case"ArrowRight":N(a,r,t);break;case"End":L(a,r,t);break;case"Home":H(a,r,t);break;case"Enter":M(a,r,t,e);break;case"Escape":_(a);break}}},q=e=>{if(e.event.stopPropagation(),p&&p.call(void 0,e),n.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&l.current.focusElement(t,null)}},B=e=>{e.event.stopPropagation(),p&&p.call(void 0,e)},K=e=>{e.event.stopPropagation(),p&&p.call(void 0,e)},U=e=>{if(k&&k.call(void 0,e),n.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&l.current.focusElement(t,null)}},W=e=>{g.current=null},z=e=>{g.current=new x.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return d.createElement("div",{style:O,ref:v,className:x.classNames(D,V.ORGCHART_CLASSNAME)},d.createElement(I.Provider,{value:{cardColors:y||w,onExpandChange:c.onExpandChange,onKeyDown:j,onItemAction:q,onItemDoubleClick:K,onItemContextMenu:B,onGroupAction:U,onGroupBlur:W,onGroupFocus:z},...S},c.children))};E.propTypes={className:o.string,style:o.object,id:o.string,ariaLabel:o.string,idField:o.string,childrenField:o.string,expandField:o.string,titleField:o.string,hasChildrenField:o.string,subtitleField:o.string,avatarField:o.string,cardsColors:o.array,data:o.array,groupField:o.string,cardHeight:o.number,cardWidth:o.number,groupTitleHeight:o.number,groupSubtitleHeight:o.number,verticalLine:o.number,height:o.oneOfType([o.string,o.number]),onExpandChange:o.func,onItemAction:o.func,onItemDoubleClick:o.func,onItemContextMenu:o.func,onGroupAction:o.func};E.displayName="KendoClientOrgChart";exports.ClientOrgChart=E;exports.OrgChartEventsContextContext=I;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as s from "react";
|
|
10
9
|
import o from "prop-types";
|
|
11
10
|
import { Navigation as k, classNames as $ } from "@progress/kendo-react-common";
|
package/client/ExpandButton.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),l=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-svg-icons"),d=require("./ClientOrgChart.js");function p(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const r=p(i),g=t=>{const{expanded:e,node:n,nodes:o}=t,c=r.useContext(d.OrgChartEventsContextContext),s=u=>{c.onExpandChange&&c.onExpandChange.call(void 0,{event:u,expand:!e,item:n,items:o})};return r.createElement(l.Button,{className:"k-orgchart-button",icon:e?"minus":"plus",tabIndex:-1,svgIcon:e?a.minusIcon:a.plusIcon,"aria-label":e?"collapse":"expand",onClick:s})};exports.ExpandButton=g;
|
package/client/ExpandButton.mjs
CHANGED
|
@@ -5,29 +5,28 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as o from "react";
|
|
10
|
-
import { Button as
|
|
11
|
-
import { minusIcon as
|
|
12
|
-
import { OrgChartEventsContextContext as
|
|
9
|
+
import { Button as m } from "@progress/kendo-react-buttons";
|
|
10
|
+
import { minusIcon as p, plusIcon as i } from "@progress/kendo-svg-icons";
|
|
11
|
+
import { OrgChartEventsContextContext as x } from "./ClientOrgChart.mjs";
|
|
13
12
|
const C = (e) => {
|
|
14
|
-
const { expanded: n, node: a, nodes:
|
|
13
|
+
const { expanded: n, node: a, nodes: r } = e, t = o.useContext(x), s = (c) => {
|
|
15
14
|
t.onExpandChange && t.onExpandChange.call(void 0, {
|
|
16
|
-
event:
|
|
15
|
+
event: c,
|
|
17
16
|
expand: !n,
|
|
18
17
|
item: a,
|
|
19
|
-
items:
|
|
18
|
+
items: r
|
|
20
19
|
});
|
|
21
20
|
};
|
|
22
21
|
return /* @__PURE__ */ o.createElement(
|
|
23
|
-
|
|
22
|
+
m,
|
|
24
23
|
{
|
|
25
24
|
className: "k-orgchart-button",
|
|
26
25
|
icon: n ? "minus" : "plus",
|
|
27
26
|
tabIndex: -1,
|
|
28
|
-
svgIcon: n ?
|
|
27
|
+
svgIcon: n ? p : i,
|
|
29
28
|
"aria-label": n ? "collapse" : "expand",
|
|
30
|
-
onClick:
|
|
29
|
+
onClick: s
|
|
31
30
|
}
|
|
32
31
|
);
|
|
33
32
|
};
|
package/client/OrgChartCard.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-layout"),g=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function k(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const c in n)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(n,c);Object.defineProperty(e,c,r.get?r:{enumerable:!0,get:()=>n[c]})}}return e.default=n,Object.freeze(e)}const l=k(f),y=n=>{const{node:e,children:c,style:r,...s}=n,[a,i]=l.useState(!1),t=l.useContext(h.OrgChartEventsContextContext),u=o=>{t.onKeyDown&&t.onKeyDown.call(void 0,{event:o,item:e})},d=o=>{t.onItemAction&&t.onItemAction.call(void 0,{event:o,item:e})},C=o=>{t.onItemContextMenu&&t.onItemContextMenu.call(void 0,{event:o,item:e})},m=o=>{t.onItemDoubleClick&&t.onItemDoubleClick.call(void 0,{event:o,item:e})};return l.createElement(b.Card,{orientation:null,role:"treeitem",className:g.classNames("k-orgchart-card",{"k-focus":a}),onClick:d,onKeyDown:u,onContextMenu:C,onDoubleClick:m,style:r,"aria-selected":a,"aria-keyshortcuts":"Enter",onFocus:()=>i(!0),onBlur:()=>i(!1),...s},c)};exports.OrgChartCard=y;
|
package/client/OrgChartCard.mjs
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as n from "react";
|
|
10
9
|
import { Card as f } from "@progress/kendo-react-layout";
|
|
11
10
|
import { classNames as h } from "@progress/kendo-react-common";
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("./ClientOrgChart.js"),l=require("@progress/kendo-react-layout");function d(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=d(a),u=e=>{const{level:r,children:t}=e,o=n.useContext(s.OrgChartEventsContextContext),c=o.cardColors&&o.cardColors[r]||"green";return n.createElement(l.CardBody,{className:"k-hstack",style:{borderTopColor:c}},t)};exports.OrgChartCardBody=u;
|
|
@@ -5,13 +5,12 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as o from "react";
|
|
10
|
-
import { OrgChartEventsContextContext as
|
|
11
|
-
import { CardBody as
|
|
9
|
+
import { OrgChartEventsContextContext as c } from "./ClientOrgChart.mjs";
|
|
10
|
+
import { CardBody as s } from "@progress/kendo-react-layout";
|
|
12
11
|
const d = (t) => {
|
|
13
|
-
const { level: e, children: n } = t, r = o.useContext(
|
|
14
|
-
return /* @__PURE__ */ o.createElement(
|
|
12
|
+
const { level: e, children: n } = t, r = o.useContext(c), a = r.cardColors && r.cardColors[e] || "green";
|
|
13
|
+
return /* @__PURE__ */ o.createElement(s, { className: "k-hstack", style: { borderTopColor: a } }, n);
|
|
15
14
|
};
|
|
16
15
|
export {
|
|
17
16
|
d as OrgChartCardBody
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),C=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function y(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,c.get?c:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const s=y(g),O=o=>{const{nodes:e,children:r,style:c,...i}=o,[a,u]=s.useState(!1),t=s.useContext(h.OrgChartEventsContextContext),l=s.useRef(null),f=n=>{t.onKeyDown&&t.onKeyDown({event:n,items:e})},d=n=>{t.onGroupAction&&t.onGroupAction({event:n,items:e})},p=n=>{u(!0),t.onGroupFocus&&t.onGroupFocus({event:n,items:e,containerRef:l})},m=n=>{u(!1),t.onGroupBlur&&t.onGroupBlur({event:n,items:e})};return s.createElement("div",{role:"treeitem","aria-selected":a,ref:l,className:C.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":a}),style:c,onKeyDown:f,onClick:d,onFocus:p,onBlur:m,...i},r)};exports.OrgChartGroupContainer=O;
|
|
@@ -5,30 +5,29 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as n from "react";
|
|
10
9
|
import { classNames as h } from "@progress/kendo-react-common";
|
|
11
10
|
import { OrgChartEventsContextContext as C } from "./ClientOrgChart.mjs";
|
|
12
|
-
const x = (
|
|
13
|
-
const { nodes: t, children:
|
|
14
|
-
|
|
15
|
-
event:
|
|
11
|
+
const x = (a) => {
|
|
12
|
+
const { nodes: t, children: l, style: u, ...i } = a, [r, s] = n.useState(!1), o = n.useContext(C), c = n.useRef(null), m = (e) => {
|
|
13
|
+
o.onKeyDown && o.onKeyDown({
|
|
14
|
+
event: e,
|
|
16
15
|
items: t
|
|
17
16
|
});
|
|
18
|
-
}, f = (
|
|
19
|
-
|
|
20
|
-
event:
|
|
17
|
+
}, f = (e) => {
|
|
18
|
+
o.onGroupAction && o.onGroupAction({
|
|
19
|
+
event: e,
|
|
21
20
|
items: t
|
|
22
21
|
});
|
|
23
|
-
}, p = (
|
|
24
|
-
s(!0),
|
|
25
|
-
event:
|
|
22
|
+
}, p = (e) => {
|
|
23
|
+
s(!0), o.onGroupFocus && o.onGroupFocus({
|
|
24
|
+
event: e,
|
|
26
25
|
items: t,
|
|
27
26
|
containerRef: c
|
|
28
27
|
});
|
|
29
|
-
}, d = (
|
|
30
|
-
s(!1),
|
|
31
|
-
event:
|
|
28
|
+
}, d = (e) => {
|
|
29
|
+
s(!1), o.onGroupBlur && o.onGroupBlur({
|
|
30
|
+
event: e,
|
|
32
31
|
items: t
|
|
33
32
|
});
|
|
34
33
|
};
|
|
@@ -39,14 +38,14 @@ const x = (l) => {
|
|
|
39
38
|
"aria-selected": r,
|
|
40
39
|
ref: c,
|
|
41
40
|
className: h("k-orgchart-node-group-container", "k-vstack", { "k-focus": r }),
|
|
42
|
-
style:
|
|
41
|
+
style: u,
|
|
43
42
|
onKeyDown: m,
|
|
44
43
|
onClick: f,
|
|
45
44
|
onFocus: p,
|
|
46
45
|
onBlur: d,
|
|
47
46
|
...i
|
|
48
47
|
},
|
|
49
|
-
|
|
48
|
+
l
|
|
50
49
|
);
|
|
51
50
|
};
|
|
52
51
|
export {
|
|
@@ -5,4 +5,11 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,(function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n <div class="k-var--series-unset"></div>\n <div class="k-var--series">\n ${(()=>{let e='\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(let t=0;t<30;t++)e+=`\n <div class="k-var--series-${t+1}"></div>`;return e})()}\n </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce(((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e}),[])}};const p="checked",m="checkIndeterminate",g=80,v=25,f=40,F=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),k=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:f,idField:k,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:R,onGroupBlur:D,onGroupFocus:S,cardsColors:O,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),P=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[$,j]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&P.current.first&&P.current.first.setAttribute("tabindex",String(a)),!O){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})((e=>{j(e)}),q.current.ownerDocument||document)}}),[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(F.Provider,{value:{cardColors:O||$,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||P.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField],o=t.groupField?r.items.find((e=>e[t.childrenField])):r.item[t.childrenField],d=t.groupField?r.items.some((e=>t.hasChildrenField&&e[t.hasChildrenField])):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&P.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&P.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(R&&R.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&P.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};k.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},k.displayName="KendoClientOrgChart";const y=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(F);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},b=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(F);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},x=e=>{const{level:t,children:n}=e,r=s.useContext(F),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},C=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:F,itemRender:k,showAvatar:C,...E}={avatarType:"image",...e},w=k;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(b,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(x,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:F,themeColor:"secondary"},"image"===F?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(y,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},E=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),E({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},w=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:m,titleField:F,subtitleField:k,ariaLabel:y,itemRender:b,height:x,avatarType:w,showAvatar:I}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},N=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];E({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),((e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId))),r=t.length?Math.max(...t.map((e=>e.width||0))):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+v*(a-1);e.width=l}}))})(N,l),((e,t,n)=>{const i=e.sort(((e,t)=>e.level-t.level));i.forEach((e=>{if(0===e.level)return;const r=i.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.items.findIndex((t=>e.ids.includes(t[n]))))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*v)/s;e.width=c;const u=null==r?void 0:r.items.map((e=>{const r=e[t]?e[t].length:0,a=i.find((t=>t.ids.includes(e[n]))),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*v)/r:0}));r&&(r.childLineWidths=u)}))})(N,u,c),((e,t,n)=>{const i=t||g,r=n||f;e.forEach((e=>{const t=e.level,n=(i+r)*t+f*(t?t-1:0)-(r-f)*(t?1:0);e.top=n}))})(N,o,d);const A=((e,t,n)=>{const i=t||g,r=n||f;return Math.max(...e.map((e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))})))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:x||A}},N.map((e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?y:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map(((n,a)=>{const g=n[u]&&n[u].length||h&&n[h],v=g||"vertical"===e.orientation&&a!==r.length-1,y="vertical"===e.orientation&&0!==a?0:d||f,x=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(C,{id:t+"-"+(i+1)+"-"+n[c],style:{width:x},itemRender:b,cardHeight:o,cardWidth:l,verticalLine:y,key:a,level:i,avatar:n[m],avatarType:w,showAvatar:I,title:n[F],subtitle:n[k],line:v,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};w.displayName="KendoServerOrgChart";const I={name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:1737621879,version:"$VERSION",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"},N=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(F),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},A="k-orgchart-node-group-title",L="k-orgchart-node-group-subtitle",T=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:F,...k}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...k,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(N,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:A,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:C},i),x?s.createElement(x,{style:E,className:L,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:L,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(y,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},R=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find((e=>e.parentId===s)),g=e.find((e=>e.ids.includes(s)));let v=!1;if(m){const e=m.ids[0],n=g.items.find((t=>t[r]===e)),i=g.items.find((e=>e[r]===t[r]));v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),R({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},D=(e,t,n,i,r)=>{const a=t||g,l=r||f,o=n+i+82;e.forEach((e=>{const t=e.level,n=(a+l+o)*t+f*(t?t-1:0)-(l-f)*(t?1:0);e.top=n}))},S=(e,t,n,i,r)=>{const a=t||g,l=n||f,o=(i||20)+20+82;return Math.max(...e.map((e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map((e=>e.items.length))),i=e.hasChildren?f:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)})))},O=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:m,expandField:F,hasChildrenField:k,avatarField:y,titleField:b,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:A,height:L,avatarType:O,showAvatar:G}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},W=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];R({dataByGroups:W,data:r,cardWidth:l,expandField:F,hasChildrenField:k,childrenField:m,idField:p,groupField:a}),W.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),((e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId)));if(t.length){const i=Math.max(...t.map((e=>e.width||0))),r=Math.max(...t.map((e=>e.groupedItems.length||0))),a=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)}))),l=i*r+v*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)})));e.width=t}}}))})(W,l),((e,t)=>{const n=e.sort(((e,t)=>e.level-t.level));n.forEach((e=>{var i;if(0===e.level)return;const r=n.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.groupedItems.findIndex((n=>n.items.some((n=>e.ids.includes(n[t]))))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*v)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*v)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}}))})(W,p),D(W,d||g,c||20,u||20,h);const M=S(W,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:L||M}},W.map((e=>{const i=e.level,o=e.groupedItems.map((e=>{const t=e.items.some((e=>e[F]));return{...e,expanded:t}})),g=o.filter((e=>e.expanded)),L="horizontal",R=E&&E[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?w:void 0,"aria-orientation":0===i?L:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[L]}`]:L}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map(((n,r)=>{const F=n.items.some((e=>e[m]&&e[m].length||k&&e[k])),E=e.width?(e.width-(o.length-1)*v)/o.length:void 0,w=g.findIndex((e=>e===n));return s.createElement(T,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:E},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:N,groupSubtitleRender:A,key:r,level:i,verticalLine:h||f,title:n.items[0][a||b],subtitle:a,orientation:e.orientation,childLineWidth:F&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[w]:0,line:F,nodes:n.items,expanded:n.expanded,plus:F},n.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:R,key:t,level:i,avatar:e[y],avatarType:O,showAvatar:G,title:e[b],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text))))})))})))};O.displayName="KendoServerGroupedOrgChart";const G=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId());return n.validatePackage(I),s.createElement(k,{...t},e.groupField?s.createElement(O,{id:u||p.current,...h},e.children):s.createElement(w,{id:u||p.current,...h},e.children))};function W(e,t,i,r,a){if(i){const{ids:l,field:o}=M(i,t);return function(e,t,i,r,a){let l=e;return t.forEach((e=>{l=n.updateItem(l,e,(e=>K(i,e)),r,a)})),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function M(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function K(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function H(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=M(i,p),a=i.checkIndeterminateField||m;for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&B(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function B(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)K(a,t[e]);l=!0,d[i]&&B(d[i],[],i,r,a)}else d[i]&&B(d[i],l?[d]:t.concat([d]),i,r,a)}}G.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},G.displayName="KendoOrgChart",e.OrgChart=G,e.ServerOrgChart=w,e.ServerOrgChartGroup=T,e.ServerOrgChartNode=C,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=W(n,r,t.expand,i,o),n=W(n,a,t.select,i,o),n=W(n,l,t.check,i,o),H(n,o,t.check),n}}));
|
|
8
|
+
/**
|
|
9
|
+
* @license
|
|
10
|
+
*-------------------------------------------------------------------------------------------
|
|
11
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
12
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
|
+
*-------------------------------------------------------------------------------------------
|
|
14
|
+
*/
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,(function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n <div class="k-var--series-unset"></div>\n <div class="k-var--series">\n ${(()=>{let e='\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(let t=0;t<30;t++)e+=`\n <div class="k-var--series-${t+1}"></div>`;return e})()}\n </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce(((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e}),[])}};const p="checked",m="checkIndeterminate",g=80,v=25,f=40,F=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),k=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:f,idField:k,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:R,onGroupBlur:D,onGroupFocus:S,cardsColors:O,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),P=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[$,j]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&P.current.first&&P.current.first.setAttribute("tabindex",String(a)),!O){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})((e=>{j(e)}),q.current.ownerDocument||document)}}),[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(F.Provider,{value:{cardColors:O||$,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||P.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField],o=t.groupField?r.items.find((e=>e[t.childrenField])):r.item[t.childrenField],d=t.groupField?r.items.some((e=>t.hasChildrenField&&e[t.hasChildrenField])):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&P.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&P.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(R&&R.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&P.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};k.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},k.displayName="KendoClientOrgChart";const y=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(F);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},b=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(F);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},x=e=>{const{level:t,children:n}=e,r=s.useContext(F),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},C=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:F,itemRender:k,showAvatar:C,...E}={avatarType:"image",...e},w=k;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(b,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(x,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:F,themeColor:"secondary"},"image"===F?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(y,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},E=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),E({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},w=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId))),r=t.length?Math.max(...t.map((e=>e.width||0))):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+v*(a-1);e.width=l}}))},I=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:m,titleField:F,subtitleField:k,ariaLabel:y,itemRender:b,height:x,avatarType:I,showAvatar:N}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},A=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];E({dataByGroups:A,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),w(A,l),((e,t,n)=>{const i=e.sort(((e,t)=>e.level-t.level));i.forEach((e=>{if(0===e.level)return;const r=i.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.items.findIndex((t=>e.ids.includes(t[n]))))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*v)/s;e.width=c;const u=null==r?void 0:r.items.map((e=>{const r=e[t]?e[t].length:0,a=i.find((t=>t.ids.includes(e[n]))),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*v)/r:0}));r&&(r.childLineWidths=u)}))})(A,u,c),((e,t,n)=>{const i=t||g,r=n||f;e.forEach((e=>{const t=e.level,n=(i+r)*t+f*(t?t-1:0)-(r-f)*(t?1:0);e.top=n}))})(A,o,d);const L=((e,t,n)=>{const i=t||g,r=n||f;return Math.max(...e.map((e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))})))})(A,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:x||L}},A.map((e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?y:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map(((n,a)=>{const g=n[u]&&n[u].length||h&&n[h],v=g||"vertical"===e.orientation&&a!==r.length-1,y="vertical"===e.orientation&&0!==a?0:d||f,x=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(C,{id:t+"-"+(i+1)+"-"+n[c],style:{width:x},itemRender:b,cardHeight:o,cardWidth:l,verticalLine:y,key:a,level:i,avatar:n[m],avatarType:I,showAvatar:N,title:n[F],subtitle:n[k],line:v,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};I.displayName="KendoServerOrgChart";const N={name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"$VERSION",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"},A=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(F),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},L="k-orgchart-node-group-title",T="k-orgchart-node-group-subtitle",R=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:F,...k}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...k,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(A,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:L,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:L,style:C},i),x?s.createElement(x,{style:E,className:T,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:T,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(y,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},D=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find((e=>e.parentId===s)),g=e.find((e=>e.ids.includes(s)));let v=!1;if(m){const e=m.ids[0],n=g.items.find((t=>t[r]===e)),i=g.items.find((e=>e[r]===t[r]));v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),D({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},S=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId)));if(t.length){const i=Math.max(...t.map((e=>e.width||0))),r=Math.max(...t.map((e=>e.groupedItems.length||0))),a=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)}))),l=i*r+v*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)})));e.width=t}}}))},O=(e,t,n,i,r)=>{const a=t||g,l=r||f,o=n+i+82;e.forEach((e=>{const t=e.level,n=(a+l+o)*t+f*(t?t-1:0)-(l-f)*(t?1:0);e.top=n}))},G=(e,t,n,i,r)=>{const a=t||g,l=n||f,o=(i||20)+20+82;return Math.max(...e.map((e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map((e=>e.items.length))),i=e.hasChildren?f:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)})))},W=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:m,expandField:F,hasChildrenField:k,avatarField:y,titleField:b,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:A,height:L,avatarType:T,showAvatar:W}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},M=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];D({dataByGroups:M,data:r,cardWidth:l,expandField:F,hasChildrenField:k,childrenField:m,idField:p,groupField:a}),M.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),S(M,l),((e,t)=>{const n=e.sort(((e,t)=>e.level-t.level));n.forEach((e=>{var i;if(0===e.level)return;const r=n.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.groupedItems.findIndex((n=>n.items.some((n=>e.ids.includes(n[t]))))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*v)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*v)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}}))})(M,p),O(M,d||g,c||20,u||20,h);const K=G(M,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:L||K}},M.map((e=>{const i=e.level,o=e.groupedItems.map((e=>{const t=e.items.some((e=>e[F]));return{...e,expanded:t}})),g=o.filter((e=>e.expanded)),L="horizontal",D=E&&E[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?w:void 0,"aria-orientation":0===i?L:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[L]}`]:L}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map(((n,r)=>{const F=n.items.some((e=>e[m]&&e[m].length||k&&e[k])),E=e.width?(e.width-(o.length-1)*v)/o.length:void 0,w=g.findIndex((e=>e===n));return s.createElement(R,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:E},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:N,groupSubtitleRender:A,key:r,level:i,verticalLine:h||f,title:n.items[0][a||b],subtitle:a,orientation:e.orientation,childLineWidth:F&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[w]:0,line:F,nodes:n.items,expanded:n.expanded,plus:F},n.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:D,key:t,level:i,avatar:e[y],avatarType:T,showAvatar:W,title:e[b],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text))))})))})))};W.displayName="KendoServerGroupedOrgChart";const M=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId());return n.validatePackage(N),s.createElement(k,{...t},e.groupField?s.createElement(W,{id:u||p.current,...h},e.children):s.createElement(I,{id:u||p.current,...h},e.children))};function K(e,t,i,r,a){if(i){const{ids:l,field:o}=H(i,t);return function(e,t,i,r,a){let l=e;return t.forEach((e=>{l=n.updateItem(l,e,(e=>B(i,e)),r,a)})),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function H(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function B(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function z(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=H(i,p),a=i.checkIndeterminateField||m;for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&q(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function q(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)B(a,t[e]);l=!0,d[i]&&q(d[i],[],i,r,a)}else d[i]&&q(d[i],l?[d]:t.concat([d]),i,r,a)}}M.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},M.displayName="KendoOrgChart",e.OrgChart=M,e.ServerOrgChart=I,e.ServerOrgChartGroup=R,e.ServerOrgChartNode=C,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=K(n,r,t.expand,i,o),n=K(n,a,t.select,i,o),n=K(n,l,t.check,i,o),z(n,o,t.check),n}}));
|
package/index.js
CHANGED
|
@@ -5,4 +5,5 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
8
|
+
"use client";
|
|
9
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./server/ServerOrgChart.js"),e=require("./OrgChart.js"),t=require("./processOrgChartItems.js"),o=require("./server/ServerOrgChartNode.js"),a=require("./server/ServerOrgChartGroup.js");exports.ServerOrgChart=r.ServerOrgChart;exports.OrgChart=e.OrgChart;exports.processOrgChartItems=t.processOrgChartItems;exports.ServerOrgChartNode=o.ServerOrgChartNode;exports.ServerOrgChartGroup=a.ServerOrgChartGroup;
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1738311838,version:"9.4.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -5,14 +5,13 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
const e = {
|
|
10
9
|
name: "@progress/kendo-react-orgchart",
|
|
11
10
|
productName: "KendoReact",
|
|
12
11
|
productCode: "KENDOUIREACT",
|
|
13
12
|
productCodes: ["KENDOUIREACT"],
|
|
14
|
-
publishDate:
|
|
15
|
-
version: "9.4.0-develop.
|
|
13
|
+
publishDate: 1738311838,
|
|
14
|
+
version: "9.4.0-develop.11",
|
|
16
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
17
16
|
};
|
|
18
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-orgchart",
|
|
3
|
-
"version": "9.4.0-develop.
|
|
3
|
+
"version": "9.4.0-develop.11",
|
|
4
4
|
"description": "React OrgChart renders a message to the user with information about the status of an app process. KendoReact OrgChart package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-data-query": "^1.0.0",
|
|
29
29
|
"@progress/kendo-licensing": "^1.3.4",
|
|
30
|
-
"@progress/kendo-react-buttons": "9.4.0-develop.
|
|
31
|
-
"@progress/kendo-react-common": "9.4.0-develop.
|
|
32
|
-
"@progress/kendo-react-layout": "9.4.0-develop.
|
|
30
|
+
"@progress/kendo-react-buttons": "9.4.0-develop.11",
|
|
31
|
+
"@progress/kendo-react-common": "9.4.0-develop.11",
|
|
32
|
+
"@progress/kendo-react-layout": "9.4.0-develop.11",
|
|
33
33
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
34
34
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
35
35
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"package": {
|
|
56
56
|
"productName": "KendoReact",
|
|
57
57
|
"productCode": "KENDOUIREACT",
|
|
58
|
-
"publishDate":
|
|
58
|
+
"publishDate": 1738311838,
|
|
59
59
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
60
60
|
}
|
|
61
61
|
},
|
package/processOrgChartItems.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@progress/kendo-react-common"),d=require("./utils/consts.js");function C(n,t){if(!n||!n.length)return[];let e=n;const l=t.cloneField||"cloned",i=t.expandField||d.EXPAND_FIELD,s=t.selectField||d.SELECT_FIELD,r=t.checkField||d.CHECK_FIELD,c=t.childrenField||d.CHILDREN_FIELD;return e=o(e,i,t.expand,l,c),e=o(e,s,t.select,l,c),e=o(e,r,t.check,l,c),a(e,c,t.check),e}function o(n,t,e,l,i){if(e){const{ids:s,field:r}=E(e,t),c=!f.isArray(e)&&e.idField?f.resolveItemsIds(s,e.idField,n,i):s;return F(n,c,r,l,i)}return n}function E(n,t){let e,l;return f.isArray(n)?(e=n,l=t):(e=n.ids||[],l=n.operationField||t),{ids:e,field:l}}function F(n,t,e,l,i){let s=n;return t.forEach(r=>{s=f.updateItem(s,r,c=>g(e,c),l,i)}),s}function g(n,t){const e=(n||"").split(".");let l=t;for(let i=0;i<e.length;i++){const s=e[i];if(i===e.length-1)l[s]=!0;else if(l[s]!==void 0)l[s]={...l[s]},l=l[s];else return}}function a(n,t,e){if(e&&!f.isArray(e)&&e.applyCheckIndeterminate){const{field:l}=E(e,d.CHECK_FIELD),i=e.checkIndeterminateField||d.CHECK_INDETERMINATE_FIELD;for(let s=0;s<n.length;s++){const r=n[s],c=r[t];c&&I(c,f.getNestedValue(l,r)?[]:[r],t,l,i)}}}function I(n,t,e,l,i){let s=!1;for(let r=0;r<n.length;r++){const c=n[r];if(f.getNestedValue(l,c)){if(!s)for(let u=0;u<t.length;u++)g(i,t[u]);s=!0,c[e]&&I(c[e],[],e,l,i)}else c[e]&&I(c[e],s?[c]:t.concat([c]),e,l,i)}}exports.processOrgChartItems=C;
|
package/processOrgChartItems.mjs
CHANGED
|
@@ -5,20 +5,19 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import { isArray as I, resolveItemsIds as g, updateItem as C, getNestedValue as E } from "@progress/kendo-react-common";
|
|
10
9
|
import { EXPAND_FIELD as D, SELECT_FIELD as L, CHECK_FIELD as o, CHILDREN_FIELD as h, CHECK_INDETERMINATE_FIELD as N } from "./utils/consts.mjs";
|
|
11
10
|
function a(n, t) {
|
|
12
11
|
if (!n || !n.length)
|
|
13
12
|
return [];
|
|
14
13
|
let e = n;
|
|
15
|
-
const l = t.cloneField || "cloned",
|
|
16
|
-
return e = d(e,
|
|
14
|
+
const l = t.cloneField || "cloned", i = t.expandField || D, s = t.selectField || L, c = t.checkField || o, f = t.childrenField || h;
|
|
15
|
+
return e = d(e, i, t.expand, l, f), e = d(e, s, t.select, l, f), e = d(e, c, t.check, l, f), p(e, f, t.check), e;
|
|
17
16
|
}
|
|
18
|
-
function d(n, t, e, l,
|
|
17
|
+
function d(n, t, e, l, i) {
|
|
19
18
|
if (e) {
|
|
20
|
-
const { ids: s, field: c } = m(e, t),
|
|
21
|
-
return _(n,
|
|
19
|
+
const { ids: s, field: c } = m(e, t), f = !I(e) && e.idField ? g(s, e.idField, n, i) : s;
|
|
20
|
+
return _(n, f, c, l, i);
|
|
22
21
|
}
|
|
23
22
|
return n;
|
|
24
23
|
}
|
|
@@ -26,18 +25,18 @@ function m(n, t) {
|
|
|
26
25
|
let e, l;
|
|
27
26
|
return I(n) ? (e = n, l = t) : (e = n.ids || [], l = n.operationField || t), { ids: e, field: l };
|
|
28
27
|
}
|
|
29
|
-
function _(n, t, e, l,
|
|
28
|
+
function _(n, t, e, l, i) {
|
|
30
29
|
let s = n;
|
|
31
30
|
return t.forEach((c) => {
|
|
32
|
-
s = C(s, c, (
|
|
31
|
+
s = C(s, c, (f) => F(e, f), l, i);
|
|
33
32
|
}), s;
|
|
34
33
|
}
|
|
35
34
|
function F(n, t) {
|
|
36
35
|
const e = (n || "").split(".");
|
|
37
36
|
let l = t;
|
|
38
|
-
for (let
|
|
39
|
-
const s = e[
|
|
40
|
-
if (
|
|
37
|
+
for (let i = 0; i < e.length; i++) {
|
|
38
|
+
const s = e[i];
|
|
39
|
+
if (i === e.length - 1)
|
|
41
40
|
l[s] = !0;
|
|
42
41
|
else if (l[s] !== void 0)
|
|
43
42
|
l[s] = { ...l[s] }, l = l[s];
|
|
@@ -47,41 +46,41 @@ function F(n, t) {
|
|
|
47
46
|
}
|
|
48
47
|
function p(n, t, e) {
|
|
49
48
|
if (e && !I(e) && e.applyCheckIndeterminate) {
|
|
50
|
-
const { field: l } = m(e, o),
|
|
49
|
+
const { field: l } = m(e, o), i = e.checkIndeterminateField || N;
|
|
51
50
|
for (let s = 0; s < n.length; s++) {
|
|
52
|
-
const c = n[s],
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
const c = n[s], f = c[t];
|
|
52
|
+
f && u(
|
|
53
|
+
f,
|
|
55
54
|
E(l, c) ? [] : [c],
|
|
56
55
|
t,
|
|
57
56
|
l,
|
|
58
|
-
|
|
57
|
+
i
|
|
59
58
|
);
|
|
60
59
|
}
|
|
61
60
|
}
|
|
62
61
|
}
|
|
63
|
-
function u(n, t, e, l,
|
|
62
|
+
function u(n, t, e, l, i) {
|
|
64
63
|
let s = !1;
|
|
65
64
|
for (let c = 0; c < n.length; c++) {
|
|
66
|
-
const
|
|
67
|
-
if (E(l,
|
|
65
|
+
const f = n[c];
|
|
66
|
+
if (E(l, f)) {
|
|
68
67
|
if (!s)
|
|
69
68
|
for (let r = 0; r < t.length; r++)
|
|
70
|
-
F(
|
|
71
|
-
s = !0,
|
|
72
|
-
|
|
69
|
+
F(i, t[r]);
|
|
70
|
+
s = !0, f[e] && u(
|
|
71
|
+
f[e],
|
|
73
72
|
[],
|
|
74
73
|
e,
|
|
75
74
|
l,
|
|
76
|
-
|
|
75
|
+
i
|
|
77
76
|
);
|
|
78
77
|
} else
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
s ? [
|
|
78
|
+
f[e] && u(
|
|
79
|
+
f[e],
|
|
80
|
+
s ? [f] : t.concat([f]),
|
|
82
81
|
e,
|
|
83
82
|
l,
|
|
84
|
-
|
|
83
|
+
i
|
|
85
84
|
);
|
|
86
85
|
}
|
|
87
86
|
}
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),S=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const O=c.some(T=>T[e]&&T[e].length||i&&T[i]),f=O?"horizontal":"vertical",v=O?null:a+2*n.HORIZONTAL_GAP,E=o.find(T=>T.parentId===l),R=o.find(T=>T.ids.includes(l));let _=!1;if(E){const T=E.ids[0],x=R.items.find(G=>G[t]===T),N=R.items.find(G=>G[t]===s[t]);_=x[h]===N[h]}E&&_?(E.ids.push(s[t]),E.items=E.items.concat(c)):o.push({ids:[s[t]],items:c,level:d,parentId:l,hasChildren:O,orientation:f,width:v}),W({dataByGroups:o,data:s[e],childrenField:e,cardWidth:a,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d+1,parentId:s[t]})}})},J=(o,I)=>{const a=I||n.NODE_WIDTH,e=o.sort((t,r)=>r.level-t.level);e.forEach(t=>{if(!t.width){const r=e.filter(i=>t.ids.includes(i.parentId));if(r.length){const i=Math.max(...r.map(s=>s.width||0)),h=Math.max(...r.map(s=>s.groupedItems.length||0)),d=Math.max(...t.groupedItems.map(s=>{const c=t.orientation==="horizontal"?s.items.length:1;return c*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(c-1)})),l=i*h+n.HORIZONTAL_GAP*(h-1);t.width=Math.max(l,d)}else{const i=Math.max(...t.groupedItems.map(h=>{const d=t.orientation==="horizontal"?h.items.length:1;return d*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(d-1)}));t.width=i}}})},X=(o,I)=>{const a=o.sort((e,t)=>e.level-t.level);a.forEach(e=>{var c;if(e.level===0)return;const t=a.find(m=>m.ids.includes(e.parentId)),r=(t==null?void 0:t.groupedItems.findIndex(m=>m.items.some(O=>e.ids.includes(O[I]))))||0,i=(t==null?void 0:t.groupedItems)||[],h=t.width?(t.width-(i.length-1)*n.HORIZONTAL_GAP)/i.length:0;if(!e.left){let m=(t==null?void 0:t.left)||0;i.forEach((O,f)=>{f<r&&(m+=h+n.HORIZONTAL_GAP)}),e.left=m}const d=(t==null?void 0:t.width)||0,l=(t==null?void 0:t.groupedItems.length)||1,s=(d-(l-1)*n.HORIZONTAL_GAP)/l;if(e.width=s,t){const m=e.width-(e.width-(e.groupedItems.length-1)*n.HORIZONTAL_GAP)/e.groupedItems.length;t.childLineWidths?(c=t.childLineWidths)==null||c.push(m):t.childLineWidths=[m]}})},Y=(o,I,a,e,t)=>{const r=I||n.NODE_HEIGHT,i=t||n.VERTICAL_LINE,h=a+e+n.GROUP_PADDINGS;o.forEach(d=>{const l=d.level,s=(r+i+h)*l+n.VERTICAL_LINE*(l?l-1:0)-(i-n.VERTICAL_LINE)*(l?1:0);d.top=s})},tt=(o,I,a,e,t)=>{const r=I||n.NODE_HEIGHT,i=a||n.VERTICAL_LINE,d=(e||n.GROUP_TITLE_HEIGHT)+n.GROUP_SUBTITLE_HEIGHT+n.GROUP_PADDINGS;return Math.max(...o.map(s=>{const c=s.top||0,m=Math.max(...s.groupedItems.map(v=>v.items.length)),O=s.hasChildren?n.VERTICAL_LINE:0,f=s.orientation==="horizontal"?r+i+d+i+O:m*(r+i)+d+i;return c+f}))},y=o=>{const I={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0},{id:a,width:e,data:t,groupField:r,cardWidth:i,cardHeight:h,groupTitleHeight:d,groupSubtitleHeight:l,verticalLine:s,idField:c,childrenField:m,expandField:O,hasChildrenField:f,avatarField:v,titleField:E,subtitleField:R,cardsColors:_,ariaLabel:T,itemRender:x,groupTitleRender:N,groupSubtitleRender:G,height:D,avatarType:k,showAvatar:M}={...I,...o},p=[{items:t,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:p,data:t,cardWidth:i,expandField:O,hasChildrenField:f,childrenField:m,idField:c,groupField:r}),p.map(u=>{u.groupedItems=K.groupBy(u.items,[{field:r}])}),J(p,i),X(p,c),Y(p,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT,s);const U=tt(p,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT);return b.createElement("div",{className:"k-orgchart-container",style:{width:e,height:D||U}},p.map(u=>{const H=u.level,w=u.groupedItems.map(L=>{const C=L.items.some(A=>A[O]);return{...L,expanded:C}}),Z=w.filter(L=>L.expanded),P="horizontal",z=_&&_[H]||"green";return b.createElement("div",{role:H===0?"tree":"group",id:a+"-"+H+"-"+u.ids[0],"aria-label":H===0?T:void 0,"aria-orientation":H===0?P:void 0,key:u.ids[0]+"_"+H,className:S.classNames("k-orgchart-group",`k-orgchart-level-${H}`,"k-pos-absolute",{[`k-${S.kendoThemeMaps.orientationMap[P]}`]:P}),style:{width:u.width||"100%",left:u.left,top:u.top}},t.length>0&&w.map((L,C)=>{const A=L.items.some(g=>g[m]&&g[m].length||f&&g[f]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,V=Z.findIndex(g=>g===L);return b.createElement(F.ServerOrgChartGroup,{id:a+"-"+(H+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:N,groupSubtitleRender:G,key:C,level:H,verticalLine:s||n.VERTICAL_LINE,title:L.items[0][r||E],subtitle:r,orientation:u.orientation,childLineWidth:A&&L.expanded&&u.orientation==="horizontal"?u.childLineWidths[V]:0,line:A,nodes:L.items,expanded:L.expanded,plus:A},L.items.map((g,j)=>b.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:x,color:z,key:j,level:H,avatar:g[v],avatarType:k,showAvatar:M,title:g[E],subtitle:g[R],verticalLine:0,line:!1,node:g,childLineWidth:0,plus:!1},g.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as R from "react";
|
|
10
9
|
import { classNames as q, kendoThemeMaps as J } from "@progress/kendo-react-common";
|
|
11
10
|
import { ServerOrgChartNode as Q } from "./ServerOrgChartNode.mjs";
|
package/server/ServerOrgChart.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),T=require("@progress/kendo-react-common"),z=require("./ServerOrgChartNode.js"),v=require("../utils/consts.js");function G(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const s in a)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(a,s);Object.defineProperty(l,s,i.get?i:{enumerable:!0,get:()=>a[s]})}}return l.default=a,Object.freeze(l)}const H=G(j),C=({dataByGroups:a,data:l=[],cardWidth:s,childrenField:i,idField:e,expandField:t,hasChildrenField:n,groupField:r,level:m=1,parentId:d=0})=>{l.forEach(h=>{const f=h[i];if(h[t]&&f&&f.length){const o=f.some(w=>w[i]&&w[i].length||n&&w[n]),u=o?"horizontal":"vertical",L=o?null:s;a.push({ids:[h[e]],items:f,level:m,parentId:d,hasChildren:o,orientation:u,width:L}),C({dataByGroups:a,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:t,hasChildrenField:n,groupField:r,level:m+1,parentId:h[e]})}})},V=(a,l)=>{const s=l||v.NODE_WIDTH,i=a.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(d=>e.ids.includes(d.parentId)),n=t.length?Math.max(...t.map(d=>d.width||0)):s,r=e.orientation==="horizontal"?e.items.length:1,m=n*r+v.HORIZONTAL_GAP*(r-1);e.width=m}})},F=(a,l,s)=>{const i=a.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(e.level===0)return;const t=i.find(o=>o.ids.includes(e.parentId)),n=(t==null?void 0:t.items.findIndex(o=>e.ids.includes(o[s])))||0,r=(t==null?void 0:t.items)||[],m=t.width?(t.width-(r.length-1)*v.HORIZONTAL_GAP)/r.length:0;if(!e.left){let o=(t==null?void 0:t.left)||0;r.forEach((u,L)=>{L<n&&(o+=m+v.HORIZONTAL_GAP)}),e.left=o}const d=(t==null?void 0:t.width)||0,h=(t==null?void 0:t.items.length)||1,f=(d-(h-1)*v.HORIZONTAL_GAP)/h;e.width=f;const E=t==null?void 0:t.items.map(o=>{const u=o[l]?o[l].length:0,L=i.find(_=>_.ids.includes(o[s])),w=(L==null?void 0:L.width)||0;return(L==null?void 0:L.orientation)==="vertical"||u===0||!o.expanded?0:w-(w-(u-1)*v.HORIZONTAL_GAP)/u});t&&(t.childLineWidths=E)})},Z=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;a.forEach(t=>{const n=t.level,r=(i+e)*n+v.VERTICAL_LINE*(n?n-1:0)-(e-v.VERTICAL_LINE)*(n?1:0);t.top=r})},q=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;return Math.max(...a.map(n=>{const r=n.top||0,m=n.items.length,d=n.orientation==="horizontal"?i+e+e:m*(i+e);return r+d}))},R=a=>{const l={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0},{id:s,width:i,data:e,groupField:t,cardWidth:n,cardHeight:r,verticalLine:m,idField:d,childrenField:h,hasChildrenField:f,expandField:E,avatarField:o,titleField:u,subtitleField:L,ariaLabel:w,itemRender:_,height:W,avatarType:p,showAvatar:x}={...l,...a},O=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];C({dataByGroups:O,data:e,cardWidth:n,expandField:E,hasChildrenField:f,childrenField:h,idField:d,groupField:t}),V(O,n),F(O,h,d),Z(O,r,m);const S=q(O,r,m);return H.createElement("div",{className:"k-orgchart-container",style:{width:i,height:W||S}},O.map(c=>{const I=c.level,A=c.items,b=c.orientation;return H.createElement("div",{role:I===0?"tree":"group",id:s+"-"+I+"-"+c.ids[0],"aria-label":I===0?w:void 0,"aria-orientation":I===0?b:void 0,key:c.ids[0]+"_"+I,className:T.classNames("k-orgchart-group",`k-orgchart-level-${I}`,"k-pos-absolute",{[`k-${T.kendoThemeMaps.orientationMap[b]}`]:b}),style:{width:c.width||"100%",left:c.left,top:c.top}},A.length>0&&H.createElement("div",{role:"group",style:{width:"100%"},className:T.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${T.kendoThemeMaps.orientationMap[c.orientation]}`]:c.orientation})},A.map((g,N)=>{const k=g[h]&&g[h].length||f&&g[f],M=k||c.orientation==="vertical"&&N!==A.length-1,P=c.orientation==="vertical"&&N!==0?0:m||v.VERTICAL_LINE,D=c.childLineWidths?Math.max(...c.childLineWidths):void 0,y=g[E];return H.createElement(z.ServerOrgChartNode,{id:s+"-"+(I+1)+"-"+g[d],style:{width:D},itemRender:_,cardHeight:r,cardWidth:n,verticalLine:P,key:N,level:I,avatar:g[o],avatarType:p,showAvatar:x,title:g[u],subtitle:g[L],line:M,expanded:y,node:g,childLineWidth:k&&y&&c.orientation==="horizontal"?c.childLineWidths[N]:0,plus:k},g.text)})))}))};R.displayName="KendoServerOrgChart";exports.ServerOrgChart=R;
|
|
@@ -5,13 +5,12 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as N from "react";
|
|
10
9
|
import { classNames as O, kendoThemeMaps as b } from "@progress/kendo-react-common";
|
|
11
10
|
import { ServerOrgChartNode as P } from "./ServerOrgChartNode.mjs";
|
|
12
11
|
import { VERTICAL_LINE as H, HORIZONTAL_GAP as x, NODE_WIDTH as V, NODE_HEIGHT as M } from "../utils/consts.mjs";
|
|
13
12
|
const R = ({
|
|
14
|
-
dataByGroups:
|
|
13
|
+
dataByGroups: c,
|
|
15
14
|
data: r = [],
|
|
16
15
|
cardWidth: l,
|
|
17
16
|
childrenField: n,
|
|
@@ -22,14 +21,14 @@ const R = ({
|
|
|
22
21
|
level: m = 1,
|
|
23
22
|
parentId: h = 0
|
|
24
23
|
}) => {
|
|
25
|
-
r.forEach((
|
|
26
|
-
const f =
|
|
27
|
-
if (
|
|
24
|
+
r.forEach((d) => {
|
|
25
|
+
const f = d[n];
|
|
26
|
+
if (d[t] && f && f.length) {
|
|
28
27
|
const s = f.some(
|
|
29
28
|
(g) => g[n] && g[n].length || i && g[i]
|
|
30
29
|
), L = s ? "horizontal" : "vertical", v = s ? null : l;
|
|
31
|
-
|
|
32
|
-
ids: [
|
|
30
|
+
c.push({
|
|
31
|
+
ids: [d[e]],
|
|
33
32
|
items: f,
|
|
34
33
|
level: m,
|
|
35
34
|
parentId: h,
|
|
@@ -37,8 +36,8 @@ const R = ({
|
|
|
37
36
|
orientation: L,
|
|
38
37
|
width: v
|
|
39
38
|
}), R({
|
|
40
|
-
dataByGroups:
|
|
41
|
-
data:
|
|
39
|
+
dataByGroups: c,
|
|
40
|
+
data: d[n],
|
|
42
41
|
childrenField: n,
|
|
43
42
|
cardWidth: l,
|
|
44
43
|
idField: e,
|
|
@@ -46,12 +45,12 @@ const R = ({
|
|
|
46
45
|
hasChildrenField: i,
|
|
47
46
|
groupField: a,
|
|
48
47
|
level: m + 1,
|
|
49
|
-
parentId:
|
|
48
|
+
parentId: d[e]
|
|
50
49
|
});
|
|
51
50
|
}
|
|
52
51
|
});
|
|
53
|
-
}, j = (
|
|
54
|
-
const l = r || V, n =
|
|
52
|
+
}, j = (c, r) => {
|
|
53
|
+
const l = r || V, n = c.sort((e, t) => t.level - e.level);
|
|
55
54
|
n.forEach((e) => {
|
|
56
55
|
if (!e.width) {
|
|
57
56
|
const t = n.filter(
|
|
@@ -60,8 +59,8 @@ const R = ({
|
|
|
60
59
|
e.width = m;
|
|
61
60
|
}
|
|
62
61
|
});
|
|
63
|
-
}, B = (
|
|
64
|
-
const n =
|
|
62
|
+
}, B = (c, r, l) => {
|
|
63
|
+
const n = c.sort((e, t) => e.level - t.level);
|
|
65
64
|
n.forEach((e) => {
|
|
66
65
|
if (e.level === 0)
|
|
67
66
|
return;
|
|
@@ -74,29 +73,29 @@ const R = ({
|
|
|
74
73
|
v < i && (s += m + x);
|
|
75
74
|
}), e.left = s;
|
|
76
75
|
}
|
|
77
|
-
const h = (t == null ? void 0 : t.width) || 0,
|
|
76
|
+
const h = (t == null ? void 0 : t.width) || 0, d = (t == null ? void 0 : t.items.length) || 1, f = (h - (d - 1) * x) / d;
|
|
78
77
|
e.width = f;
|
|
79
78
|
const k = t == null ? void 0 : t.items.map((s) => {
|
|
80
|
-
const L = s[r] ? s[r].length : 0, v = n.find((
|
|
79
|
+
const L = s[r] ? s[r].length : 0, v = n.find((y) => y.ids.includes(s[l])), g = (v == null ? void 0 : v.width) || 0;
|
|
81
80
|
return (v == null ? void 0 : v.orientation) === "vertical" || L === 0 || !s.expanded ? 0 : g - (g - (L - 1) * x) / L;
|
|
82
81
|
});
|
|
83
82
|
t && (t.childLineWidths = k);
|
|
84
83
|
});
|
|
85
|
-
}, G = (
|
|
84
|
+
}, G = (c, r, l) => {
|
|
86
85
|
const n = r || M, e = l || H;
|
|
87
|
-
|
|
86
|
+
c.forEach((t) => {
|
|
88
87
|
const i = t.level, a = (n + e) * i + H * (i ? i - 1 : 0) - (e - H) * (i ? 1 : 0);
|
|
89
88
|
t.top = a;
|
|
90
89
|
});
|
|
91
|
-
}, K = (
|
|
90
|
+
}, K = (c, r, l) => {
|
|
92
91
|
const n = r || M, e = l || H;
|
|
93
92
|
return Math.max(
|
|
94
|
-
...
|
|
93
|
+
...c.map((i) => {
|
|
95
94
|
const a = i.top || 0, m = i.items.length, h = i.orientation === "horizontal" ? n + e + e : m * (n + e);
|
|
96
95
|
return a + h;
|
|
97
96
|
})
|
|
98
97
|
);
|
|
99
|
-
}, Z = (
|
|
98
|
+
}, Z = (c) => {
|
|
100
99
|
const r = {
|
|
101
100
|
width: "100%",
|
|
102
101
|
data: [],
|
|
@@ -118,18 +117,18 @@ const R = ({
|
|
|
118
117
|
cardHeight: a,
|
|
119
118
|
verticalLine: m,
|
|
120
119
|
idField: h,
|
|
121
|
-
childrenField:
|
|
120
|
+
childrenField: d,
|
|
122
121
|
hasChildrenField: f,
|
|
123
122
|
expandField: k,
|
|
124
123
|
avatarField: s,
|
|
125
124
|
titleField: L,
|
|
126
125
|
subtitleField: v,
|
|
127
126
|
ariaLabel: g,
|
|
128
|
-
itemRender:
|
|
127
|
+
itemRender: y,
|
|
129
128
|
height: _,
|
|
130
129
|
avatarType: z,
|
|
131
130
|
showAvatar: A
|
|
132
|
-
} = { ...r, ...
|
|
131
|
+
} = { ...r, ...c }, E = [
|
|
133
132
|
{
|
|
134
133
|
items: e,
|
|
135
134
|
level: 0,
|
|
@@ -146,20 +145,20 @@ const R = ({
|
|
|
146
145
|
cardWidth: i,
|
|
147
146
|
expandField: k,
|
|
148
147
|
hasChildrenField: f,
|
|
149
|
-
childrenField:
|
|
148
|
+
childrenField: d,
|
|
150
149
|
idField: h,
|
|
151
150
|
groupField: t
|
|
152
|
-
}), j(E, i), B(E,
|
|
151
|
+
}), j(E, i), B(E, d, h), G(E, a, m);
|
|
153
152
|
const D = K(E, a, m);
|
|
154
153
|
return /* @__PURE__ */ N.createElement("div", { className: "k-orgchart-container", style: { width: n, height: _ || D } }, E.map((o) => {
|
|
155
|
-
const W = o.level,
|
|
154
|
+
const W = o.level, T = o.items, p = o.orientation;
|
|
156
155
|
return /* @__PURE__ */ N.createElement(
|
|
157
156
|
"div",
|
|
158
157
|
{
|
|
159
158
|
role: W === 0 ? "tree" : "group",
|
|
160
159
|
id: l + "-" + W + "-" + o.ids[0],
|
|
161
160
|
"aria-label": W === 0 ? g : void 0,
|
|
162
|
-
"aria-orientation": W === 0 ?
|
|
161
|
+
"aria-orientation": W === 0 ? p : void 0,
|
|
163
162
|
key: o.ids[0] + "_" + W,
|
|
164
163
|
className: O(
|
|
165
164
|
"k-orgchart-group",
|
|
@@ -167,7 +166,7 @@ const R = ({
|
|
|
167
166
|
`k-orgchart-level-${W}`,
|
|
168
167
|
"k-pos-absolute",
|
|
169
168
|
{
|
|
170
|
-
[`k-${b.orientationMap[
|
|
169
|
+
[`k-${b.orientationMap[p]}`]: p
|
|
171
170
|
}
|
|
172
171
|
),
|
|
173
172
|
style: {
|
|
@@ -176,7 +175,7 @@ const R = ({
|
|
|
176
175
|
top: o.top
|
|
177
176
|
}
|
|
178
177
|
},
|
|
179
|
-
|
|
178
|
+
T.length > 0 && /* @__PURE__ */ N.createElement(
|
|
180
179
|
"div",
|
|
181
180
|
{
|
|
182
181
|
role: "group",
|
|
@@ -185,14 +184,14 @@ const R = ({
|
|
|
185
184
|
[`k-${b.orientationMap[o.orientation]}`]: o.orientation
|
|
186
185
|
})
|
|
187
186
|
},
|
|
188
|
-
|
|
189
|
-
const
|
|
187
|
+
T.map((w, I) => {
|
|
188
|
+
const u = w[d] && w[d].length || f && w[f], F = u || o.orientation === "vertical" && I !== T.length - 1, S = o.orientation === "vertical" && I !== 0 ? 0 : m || H, $ = o.childLineWidths ? Math.max(...o.childLineWidths) : void 0, C = w[k];
|
|
190
189
|
return /* @__PURE__ */ N.createElement(
|
|
191
190
|
P,
|
|
192
191
|
{
|
|
193
192
|
id: l + "-" + (W + 1) + "-" + w[h],
|
|
194
193
|
style: { width: $ },
|
|
195
|
-
itemRender:
|
|
194
|
+
itemRender: y,
|
|
196
195
|
cardHeight: a,
|
|
197
196
|
cardWidth: i,
|
|
198
197
|
verticalLine: S,
|
|
@@ -206,8 +205,8 @@ const R = ({
|
|
|
206
205
|
line: F,
|
|
207
206
|
expanded: C,
|
|
208
207
|
node: w,
|
|
209
|
-
childLineWidth:
|
|
210
|
-
plus:
|
|
208
|
+
childLineWidth: u && C && o.orientation === "horizontal" ? o.childLineWidths[I] : 0,
|
|
209
|
+
plus: u
|
|
211
210
|
},
|
|
212
211
|
w.text
|
|
213
212
|
);
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),s=require("@progress/kendo-react-common"),C=require("../client/ExpandButton.js"),f=require("../client/OrgChartGroupContainer.js"),O=require("../utils/consts.js");function A(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const e=A(G),H="k-orgchart-node-group",T="k-orgchart-node-group-title",k="k-orgchart-node-group-subtitle",L=t=>{const n={orientation:"horizontal"},{id:r,title:a,subtitle:u,line:S,plus:d,focus:P,level:o,verticalLine:v,childLineWidth:g,orientation:l,expanded:c,nodes:i,groupTitleHeight:N,groupSubtitleHeight:R,groupTitleRender:_,groupSubtitleRender:y,...b}={...n,...t},m=_,h=y,p={height:N||O.GROUP_TITLE_HEIGHT},E={height:R||O.GROUP_SUBTITLE_HEIGHT};return e.createElement("div",{...b,className:s.classNames(t.className,H,"k-vstack","k-align-items-center")},o!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:v}}),e.createElement(f.OrgChartGroupContainer,{nodes:i,"aria-expanded":!!c,"aria-keyshortcuts":"Enter","aria-level":o+1,"aria-owns":r},m?e.createElement(m,{style:p,className:T,title:a,items:i,level:o,expanded:c}):e.createElement("div",{className:T,style:p},a),h?e.createElement(h,{style:E,className:k,subtitle:u,items:i,level:o,expanded:c}):e.createElement("div",{className:k,style:E},u),e.createElement("div",{role:"group",style:{width:"100%"},className:s.classNames("k-orgchart-node-container",{[`k-${s.kendoThemeMaps.orientationMap[l]||l}`]:l})},t.children)),S&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&e.createElement(C.ExpandButton,{expanded:c,nodes:i}),d&&!!g&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:g,marginTop:-15}}))};exports.ServerOrgChartGroup=L;
|
|
@@ -5,13 +5,12 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as e from "react";
|
|
10
9
|
import { classNames as E, kendoThemeMaps as y } from "@progress/kendo-react-common";
|
|
11
10
|
import { ExpandButton as A } from "../client/ExpandButton.mjs";
|
|
12
11
|
import { OrgChartGroupContainer as C } from "../client/OrgChartGroupContainer.mjs";
|
|
13
12
|
import { GROUP_TITLE_HEIGHT as H, GROUP_SUBTITLE_HEIGHT as L } from "../utils/consts.mjs";
|
|
14
|
-
const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-orgchart-node-group-subtitle", x = (
|
|
13
|
+
const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-orgchart-node-group-subtitle", x = (o) => {
|
|
15
14
|
const T = {
|
|
16
15
|
orientation: "horizontal"
|
|
17
16
|
}, {
|
|
@@ -24,7 +23,7 @@ const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-org
|
|
|
24
23
|
level: t,
|
|
25
24
|
verticalLine: R,
|
|
26
25
|
childLineWidth: c,
|
|
27
|
-
orientation:
|
|
26
|
+
orientation: i,
|
|
28
27
|
expanded: r,
|
|
29
28
|
nodes: a,
|
|
30
29
|
groupTitleHeight: v,
|
|
@@ -32,12 +31,12 @@ const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-org
|
|
|
32
31
|
groupTitleRender: _,
|
|
33
32
|
groupSubtitleRender: G,
|
|
34
33
|
...O
|
|
35
|
-
} = { ...T, ...
|
|
34
|
+
} = { ...T, ...o }, m = _, h = G, d = { height: v || H }, g = { height: S || L };
|
|
36
35
|
return /* @__PURE__ */ e.createElement(
|
|
37
36
|
"div",
|
|
38
37
|
{
|
|
39
38
|
...O,
|
|
40
|
-
className: E(
|
|
39
|
+
className: E(o.className, f, "k-vstack", "k-align-items-center")
|
|
41
40
|
},
|
|
42
41
|
t !== 0 && /* @__PURE__ */ e.createElement(
|
|
43
42
|
"div",
|
|
@@ -83,10 +82,10 @@ const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-org
|
|
|
83
82
|
role: "group",
|
|
84
83
|
style: { width: "100%" },
|
|
85
84
|
className: E("k-orgchart-node-container", {
|
|
86
|
-
[`k-${y.orientationMap[
|
|
85
|
+
[`k-${y.orientationMap[i] || i}`]: i
|
|
87
86
|
})
|
|
88
87
|
},
|
|
89
|
-
|
|
88
|
+
o.children
|
|
90
89
|
)
|
|
91
90
|
),
|
|
92
91
|
N && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-common"),i=require("@progress/kendo-react-layout"),R=require("../client/ExpandButton.js"),S=require("../client/OrgChartCard.js"),T=require("../client/OrgChartCardBody.js");function q(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(r,a,c.get?c:{enumerable:!0,get:()=>t[a]})}}return r.default=t,Object.freeze(r)}const e=q(f),w="k-orgchart-node",x=t=>{const r={avatarType:"image"},{id:a,title:c,subtitle:o,level:n,childLineWidth:d,cardWidth:p,cardHeight:v,verticalLine:k,color:E,line:C,plus:m,expanded:l,node:s,avatar:g,avatarType:u,itemRender:N,showAvatar:y,...O}={...r,...t},h=N;return e.createElement("div",{...O,className:b.classNames(t.className,w,"k-vstack","k-align-items-center")},n!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:k}}),e.createElement(S.OrgChartCard,{node:s,style:{width:p,height:v},"aria-level":n+1,"aria-expanded":!!l,"aria-owns":a},e.createElement(T.OrgChartCardBody,{level:n},h?e.createElement(h,{item:s,title:c,subtitle:o,level:n,expanded:l,color:E}):e.createElement(e.Fragment,null,y&&e.createElement(i.Avatar,{type:u,themeColor:"secondary"},u==="image"?e.createElement("img",{src:g,alt:"KendoReact Avatar Customer"}):g),e.createElement("div",{className:"k-card-title-wrap k-vstack"},e.createElement(i.CardTitle,{className:"k-text-ellipsis"},c),e.createElement("span",{className:"k-spacer"}),e.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},o)),e.createElement("span",{className:"k-spacer"})))),C&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&e.createElement(R.ExpandButton,{expanded:l,node:s}),m&&!!d&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:d,marginTop:-15}}))};exports.ServerOrgChartNode=x;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as e from "react";
|
|
10
9
|
import { classNames as f } from "@progress/kendo-react-common";
|
|
11
10
|
import { Avatar as x, CardTitle as A, CardSubtitle as R } from "@progress/kendo-react-layout";
|
|
@@ -20,16 +19,16 @@ const S = "k-orgchart-node", D = (l) => {
|
|
|
20
19
|
title: c,
|
|
21
20
|
subtitle: i,
|
|
22
21
|
level: t,
|
|
23
|
-
childLineWidth:
|
|
22
|
+
childLineWidth: m,
|
|
24
23
|
cardWidth: g,
|
|
25
24
|
cardHeight: v,
|
|
26
25
|
verticalLine: E,
|
|
27
26
|
color: k,
|
|
28
27
|
line: N,
|
|
29
|
-
plus:
|
|
28
|
+
plus: n,
|
|
30
29
|
expanded: a,
|
|
31
30
|
node: r,
|
|
32
|
-
avatar:
|
|
31
|
+
avatar: s,
|
|
33
32
|
avatarType: o,
|
|
34
33
|
itemRender: C,
|
|
35
34
|
showAvatar: u,
|
|
@@ -67,11 +66,11 @@ const S = "k-orgchart-node", D = (l) => {
|
|
|
67
66
|
expanded: a,
|
|
68
67
|
color: k
|
|
69
68
|
}
|
|
70
|
-
) : /* @__PURE__ */ e.createElement(e.Fragment, null, u && /* @__PURE__ */ e.createElement(x, { type: o, themeColor: "secondary" }, o === "image" ? /* @__PURE__ */ e.createElement("img", { src:
|
|
69
|
+
) : /* @__PURE__ */ e.createElement(e.Fragment, null, u && /* @__PURE__ */ e.createElement(x, { type: o, themeColor: "secondary" }, o === "image" ? /* @__PURE__ */ e.createElement("img", { src: s, alt: "KendoReact Avatar Customer" }) : s), /* @__PURE__ */ e.createElement("div", { className: "k-card-title-wrap k-vstack" }, /* @__PURE__ */ e.createElement(A, { className: "k-text-ellipsis" }, c), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement(R, { className: "k-text-ellipsis" }, i)), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" })))
|
|
71
70
|
),
|
|
72
71
|
N && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
n && /* @__PURE__ */ e.createElement(w, { expanded: a, node: r }),
|
|
73
|
+
n && !!m && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: m, marginTop: -15 } })
|
|
75
74
|
);
|
|
76
75
|
};
|
|
77
76
|
export {
|
package/theming/theme-service.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=s=>window.getComputedStyle(s).backgroundColor,d=s=>s.toLowerCase().charCodeAt(0)-97,v=s=>{const e=s.match(/series-([a-z])$/);if(e!==null)return d(e[1]);const r=s.split("--series-")[1];return parseInt(r,10)-1},u=30,m=()=>{let s=`
|
|
9
9
|
<div class="k-var--series-a"></div>
|
|
10
10
|
<div class="k-var--series-b"></div>
|
|
11
11
|
<div class="k-var--series-c"></div>
|
|
@@ -18,4 +18,4 @@
|
|
|
18
18
|
<div class="k-var--series">
|
|
19
19
|
${m()}
|
|
20
20
|
</div>
|
|
21
|
-
`;class k{getSeriesColors(){const e=this.element,r=[].slice.call(e.querySelectorAll(".k-var--series div")),t=
|
|
21
|
+
`;class k{getSeriesColors(){const e=this.element,r=[].slice.call(e.querySelectorAll(".k-var--series div")),t=a(e.querySelector(".k-var--series-unset"));return r.reduce((o,l)=>{const c=v(l.className),n=a(l);return n!==t&&(o[c]=n),o},[])}}const p=(s,e)=>{const r=new k,t=r.element=e.createElement("div");t.style.display="none",t.innerHTML=C,e.body.appendChild(t);let i;try{i=r.getSeriesColors()}finally{e.body.removeChild(r.element),delete r.element,s(i)}};exports.loadTheme=p;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
const c = (s) => window.getComputedStyle(s).backgroundColor, d = (s) => s.toLowerCase().charCodeAt(0) - 97, v = (s) => {
|
|
10
9
|
const e = s.match(/series-([a-z])$/);
|
|
11
10
|
if (e !== null)
|
package/utils/consts.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="expanded",I="items",_="selected",T="checked",D="checkIndeterminate",L="k-orgchart",t=80,H=300,c=25,N=40,e=20,n=20,o=82;exports.CHECK_FIELD=T;exports.CHECK_INDETERMINATE_FIELD=D;exports.CHILDREN_FIELD=I;exports.EXPAND_FIELD=E;exports.GROUP_PADDINGS=o;exports.GROUP_SUBTITLE_HEIGHT=n;exports.GROUP_TITLE_HEIGHT=e;exports.HORIZONTAL_GAP=c;exports.NODE_HEIGHT=t;exports.NODE_WIDTH=H;exports.ORGCHART_CLASSNAME=L;exports.SELECT_FIELD=_;exports.VERTICAL_LINE=N;
|
package/utils/consts.mjs
CHANGED
|
@@ -5,8 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"
|
|
9
|
-
const E = "expanded", c = "items", t = "selected", I = "checked", n = "checkIndeterminate", s = "k-orgchart", _ = 80, e = 300, o = 25, T = 40, D = 20, L = 20, H = 82;
|
|
8
|
+
const E = "expanded", c = "items", t = "selected", I = "checked", n = "checkIndeterminate", _ = "k-orgchart", o = 80, s = 300, T = 25, e = 40, D = 20, L = 20, H = 82;
|
|
10
9
|
export {
|
|
11
10
|
I as CHECK_FIELD,
|
|
12
11
|
n as CHECK_INDETERMINATE_FIELD,
|
|
@@ -15,10 +14,10 @@ export {
|
|
|
15
14
|
H as GROUP_PADDINGS,
|
|
16
15
|
L as GROUP_SUBTITLE_HEIGHT,
|
|
17
16
|
D as GROUP_TITLE_HEIGHT,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
T as HORIZONTAL_GAP,
|
|
18
|
+
o as NODE_HEIGHT,
|
|
19
|
+
s as NODE_WIDTH,
|
|
20
|
+
_ as ORGCHART_CLASSNAME,
|
|
22
21
|
t as SELECT_FIELD,
|
|
23
|
-
|
|
22
|
+
e as VERTICAL_LINE
|
|
24
23
|
};
|