UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

6 lines (5 loc) 27.7 kB
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,...ee}=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(ee).reduce((S,V)=>(V.startsWith("k-")?S[V]=ee[V]:S[`k-${V}`]=ee[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"},H={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 B(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={},te=e=>{let{...t}=e;return Co("div",{...t,className:a(e.className,st),children:e.children})};te.states=fo;te.options=To;te.className=st;te.defaultOptions=No;te.moduleName=A;te.folderName=D;import{jsx as vo}from"react/jsx-runtime";var Pe="k-card-wrap",bo=[p.focus,p.selected],Eo={},ho={},oe=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})};oe.states=bo;oe.options=Eo;oe.className=Pe;oe.defaultOptions=ho;oe.moduleName=A;oe.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:[H.outline,H.solid,H.duotone]},Ve={viewBox:"0 0 24 24",variant:H.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:[H.outline,H.solid,H.duotone]},De={viewBox:"0 0 24 24",type:"svg",variant:H.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 ae,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:ee,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||ee,selected:U}),{"k-icon-button":!ge&&!to&&eo}),"aria-pressed":Re?U?"true":"false":void 0,...jt,"aria-disabled":ee?"true":void 0,disabled:Ae||void 0,children:[typeof S=="string"&&S&&ae(K,{className:a(Zt,"k-button-icon"),icon:S,size:V}),S&&typeof S!="string"&&ae(bt,{children:S}),ge?Et(bt,{children:[ge&&ae("span",{className:"k-button-text",children:ge}),e.children]}):e.children&&ae("span",{className:"k-button-text",children:e.children}),d&&ae("span",{className:"k-menu-button-arrow k-button-arrow",children:ae(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=[],re=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"})}};re.options=Vo;re.states=$o;re.variants=Jo;re.defaultOptions=Go;re.modifiers=qo;re.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={},ne=e=>{let{...t}=e;return ia("div",{...t,className:a(e.className,Mt),children:e.children})};ne.states=aa;ne.options=ra;ne.className=Mt;ne.defaultOptions=na;ne.moduleName=A;ne.folderName=D;import{jsx as ma}from"react/jsx-runtime";var kt="k-card-deck-scrollwrap",la=[],sa={},da={},ie=e=>{let{...t}=e;return ma("div",{...t,className:a(e.className,kt),children:e.children})};ie.states=la;ie.options=sa;ie.className=kt;ie.defaultOptions=da;ie.moduleName=A;ie.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 le,jsxs as At}from"react/jsx-runtime";var gt=e=>le(T,{orientation:"vertical",children:At(fa,{children:[le(w,{children:"Card Header"}),le(_,{children:le("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:[le(l,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),le(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"}],se=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"})]})]})};se.options=Na;se.states=Ca;se.variants=ba;se.defaultOptions=St;se.modifiers=Ea;se.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={},de={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},b=e=>{let{date:t,content:o=de.content,collapsed:r=de.collapsed,reverse:n=de.reverse,title:c=de.title,subtitle:d=de.subtitle,showCollapseButton:m,id:I=B("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(me,{...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=de;b.moduleName=u;b.folderName=f;import{jsx as _t}from"react/jsx-runtime";var Rt="k-timeline-events-list",Y=e=>{let{...t}=e;return _t("div",{...t,className:a(e.className,Rt),children:_t("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};Y.className=Rt;Y.moduleName=u;Y.folderName=f;import{jsx as ga,jsxs as ya}from"react/jsx-runtime";var Ht="k-timeline-flag-wrap",La=[p.focus,p.selected],Aa={},Bt={year:"2020"},x=e=>{let{year:t=Bt.year,...o}=e;return ya("li",{...o,className:a(e.className,Ht),children:[ga("span",{className:"k-timeline-flag",children:t}),e.children]})};x.states=La;x.options=Aa;x.className=Ht;x.defaultOptions=Bt;x.moduleName=u;x.folderName=f;import{jsx as Ia}from"react/jsx-runtime";var wt="k-timeline-circle",g=e=>{let{...t}=e;return Ia("span",{...t,className:a(e.className,wt)})};g.className=wt;g.moduleName=u;g.folderName=f;import{jsx as Sa}from"react/jsx-runtime";var Pt="k-timeline-flag",F=e=>{let{content:t,...o}=e;return Sa("span",{...o,className:a(e.className,Pt),children:t})};F.className=Pt;F.moduleName=u;F.folderName=f;import{jsx as Ka,jsxs as _a}from"react/jsx-runtime";var Oa=[],Da={},me=e=>{let{callout:t,children:o,ariaRole:r,ariaDescribedBy:n,ariaLive:c,ariaExpanded:d,ariaLabel:m,cardTabIndex:I,...k}=e;return _a(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&&Ka(xe,{callout:t}),o]})};me.states=Oa;me.defaultOptions=Da;import{jsx as et,jsxs as Ba}from"react/jsx-runtime";var Ft="k-card-title",Ra=[],Ha={},X=e=>{let{collapsible:t,children:o,...r}=e;return Ba("div",{className:a(e.className,Ft),...r,children:[et("span",{className:"k-event-title",children:o}),t&&et("span",{className:"k-event-collapse k-button k-button-flat k-button-xs k-icon-button",children:et(K,{icon:"chevron-right",className:"k-button-icon"})})]})};X.states=Ra;X.className=Ft;X.defaultOptions=Ha;import{jsx as Fa}from"react/jsx-runtime";var zt="k-timeline-card-callout",wa=[],Pa={},xe=e=>{let{...t}=e;return Fa(ye,{className:a(e.className,zt),...t})};xe.states=wa;xe.className=zt;xe.defaultOptions=Pa;import{jsx as Wt}from"react/jsx-runtime";var Ut="k-timeline-date-wrap",za=[],Wa={},Vt={date:"May 25, 2008"},M=e=>{let{date:t=Vt.date,...o}=e;return Wt("div",{...o,className:a(e.className,Ut),children:Wt("span",{className:"k-timeline-date",children:t})})};M.states=za;M.options=Wa;M.className=Ut;M.defaultOptions=Vt;M.moduleName=u;M.folderName=f;import{jsx as tt,jsxs as Ua}from"react/jsx-runtime";var $t="k-timeline-track-wrap",Z=e=>{let{...t}=e;return Ua("div",{...t,className:a(e.className,$t),children:[tt(l,{className:"k-timeline-arrow k-timeline-arrow-left",rounded:"full",icon:"chevron-left",disabled:!0,"aria-hidden":"true",tabIndex:-1}),tt(l,{className:"k-timeline-arrow k-timeline-arrow-right",rounded:"full",icon:"chevron-right","aria-hidden":"true",tabIndex:-1}),tt(Me,{children:e.children})]})};Z.className=$t;Z.moduleName=u;Z.folderName=f;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{jsxs as $a}from"react/jsx-runtime";var ot="k-timeline-track-item",Va=[p.focus],E=e=>{let{content:t,focus:o,ariaSelected:r,ariaDescribedBy:n,...c}=e,d=c.className?.includes("k-timeline-flag-wrap");return $a("li",{...c,className:a(e.className,ot,O(ot,{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=Va;E.className=ot;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 Q,jsxs as Ga}from"react/jsx-runtime";var qt=e=>{let t=B("tl-ev"),o=B("tl-ev"),r=B("tl-ev"),n=B("tl-ev");return Q(N,{alternatingMode:!0,children:Ga("ul",{children:[Q(x,{year:"2010"}),Q(b,{id:t,date:"Apr 11, 2010",reverse:!0}),Q(b,{id:o,date:"May 11, 2010"}),Q(x,{year:"2011"}),Q(b,{id:r,date:"Oct 11, 2011",reverse:!0}),Q(b,{id:n,date:"Dec 11, 2011"})]}),...e})};import{Fragment as Ja,jsx as y,jsxs as ke}from"react/jsx-runtime";var Xt=e=>y(N,{orientation:"horizontal",children:ke(Ja,{children:[ke(Z,{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(Y,{children:y(R,{ariaLabel:"Jun 1, 2015",panelTabIndex:0})})]}),...e});import{Fragment as er,jsx as C,jsxs as j}from"react/jsx-runtime";var qa=N.options,Xa=N.states,Ya={...N.defaultOptions,variant:"vertical"},Za=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Qa=[],ja=` .k-timeline-events-list .k-timeline-scrollable-wrap { height: 115px !important; } `,ce=e=>{let{variant:t,...o}=e;return t==="horizontal"?j(er,{children:[C("style",{children:ja}),j(Xt,{...o,children:[j(Z,{children:[C(E,{className:"k-timeline-flag-wrap",children:C(F,{content:"Timeline Flag"})}),j(E,{children:[C(M,{date:"Date"}),C(g,{})]}),j(E,{className:"k-focus",children:[C(M,{date:"Current Date"}),C(g,{})]}),j(E,{children:[C(M,{date:"Date"}),C(g,{})]}),C(E,{className:"k-timeline-flag-wrap",children:C(F,{content:"Timeline Flag"})})]}),C(Y,{children:C(R,{})})]})]}):C(qt,{...o,children:j("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"})]})})};ce.options=qa;ce.states=Xa;ce.variants=Za;ce.defaultOptions=Ya;ce.modifiers=Qa;ce.className=N.className;import{jsx as pe,jsxs as at}from"react/jsx-runtime";var Yt="k-timeline-event",tr=[],or={},_e={title:"Event title",subtitle:"Event subtitle",content:"Event content"},R=e=>{let{content:t=_e.content,title:o=_e.title,subtitle:r=_e.subtitle,ariaLabel:n,panelTabIndex:c,...d}=e;return at("li",{...d,className:a(e.className,Yt),children:[t&&pe("div",{className:a("k-timeline-card"),children:pe(me,{orientation:"vertical",callout:"top",ariaRole:"tabpanel",ariaLabel:n,cardTabIndex:c,children:at("div",{className:"k-card-inner",children:[at(w,{children:[pe(X,{children:o}),pe(W,{children:r})]}),pe(_,{children:pe("div",{className:"k-card-description",children:t})})]})})}),e.children]})};R.states=tr;R.options=or;R.className=Yt;R.defaultOptions=_e;R.moduleName=u;R.folderName=f;var Ed=R;export{R as HorizontalTimelineEvent,Yt as TIMELINEHORIZONTALEVENT_CLASSNAME,Ed as default};