@progress/kendo-themes-html/dist/esm/orgchart/templates/orgchart-normal.mjs

A collection of HTML helpers used for developing Kendo UI themes

var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((a,n)=>e[n]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var A=(t,e)=>r({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),h=(t,e)=>{let{valid:a,invalid:n,hover:c,focus:l,checked:i,active:m,selected:u,disabled:b,indeterminate:_,loading:$,empty:st,readonly:U,highlighted:B,...F}=e;return r({"k-valid":a,"k-invalid":n,"k-hover":c,"k-focus":l,"k-checked":i,"k-active":m,"k-selected":u,"k-disabled":b,"k-indeterminate":_&&!i,"k-loading":$,"k-empty":st,"k-readonly":U,"k-highlighted":B},Object.keys(F).reduce((V,k)=>(k.startsWith("k-")?V[k]=F[k]:V[`k-${k}`]=F[k],V),{}))};function Ot(t,e){if(!e)return{};let a=Array.isArray(e)?e:[e];return Object.fromEntries(a.map(n=>[`k-${n}`,!0]))}var s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={small:"small",medium:"medium",large:"large",full:"full"},N={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},d={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"},L={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var it="orgchart",Mt=it;import{jsx as yt}from"react/jsx-runtime";var Et="k-orgchart",jt=[],te={},lt={width:"100%",height:"300px"},v=t=>{let{width:e=lt.width,height:a=lt.height,...n}=t;return yt("div",{...n,className:r(t.className,Et),children:yt("div",{className:"k-orgchart-container",style:{width:e,height:a},children:t.children})})};v.states=jt;v.options=te;v.className=Et;v.defaultOptions=lt;v.moduleName=it;v.folderName=Mt;import{jsx as oe}from"react/jsx-runtime";var ee="k-card-callout",St=t=>{let{callout:e,...a}=t;return oe("span",{...a,className:r(t.className,ee,{[`k-callout-${L.calloutMap[e]||e}`]:e})})};var f="card",x=f;import{Fragment as se,jsx as kt,jsxs as ie}from"react/jsx-runtime";var tt="k-card",re=[d.hover,d.focus,d.selected,d.disabled],ae={themeColor:[o.primary,o.success,o.warning,o.error,o.info]},ne={},g=t=>{let{orientation:e,themeColor:a,callout:n,hover:c,focus:l,selected:i,disabled:m,...u}=t;return ie("div",{...u,className:r(t.className,tt,A(tt,{themeColor:a}),h(tt,{hover:c,focus:l,disabled:m,selected:i}),{[`k-card-${e}`]:e,"k-card-with-callout":n}),children:[n&&n!=="true"&&kt(St,{callout:n}),kt(se,{children:t.children})]})};g.states=re;g.options=ae;g.className=tt;g.defaultOptions=ne;g.moduleName=f;g.folderName=x;import{Fragment as me,jsx as Lt}from"react/jsx-runtime";var dt="k-card-list",le=[],de={},ce={},H=t=>{let{...e}=t;return Lt("div",{...e,className:r(t.className,dt,h(dt,{})),children:Lt(me,{children:t.children})})};H.states=le;H.options=de;H.className=dt;H.defaultOptions=ce;H.moduleName=f;H.folderName=x;import{jsx as he}from"react/jsx-runtime";var Kt="k-card-group",pe=[],ue={},fe={},I=t=>{let{...e}=t;return he("div",{...e,className:r(t.className,Kt),children:t.children})};I.states=pe;I.options=ue;I.className=Kt;I.defaultOptions=fe;I.moduleName=f;I.folderName=x;import{jsx as be}from"react/jsx-runtime";var ct="k-card-wrap",Ce=[d.focus,d.selected],Ne={},xe={},G=t=>{let{focus:e,selected:a,...n}=t;return be("div",{...n,className:r(t.className,ct,h(ct,{focus:e,selected:a})),children:t.children})};G.states=Ce;G.options=Ne;G.className=ct;G.defaultOptions=xe;G.moduleName=f;G.folderName=x;import{jsx as Ae}from"react/jsx-runtime";var mt="k-card-title",ve=[d.hover,d.focus],K=t=>{let{hover:e,focus:a,...n}=t;return Ae("div",{...n,className:r(t.className,mt,h(mt,{hover:e,focus:a})),children:t.children})};K.states=ve;K.className=mt;import{jsx as Te}from"react/jsx-runtime";var ge="k-card-subtitle",W=t=>{let{...e}=t;return Te("div",{...e,className:r(t.className,ge),children:t.children})};import{Fragment as Qo,jsx as Yo}from"react/jsx-runtime";import{Fragment as Ee,jsx as Rt}from"react/jsx-runtime";var pt="k-font-icon",Oe=[],Me={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ye={},X=t=>{let{size:e,themeColor:a,icon:n,rotate:c,flip:l,...i}=t;return n?Rt("span",{...i,className:r(t.className,pt,A(pt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${a}`]:a,[`k-rotate-${c}`]:c,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"})}):Rt(Ee,{})};X.states=Oe;X.options=Me;X.className=pt;X.defaultOptions=ye;var Dt=X;import{Fragment as Le,jsx as et}from"react/jsx-runtime";var ut="k-svg-icon",Se=[],ke={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},_t={viewBox:"0 0 24 24"},J=t=>{let{size:e,themeColor:a,rotate:n,flip:c,viewBox:l=_t.viewBox,icon:i,...m}=t;if(!i)return et(Le,{});i==="none"&&{...m,className:r(t.className,ut,"k-none")};let u=typeof i=="object"&&i.name&&i.name;return et("span",{...m,className:r(t.className,ut,A("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${a}`]:a,[`k-rotate-${n}`]:n,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),children:et("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:l,dangerouslySetInnerHTML:typeof i=="object"?{__html:i.content}:void 0,children:i?void 0:t.children})})};J.states=Se;J.options=ke;J.className=ut;J.defaultOptions=_t;var ft=J;import*as ht from"@progress/kendo-svg-icons";var Bt="icon",Ht="icons";import{Fragment as It,jsx as q}from"react/jsx-runtime";var ot="k-icon",Ke=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Re=[],De={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Ct={viewBox:"0 0 24 24",type:"svg"},M=t=>{let{size:e,themeColor:a,icon:n,type:c=Ct.type,rotate:l,flip:i,viewBox:m=Ct.viewBox,...u}=t;if(!n)return q(It,{});if(c==="svg"){if(n==="none")return q(ft,{...u,className:r(t.className,ot),icon:n,size:e});let b=ht[n]?n:Ke(`${n}-icon`);return ht[b]?q(ft,{...u,className:r(t.className,ot),icon:ht[b],size:e,themeColor:a,rotate:l,flip:i,viewBox:m}):q(It,{})}return q(Dt,{...u,className:r(t.className,ot),icon:n,size:e,themeColor:a,rotate:l,flip:i})};M.states=Re;M.options=De;M.defaultOptions=Ct;M.className=ot;M.moduleName=Bt;M.folderName=Ht;var Nt="button",Gt=Nt;import{Fragment as Ie,jsx as Y,jsxs as wt}from"react/jsx-runtime";var Q="k-button",_e=["icon-button"],Be=[d.hover,d.focus,d.active,d.selected,d.disabled,d.generating],He={size:[s.small,s.medium,s.large],rounded:[C.small,C.medium,C.large,C.full],fillMode:[N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},R={size:s.medium,rounded:C.medium,fillMode:N.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},p=t=>{let{size:e=R.size,rounded:a=R.rounded,fillMode:n=R.fillMode,themeColor:c=R.themeColor,showArrow:l=R.showArrow,arrowIconName:i=R.arrowIconName,variant:m,hover:u,focus:b,active:_,selected:$,disabled:st,icon:U,text:B,iconClassName:F,...V}=t,k=U!==void 0,Zt=t.children!==void 0;return wt("button",{...V,className:r(t.className,Q,Ot(Q,m),A(Q,{size:e,rounded:a,fillMode:n,themeColor:c}),h(Q,{hover:u,focus:b,active:_,disabled:st,selected:$}),{"k-icon-button":!B&&!Zt&&k}),children:[U&&Y(M,{className:r(F,"k-button-icon"),icon:U}),B?wt(Ie,{children:[B&&Y("span",{className:"k-button-text",children:B}),t.children]}):t.children&&Y("span",{className:"k-button-text",children:t.children}),l&&Y("span",{className:"k-menu-button-arrow k-button-arrow",children:Y(M,{icon:i})})]})};p.states=Be;p.options=He;p.variants=_e;p.className=Q;p.defaultOptions=R;p.moduleName=Nt;p.folderName=Gt;import{jsx as Or}from"react/jsx-runtime";import{jsx as Sr}from"react/jsx-runtime";import{jsx as Rr}from"react/jsx-runtime";import{Fragment as Vr,jsx as Fr,jsxs as Wr}from"react/jsx-runtime";import{jsx as Yr}from"react/jsx-runtime";import{Fragment as we,jsx as Z,jsxs as ze}from"react/jsx-runtime";var Ge="k-card-body",rt=t=>{let{title:e,subtitle:a,details:n,...c}=t;return ze("div",{...c,className:r(t.className,Ge),children:[e&&Z(K,{children:e}),a&&Z(W,{children:a}),Z(we,{children:t.children}),n&&Z("span",{className:"k-card-header-actions",children:Z(p,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as Fe}from"react/jsx-runtime";var zt="k-card-deck",Pe=[],$e={},Ue={},w=t=>{let{...e}=t;return Fe("div",{...e,className:r(t.className,zt),children:t.children})};w.states=Pe;w.options=$e;w.className=zt;w.defaultOptions=Ue;w.moduleName=f;w.folderName=x;import{jsx as Je}from"react/jsx-runtime";var Pt="k-card-deck-scrollwrap",Ve=[],We={},Xe={},z=t=>{let{...e}=t;return Je("div",{...e,className:r(t.className,Pt),children:t.children})};z.states=Ve;z.options=We;z.className=Pt;z.defaultOptions=Xe;z.moduleName=f;z.folderName=x;var xt="action-buttons",$t=xt;import{jsx as Qe}from"react/jsx-runtime";var at="k-actions",qe=[],Ye={},bt={alignment:"start",orientation:"horizontal"},E=t=>{let{alignment:e=bt.alignment,orientation:a=bt.orientation,...n}=t;return Qe("div",{...n,className:r(at,{[`${at}-${e}`]:e,[`${at}-${a}`]:a},t.className),children:t.children})};E.states=qe;E.options=Ye;E.className=at;E.defaultOptions=bt;E.moduleName=xt;E.folderName=$t;import{Fragment as ya,jsx as Oa,jsxs as Ma}from"react/jsx-runtime";import{Fragment as _a,jsx as Ra,jsxs as Da}from"react/jsx-runtime";var vt="avatar",Ut=vt;import{jsx as Ft}from"react/jsx-runtime";var j="k-avatar";var Ze=[d.hover,d.focus,d.active,d.selected,d.disabled],je={size:[s.small,s.medium,s.large],rounded:[C.small,C.medium,C.large,C.full],fillMode:[N.solid,N.flat,N.outline],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},D={type:"text",size:s.medium,rounded:C.full,fillMode:N.solid,themeColor:o.primary,border:!1},S=t=>{let{size:e=D.size,rounded:a=D.rounded,fillMode:n=D.fillMode,themeColor:c=D.themeColor,type:l=D.type,border:i=D.border,...m}=t;return Ft("div",{...m,className:r(t.className,j,A(j,{size:e,rounded:a,fillMode:n,themeColor:c}),{[`${j}-bordered`]:i}),children:Ft("span",{className:`${j}-${l}`,children:t.children})})};S.states=Ze;S.options=je;S.className=j;S.defaultOptions=D;S.moduleName=vt;S.folderName=Ut;import{jsx as nn}from"react/jsx-runtime";import{jsx as cn}from"react/jsx-runtime";import{jsx as fn}from"react/jsx-runtime";import{jsx as T,jsxs as At}from"react/jsx-runtime";var to="k-orgchart-node",Wt={buttonIcon:"plus",details:!0},O=t=>{let{title:e,subtitle:a,details:n=Wt.details,color:c,lineBottom:l,lineTop:i,button:m,buttonIcon:u=Wt.buttonIcon,avatar:b,avatarType:_,...$}=t;return At("div",{...$,className:r(t.className,to,"k-vstack","k-align-items-center"),children:[i&&T("div",{className:"k-orgchart-line k-orgchart-line-v"}),T(g,{className:"k-orgchart-card",children:At(rt,{className:"k-hstack",details:n,style:{borderTopColor:c},children:[T(S,{type:_,themeColor:"secondary",children:_==="image"?T("img",{src:b}):b}),At("div",{className:"k-card-title-wrap k-vstack",children:[T(K,{className:"k-text-ellipsis",children:e}),T("span",{className:"k-spacer"}),T(W,{className:"k-text-ellipsis",children:a})]}),T("span",{className:"k-spacer"})]})}),l&&T("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&T(p,{className:"k-orgchart-button",icon:u})]})};import{Fragment as Xt,jsx as gt,jsxs as ro}from"react/jsx-runtime";var Jt="k-orgchart-group",eo=[],oo={},qt={orientation:"horizontal"},y=t=>{let{children:e,orientation:a=qt.orientation,justifyContent:n,...c}=t,l=[],i=[];return e&&(Array.isArray(e)?e.map(m=>{m.type===O?l.push(m):i.push(m)}):e.type===O?l.push(e):i.push(e)),ro("div",{...c,className:r(Jt,"k-pos-absolute",{[`k-${L.orientationMap[a]||a}`]:a,[`k-justify-content-${n}`]:n}),style:{width:"100%"},children:[l.length>0&&gt("div",{className:r("k-orgchart-node-container","k-justify-content-around",{[`k-${L.orientationMap[a]||a}`]:a}),children:gt(Xt,{children:l})}),gt(Xt,{children:i})]})};y.states=eo;y.options=oo;y.className=Jt;y.defaultOptions=qt;import{jsx as P,jsxs as Qt}from"react/jsx-runtime";var ao="k-orgchart-node-group",no=[d.focus],Yt={orientation:"horizontal",buttonIcon:"plus"},Tt=t=>{let{title:e,subtitle:a,lineBottom:n,lineTop:c,button:l,buttonIcon:i=Yt.buttonIcon,focus:m,orientation:u=Yt.orientation,...b}=t;return Qt("div",{...b,className:r(t.className,ao,"k-vstack","k-align-items-center"),children:[c&&P("div",{className:"k-orgchart-line k-orgchart-line-v"}),Qt("div",{className:r("k-orgchart-node-group-container","k-vstack",h("k-orgchart-node-group-container",{focus:m})),children:[e&&P("div",{className:"k-orgchart-node-group-title",children:e}),a&&P("div",{className:"k-orgchart-node-group-subtitle",children:a}),P("div",{className:r("k-orgchart-node-container",{[`k-${L.orientationMap[u]||u}`]:u}),children:t.children})]}),n&&P("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&P(p,{className:"k-orgchart-button",icon:i})]})};Tt.states=no;import{jsx as In,jsxs as Gn}from"react/jsx-runtime";import{jsx as $n,jsxs as Un}from"react/jsx-runtime";import{jsx as Xn,jsxs as Jn}from"react/jsx-runtime";import{jsx as nt,jsxs as so}from"react/jsx-runtime";var ss=({details:t,justifyContent:e,...a})=>nt(v,{children:so(y,{justifyContent:e,children:[nt(O,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",lineBottom:!0,button:!0}),nt(O,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",lineBottom:!0,button:!0}),nt(O,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",lineBottom:!0,button:!0})]}),...a});export{ss as OrgchartNormal};