@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 28.3 kB
JavaScript
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:C,disabled:N,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":C,"k-disabled":N,"k-indeterminate":T&&!m,"k-loading":$,"k-empty":R,"k-readonly":G,"k-highlighted":at},Object.keys(D).reduce((x,_)=>(_.startsWith("k-")?x[_]=D[_]:x[`k-${_}`]=D[_],x),{}))};function Wt(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"},A={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 Tt="orgchart",qt=Tt;import{jsx as Jt}from"react/jsx-runtime";var Xt="k-orgchart",Ge=[],ze={},Ot={width:"100%",height:"300px"},f=t=>{let{width:e=Ot.width,height:o=Ot.height,...a}=t;return Jt("div",{...a,className:r(t.className,Xt),children:Jt("div",{className:"k-orgchart-container",style:{width:e,height:o},children:t.children})})};f.states=Ge;f.options=ze;f.className=Xt;f.defaultOptions=Ot;f.moduleName=Tt;f.folderName=qt;f.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 Ue}from"react/jsx-runtime";var Fe="k-card-callout",Yt=t=>{let{callout:e,...o}=t;return Ue("span",{...o,className:r(t.className,Fe,{[`k-callout-${z.calloutMap[e]||e}`]:e})})};var O="card",M=O;import{Fragment as qe,jsx as Qt,jsxs as Je}from"react/jsx-runtime";var yt="k-card",$e=[u.hover,u.focus,u.selected,u.disabled],Ve={},We={},h=t=>{let{orientation:e,callout:o,hover:a,focus:s,selected:c,disabled:m,...d}=t;return Je("div",{...d,className:r(t.className,yt,y(yt,{hover:a,focus:s,disabled:m,selected:c}),{[`k-card-${e}`]:e,"k-card-with-callout":o}),children:[o&&o!=="true"&&Qt(Yt,{callout:o}),Qt(qe,{children:t.children})]})};h.states=$e;h.options=Ve;h.className=yt;h.defaultOptions=We;h.moduleName=O;h.folderName=M;h.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 Ze,jsx as Zt}from"react/jsx-runtime";var Mt="k-card-list",Xe=[],Ye={},Qe={},P=t=>{let{...e}=t;return Zt("div",{...e,className:r(t.className,Mt,y(Mt,{})),role:"list",children:Zt(Ze,{children:t.children})})};P.states=Xe;P.options=Ye;P.className=Mt;P.defaultOptions=Qe;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 oo}from"react/jsx-runtime";var jt="k-card-group",je=[],to={},eo={},V=t=>{let{...e}=t;return oo("div",{...e,className:r(t.className,jt),children:t.children})};V.states=je;V.options=to;V.className=jt;V.defaultOptions=eo;V.moduleName=O;V.folderName=M;import{jsx as io}from"react/jsx-runtime";var St="k-card-wrap",ro=[u.focus,u.selected],ao={},no={},W=t=>{let{focus:e,selected:o,...a}=t;return io("div",{...a,className:r(t.className,St,y(St,{focus:e,selected:o})),children:t.children})};W.states=ro;W.options=ao;W.className=St;W.defaultOptions=no;W.moduleName=O;W.folderName=M;import{jsx as lo}from"react/jsx-runtime";var Lt="k-card-title",so=[u.hover,u.focus],I=t=>{let{hover:e,focus:o,...a}=t;return lo("div",{...a,className:r(t.className,Lt,y(Lt,{hover:e,focus:o})),children:t.children})};I.states=so;I.className=Lt;import{jsx as mo}from"react/jsx-runtime";var co="k-card-subtitle",q=t=>{let{...e}=t;return mo("div",{...e,className:r(t.className,co),children:t.children})};import{Fragment as ee,jsx as Ct}from"react/jsx-runtime";var te="k-card-media",Et=t=>{let{src:e,...o}=t;return Ct(ee,{children:e?Ct("img",{...o,className:r(t.className,te),src:e}):Ct("span",{...o,className:r(t.className,te),children:Ct(ee,{children:t.children})})})};import{Fragment as ho,jsx as oe}from"react/jsx-runtime";var Bt="k-font-icon",uo=[],po={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]},fo={},nt=t=>{let{size:e,themeColor:o,icon:a,rotate:s,flip:c,...m}=t;return a?oe("span",{...m,className:r(t.className,Bt,H(Bt,{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"}):oe(ho,{})};nt.states=uo;nt.options=po;nt.className=Bt;nt.defaultOptions=fo;var re=nt;import{Fragment as go,jsx as Nt}from"react/jsx-runtime";var Kt="k-svg-icon",bo=[],vo={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]},Rt={viewBox:"0 0 24 24",variant:B.outline},it=t=>{let{size:e,themeColor:o,rotate:a,flip:s,viewBox:c=Rt.viewBox,variant:m=Rt.variant,icon:d,...C}=t;if(!d)return Nt(go,{});if(d==="none")return Nt("span",{...C,className:r(t.className,Kt,H("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let N=typeof d=="object"&&d.name&&d.name,T=typeof d=="object"?m&&d.variants?.[m]||d.variants?.outline||d.content:void 0;return Nt("span",{...C,className:r(t.className,Kt,H("k-icon",{size:e}),{[`k-svg-i-${N}`]:N,[`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:Nt("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=bo;it.options=vo;it.className=Kt;it.defaultOptions=Rt;var Dt=it;import*as _t from"@progress/kendo-svg-icons";var ae="icon",ne="icons";import{useContext as No}from"react";import{createContext as Co}from"react";var ie=Co({iconsType:"svg"});import{Fragment as se,jsx as st}from"react/jsx-runtime";var xt="k-icon",xo=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ao=[],ko={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]},At={viewBox:"0 0 24 24",type:"svg",variant:B.outline},S=t=>{let{iconsType:e}=No(ie),{size:o,themeColor:a,icon:s,type:c=e||At.type,rotate:m,flip:d,viewBox:C=At.viewBox,variant:N=At.variant,...T}=t;if(!s)return st(se,{});if((e||c)==="svg"){if(s==="none")return st(Dt,{...T,className:r(t.className,xt),icon:s,size:o,variant:N});let R=_t[s]?s:xo(`${s}-icon`);return _t[R]?st(Dt,{...T,className:r(t.className,xt),icon:_t[R],size:o,themeColor:a,rotate:m,flip:d,viewBox:C,variant:N}):st(se,{})}return st(re,{...T,className:r(t.className,xt),icon:s,size:o,themeColor:a,rotate:m,flip:d})};S.states=Ao;S.options=ko;S.defaultOptions=At;S.className=xt;S.moduleName=ae;S.folderName=ne;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 Ht="button",le=Ht;import{Fragment as de,jsx as J,jsxs as ce}from"react/jsx-runtime";var lt="k-button",To=["icon-button"],Oo=[u.hover,u.focus,u.active,u.selected,u.disabled,u.generating],yo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[A.undefined,A.none,A.small,A.medium,A.large,A.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]},It={showArrow:!1,arrowIconName:"chevron-down"},i=t=>{let{as:e="button",size:o,rounded:a,fillMode:s,themeColor:c,showArrow:m=It.showArrow,arrowIconName:d=It.arrowIconName,variant:C,hover:N,focus:T,active:$,selected:R,disabled:G,togglable:at,ariaDisabled:D,icon:x,iconSize:_,text:gt,iconClassName:_e,className:He,...Ie}=t,we=x!=null,Pe=t.children!==void 0;return ce(e,{className:r(He,lt,Wt(lt,C),H(lt,{size:o,rounded:a,fillMode:s,themeColor:c}),y(lt,{hover:N,focus:T,active:$,disabled:G||D,selected:R}),{"k-icon-button":!gt&&!Pe&&we}),"aria-pressed":at?R?"true":"false":void 0,...Ie,"aria-disabled":D?"true":void 0,disabled:G||void 0,children:[typeof x=="string"&&x&&J(S,{className:r(_e,"k-button-icon"),icon:x,size:_}),x&&typeof x!="string"&&J(de,{children:x}),gt?ce(de,{children:[gt&&J("span",{className:"k-button-text",children:gt}),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=Oo;i.options=yo;i.variants=To;i.className=lt;i.defaultOptions=It;i.moduleName=Ht;i.folderName=le;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 Mo}from"react/jsx-runtime";var me=t=>Mo(i,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as So}from"react/jsx-runtime";var ue=t=>So(i,{icon:"folder",children:"Button",...t});import{jsx as Lo}from"react/jsx-runtime";var pe=t=>Lo(i,{children:"Button",...t});import{jsx as wt}from"react/jsx-runtime";var Eo=i.options,Bo=i.states,Ko={...i.defaultOptions,variant:"text"},Ro=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Do=[],X=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return wt(me,{...o,icon:"star"});case"icon-and-text":return wt(ue,{...o,icon:"star",children:"Button"});default:return wt(pe,{...o,children:"Button"})}};X.options=Eo;X.states=Bo;X.variants=Ro;X.defaultOptions=Ko;X.modifiers=Do;X.className=i.className;import{Fragment as Ho,jsx as dt,jsxs as Io}from"react/jsx-runtime";var _o="k-card-header",ct=t=>{let{title:e,subtitle:o,details:a,...s}=t;return Io("div",{...s,className:r(t.className,_o),children:[e&&dt(I,{children:e}),o&&dt(q,{children:o}),dt(Ho,{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 Po}from"react/jsx-runtime";var wo="k-card-footer",Pt=t=>{let{...e}=t;return Po("div",{...e,className:r(t.className,wo),children:t.children})};import{Fragment as zo,jsx as mt,jsxs as Fo}from"react/jsx-runtime";var Go="k-card-body",K=t=>{let{title:e,subtitle:o,details:a,...s}=t;return Fo("div",{...s,className:r(t.className,Go),children:[e&&mt(I,{children:e}),o&&mt(q,{children:o}),mt(zo,{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 Wo}from"react/jsx-runtime";var fe="k-card-deck",Uo=[],$o={},Vo={},Y=t=>{let{...e}=t;return Wo("div",{...e,className:r(t.className,fe),children:t.children})};Y.states=Uo;Y.options=$o;Y.className=fe;Y.defaultOptions=Vo;Y.moduleName=O;Y.folderName=M;import{jsx as Yo}from"react/jsx-runtime";var he="k-card-deck-scrollwrap",qo=[],Jo={},Xo={},Q=t=>{let{...e}=t;return Yo("div",{...e,className:r(t.className,he),children:t.children})};Q.states=qo;Q.options=Jo;Q.className=he;Q.defaultOptions=Xo;Q.moduleName=O;Q.folderName=M;var Gt="action-buttons",be=Gt;import{jsx as jo}from"react/jsx-runtime";var kt="k-actions",Qo=[],Zo={},zt={alignment:"start",orientation:"horizontal"},k=t=>{let{alignment:e=zt.alignment,orientation:o=zt.orientation,...a}=t;return jo("div",{...a,className:r(kt,{[`${kt}-${e}`]:e,[`${kt}-${o}`]:o},t.className),children:t.children})};k.states=Qo;k.options=Zo;k.className=kt;k.defaultOptions=zt;k.moduleName=Gt;k.folderName=be;import{Fragment as tr,jsx as Z,jsxs as ve}from"react/jsx-runtime";var ge=t=>Z(h,{orientation:"vertical",children:ve(tr,{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."})}),ve(k,{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 er,jsx as ut,jsxs as Ce}from"react/jsx-runtime";var Ne=t=>ut(h,{orientation:"horizontal",children:Ce(er,{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."})}),Ce(k,{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 ui,jsxs as pi}from"react/jsx-runtime";import{jsx as b,jsxs as pt}from"react/jsx-runtime";var or=h.options,rr=h.states,xe={...h.defaultOptions,variant:"vertical"},ar=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],nr=[{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}={...xe,...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(Ne,{style:{maxWidth:"420px"},...a,children:[s&&b(Et,{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(Pt,{children:"Card Footer"})]}),(c||m)&&b("span",{className:"k-separator k-separator-vertical"}),pt(k,{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(ge,{style:{maxHeight:"450px",width:"300px"},...a,children:[c&&b(ct,{title:"Header Title",subtitle:"Header Subtitle"}),s&&b(Et,{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(Pt,{children:"Card Footer"}),pt(k,{className:"k-card-actions",children:[b(i,{fillMode:"flat",themeColor:"primary",children:"Button"}),b(i,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};j.options=or;j.states=rr;j.variants=ar;j.defaultOptions=xe;j.modifiers=nr;j.className=h.className;var Ft="avatar",Ae=Ft;import{jsx as ke}from"react/jsx-runtime";var ft="k-avatar";var ir=[u.hover,u.focus,u.active,u.selected,u.disabled],sr={size:[l.undefined,l.small,l.medium,l.large],rounded:[A.undefined,A.none,A.small,A.medium,A.large,A.full],fillMode:[L.undefined,L.solid,L.outline],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary]},Ut={type:"text",border:!1},v=t=>{let{size:e,rounded:o,fillMode:a,themeColor:s,type:c=Ut.type,border:m=Ut.border,...d}=t;return ke("div",{...d,className:r(t.className,ft,H(ft,{size:e,rounded:o,fillMode:a,themeColor:s}),{[`${ft}-bordered`]:m}),children:ke("span",{className:`${ft}-${c}`,children:t.children})})};v.states=ir;v.options=sr;v.className=ft;v.defaultOptions=Ut;v.moduleName=Ft;v.folderName=Ae;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 lr}from"react/jsx-runtime";var Te=t=>lr(F,{type:"icon",...t});import{jsx as dr}from"react/jsx-runtime";var Oe=t=>dr(F,{type:"text",...t});import{jsx as cr}from"react/jsx-runtime";var ye=t=>cr(F,{type:"image",...t});import{jsx as ss}from"react/jsx-runtime";import{jsx as ht}from"react/jsx-runtime";var mr=v.options,ur=v.states,pr={...v.defaultOptions,variant:"image"},fr=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],hr=[],tt=t=>{let{variant:e,...o}=t;switch(e){case"icon":return ht(Te,{...o,children:ht(S,{icon:"star"})});case"text":return ht(Oe,{...o,children:"JO"});default:return ht(ye,{...o,children:ht("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};tt.options=mr;tt.states=ur;tt.variants=fr;tt.defaultOptions=pr;tt.modifiers=hr;tt.className=v.className;import{jsx as E,jsxs as $t}from"react/jsx-runtime";var br="k-orgchart-node",Me={buttonIcon:"plus",details:!0},p=t=>{let{title:e,subtitle:o,details:a=Me.details,color:s,lineBottom:c,lineTop:m,button:d,buttonIcon:C=Me.buttonIcon,avatar:N,avatarType:T,avatarAlt:$,ariaLevel:R,ariaExpanded:G,ariaOwns:at,focus:D,menuButton:x,..._}=t;return $t("div",{..._,className:r(t.className,br,"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(h,{className:"k-orgchart-card",children:$t(K,{className:"k-hstack",details:a,style:{borderTopColor:s},children:[E(v,{type:T,themeColor:"secondary",children:T==="image"?E("img",{src:N,alt:$||""}):N}),$t("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"}),x&&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:C,role:"presentation","aria-hidden":"true",tabIndex:-1})]})};import{jsx as Cr,jsxs as Nr}from"react/jsx-runtime";var Se="k-orgchart-group",vr=[],gr={},Le={orientation:"horizontal"},g=t=>{let{children:e,nodes:o,orientation:a=Le.orientation,justifyContent:s,level:c,...m}=t,d=c===1;return Nr("div",{...m,className:r(Se,"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&&Cr("div",{className:r("k-orgchart-node-container","k-justify-content-around",{[`k-${z.orientationMap[a]||a}`]:a}),role:"presentation",children:o}),e]})};g.states=vr;g.options=gr;g.className=Se;g.defaultOptions=Le;import{jsx as et,jsxs as Be}from"react/jsx-runtime";var xr="k-orgchart-node-group",Ar=[u.focus],Ee={orientation:"horizontal",buttonIcon:"plus"},U=t=>{let{title:e,subtitle:o,lineBottom:a,lineTop:s,button:c,buttonIcon:m=Ee.buttonIcon,focus:d,orientation:C=Ee.orientation,...N}=t;return Be("div",{...N,className:r(t.className,xr,"k-vstack","k-align-items-center"),role:"group",children:[s&&et("div",{className:"k-orgchart-line k-orgchart-line-v"}),Be("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[C]||C}`]:C}),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=Ar;import{Fragment as kr,jsx as bt,jsxs as Tr}from"react/jsx-runtime";var Ke=({details:t,justifyContent:e,...o})=>bt(f,{children:bt(g,{level:1,orientation:"vertical",justifyContent:e,nodes:Tr(kr,{children:[bt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",lineBottom:!0,ariaLevel:1,menuButton:!0}),bt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",lineBottom:!0,ariaLevel:1,menuButton:!0}),bt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0})]})}),...o});import{jsx as Fs,jsxs as Us}from"react/jsx-runtime";import{jsx as ot,jsxs as Vt}from"react/jsx-runtime";var Re=({details:t,orientation:e,justifyContent:o,...a})=>ot(f,{children:Vt(g,{level:1,orientation:e,justifyContent:o,children:[Vt(U,{title:"Group Title",subtitle:"Group SubTitle",orientation:"vertical",children:[ot(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0}),ot(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0}),ot(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0})]}),Vt(U,{title:"Group Title",subtitle:"Group SubTitle",orientation:"vertical",children:[ot(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#5bc0de",ariaLevel:1,menuButton:!0}),ot(p,{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 Er,jsx as w,jsxs as De}from"react/jsx-runtime";var Or=f.options,yr=f.states,Mr={...f.defaultOptions,variant:"node"},Sr=[{name:"node",title:"Nodes"},{name:"group",title:"Group Field"}],Lr=[],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(Re,{width:"100%",height:"360px",...o,children:w(g,{orientation:"vertical",justifyContent:"center",children:De(U,{title:"Chief Officers",subtitle:"department",orientation:"vertical",lineBottom:!0,button:!0,children:[w(p,{...a}),w(p,{...a})]})})}):w(Ke,{width:"100%",height:"330px",...o,children:w(g,{orientation:"vertical",justifyContent:"center",nodes:De(Er,{children:[w(p,{...a,lineBottom:!0}),w(p,{...a,lineBottom:!0}),w(p,{...a,lineBottom:!0,button:!0})]})})})};rt.options=Or;rt.states=yr;rt.variants=Sr;rt.defaultOptions=Mr;rt.modifiers=Lr;rt.className=f.className;import{Fragment as Br,jsx as vt,jsxs as Kr}from"react/jsx-runtime";var xl=({details:t,justifyContent:e,...o})=>vt(f,{children:vt(g,{level:1,justifyContent:e,nodes:Kr(Br,{children:[vt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",lineBottom:!0,button:!0,ariaLevel:1,menuButton:!0}),vt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",lineBottom:!0,button:!0,ariaLevel:1,menuButton:!0}),vt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",lineBottom:!0,button:!0,ariaLevel:1,menuButton:!0})]})}),...o});export{xl as OrgchartNormal};