@progress/kendo-themes-html/dist/esm/orgchart/templates/orgchart-vertical.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((o,a)=>e[a]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var H=(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.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),y=(t,e)=>{let{valid:o,invalid:a,hover:s,focus:c,checked:m,active:d,selected:g,disabled:C,indeterminate:T,loading:$,empty:R,readonly:G,highlighted:at,...D}=e;return r({"k-valid":o,"k-invalid":a,"k-hover":s,"k-focus":c,"k-checked":m,"k-active":d,"k-selected":g,"k-disabled":C,"k-indeterminate":T&&!m,"k-loading":$,"k-empty":R,"k-readonly":G,"k-highlighted":at},Object.keys(D).reduce((N,_)=>(_.startsWith("k-")?N[_]=D[_]:N[`k-${_}`]=D[_],N),{}))};function Vt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var l={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},x={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},L={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},B={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},u={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"},z={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var kt="orgchart",Wt=kt;import{jsx as qt}from"react/jsx-runtime";var Jt="k-orgchart",Pe=[],Ge={},Tt={width:"100%",height:"300px"},p=t=>{let{width:e=Tt.width,height:o=Tt.height,...a}=t;return qt("div",{...a,className:r(t.className,Jt),children:qt("div",{className:"k-orgchart-container",style:{width:e,height:o},children:t.children})})};p.states=Pe;p.options=Ge;p.className=Jt;p.defaultOptions=Tt;p.moduleName=kt;p.folderName=Wt;p.ariaSpec={selector:".k-orgchart",rules:[{selector:".k-orgchart-level-1",attribute:"role=tree",usage:"The root div element of the OrgChart. Contains all its top level items."},{selector:".k-orgchart-level-1",attribute:"aria-orientation=horizontal",usage:"Specifies the orientation of the OrgChart tree."},{selector:".k-orgchart-group:not(.k-orgchart-level-1)",attribute:"role=group",usage:"The element that wraps child nodes."},{selector:".k-orgchart-node-group",attribute:"role=group",usage:"The element that groups nodes visually with a title and expand/collapse button."},{selector:".k-orgchart-node-container",attribute:"role=presentation",usage:"The node container must not break the tree-treeitem relationship."},{selector:".k-orgchart-node",attribute:"role=treeitem",usage:"The node wrapper representing the treeitem in the hierarchical structure."},{selector:".k-orgchart-node",attribute:"aria-level",usage:"Announces the level of the tree node item. The value of level is number-based (>=1)."},{selector:".k-orgchart-node",attribute:"aria-keyshortcuts=Enter",usage:"Announces that the edit menu of the OrgChart can be activated via the Enter key."},{selector:".k-orgchart-node",attribute:"aria-expanded=true or aria-expanded=false (when present)",usage:"Present when a node has subitems. Announces the expanded state of the node."},{selector:".k-orgchart-node",attribute:"aria-owns (when present)",usage:"Present when a node has subitems. The value is the id of the group containing child nodes."},{selector:".k-orgchart-node.k-focus",attribute:"aria-selected=true",usage:"Announces the selected (focused) item in the OrgChart."},{selector:".k-orgchart-node:not(.k-focus)",attribute:"aria-selected=false",usage:"Announces the not selected (focused) items in the OrgChart."},{selector:".k-avatar-image img",attribute:"alt",usage:"Describes the avatar image of an item."},{selector:".k-orgchart-card-menu",attribute:"role=button",usage:"Specifies the menu icon of the item is a button."},{selector:".k-orgchart-card-menu",attribute:"aria-label=Edit menu",usage:"Provides an accessible name for the edit button."},{selector:".k-orgchart-card-menu",attribute:"tabindex=-1",usage:"The Edit menu button must not be part of the page tab sequence."},{selector:".k-orgchart-button",attribute:"role=presentation",usage:"The expand/collapse button is decorative."},{selector:".k-orgchart-button",attribute:"aria-hidden=true",usage:"Hides the button from assistive technology."},{selector:".k-orgchart-button",attribute:"tabindex=-1",usage:"The expand/collapse button must not be part of the page tab sequence."}]};import{jsx as Fe}from"react/jsx-runtime";var ze="k-card-callout",Xt=t=>{let{callout:e,...o}=t;return Fe("span",{...o,className:r(t.className,ze,{[`k-callout-${z.calloutMap[e]||e}`]:e})})};var O="card",M=O;import{Fragment as We,jsx as Yt,jsxs as qe}from"react/jsx-runtime";var Ot="k-card",Ue=[u.hover,u.focus,u.selected,u.disabled],$e={},Ve={},f=t=>{let{orientation:e,callout:o,hover:a,focus:s,selected:c,disabled:m,...d}=t;return qe("div",{...d,className:r(t.className,Ot,y(Ot,{hover:a,focus:s,disabled:m,selected:c}),{[`k-card-${e}`]:e,"k-card-with-callout":o}),children:[o&&o!=="true"&&Yt(Xt,{callout:o}),Yt(We,{children:t.children})]})};f.states=Ue;f.options=$e;f.className=Ot;f.defaultOptions=Ve;f.moduleName=O;f.folderName=M;f.ariaSpec={selector:".k-card",rules:[{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"When the card is located in a list, it should have the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card component is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to the title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the bound Enter key that enables navigation inside the card."}]};import{Fragment as Qe,jsx as Qt}from"react/jsx-runtime";var yt="k-card-list",Je=[],Xe={},Ye={},P=t=>{let{...e}=t;return Qt("div",{...e,className:r(t.className,yt,y(yt,{})),role:"list",children:Qt(Qe,{children:t.children})})};P.states=Je;P.options=Xe;P.className=yt;P.defaultOptions=Ye;P.moduleName=O;P.folderName=M;P.ariaSpec={selector:".k-card-list",rules:[{selector:".k-card-list",attribute:"role=list",usage:"The card list container announces its list role."},{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"Each card in the list has the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to its title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the Enter key for navigation inside the card."}]};import{jsx as eo}from"react/jsx-runtime";var Zt="k-card-group",Ze=[],je={},to={},V=t=>{let{...e}=t;return eo("div",{...e,className:r(t.className,Zt),children:t.children})};V.states=Ze;V.options=je;V.className=Zt;V.defaultOptions=to;V.moduleName=O;V.folderName=M;import{jsx as no}from"react/jsx-runtime";var Mt="k-card-wrap",oo=[u.focus,u.selected],ro={},ao={},W=t=>{let{focus:e,selected:o,...a}=t;return no("div",{...a,className:r(t.className,Mt,y(Mt,{focus:e,selected:o})),children:t.children})};W.states=oo;W.options=ro;W.className=Mt;W.defaultOptions=ao;W.moduleName=O;W.folderName=M;import{jsx as so}from"react/jsx-runtime";var St="k-card-title",io=[u.hover,u.focus],I=t=>{let{hover:e,focus:o,...a}=t;return so("div",{...a,className:r(t.className,St,y(St,{hover:e,focus:o})),children:t.children})};I.states=io;I.className=St;import{jsx as co}from"react/jsx-runtime";var lo="k-card-subtitle",q=t=>{let{...e}=t;return co("div",{...e,className:r(t.className,lo),children:t.children})};import{Fragment as te,jsx as gt}from"react/jsx-runtime";var jt="k-card-media",Lt=t=>{let{src:e,...o}=t;return gt(te,{children:e?gt("img",{...o,className:r(t.className,jt),src:e}):gt("span",{...o,className:r(t.className,jt),children:gt(te,{children:t.children})})})};import{Fragment as fo,jsx as ee}from"react/jsx-runtime";var Et="k-font-icon",mo=[],uo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},po={},nt=t=>{let{size:e,themeColor:o,icon:a,rotate:s,flip:c,...m}=t;return a?ee("span",{...m,className:r(t.className,Et,H(Et,{size:e}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):ee(fo,{})};nt.states=mo;nt.options=uo;nt.className=Et;nt.defaultOptions=po;var oe=nt;import{Fragment as vo,jsx as Ct}from"react/jsx-runtime";var Bt="k-svg-icon",ho=[],bo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[B.outline,B.solid,B.duotone]},Kt={viewBox:"0 0 24 24",variant:B.outline},it=t=>{let{size:e,themeColor:o,rotate:a,flip:s,viewBox:c=Kt.viewBox,variant:m=Kt.variant,icon:d,...g}=t;if(!d)return Ct(vo,{});if(d==="none")return Ct("span",{...g,className:r(t.className,Bt,H("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let C=typeof d=="object"&&d.name&&d.name,T=typeof d=="object"?m&&d.variants?.[m]||d.variants?.outline||d.content:void 0;return Ct("span",{...g,className:r(t.className,Bt,H("k-icon",{size:e}),{[`k-svg-i-${C}`]:C,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:Ct("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:T!==void 0?{__html:T}:void 0,children:d?void 0:t.children})})};it.states=ho;it.options=bo;it.className=Bt;it.defaultOptions=Kt;var Rt=it;import*as Dt from"@progress/kendo-svg-icons";var re="icon",ae="icons";import{useContext as Co}from"react";import{createContext as go}from"react";var ne=go({iconsType:"svg"});import{Fragment as ie,jsx as st}from"react/jsx-runtime";var Nt="k-icon",No=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),xo=[],Ao={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[B.outline,B.solid,B.duotone]},xt={viewBox:"0 0 24 24",type:"svg",variant:B.outline},S=t=>{let{iconsType:e}=Co(ne),{size:o,themeColor:a,icon:s,type:c=e||xt.type,rotate:m,flip:d,viewBox:g=xt.viewBox,variant:C=xt.variant,...T}=t;if(!s)return st(ie,{});if((e||c)==="svg"){if(s==="none")return st(Rt,{...T,className:r(t.className,Nt),icon:s,size:o,variant:C});let R=Dt[s]?s:No(`${s}-icon`);return Dt[R]?st(Rt,{...T,className:r(t.className,Nt),icon:Dt[R],size:o,themeColor:a,rotate:m,flip:d,viewBox:g,variant:C}):st(ie,{})}return st(oe,{...T,className:r(t.className,Nt),icon:s,size:o,themeColor:a,rotate:m,flip:d})};S.states=xo;S.options=Ao;S.defaultOptions=xt;S.className=Nt;S.moduleName=re;S.folderName=ae;S.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var _t="button",se=_t;import{Fragment as le,jsx as J,jsxs as de}from"react/jsx-runtime";var lt="k-button",ko=["icon-button"],To=[u.hover,u.focus,u.active,u.selected,u.disabled,u.generating],Oo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[x.undefined,x.none,x.small,x.medium,x.large,x.full],fillMode:[L.undefined,L.solid,L.flat,L.outline,L.clear,L.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},Ht={showArrow:!1,arrowIconName:"chevron-down"},i=t=>{let{as:e="button",size:o,rounded:a,fillMode:s,themeColor:c,showArrow:m=Ht.showArrow,arrowIconName:d=Ht.arrowIconName,variant:g,hover:C,focus:T,active:$,selected:R,disabled:G,togglable:at,ariaDisabled:D,icon:N,iconSize:_,text:vt,iconClassName:De,className:_e,...He}=t,Ie=N!=null,we=t.children!==void 0;return de(e,{className:r(_e,lt,Vt(lt,g),H(lt,{size:o,rounded:a,fillMode:s,themeColor:c}),y(lt,{hover:C,focus:T,active:$,disabled:G||D,selected:R}),{"k-icon-button":!vt&&!we&&Ie}),"aria-pressed":at?R?"true":"false":void 0,...He,"aria-disabled":D?"true":void 0,disabled:G||void 0,children:[typeof N=="string"&&N&&J(S,{className:r(De,"k-button-icon"),icon:N,size:_}),N&&typeof N!="string"&&J(le,{children:N}),vt?de(le,{children:[vt&&J("span",{className:"k-button-text",children:vt}),t.children]}):t.children&&J("span",{className:"k-button-text",children:t.children}),m&&J("span",{className:"k-menu-button-arrow k-button-arrow",children:J(S,{icon:d})})]})};i.states=To;i.options=Oo;i.variants=ko;i.className=lt;i.defaultOptions=Ht;i.moduleName=_t;i.folderName=se;i.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as yo}from"react/jsx-runtime";var ce=t=>yo(i,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Mo}from"react/jsx-runtime";var me=t=>Mo(i,{icon:"folder",children:"Button",...t});import{jsx as So}from"react/jsx-runtime";var ue=t=>So(i,{children:"Button",...t});import{jsx as It}from"react/jsx-runtime";var Lo=i.options,Eo=i.states,Bo={...i.defaultOptions,variant:"text"},Ko=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ro=[],X=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return It(ce,{...o,icon:"star"});case"icon-and-text":return It(me,{...o,icon:"star",children:"Button"});default:return It(ue,{...o,children:"Button"})}};X.options=Lo;X.states=Eo;X.variants=Ko;X.defaultOptions=Bo;X.modifiers=Ro;X.className=i.className;import{Fragment as _o,jsx as dt,jsxs as Ho}from"react/jsx-runtime";var Do="k-card-header",ct=t=>{let{title:e,subtitle:o,details:a,...s}=t;return Ho("div",{...s,className:r(t.className,Do),children:[e&&dt(I,{children:e}),o&&dt(q,{children:o}),dt(_o,{children:t.children}),a&&dt("span",{className:"k-card-header-actions",children:dt(i,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as wo}from"react/jsx-runtime";var Io="k-card-footer",wt=t=>{let{...e}=t;return wo("div",{...e,className:r(t.className,Io),children:t.children})};import{Fragment as Go,jsx as mt,jsxs as zo}from"react/jsx-runtime";var Po="k-card-body",K=t=>{let{title:e,subtitle:o,details:a,...s}=t;return zo("div",{...s,className:r(t.className,Po),children:[e&&mt(I,{children:e}),o&&mt(q,{children:o}),mt(Go,{children:t.children}),a&&mt("span",{className:"k-card-header-actions",children:mt(i,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as Vo}from"react/jsx-runtime";var pe="k-card-deck",Fo=[],Uo={},$o={},Y=t=>{let{...e}=t;return Vo("div",{...e,className:r(t.className,pe),children:t.children})};Y.states=Fo;Y.options=Uo;Y.className=pe;Y.defaultOptions=$o;Y.moduleName=O;Y.folderName=M;import{jsx as Xo}from"react/jsx-runtime";var fe="k-card-deck-scrollwrap",Wo=[],qo={},Jo={},Q=t=>{let{...e}=t;return Xo("div",{...e,className:r(t.className,fe),children:t.children})};Q.states=Wo;Q.options=qo;Q.className=fe;Q.defaultOptions=Jo;Q.moduleName=O;Q.folderName=M;var Pt="action-buttons",he=Pt;import{jsx as Zo}from"react/jsx-runtime";var At="k-actions",Yo=[],Qo={},Gt={alignment:"start",orientation:"horizontal"},A=t=>{let{alignment:e=Gt.alignment,orientation:o=Gt.orientation,...a}=t;return Zo("div",{...a,className:r(At,{[`${At}-${e}`]:e,[`${At}-${o}`]:o},t.className),children:t.children})};A.states=Yo;A.options=Qo;A.className=At;A.defaultOptions=Gt;A.moduleName=Pt;A.folderName=he;import{Fragment as jo,jsx as Z,jsxs as be}from"react/jsx-runtime";var ve=t=>Z(f,{orientation:"vertical",children:be(jo,{children:[Z(ct,{children:"Card Header"}),Z(K,{children:Z("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),be(A,{className:"k-card-actions",children:[Z(i,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),Z(i,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...t});import{Fragment as tr,jsx as ut,jsxs as ge}from"react/jsx-runtime";var Ce=t=>ut(f,{orientation:"horizontal",children:ge(tr,{children:[ut(K,{title:"Card Title",children:ut("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),ge(A,{orientation:"vertical",className:"k-card-actions",children:[ut(i,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),ut(i,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...t});import{jsx as di,jsxs as ci}from"react/jsx-runtime";import{jsx as b,jsxs as pt}from"react/jsx-runtime";var er=f.options,or=f.states,Ne={...f.defaultOptions,variant:"vertical"},rr=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ar=[{name:"media",title:"Card with Media"},{name:"header",title:"Card with Header"},{name:"footer",title:"Card with Footer"}],j=t=>{let{variant:e,modifiers:o,...a}={...Ne,...t},s=!1,c=!1,m=!1;return Object.keys(o||{}).forEach(d=>{switch(d){case"media":{s=!!o?.[d];break}case"header":{c=!!o?.[d];break}case"footer":{m=!!o?.[d];break}}}),e==="horizontal"?pt(Ce,{style:{maxWidth:"420px"},...a,children:[s&&b(Lt,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),pt("div",{children:[c&&b(ct,{title:"Header Title",subtitle:"Header Subtitle"}),b(K,{title:"Title",subtitle:"Subtitle",children:b("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),m&&b(wt,{children:"Card Footer"})]}),(c||m)&&b("span",{className:"k-separator k-separator-vertical"}),pt(A,{orientation:"vertical",alignment:"stretched",className:"k-card-actions",children:[b(i,{fillMode:"flat",themeColor:"primary",children:"Button"}),b(i,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]}):pt(ve,{style:{maxHeight:"450px",width:"300px"},...a,children:[c&&b(ct,{title:"Header Title",subtitle:"Header Subtitle"}),s&&b(Lt,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),b(K,{title:"Title",subtitle:"Subtitle",children:b("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),m&&b(wt,{children:"Card Footer"}),pt(A,{className:"k-card-actions",children:[b(i,{fillMode:"flat",themeColor:"primary",children:"Button"}),b(i,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};j.options=er;j.states=or;j.variants=rr;j.defaultOptions=Ne;j.modifiers=ar;j.className=f.className;var zt="avatar",xe=zt;import{jsx as Ae}from"react/jsx-runtime";var ft="k-avatar";var nr=[u.hover,u.focus,u.active,u.selected,u.disabled],ir={size:[l.undefined,l.small,l.medium,l.large],rounded:[x.undefined,x.none,x.small,x.medium,x.large,x.full],fillMode:[L.undefined,L.solid,L.outline],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary]},Ft={type:"text",border:!1},v=t=>{let{size:e,rounded:o,fillMode:a,themeColor:s,type:c=Ft.type,border:m=Ft.border,...d}=t;return Ae("div",{...d,className:r(t.className,ft,H(ft,{size:e,rounded:o,fillMode:a,themeColor:s}),{[`${ft}-bordered`]:m}),children:Ae("span",{className:`${ft}-${c}`,children:t.children})})};v.states=nr;v.options=ir;v.className=ft;v.defaultOptions=Ft;v.moduleName=zt;v.folderName=xe;v.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var F=v;import{jsx as sr}from"react/jsx-runtime";var ke=t=>sr(F,{type:"icon",...t});import{jsx as lr}from"react/jsx-runtime";var Te=t=>lr(F,{type:"text",...t});import{jsx as dr}from"react/jsx-runtime";var Oe=t=>dr(F,{type:"image",...t});import{jsx as as}from"react/jsx-runtime";import{jsx as ht}from"react/jsx-runtime";var cr=v.options,mr=v.states,ur={...v.defaultOptions,variant:"image"},pr=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],fr=[],tt=t=>{let{variant:e,...o}=t;switch(e){case"icon":return ht(ke,{...o,children:ht(S,{icon:"star"})});case"text":return ht(Te,{...o,children:"JO"});default:return ht(Oe,{...o,children:ht("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};tt.options=cr;tt.states=mr;tt.variants=pr;tt.defaultOptions=ur;tt.modifiers=fr;tt.className=v.className;import{jsx as E,jsxs as Ut}from"react/jsx-runtime";var hr="k-orgchart-node",ye={buttonIcon:"plus",details:!0},h=t=>{let{title:e,subtitle:o,details:a=ye.details,color:s,lineBottom:c,lineTop:m,button:d,buttonIcon:g=ye.buttonIcon,avatar:C,avatarType:T,avatarAlt:$,ariaLevel:R,ariaExpanded:G,ariaOwns:at,focus:D,menuButton:N,..._}=t;return Ut("div",{..._,className:r(t.className,hr,"k-vstack","k-align-items-center",{"k-focus":D}),role:"treeitem","aria-level":R,"aria-keyshortcuts":"Enter","aria-expanded":G!==void 0?G?"true":"false":void 0,"aria-owns":at,"aria-selected":D?"true":"false",children:[m&&E("div",{className:"k-orgchart-line k-orgchart-line-v"}),E(f,{className:"k-orgchart-card",children:Ut(K,{className:"k-hstack",details:a,style:{borderTopColor:s},children:[E(v,{type:T,themeColor:"secondary",children:T==="image"?E("img",{src:C,alt:$||""}):C}),Ut("div",{className:"k-card-title-wrap k-vstack",children:[E(I,{className:"k-text-ellipsis",children:e}),E("span",{className:"k-spacer"}),E(q,{className:"k-text-ellipsis",children:o})]}),E("span",{className:"k-spacer"}),N&&E("span",{className:"k-orgchart-card-menu",role:"button","aria-label":"Edit menu",tabIndex:-1})]})}),c&&E("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&E(i,{className:"k-orgchart-button",icon:g,role:"presentation","aria-hidden":"true",tabIndex:-1})]})};import{jsx as gr,jsxs as Cr}from"react/jsx-runtime";var Me="k-orgchart-group",br=[],vr={},Se={orientation:"horizontal"},k=t=>{let{children:e,nodes:o,orientation:a=Se.orientation,justifyContent:s,level:c,...m}=t,d=c===1;return Cr("div",{...m,className:r(Me,"k-pos-absolute",{[`k-${z.orientationMap[a]||a}`]:a,[`k-justify-content-${s}`]:s,"k-orgchart-level-1":d}),role:d?"tree":"group","aria-orientation":d?"horizontal":void 0,style:{width:"100%"},children:[o&&gr("div",{className:r("k-orgchart-node-container","k-justify-content-around",{[`k-${z.orientationMap[a]||a}`]:a}),role:"presentation",children:o}),e]})};k.states=br;k.options=vr;k.className=Me;k.defaultOptions=Se;import{jsx as et,jsxs as Ee}from"react/jsx-runtime";var Nr="k-orgchart-node-group",xr=[u.focus],Le={orientation:"horizontal",buttonIcon:"plus"},U=t=>{let{title:e,subtitle:o,lineBottom:a,lineTop:s,button:c,buttonIcon:m=Le.buttonIcon,focus:d,orientation:g=Le.orientation,...C}=t;return Ee("div",{...C,className:r(t.className,Nr,"k-vstack","k-align-items-center"),role:"group",children:[s&&et("div",{className:"k-orgchart-line k-orgchart-line-v"}),Ee("div",{className:r("k-orgchart-node-group-container","k-vstack",y("k-orgchart-node-group-container",{focus:d})),children:[e&&et("div",{className:"k-orgchart-node-group-title",children:e}),o&&et("div",{className:"k-orgchart-node-group-subtitle",children:o}),et("div",{className:r("k-orgchart-node-container",{[`k-${z.orientationMap[g]||g}`]:g}),role:"presentation",children:t.children})]}),a&&et("div",{className:"k-orgchart-line k-orgchart-line-v"}),c&&et(i,{className:"k-orgchart-button",icon:m,role:"presentation","aria-hidden":"true",tabIndex:-1})]})};U.states=xr;import{Fragment as Is,jsx as Hs,jsxs as ws}from"react/jsx-runtime";import{jsx as Fs,jsxs as Us}from"react/jsx-runtime";import{jsx as ot,jsxs as $t}from"react/jsx-runtime";var Be=({details:t,orientation:e,justifyContent:o,...a})=>ot(p,{children:$t(k,{level:1,orientation:e,justifyContent:o,children:[$t(U,{title:"Group Title",subtitle:"Group SubTitle",orientation:"vertical",children:[ot(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0}),ot(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0}),ot(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0})]}),$t(U,{title:"Group Title",subtitle:"Group SubTitle",orientation:"vertical",children:[ot(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0}),ot(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0})]})]}),...a});import{Fragment as Qs,jsx as Ys,jsxs as Zs}from"react/jsx-runtime";import{Fragment as Mr,jsx as w,jsxs as Ke}from"react/jsx-runtime";var Ar=p.options,kr=p.states,Tr={...p.defaultOptions,variant:"node"},Or=[{name:"node",title:"Nodes"},{name:"group",title:"Group Field"}],yr=[],rt=t=>{let{variant:e,...o}=t,a={title:"Name",subtitle:"Position",avatar:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",avatarType:"image",details:!0,color:"#126CA0"};return e==="group"?w(Be,{width:"100%",height:"360px",...o,children:w(k,{orientation:"vertical",justifyContent:"center",children:Ke(U,{title:"Chief Officers",subtitle:"department",orientation:"vertical",lineBottom:!0,button:!0,children:[w(h,{...a}),w(h,{...a})]})})}):w(Re,{width:"100%",height:"330px",...o,children:w(k,{orientation:"vertical",justifyContent:"center",nodes:Ke(Mr,{children:[w(h,{...a,lineBottom:!0}),w(h,{...a,lineBottom:!0}),w(h,{...a,lineBottom:!0,button:!0})]})})})};rt.options=Ar;rt.states=kr;rt.variants=Or;rt.defaultOptions=Tr;rt.modifiers=yr;rt.className=p.className;import{Fragment as Sr,jsx as bt,jsxs as Lr}from"react/jsx-runtime";var Re=({details:t,justifyContent:e,...o})=>bt(p,{children:bt(k,{level:1,orientation:"vertical",justifyContent:e,nodes:Lr(Sr,{children:[bt(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",lineBottom:!0,ariaLevel:1,menuButton:!0}),bt(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",lineBottom:!0,ariaLevel:1,menuButton:!0}),bt(h,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0})]})}),...o});export{Re as OrgchartVertical};