@progress/kendo-themes-html/dist/esm/timeline/demos/timeline.mjs

A collection of HTML helpers used for developing Kendo UI themes

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]}`}var u="timeline",f=u;import{Fragment as ro,jsx as it}from"react/jsx-runtime";var ue="k-timeline",oo=[],ao={},lt={orientation:"vertical"},N=e=>{let{orientation:t=lt.orientation,collapsibleEvents:o,alternatingMode:r,...n}=e;return it("div",{...n,className:a(e.className,ue,{[`${ue}-${t}`]:t,[`${ue}-alternating`]:r,[`${ue}-collapsible`]:o}),children:it(ro,{children:e.children})})};N.states=oo;N.options=ao;N.className=ue;N.defaultOptions=lt;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 no}from"react/jsx-runtime";var st="k-timeline-circle",A=e=>{let{...t}=e;return no("span",{...t,className:a(e.className,st)})};A.className=st;A.moduleName=u;A.folderName=f;import{jsx as dt}from"react/jsx-runtime";var mt="k-timeline-date-wrap",io=[],lo={},ct={date:"May 25, 2008"},v=e=>{let{date:t=ct.date,...o}=e;return dt("div",{...o,className:a(e.className,mt),children:dt("span",{className:"k-timeline-date",children:t})})};v.states=io;v.options=lo;v.className=mt;v.defaultOptions=ct;v.moduleName=u;v.folderName=f;import{jsx as so}from"react/jsx-runtime";var pt="k-timeline-flag",w=e=>{let{content:t,...o}=e;return so("span",{...o,className:a(e.className,pt),children:t})};w.className=pt;w.moduleName=u;w.folderName=f;import{jsxs as co}from"react/jsx-runtime";var Be="k-timeline-track-item",mo=[p.focus],b=e=>{let{content:t,focus:o,ariaSelected:r,ariaDescribedBy:n,...c}=e,d=c.className?.includes("k-timeline-flag-wrap");return co("li",{...c,className:a(e.className,Be,O(Be,{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]})};b.states=mo;b.className=Be;b.moduleName=u;b.folderName=f;import{Fragment as To,jsx as ut}from"react/jsx-runtime";var we="k-font-icon",po=[],uo={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]},fo={},fe=e=>{let{size:t,themeColor:o,icon:r,rotate:n,flip:c,...d}=e;return r?ut("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"}):ut(To,{})};fe.states=po;fe.options=uo;fe.className=we;fe.defaultOptions=fo;var ft=fe;import{Fragment as bo,jsx as ye}from"react/jsx-runtime";var Pe="k-svg-icon",No=[],Co={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]},Fe={viewBox:"0 0 24 24",variant:R.outline},Te=e=>{let{size:t,themeColor:o,rotate:r,flip:n,viewBox:c=Fe.viewBox,variant:d=Fe.variant,icon:m,...I}=e;if(!m)return ye(bo,{});if(m==="none")return ye("span",{...I,className:a(e.className,Pe,$("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 ye("span",{...I,className:a(e.className,Pe,$("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:ye("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})})};Te.states=No;Te.options=Co;Te.className=Pe;Te.defaultOptions=Fe;var ze=Te;import*as We from"@progress/kendo-svg-icons";var Tt="icon",Nt="icons";import{useContext as ho}from"react";import{createContext as Eo}from"react";var Ct=Eo({iconsType:"svg"});import{Fragment as bt,jsx as Ne}from"react/jsx-runtime";var Ie="k-icon",vo=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),xo=[],Mo={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]},Se={viewBox:"0 0 24 24",type:"svg",variant:R.outline},D=e=>{let{iconsType:t}=ho(Ct),{size:o,themeColor:r,icon:n,type:c=t||Se.type,rotate:d,flip:m,viewBox:I=Se.viewBox,variant:k=Se.variant,...L}=e;if(!n)return Ne(bt,{});if((t||c)==="svg"){if(n==="none")return Ne(ze,{...L,className:a(e.className,Ie),icon:n,size:o,variant:k});let U=We[n]?n:vo(`${n}-icon`);return We[U]?Ne(ze,{...L,className:a(e.className,Ie),icon:We[U],size:o,themeColor:r,rotate:d,flip:m,viewBox:I,variant:k}):Ne(bt,{})}return Ne(ft,{...L,className:a(e.className,Ie),icon:n,size:o,themeColor:r,rotate:d,flip:m})};D.states=xo;D.options=Mo;D.defaultOptions=Se;D.className=Ie;D.moduleName=Tt;D.folderName=Nt;D.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 Ue="button",Et=Ue;import{Fragment as ht,jsx as oe,jsxs as vt}from"react/jsx-runtime";var Ce="k-button",ko=["icon-button"],Lo=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],Ao={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]},Ve={showArrow:!1,arrowIconName:"chevron-down"},l=e=>{let{as:t="button",size:o,rounded:r,fillMode:n,themeColor:c,showArrow:d=Ve.showArrow,arrowIconName:m=Ve.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 vt(t,{className:a(Qt,Ce,rt(Ce,I),$(Ce,{size:o,rounded:r,fillMode:n,themeColor:c}),O(Ce,{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&&oe(D,{className:a(Zt,"k-button-icon"),icon:S,size:V}),S&&typeof S!="string"&&oe(ht,{children:S}),ge?vt(ht,{children:[ge&&oe("span",{className:"k-button-text",children:ge}),e.children]}):e.children&&oe("span",{className:"k-button-text",children:e.children}),d&&oe("span",{className:"k-menu-button-arrow k-button-arrow",children:oe(D,{icon:m})})]})};l.states=Lo;l.options=Ao;l.variants=ko;l.className=Ce;l.defaultOptions=Ve;l.moduleName=Ue;l.folderName=Et;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 go}from"react/jsx-runtime";var xt=e=>go(l,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as yo}from"react/jsx-runtime";var Mt=e=>yo(l,{icon:"folder",children:"Button",...e});import{jsx as Io}from"react/jsx-runtime";var kt=e=>Io(l,{children:"Button",...e});import{jsx as $e}from"react/jsx-runtime";var So=l.options,Oo=l.states,Do={...l.defaultOptions,variant:"text"},Ko=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_o=[],ae=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return $e(xt,{...o,icon:"star"});case"icon-and-text":return $e(Mt,{...o,icon:"star",children:"Button"});default:return $e(kt,{...o,children:"Button"})}};ae.options=So;ae.states=Oo;ae.variants=Ko;ae.defaultOptions=Do;ae.modifiers=_o;ae.className=l.className;import{jsx as Ho}from"react/jsx-runtime";var Ro="k-card-callout",Oe=e=>{let{callout:t,...o}=e;return Ho("span",{...o,className:a(e.className,Ro,{[`k-callout-${nt.calloutMap[t]||t}`]:t})})};var g="card",K=g;import{Fragment as Fo,jsx as Lt,jsxs as zo}from"react/jsx-runtime";var Ge="k-card",Bo=[p.hover,p.focus,p.selected,p.disabled],wo={},Po={},T=e=>{let{orientation:t,callout:o,hover:r,focus:n,selected:c,disabled:d,...m}=e;return zo("div",{...m,className:a(e.className,Ge,O(Ge,{hover:r,focus:n,disabled:d,selected:c}),{[`k-card-${t}`]:t,"k-card-with-callout":o}),children:[o&&o!=="true"&&Lt(Oe,{callout:o}),Lt(Fo,{children:e.children})]})};T.states=Bo;T.options=wo;T.className=Ge;T.defaultOptions=Po;T.moduleName=g;T.folderName=K;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 $o,jsx as At}from"react/jsx-runtime";var Je="k-card-list",Wo=[],Uo={},Vo={},z=e=>{let{...t}=e;return At("div",{...t,className:a(e.className,Je,O(Je,{})),role:"list",children:At($o,{children:e.children})})};z.states=Wo;z.options=Uo;z.className=Je;z.defaultOptions=Vo;z.moduleName=g;z.folderName=K;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 Xo}from"react/jsx-runtime";var gt="k-card-group",Go=[],Jo={},qo={},re=e=>{let{...t}=e;return Xo("div",{...t,className:a(e.className,gt),children:e.children})};re.states=Go;re.options=Jo;re.className=gt;re.defaultOptions=qo;re.moduleName=g;re.folderName=K;import{jsx as jo}from"react/jsx-runtime";var qe="k-card-wrap",Yo=[p.focus,p.selected],Zo={},Qo={},ne=e=>{let{focus:t,selected:o,...r}=e;return jo("div",{...r,className:a(e.className,qe,O(qe,{focus:t,selected:o})),children:e.children})};ne.states=Yo;ne.options=Zo;ne.className=qe;ne.defaultOptions=Qo;ne.moduleName=g;ne.folderName=K;import{jsx as ta}from"react/jsx-runtime";var Xe="k-card-title",ea=[p.hover,p.focus],q=e=>{let{hover:t,focus:o,...r}=e;return ta("div",{...r,className:a(e.className,Xe,O(Xe,{hover:t,focus:o})),children:e.children})};q.states=ea;q.className=Xe;import{jsx as aa}from"react/jsx-runtime";var oa="k-card-subtitle",W=e=>{let{...t}=e;return aa("div",{...t,className:a(e.className,oa),children:e.children})};import{Fragment as It,jsx as De}from"react/jsx-runtime";var yt="k-card-media",Ye=e=>{let{src:t,...o}=e;return De(It,{children:t?De("img",{...o,className:a(e.className,yt),src:t}):De("span",{...o,className:a(e.className,yt),children:De(It,{children:e.children})})})};import{Fragment as na,jsx as be,jsxs as ia}from"react/jsx-runtime";var ra="k-card-header",P=e=>{let{title:t,subtitle:o,details:r,...n}=e;return ia("div",{...n,className:a(e.className,ra),children:[t&&be(q,{children:t}),o&&be(W,{children:o}),be(na,{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 sa}from"react/jsx-runtime";var la="k-card-footer",Ze=e=>{let{...t}=e;return sa("div",{...t,className:a(e.className,la),children:e.children})};import{Fragment as ma,jsx as Ee,jsxs as ca}from"react/jsx-runtime";var da="k-card-body",_=e=>{let{title:t,subtitle:o,details:r,...n}=e;return ca("div",{...n,className:a(e.className,da),children:[t&&Ee(q,{children:t}),o&&Ee(W,{children:o}),Ee(ma,{children:e.children}),r&&Ee("span",{className:"k-card-header-actions",children:Ee(l,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as Ta}from"react/jsx-runtime";var St="k-card-deck",pa=[],ua={},fa={},ie=e=>{let{...t}=e;return Ta("div",{...t,className:a(e.className,St),children:e.children})};ie.states=pa;ie.options=ua;ie.className=St;ie.defaultOptions=fa;ie.moduleName=g;ie.folderName=K;import{jsx as Ea}from"react/jsx-runtime";var Ot="k-card-deck-scrollwrap",Na=[],Ca={},ba={},le=e=>{let{...t}=e;return Ea("div",{...t,className:a(e.className,Ot),children:e.children})};le.states=Na;le.options=Ca;le.className=Ot;le.defaultOptions=ba;le.moduleName=g;le.folderName=K;var Qe="action-buttons",Dt=Qe;import{jsx as xa}from"react/jsx-runtime";var Ke="k-actions",ha=[],va={},je={alignment:"start",orientation:"horizontal"},x=e=>{let{alignment:t=je.alignment,orientation:o=je.orientation,...r}=e;return xa("div",{...r,className:a(Ke,{[`${Ke}-${t}`]:t,[`${Ke}-${o}`]:o},e.className),children:e.children})};x.states=ha;x.options=va;x.className=Ke;x.defaultOptions=je;x.moduleName=Qe;x.folderName=Dt;import{Fragment as Ma,jsx as se,jsxs as Kt}from"react/jsx-runtime";var _t=e=>se(T,{orientation:"vertical",children:Kt(Ma,{children:[se(P,{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."})}),Kt(x,{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 ka,jsx as he,jsxs as Rt}from"react/jsx-runtime";var Ht=e=>he(T,{orientation:"horizontal",children:Rt(ka,{children:[he(_,{title:"Card Title",children:he("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),Rt(x,{orientation:"vertical",className:"k-card-actions",children:[he(l,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),he(l,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{jsx as Zi,jsxs as Qi}from"react/jsx-runtime";import{jsx as h,jsxs as ve}from"react/jsx-runtime";var La=T.options,Aa=T.states,Bt={...T.defaultOptions,variant:"vertical"},ga=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ya=[{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}={...Bt,...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"?ve(Ht,{style:{maxWidth:"420px"},...r,children:[n&&h(Ye,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),ve("div",{children:[c&&h(P,{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(Ze,{children:"Card Footer"})]}),(c||d)&&h("span",{className:"k-separator k-separator-vertical"}),ve(x,{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"})]})]}):ve(_t,{style:{maxHeight:"450px",width:"300px"},...r,children:[c&&h(P,{title:"Header Title",subtitle:"Header Subtitle"}),n&&h(Ye,{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(Ze,{children:"Card Footer"}),ve(x,{className:"k-card-actions",children:[h(l,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(l,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};de.options=La;de.states=Aa;de.variants=ga;de.defaultOptions=Bt;de.modifiers=ya;de.className=T.className;import{jsx as F,jsxs as et}from"react/jsx-runtime";var wt="k-timeline-event",Ia=[],Sa={},me={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},E=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 et("li",{...k,className:a(e.className,wt,{"k-reverse":n}),children:[t&&F("div",{className:"k-timeline-date-wrap",children:F("span",{className:"k-timeline-date",id:L,children:t})}),F(A,{}),o&&F("div",{className:a("k-timeline-card",{"k-collapsed":r}),children:F(ce,{...n?{callout:"right"}:{callout:"left"},ariaRole:"button",ariaDescribedBy:t?L:void 0,ariaLive:"polite",cardTabIndex:0,ariaExpanded:m?!r:void 0,children:et("div",{className:"k-card-inner",children:[et(P,{children:[F(X,{collapsible:m,children:c}),F(W,{children:d})]}),F(_,{children:F("div",{className:"k-card-description",children:o})})]})})}),e.children]})};E.states=Ia;E.options=Sa;E.className=wt;E.defaultOptions=me;E.moduleName=u;E.folderName=f;import{jsx as pe,jsxs as tt}from"react/jsx-runtime";var Pt="k-timeline-event",Oa=[],Da={},_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 tt("li",{...d,className:a(e.className,Pt),children:[t&&pe("div",{className:a("k-timeline-card"),children:pe(ce,{orientation:"vertical",callout:"top",ariaRole:"tabpanel",ariaLabel:n,cardTabIndex:c,children:tt("div",{className:"k-card-inner",children:[tt(P,{children:[pe(X,{children:o}),pe(W,{children:r})]}),pe(_,{children:pe("div",{className:"k-card-description",children:t})})]})})}),e.children]})};B.states=Oa;B.options=Da;B.className=Pt;B.defaultOptions=_e;B.moduleName=u;B.folderName=f;import{jsx as Ft}from"react/jsx-runtime";var zt="k-timeline-events-list",Y=e=>{let{...t}=e;return Ft("div",{...t,className:a(e.className,zt),children:Ft("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};Y.className=zt;Y.moduleName=u;Y.folderName=f;import{jsx as Ra,jsxs as Ha}from"react/jsx-runtime";var Wt="k-timeline-flag-wrap",Ka=[p.focus,p.selected],_a={},Ut={year:"2020"},M=e=>{let{year:t=Ut.year,...o}=e;return Ha("li",{...o,className:a(e.className,Wt),children:[Ra("span",{className:"k-timeline-flag",children:t}),e.children]})};M.states=Ka;M.options=_a;M.className=Wt;M.defaultOptions=Ut;M.moduleName=u;M.folderName=f;import{jsx as Pa,jsxs as Fa}from"react/jsx-runtime";var Ba=[],wa={},ce=e=>{let{callout:t,children:o,ariaRole:r,ariaDescribedBy:n,ariaLive:c,ariaExpanded:d,ariaLabel:m,cardTabIndex:I,...k}=e;return Fa(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&&Pa(xe,{callout:t}),o]})};ce.states=Ba;ce.defaultOptions=wa;import{jsx as ot,jsxs as Ua}from"react/jsx-runtime";var Vt="k-card-title",za=[],Wa={},X=e=>{let{collapsible:t,children:o,...r}=e;return Ua("div",{className:a(e.className,Vt),...r,children:[ot("span",{className:"k-event-title",children:o}),t&&ot("span",{className:"k-event-collapse k-button k-button-flat k-button-xs k-icon-button",children:ot(D,{icon:"chevron-right",className:"k-button-icon"})})]})};X.states=za;X.className=Vt;X.defaultOptions=Wa;import{jsx as Ga}from"react/jsx-runtime";var $t="k-timeline-card-callout",Va=[],$a={},xe=e=>{let{...t}=e;return Ga(Oe,{className:a(e.className,$t),...t})};xe.states=Va;xe.className=$t;xe.defaultOptions=$a;import{jsx as Gt}from"react/jsx-runtime";var Jt="k-timeline-track",Me=e=>{let{...t}=e;return Gt("div",{...t,className:a(e.className,Jt),children:Gt("ul",{className:"k-timeline-scrollable-wrap",role:"tablist",children:e.children})})};Me.className=Jt;Me.moduleName=u;Me.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 Z,jsxs as Ja}from"react/jsx-runtime";var qt=e=>{let t=H("tl-ev"),o=H("tl-ev"),r=H("tl-ev"),n=H("tl-ev");return Z(N,{alternatingMode:!0,children:Ja("ul",{children:[Z(M,{year:"2010"}),Z(E,{id:t,date:"Apr 11, 2010",reverse:!0}),Z(E,{id:o,date:"May 11, 2010"}),Z(M,{year:"2011"}),Z(E,{id:r,date:"Oct 11, 2011",reverse:!0}),Z(E,{id:n,date:"Dec 11, 2011"})]}),...e})};import{Fragment as qa,jsx as y,jsxs as ke}from"react/jsx-runtime";var Xt=e=>y(N,{orientation:"horizontal",children:ke(qa,{children:[ke(Q,{children:[y(b,{className:"k-timeline-flag-wrap",children:y(w,{content:"2015"})}),ke(b,{children:[y(v,{date:"Jan 14, 2015"}),y(A,{})]}),ke(b,{focus:!0,ariaSelected:!0,ariaDescribedBy:"panel-1",children:[y(v,{date:"Jun 1, 2015"}),y(A,{})]}),ke(b,{children:[y(v,{date:"Sep 29, 2015"}),y(A,{})]}),y(b,{className:"k-timeline-flag-wrap",children:y(w,{content:"2016"})})]}),y(Y,{children:y(B,{ariaLabel:"Jun 1, 2015",panelTabIndex:0})})]}),...e});import{jsx as at,jsxs as Xa}from"react/jsx-runtime";var Yt="k-timeline-track-wrap",Q=e=>{let{...t}=e;return Xa("div",{...t,className:a(e.className,Yt),children:[at(l,{className:"k-timeline-arrow k-timeline-arrow-left",rounded:"full",icon:"chevron-left",disabled:!0,"aria-hidden":"true",tabIndex:-1}),at(l,{className:"k-timeline-arrow k-timeline-arrow-right",rounded:"full",icon:"chevron-right","aria-hidden":"true",tabIndex:-1}),at(Me,{children:e.children})]})};Q.className=Yt;Q.moduleName=u;Q.folderName=f;import{Fragment as or,jsx as C,jsxs as j}from"react/jsx-runtime";var Ya=N.options,Za=N.states,Qa={...N.defaultOptions,variant:"vertical"},ja=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],er=[],tr=`
    .k-timeline-events-list .k-timeline-scrollable-wrap {
        height: 115px !important;
    }
`,ee=e=>{let{variant:t,...o}=e;return t==="horizontal"?j(or,{children:[C("style",{children:tr}),j(Xt,{...o,children:[j(Q,{children:[C(b,{className:"k-timeline-flag-wrap",children:C(w,{content:"Timeline Flag"})}),j(b,{children:[C(v,{date:"Date"}),C(A,{})]}),j(b,{className:"k-focus",children:[C(v,{date:"Current Date"}),C(A,{})]}),j(b,{children:[C(v,{date:"Date"}),C(A,{})]}),C(b,{className:"k-timeline-flag-wrap",children:C(w,{content:"Timeline Flag"})})]}),C(Y,{children:C(B,{})})]})]}):C(qt,{...o,children:j("ul",{children:[C(M,{year:"Timeline Flag"}),C(E,{title:"Header",subtitle:"Subheader",showCollapseButton:!0,date:"Timeline Date",reverse:!0}),C(M,{year:"Timeline Flag"}),C(E,{title:"Header",subtitle:"Subheader",showCollapseButton:!0,date:"Timeline Date"})]})})};ee.options=Ya;ee.states=Za;ee.variants=ja;ee.defaultOptions=Qa;ee.modifiers=er;ee.className=N.className;var Ed=ee;export{ee as TimelineDemo,Ed as default};