@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 28.4 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:z,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":z,"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"},F={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",ze=[],Fe={},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=ze;f.options=Fe;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 $e}from"react/jsx-runtime";var Ue="k-card-callout",Yt=t=>{let{callout:e,...o}=t;return $e("span",{...o,className:r(t.className,Ue,{[`k-callout-${F.calloutMap[e]||e}`]:e})})};var O="card",M=O;import{Fragment as Je,jsx as Qt,jsxs as Xe}from"react/jsx-runtime";var yt="k-card",Ve=[u.hover,u.focus,u.selected,u.disabled],We={},qe={},h=t=>{let{orientation:e,callout:o,hover:a,focus:s,selected:c,disabled:m,...d}=t;return Xe("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(Je,{children:t.children})]})};h.states=Ve;h.options=We;h.className=yt;h.defaultOptions=qe;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 je,jsx as Zt}from"react/jsx-runtime";var Mt="k-card-list",Ye=[],Qe={},Ze={},G=t=>{let{...e}=t;return Zt("div",{...e,className:r(t.className,Mt,y(Mt,{})),role:"list",children:Zt(je,{children:t.children})})};G.states=Ye;G.options=Qe;G.className=Mt;G.defaultOptions=Ze;G.moduleName=O;G.folderName=M;G.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 ro}from"react/jsx-runtime";var jt="k-card-group",to=[],eo={},oo={},V=t=>{let{...e}=t;return ro("div",{...e,className:r(t.className,jt),children:t.children})};V.states=to;V.options=eo;V.className=jt;V.defaultOptions=oo;V.moduleName=O;V.folderName=M;import{jsx as so}from"react/jsx-runtime";var St="k-card-wrap",ao=[u.focus,u.selected],no={},io={},W=t=>{let{focus:e,selected:o,...a}=t;return so("div",{...a,className:r(t.className,St,y(St,{focus:e,selected:o})),children:t.children})};W.states=ao;W.options=no;W.className=St;W.defaultOptions=io;W.moduleName=O;W.folderName=M;import{jsx as co}from"react/jsx-runtime";var Lt="k-card-title",lo=[u.hover,u.focus],I=t=>{let{hover:e,focus:o,...a}=t;return co("div",{...a,className:r(t.className,Lt,y(Lt,{hover:e,focus:o})),children:t.children})};I.states=lo;I.className=Lt;import{jsx as uo}from"react/jsx-runtime";var mo="k-card-subtitle",q=t=>{let{...e}=t;return uo("div",{...e,className:r(t.className,mo),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 bo,jsx as oe}from"react/jsx-runtime";var Bt="k-font-icon",po=[],fo={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]},ho={},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(bo,{})};nt.states=po;nt.options=fo;nt.className=Bt;nt.defaultOptions=ho;var re=nt;import{Fragment as Co,jsx as Nt}from"react/jsx-runtime";var Kt="k-svg-icon",vo=[],go={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(Co,{});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=vo;it.options=go;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 xo}from"react";import{createContext as No}from"react";var ie=No({iconsType:"svg"});import{Fragment as se,jsx as st}from"react/jsx-runtime";var xt="k-icon",Ao=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ko=[],To={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}=xo(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:Ao(`${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=ko;S.options=To;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",Oo=["icon-button"],yo=[u.hover,u.focus,u.active,u.selected,u.disabled,u.generating],Mo={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:z,togglable:at,ariaDisabled:D,icon:x,iconSize:_,text:gt,iconClassName:He,className:Ie,...we}=t,Pe=x!=null,Ge=t.children!==void 0;return ce(e,{className:r(Ie,lt,Wt(lt,C),H(lt,{size:o,rounded:a,fillMode:s,themeColor:c}),y(lt,{hover:N,focus:T,active:$,disabled:z||D,selected:R}),{"k-icon-button":!gt&&!Ge&&Pe}),"aria-pressed":at?R?"true":"false":void 0,...we,"aria-disabled":D?"true":void 0,disabled:z||void 0,children:[typeof x=="string"&&x&&J(S,{className:r(He,"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=yo;i.options=Mo;i.variants=Oo;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 So}from"react/jsx-runtime";var me=t=>So(i,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Lo}from"react/jsx-runtime";var ue=t=>Lo(i,{icon:"folder",children:"Button",...t});import{jsx as Eo}from"react/jsx-runtime";var pe=t=>Eo(i,{children:"Button",...t});import{jsx as wt}from"react/jsx-runtime";var Bo=i.options,Ko=i.states,Ro={...i.defaultOptions,variant:"text"},Do=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_o=[],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=Bo;X.states=Ko;X.variants=Do;X.defaultOptions=Ro;X.modifiers=_o;X.className=i.className;import{Fragment as Io,jsx as dt,jsxs as wo}from"react/jsx-runtime";var Ho="k-card-header",ct=t=>{let{title:e,subtitle:o,details:a,...s}=t;return wo("div",{...s,className:r(t.className,Ho),children:[e&&dt(I,{children:e}),o&&dt(q,{children:o}),dt(Io,{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 Go}from"react/jsx-runtime";var Po="k-card-footer",Pt=t=>{let{...e}=t;return Go("div",{...e,className:r(t.className,Po),children:t.children})};import{Fragment as Fo,jsx as mt,jsxs as Uo}from"react/jsx-runtime";var zo="k-card-body",K=t=>{let{title:e,subtitle:o,details:a,...s}=t;return Uo("div",{...s,className:r(t.className,zo),children:[e&&mt(I,{children:e}),o&&mt(q,{children:o}),mt(Fo,{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 qo}from"react/jsx-runtime";var fe="k-card-deck",$o=[],Vo={},Wo={},Y=t=>{let{...e}=t;return qo("div",{...e,className:r(t.className,fe),children:t.children})};Y.states=$o;Y.options=Vo;Y.className=fe;Y.defaultOptions=Wo;Y.moduleName=O;Y.folderName=M;import{jsx as Qo}from"react/jsx-runtime";var he="k-card-deck-scrollwrap",Jo=[],Xo={},Yo={},Q=t=>{let{...e}=t;return Qo("div",{...e,className:r(t.className,he),children:t.children})};Q.states=Jo;Q.options=Xo;Q.className=he;Q.defaultOptions=Yo;Q.moduleName=O;Q.folderName=M;var Gt="action-buttons",be=Gt;import{jsx as tr}from"react/jsx-runtime";var kt="k-actions",Zo=[],jo={},zt={alignment:"start",orientation:"horizontal"},k=t=>{let{alignment:e=zt.alignment,orientation:o=zt.orientation,...a}=t;return tr("div",{...a,className:r(kt,{[`${kt}-${e}`]:e,[`${kt}-${o}`]:o},t.className),children:t.children})};k.states=Zo;k.options=jo;k.className=kt;k.defaultOptions=zt;k.moduleName=Gt;k.folderName=be;import{Fragment as er,jsx as Z,jsxs as ve}from"react/jsx-runtime";var ge=t=>Z(h,{orientation:"vertical",children:ve(er,{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 or,jsx as ut,jsxs as Ce}from"react/jsx-runtime";var Ne=t=>ut(h,{orientation:"horizontal",children:Ce(or,{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 mi,jsxs as ui}from"react/jsx-runtime";import{jsx as b,jsxs as pt}from"react/jsx-runtime";var rr=h.options,ar=h.states,xe={...h.defaultOptions,variant:"vertical"},nr=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ir=[{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=rr;j.states=ar;j.variants=nr;j.defaultOptions=xe;j.modifiers=ir;j.className=h.className;var Ft="avatar",Ae=Ft;import{jsx as ke}from"react/jsx-runtime";var ft="k-avatar";var sr=[u.hover,u.focus,u.active,u.selected,u.disabled],lr={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=sr;v.options=lr;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 U=v;import{jsx as dr}from"react/jsx-runtime";var Te=t=>dr(U,{type:"icon",...t});import{jsx as cr}from"react/jsx-runtime";var Oe=t=>cr(U,{type:"text",...t});import{jsx as mr}from"react/jsx-runtime";var ye=t=>mr(U,{type:"image",...t});import{jsx as is}from"react/jsx-runtime";import{jsx as ht}from"react/jsx-runtime";var ur=v.options,pr=v.states,fr={...v.defaultOptions,variant:"image"},hr=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],br=[],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=ur;tt.states=pr;tt.variants=hr;tt.defaultOptions=fr;tt.modifiers=br;tt.className=v.className;import{jsx as E,jsxs as $t}from"react/jsx-runtime";var vr="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:z,ariaOwns:at,focus:D,menuButton:x,..._}=t;return $t("div",{..._,className:r(t.className,vr,"k-vstack","k-align-items-center",{"k-focus":D}),role:"treeitem","aria-level":R,"aria-keyshortcuts":"Enter","aria-expanded":z!==void 0?z?"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 Nr,jsxs as xr}from"react/jsx-runtime";var Se="k-orgchart-group",gr=[],Cr={},Le={orientation:"horizontal"},g=t=>{let{children:e,nodes:o,orientation:a=Le.orientation,justifyContent:s,level:c,...m}=t,d=c===1;return xr("div",{...m,className:r(Se,"k-pos-absolute",{[`k-${F.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&&Nr("div",{className:r("k-orgchart-node-container","k-justify-content-around",{[`k-${F.orientationMap[a]||a}`]:a}),role:"presentation",children:o}),e]})};g.states=gr;g.options=Cr;g.className=Se;g.defaultOptions=Le;import{jsx as et,jsxs as Be}from"react/jsx-runtime";var Ar="k-orgchart-node-group",kr=[u.focus],Ee={orientation:"horizontal",buttonIcon:"plus"},w=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,Ar,"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-${F.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})]})};w.states=kr;import{Fragment as Ps,jsx as ws,jsxs as Gs}from"react/jsx-runtime";import{Fragment as Tr,jsx as bt,jsxs as Or}from"react/jsx-runtime";var Ke=({details:t,justifyContent:e,...o})=>bt(f,{children:bt(g,{level:1,orientation:"vertical",justifyContent:e,nodes:Or(Tr,{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 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(w,{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(w,{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 Br,jsx as P,jsxs as De}from"react/jsx-runtime";var yr=f.options,Mr=f.states,Sr={...f.defaultOptions,variant:"node"},Lr=[{name:"node",title:"Nodes"},{name:"group",title:"Group Field"}],Er=[],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"?P(Re,{width:"100%",height:"360px",...o,children:P(g,{orientation:"vertical",justifyContent:"center",children:De(w,{title:"Chief Officers",subtitle:"department",orientation:"vertical",lineBottom:!0,button:!0,children:[P(p,{...a}),P(p,{...a})]})})}):P(Ke,{width:"100%",height:"330px",...o,children:P(g,{orientation:"vertical",justifyContent:"center",nodes:De(Br,{children:[P(p,{...a,lineBottom:!0}),P(p,{...a,lineBottom:!0}),P(p,{...a,lineBottom:!0,button:!0})]})})})};rt.options=yr;rt.states=Mr;rt.variants=Lr;rt.defaultOptions=Sr;rt.modifiers=Er;rt.className=f.className;import{jsx as vt,jsxs as _e}from"react/jsx-runtime";var xl=({details:t,orientation:e,justifyContent:o,...a})=>vt(f,{children:_e(g,{level:1,orientation:e,justifyContent:o,children:[_e(w,{title:"Group Title",subtitle:"Group SubTitle",lineBottom:!0,button:!0,children:[vt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",ariaLevel:1,menuButton:!0}),vt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",ariaLevel:1,menuButton:!0})]}),vt(w,{title:"Group Title",subtitle:"Group SubTitle",lineBottom:!0,button:!0,children:vt(p,{title:"Card Title",subtitle:"Card, Subtitle",details:t,avatar:"DK",avatarType:"text",color:"#0275d8",ariaLevel:1,menuButton:!0})})]}),...a});export{xl as OrgchartGroupNormal};