@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
6 lines (5 loc) • 27.6 kB
JavaScript
var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var $=(e,t)=>a({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),O=(e,t)=>{let{valid:o,invalid:r,hover:n,focus:c,checked:d,active:m,selected:I,disabled:k,indeterminate:L,loading:Le,empty:U,readonly:Ae,highlighted:Re,...te}=t;return a({"k-valid":o,"k-invalid":r,"k-hover":n,"k-focus":c,"k-checked":d,"k-active":m,"k-selected":I,"k-disabled":k,"k-indeterminate":L&&!d,"k-loading":Le,"k-empty":U,"k-readonly":Ae,"k-highlighted":Re},Object.keys(te).reduce((S,V)=>(V.startsWith("k-")?S[V]=te[V]:S[`k-${V}`]=te[V],S),{}))};function rt(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(r=>[`k-${r}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},G={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},J={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},R={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},i={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},p={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"},nt={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var He={};function H(e){return He[e]=(He[e]||0)+1,`k-${e}-${He[e]}`}import{jsx as ao}from"react/jsx-runtime";var oo="k-card-callout",ye=e=>{let{callout:t,...o}=e;return ao("span",{...o,className:a(e.className,oo,{[`k-callout-${nt.calloutMap[t]||t}`]:t})})};var A="card",D=A;import{Fragment as lo,jsx as it,jsxs as so}from"react/jsx-runtime";var Be="k-card",ro=[p.hover,p.focus,p.selected,p.disabled],no={},io={},T=e=>{let{orientation:t,callout:o,hover:r,focus:n,selected:c,disabled:d,...m}=e;return so("div",{...m,className:a(e.className,Be,O(Be,{hover:r,focus:n,disabled:d,selected:c}),{[`k-card-${t}`]:t,"k-card-with-callout":o}),children:[o&&o!=="true"&&it(ye,{callout:o}),it(lo,{children:e.children})]})};T.states=ro;T.options=no;T.className=Be;T.defaultOptions=io;T.moduleName=A;T.folderName=D;T.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 uo,jsx as lt}from"react/jsx-runtime";var we="k-card-list",mo=[],co={},po={},z=e=>{let{...t}=e;return lt("div",{...t,className:a(e.className,we,O(we,{})),role:"list",children:lt(uo,{children:e.children})})};z.states=mo;z.options=co;z.className=we;z.defaultOptions=po;z.moduleName=A;z.folderName=D;z.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 Co}from"react/jsx-runtime";var st="k-card-group",fo=[],To={},No={},oe=e=>{let{...t}=e;return Co("div",{...t,className:a(e.className,st),children:e.children})};oe.states=fo;oe.options=To;oe.className=st;oe.defaultOptions=No;oe.moduleName=A;oe.folderName=D;import{jsx as vo}from"react/jsx-runtime";var Pe="k-card-wrap",bo=[p.focus,p.selected],Eo={},ho={},ae=e=>{let{focus:t,selected:o,...r}=e;return vo("div",{...r,className:a(e.className,Pe,O(Pe,{focus:t,selected:o})),children:e.children})};ae.states=bo;ae.options=Eo;ae.className=Pe;ae.defaultOptions=ho;ae.moduleName=A;ae.folderName=D;import{jsx as Mo}from"react/jsx-runtime";var Fe="k-card-title",xo=[p.hover,p.focus],q=e=>{let{hover:t,focus:o,...r}=e;return Mo("div",{...r,className:a(e.className,Fe,O(Fe,{hover:t,focus:o})),children:e.children})};q.states=xo;q.className=Fe;import{jsx as Lo}from"react/jsx-runtime";var ko="k-card-subtitle",W=e=>{let{...t}=e;return Lo("div",{...t,className:a(e.className,ko),children:e.children})};import{Fragment as mt,jsx as Ie}from"react/jsx-runtime";var dt="k-card-media",ze=e=>{let{src:t,...o}=e;return Ie(mt,{children:t?Ie("img",{...o,className:a(e.className,dt),src:t}):Ie("span",{...o,className:a(e.className,dt),children:Ie(mt,{children:e.children})})})};import{Fragment as Io,jsx as ct}from"react/jsx-runtime";var We="k-font-icon",Ao=[],go={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info]},yo={},ue=e=>{let{size:t,themeColor:o,icon:r,rotate:n,flip:c,...d}=e;return r?ct("span",{...d,className:a(e.className,We,$(We,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):ct(Io,{})};ue.states=Ao;ue.options=go;ue.className=We;ue.defaultOptions=yo;var pt=ue;import{Fragment as Do,jsx as Se}from"react/jsx-runtime";var Ue="k-svg-icon",So=[],Oo={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[R.outline,R.solid,R.duotone]},Ve={viewBox:"0 0 24 24",variant:R.outline},fe=e=>{let{size:t,themeColor:o,rotate:r,flip:n,viewBox:c=Ve.viewBox,variant:d=Ve.variant,icon:m,...I}=e;if(!m)return Se(Do,{});if(m==="none")return Se("span",{...I,className:a(e.className,Ue,$("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let k=typeof m=="object"&&m.name&&m.name,L=typeof m=="object"?d&&m.variants?.[d]||m.variants?.outline||m.content:void 0;return Se("span",{...I,className:a(e.className,Ue,$("k-icon",{size:t}),{[`k-svg-i-${k}`]:k,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:Se("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:c,dangerouslySetInnerHTML:L!==void 0?{__html:L}:void 0,children:m?void 0:e.children})})};fe.states=So;fe.options=Oo;fe.className=Ue;fe.defaultOptions=Ve;var $e=fe;import*as Ge from"@progress/kendo-svg-icons";var ut="icon",ft="icons";import{useContext as _o}from"react";import{createContext as Ko}from"react";var Tt=Ko({iconsType:"svg"});import{Fragment as Nt,jsx as Te}from"react/jsx-runtime";var Oe="k-icon",Ro=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ho=[],Bo={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[R.outline,R.solid,R.duotone]},De={viewBox:"0 0 24 24",type:"svg",variant:R.outline},K=e=>{let{iconsType:t}=_o(Tt),{size:o,themeColor:r,icon:n,type:c=t||De.type,rotate:d,flip:m,viewBox:I=De.viewBox,variant:k=De.variant,...L}=e;if(!n)return Te(Nt,{});if((t||c)==="svg"){if(n==="none")return Te($e,{...L,className:a(e.className,Oe),icon:n,size:o,variant:k});let U=Ge[n]?n:Ro(`${n}-icon`);return Ge[U]?Te($e,{...L,className:a(e.className,Oe),icon:Ge[U],size:o,themeColor:r,rotate:d,flip:m,viewBox:I,variant:k}):Te(Nt,{})}return Te(pt,{...L,className:a(e.className,Oe),icon:n,size:o,themeColor:r,rotate:d,flip:m})};K.states=Ho;K.options=Bo;K.defaultOptions=De;K.className=Oe;K.moduleName=ut;K.folderName=ft;K.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 Je="button",Ct=Je;import{Fragment as bt,jsx as re,jsxs as Et}from"react/jsx-runtime";var Ne="k-button",wo=["icon-button"],Po=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],Fo={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[G.undefined,G.none,G.small,G.medium,G.large,G.full],fillMode:[J.undefined,J.solid,J.flat,J.outline,J.clear,J.link],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.inverse]},qe={showArrow:!1,arrowIconName:"chevron-down"},l=e=>{let{as:t="button",size:o,rounded:r,fillMode:n,themeColor:c,showArrow:d=qe.showArrow,arrowIconName:m=qe.arrowIconName,variant:I,hover:k,focus:L,active:Le,selected:U,disabled:Ae,togglable:Re,ariaDisabled:te,icon:S,iconSize:V,text:ge,iconClassName:Zt,className:Qt,...jt}=e,eo=S!=null,to=e.children!==void 0;return Et(t,{className:a(Qt,Ne,rt(Ne,I),$(Ne,{size:o,rounded:r,fillMode:n,themeColor:c}),O(Ne,{hover:k,focus:L,active:Le,disabled:Ae||te,selected:U}),{"k-icon-button":!ge&&!to&&eo}),"aria-pressed":Re?U?"true":"false":void 0,...jt,"aria-disabled":te?"true":void 0,disabled:Ae||void 0,children:[typeof S=="string"&&S&&re(K,{className:a(Zt,"k-button-icon"),icon:S,size:V}),S&&typeof S!="string"&&re(bt,{children:S}),ge?Et(bt,{children:[ge&&re("span",{className:"k-button-text",children:ge}),e.children]}):e.children&&re("span",{className:"k-button-text",children:e.children}),d&&re("span",{className:"k-menu-button-arrow k-button-arrow",children:re(K,{icon:m})})]})};l.states=Po;l.options=Fo;l.variants=wo;l.className=Ne;l.defaultOptions=qe;l.moduleName=Je;l.folderName=Ct;l.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 zo}from"react/jsx-runtime";var ht=e=>zo(l,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Wo}from"react/jsx-runtime";var vt=e=>Wo(l,{icon:"folder",children:"Button",...e});import{jsx as Uo}from"react/jsx-runtime";var xt=e=>Uo(l,{children:"Button",...e});import{jsx as Xe}from"react/jsx-runtime";var Vo=l.options,$o=l.states,Go={...l.defaultOptions,variant:"text"},Jo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],qo=[],ne=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Xe(ht,{...o,icon:"star"});case"icon-and-text":return Xe(vt,{...o,icon:"star",children:"Button"});default:return Xe(xt,{...o,children:"Button"})}};ne.options=Vo;ne.states=$o;ne.variants=Jo;ne.defaultOptions=Go;ne.modifiers=qo;ne.className=l.className;import{Fragment as Yo,jsx as Ce,jsxs as Zo}from"react/jsx-runtime";var Xo="k-card-header",w=e=>{let{title:t,subtitle:o,details:r,...n}=e;return Zo("div",{...n,className:a(e.className,Xo),children:[t&&Ce(q,{children:t}),o&&Ce(W,{children:o}),Ce(Yo,{children:e.children}),r&&Ce("span",{className:"k-card-header-actions",children:Ce(l,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as jo}from"react/jsx-runtime";var Qo="k-card-footer",Ye=e=>{let{...t}=e;return jo("div",{...t,className:a(e.className,Qo),children:e.children})};import{Fragment as ta,jsx as be,jsxs as oa}from"react/jsx-runtime";var ea="k-card-body",_=e=>{let{title:t,subtitle:o,details:r,...n}=e;return oa("div",{...n,className:a(e.className,ea),children:[t&&be(q,{children:t}),o&&be(W,{children:o}),be(ta,{children:e.children}),r&&be("span",{className:"k-card-header-actions",children:be(l,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as ia}from"react/jsx-runtime";var Mt="k-card-deck",aa=[],ra={},na={},ie=e=>{let{...t}=e;return ia("div",{...t,className:a(e.className,Mt),children:e.children})};ie.states=aa;ie.options=ra;ie.className=Mt;ie.defaultOptions=na;ie.moduleName=A;ie.folderName=D;import{jsx as ma}from"react/jsx-runtime";var kt="k-card-deck-scrollwrap",la=[],sa={},da={},le=e=>{let{...t}=e;return ma("div",{...t,className:a(e.className,kt),children:e.children})};le.states=la;le.options=sa;le.className=kt;le.defaultOptions=da;le.moduleName=A;le.folderName=D;var Ze="action-buttons",Lt=Ze;import{jsx as ua}from"react/jsx-runtime";var Ke="k-actions",ca=[],pa={},Qe={alignment:"start",orientation:"horizontal"},v=e=>{let{alignment:t=Qe.alignment,orientation:o=Qe.orientation,...r}=e;return ua("div",{...r,className:a(Ke,{[`${Ke}-${t}`]:t,[`${Ke}-${o}`]:o},e.className),children:e.children})};v.states=ca;v.options=pa;v.className=Ke;v.defaultOptions=Qe;v.moduleName=Ze;v.folderName=Lt;import{Fragment as fa,jsx as se,jsxs as At}from"react/jsx-runtime";var gt=e=>se(T,{orientation:"vertical",children:At(fa,{children:[se(w,{children:"Card Header"}),se(_,{children:se("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),At(v,{className:"k-card-actions",children:[se(l,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),se(l,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{Fragment as Ta,jsx as Ee,jsxs as yt}from"react/jsx-runtime";var It=e=>Ee(T,{orientation:"horizontal",children:yt(Ta,{children:[Ee(_,{title:"Card Title",children:Ee("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),yt(v,{orientation:"vertical",className:"k-card-actions",children:[Ee(l,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),Ee(l,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{jsx as Si,jsxs as Oi}from"react/jsx-runtime";import{jsx as h,jsxs as he}from"react/jsx-runtime";var Na=T.options,Ca=T.states,St={...T.defaultOptions,variant:"vertical"},ba=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Ea=[{name:"media",title:"Card with Media"},{name:"header",title:"Card with Header"},{name:"footer",title:"Card with Footer"}],de=e=>{let{variant:t,modifiers:o,...r}={...St,...e},n=!1,c=!1,d=!1;return Object.keys(o||{}).forEach(m=>{switch(m){case"media":{n=!!o?.[m];break}case"header":{c=!!o?.[m];break}case"footer":{d=!!o?.[m];break}}}),t==="horizontal"?he(It,{style:{maxWidth:"420px"},...r,children:[n&&h(ze,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),he("div",{children:[c&&h(w,{title:"Header Title",subtitle:"Header Subtitle"}),h(_,{title:"Title",subtitle:"Subtitle",children:h("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),d&&h(Ye,{children:"Card Footer"})]}),(c||d)&&h("span",{className:"k-separator k-separator-vertical"}),he(v,{orientation:"vertical",alignment:"stretched",className:"k-card-actions",children:[h(l,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(l,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]}):he(gt,{style:{maxHeight:"450px",width:"300px"},...r,children:[c&&h(w,{title:"Header Title",subtitle:"Header Subtitle"}),n&&h(ze,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),h(_,{title:"Title",subtitle:"Subtitle",children:h("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),d&&h(Ye,{children:"Card Footer"}),he(v,{className:"k-card-actions",children:[h(l,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(l,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};de.options=Na;de.states=Ca;de.variants=ba;de.defaultOptions=St;de.modifiers=Ea;de.className=T.className;var u="timeline",f=u;import{Fragment as xa,jsx as Ot}from"react/jsx-runtime";var ve="k-timeline",ha=[],va={},Dt={orientation:"vertical"},N=e=>{let{orientation:t=Dt.orientation,collapsibleEvents:o,alternatingMode:r,...n}=e;return Ot("div",{...n,className:a(e.className,ve,{[`${ve}-${t}`]:t,[`${ve}-alternating`]:r,[`${ve}-collapsible`]:o}),children:Ot(xa,{children:e.children})})};N.states=ha;N.options=va;N.className=ve;N.defaultOptions=Dt;N.moduleName=u;N.folderName=f;N.ariaSpec={rules:[{selector:".k-timeline.k-timeline-horizontal .k-timeline-track-wrap .k-timeline-scrollable-wrap",attribute:"role=tablist",usage:"Indicates the tablist role for the scrollable wrap element."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-track-item:not(.k-timeline-flag-wrap)",attribute:"role=tab",usage:"Individual tab element on the track."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-track-item:not(.k-timeline-flag-wrap).k-focus",attribute:"aria-selected=true",usage:"Announces the selected state of the focused tab."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-flag-wrap",attribute:"role=none",usage:"The flag-wrap items have semantics removed."},{selector:".k-timeline.k-timeline-horizontal .k-timeline-flag-wrap",attribute:"aria-hidden=true",usage:"Flag-wrap items are hidden from the accessibility tree."},{selector:".k-timeline.k-timeline-horizontal .k-card:not(:empty)",attribute:"role=tabpanel",usage:"The card serves as the tab panel content."},{selector:".k-timeline.k-timeline-horizontal .k-card:not(:empty)",attribute:"aria-label",usage:"Refers to the tab element that controls the panel."},{selector:".k-timeline-arrow",attribute:"aria-hidden=true",usage:"Arrow buttons are hidden from the accessibility tree."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"role=button",usage:"Items in the vertical timeline are buttons."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"aria-describedby",usage:"Vertical timeline cards are described by their date elements."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"aria-live=polite",usage:"Vertical timeline cards are live regions."},{selector:".k-timeline.k-timeline-vertical .k-card",attribute:"tabindex=0",usage:"Vertical timeline cards are focusable."},{selector:".k-timeline.k-timeline-collapsible .k-collapsed .k-card",attribute:"aria-expanded=false",usage:"Collapsed cards announce their collapsed state."},{selector:".k-timeline.k-timeline-collapsible .k-timeline-card:not(.k-collapsed) .k-card",attribute:"aria-expanded=true",usage:"Expanded cards announce their expanded state."}]};import{jsx as P,jsxs as je}from"react/jsx-runtime";var Kt="k-timeline-event",Ma=[],ka={},me={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},b=e=>{let{date:t,content:o=me.content,collapsed:r=me.collapsed,reverse:n=me.reverse,title:c=me.title,subtitle:d=me.subtitle,showCollapseButton:m,id:I=H("timeline-event"),...k}=e,L=`${I}-date`;return je("li",{...k,className:a(e.className,Kt,{"k-reverse":n}),children:[t&&P("div",{className:"k-timeline-date-wrap",children:P("span",{className:"k-timeline-date",id:L,children:t})}),P(g,{}),o&&P("div",{className:a("k-timeline-card",{"k-collapsed":r}),children:P(Y,{...n?{callout:"right"}:{callout:"left"},ariaRole:"button",ariaDescribedBy:t?L:void 0,ariaLive:"polite",cardTabIndex:0,ariaExpanded:m?!r:void 0,children:je("div",{className:"k-card-inner",children:[je(w,{children:[P(X,{collapsible:m,children:c}),P(W,{children:d})]}),P(_,{children:P("div",{className:"k-card-description",children:o})})]})})}),e.children]})};b.states=Ma;b.options=ka;b.className=Kt;b.defaultOptions=me;b.moduleName=u;b.folderName=f;import{jsx as ce,jsxs as et}from"react/jsx-runtime";var _t="k-timeline-event",La=[],Aa={},_e={title:"Event title",subtitle:"Event subtitle",content:"Event content"},B=e=>{let{content:t=_e.content,title:o=_e.title,subtitle:r=_e.subtitle,ariaLabel:n,panelTabIndex:c,...d}=e;return et("li",{...d,className:a(e.className,_t),children:[t&&ce("div",{className:a("k-timeline-card"),children:ce(Y,{orientation:"vertical",callout:"top",ariaRole:"tabpanel",ariaLabel:n,cardTabIndex:c,children:et("div",{className:"k-card-inner",children:[et(w,{children:[ce(X,{children:o}),ce(W,{children:r})]}),ce(_,{children:ce("div",{className:"k-card-description",children:t})})]})})}),e.children]})};B.states=La;B.options=Aa;B.className=_t;B.defaultOptions=_e;B.moduleName=u;B.folderName=f;import{jsx as Rt}from"react/jsx-runtime";var Ht="k-timeline-events-list",Z=e=>{let{...t}=e;return Rt("div",{...t,className:a(e.className,Ht),children:Rt("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};Z.className=Ht;Z.moduleName=u;Z.folderName=f;import{jsx as Ia,jsxs as Sa}from"react/jsx-runtime";var Bt="k-timeline-flag-wrap",ga=[p.focus,p.selected],ya={},wt={year:"2020"},x=e=>{let{year:t=wt.year,...o}=e;return Sa("li",{...o,className:a(e.className,Bt),children:[Ia("span",{className:"k-timeline-flag",children:t}),e.children]})};x.states=ga;x.options=ya;x.className=Bt;x.defaultOptions=wt;x.moduleName=u;x.folderName=f;import{jsx as Oa}from"react/jsx-runtime";var Pt="k-timeline-circle",g=e=>{let{...t}=e;return Oa("span",{...t,className:a(e.className,Pt)})};g.className=Pt;g.moduleName=u;g.folderName=f;import{jsx as Da}from"react/jsx-runtime";var Ft="k-timeline-flag",F=e=>{let{content:t,...o}=e;return Da("span",{...o,className:a(e.className,Ft),children:t})};F.className=Ft;F.moduleName=u;F.folderName=f;import{jsx as tt,jsxs as Ra}from"react/jsx-runtime";var zt="k-card-title",Ka=[],_a={},X=e=>{let{collapsible:t,children:o,...r}=e;return Ra("div",{className:a(e.className,zt),...r,children:[tt("span",{className:"k-event-title",children:o}),t&&tt("span",{className:"k-event-collapse k-button k-button-flat k-button-xs k-icon-button",children:tt(K,{icon:"chevron-right",className:"k-button-icon"})})]})};X.states=Ka;X.className=zt;X.defaultOptions=_a;import{jsx as wa}from"react/jsx-runtime";var Wt="k-timeline-card-callout",Ha=[],Ba={},xe=e=>{let{...t}=e;return wa(ye,{className:a(e.className,Wt),...t})};xe.states=Ha;xe.className=Wt;xe.defaultOptions=Ba;import{jsx as Ut}from"react/jsx-runtime";var Vt="k-timeline-date-wrap",Pa=[],Fa={},$t={date:"May 25, 2008"},M=e=>{let{date:t=$t.date,...o}=e;return Ut("div",{...o,className:a(e.className,Vt),children:Ut("span",{className:"k-timeline-date",children:t})})};M.states=Pa;M.options=Fa;M.className=Vt;M.defaultOptions=$t;M.moduleName=u;M.folderName=f;import{jsx as ot,jsxs as za}from"react/jsx-runtime";var Gt="k-timeline-track-wrap",Q=e=>{let{...t}=e;return za("div",{...t,className:a(e.className,Gt),children:[ot(l,{className:"k-timeline-arrow k-timeline-arrow-left",rounded:"full",icon:"chevron-left",disabled:!0,"aria-hidden":"true",tabIndex:-1}),ot(l,{className:"k-timeline-arrow k-timeline-arrow-right",rounded:"full",icon:"chevron-right","aria-hidden":"true",tabIndex:-1}),ot(Me,{children:e.children})]})};Q.className=Gt;Q.moduleName=u;Q.folderName=f;import{jsx as Jt}from"react/jsx-runtime";var qt="k-timeline-track",Me=e=>{let{...t}=e;return Jt("div",{...t,className:a(e.className,qt),children:Jt("ul",{className:"k-timeline-scrollable-wrap",role:"tablist",children:e.children})})};Me.className=qt;Me.moduleName=u;Me.folderName=f;import{jsxs as Ua}from"react/jsx-runtime";var at="k-timeline-track-item",Wa=[p.focus],E=e=>{let{content:t,focus:o,ariaSelected:r,ariaDescribedBy:n,...c}=e,d=c.className?.includes("k-timeline-flag-wrap");return Ua("li",{...c,className:a(e.className,at,O(at,{focus:o})),role:d?"none":"tab","aria-hidden":d?"true":void 0,"aria-selected":!d&&r?"true":void 0,"aria-describedby":d?void 0:n,children:[t,e.children]})};E.states=Wa;E.className=at;E.moduleName=u;E.folderName=f;import{jsx as bs,jsxs as Es}from"react/jsx-runtime";import{jsx as ks,jsxs as Ls}from"react/jsx-runtime";import{jsx as j,jsxs as Va}from"react/jsx-runtime";var Xt=e=>{let t=H("tl-ev"),o=H("tl-ev"),r=H("tl-ev"),n=H("tl-ev");return j(N,{alternatingMode:!0,children:Va("ul",{children:[j(x,{year:"2010"}),j(b,{id:t,date:"Apr 11, 2010",reverse:!0}),j(b,{id:o,date:"May 11, 2010"}),j(x,{year:"2011"}),j(b,{id:r,date:"Oct 11, 2011",reverse:!0}),j(b,{id:n,date:"Dec 11, 2011"})]}),...e})};import{Fragment as $a,jsx as y,jsxs as ke}from"react/jsx-runtime";var Yt=e=>y(N,{orientation:"horizontal",children:ke($a,{children:[ke(Q,{children:[y(E,{className:"k-timeline-flag-wrap",children:y(F,{content:"2015"})}),ke(E,{children:[y(M,{date:"Jan 14, 2015"}),y(g,{})]}),ke(E,{focus:!0,ariaSelected:!0,ariaDescribedBy:"panel-1",children:[y(M,{date:"Jun 1, 2015"}),y(g,{})]}),ke(E,{children:[y(M,{date:"Sep 29, 2015"}),y(g,{})]}),y(E,{className:"k-timeline-flag-wrap",children:y(F,{content:"2016"})})]}),y(Z,{children:y(B,{ariaLabel:"Jun 1, 2015",panelTabIndex:0})})]}),...e});import{Fragment as Qa,jsx as C,jsxs as ee}from"react/jsx-runtime";var Ga=N.options,Ja=N.states,qa={...N.defaultOptions,variant:"vertical"},Xa=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Ya=[],Za=`
.k-timeline-events-list .k-timeline-scrollable-wrap {
height: 115px !important;
}
`,pe=e=>{let{variant:t,...o}=e;return t==="horizontal"?ee(Qa,{children:[C("style",{children:Za}),ee(Yt,{...o,children:[ee(Q,{children:[C(E,{className:"k-timeline-flag-wrap",children:C(F,{content:"Timeline Flag"})}),ee(E,{children:[C(M,{date:"Date"}),C(g,{})]}),ee(E,{className:"k-focus",children:[C(M,{date:"Current Date"}),C(g,{})]}),ee(E,{children:[C(M,{date:"Date"}),C(g,{})]}),C(E,{className:"k-timeline-flag-wrap",children:C(F,{content:"Timeline Flag"})})]}),C(Z,{children:C(B,{})})]})]}):C(Xt,{...o,children:ee("ul",{children:[C(x,{year:"Timeline Flag"}),C(b,{title:"Header",subtitle:"Subheader",showCollapseButton:!0,date:"Timeline Date",reverse:!0}),C(x,{year:"Timeline Flag"}),C(b,{title:"Header",subtitle:"Subheader",showCollapseButton:!0,date:"Timeline Date"})]})})};pe.options=Ga;pe.states=Ja;pe.variants=Xa;pe.defaultOptions=qa;pe.modifiers=Ya;pe.className=N.className;import{jsx as tr,jsxs as or}from"react/jsx-runtime";var ja=[],er={},Y=e=>{let{callout:t,children:o,ariaRole:r,ariaDescribedBy:n,ariaLive:c,ariaExpanded:d,ariaLabel:m,cardTabIndex:I,...k}=e;return or(T,{className:a(e.className),orientation:"vertical",callout:"true",role:r,"aria-describedby":n,"aria-live":c,"aria-expanded":d!==void 0?d?"true":"false":void 0,"aria-label":m,tabIndex:I,...k,children:[t&&tr(xe,{callout:t}),o]})};Y.states=ja;Y.defaultOptions=er;var Ed=Y;export{Y as TimelineCard,Ed as default};