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

A collection of HTML helpers used for developing Kendo UI themes

var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((o,i)=>e[i]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var S=(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"}),v=(t,e)=>{let{valid:o,invalid:i,hover:l,focus:c,checked:m,active:d,selected:M,disabled:y,indeterminate:b,loading:Q,empty:L,readonly:Z,highlighted:lt,...K}=e;return r({"k-valid":o,"k-invalid":i,"k-hover":l,"k-focus":c,"k-checked":m,"k-active":d,"k-selected":M,"k-disabled":y,"k-indeterminate":b&&!m,"k-loading":Q,"k-empty":L,"k-readonly":Z,"k-highlighted":lt},Object.keys(K).reduce((x,E)=>(E.startsWith("k-")?x[E]=K[E]:x[`k-${E}`]=K[E],x),{}))};function gt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(i=>[`k-${i}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},B={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},A={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={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"},Tt={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as ne}from"react/jsx-runtime";var ae="k-card-callout",tt=t=>{let{callout:e,...o}=t;return ne("span",{...o,className:r(t.className,ae,{[`k-callout-${Tt.calloutMap[e]||e}`]:e})})};var h="card",N=h;import{Fragment as de,jsx as Lt,jsxs as ce}from"react/jsx-runtime";var dt="k-card",se=[p.hover,p.focus,p.selected,p.disabled],ie={},le={},u=t=>{let{orientation:e,callout:o,hover:i,focus:l,selected:c,disabled:m,...d}=t;return ce("div",{...d,className:r(t.className,dt,v(dt,{hover:i,focus:l,disabled:m,selected:c}),{[`k-card-${e}`]:e,"k-card-with-callout":o}),children:[o&&o!=="true"&&Lt(tt,{callout:o}),Lt(de,{children:t.children})]})};u.states=se;u.options=ie;u.className=dt;u.defaultOptions=le;u.moduleName=h;u.folderName=N;u.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 fe,jsx as Et}from"react/jsx-runtime";var ct="k-card-list",me=[],pe={},ue={},g=t=>{let{...e}=t;return Et("div",{...e,className:r(t.className,ct,v(ct,{})),role:"list",children:Et(fe,{children:t.children})})};g.states=me;g.options=pe;g.className=ct;g.defaultOptions=ue;g.moduleName=h;g.folderName=N;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 Ne}from"react/jsx-runtime";var St="k-card-group",Ce=[],he={},xe={},R=t=>{let{...e}=t;return Ne("div",{...e,className:r(t.className,St),children:t.children})};R.states=Ce;R.options=he;R.className=St;R.defaultOptions=xe;R.moduleName=h;R.folderName=N;import{jsx as ke}from"react/jsx-runtime";var mt="k-card-wrap",be=[p.focus,p.selected],ve={},Ae={},_=t=>{let{focus:e,selected:o,...i}=t;return ke("div",{...i,className:r(t.className,mt,v(mt,{focus:e,selected:o})),children:t.children})};_.states=be;_.options=ve;_.className=mt;_.defaultOptions=Ae;_.moduleName=h;_.folderName=N;import{jsx as Me}from"react/jsx-runtime";var pt="k-card-title",ye=[p.hover,p.focus],D=t=>{let{hover:e,focus:o,...i}=t;return Me("div",{...i,className:r(t.className,pt,v(pt,{hover:e,focus:o})),children:t.children})};D.states=ye;D.className=pt;import{jsx as Te}from"react/jsx-runtime";var ge="k-card-subtitle",et=t=>{let{...e}=t;return Te("div",{...e,className:r(t.className,ge),children:t.children})};import{Fragment as Bt,jsx as ot}from"react/jsx-runtime";var Ot="k-card-media",ut=t=>{let{src:e,...o}=t;return ot(Bt,{children:e?ot("img",{...o,className:r(t.className,Ot),src:e}):ot("span",{...o,className:r(t.className,Ot),children:ot(Bt,{children:t.children})})})};import{Fragment as Oe,jsx as Dt}from"react/jsx-runtime";var ft="k-font-icon",Le=[],Ee={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Se={},U=t=>{let{size:e,themeColor:o,icon:i,rotate:l,flip:c,...m}=t;return i?Dt("span",{...m,className:r(t.className,ft,S(ft,{size:e}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${l}`]:l,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):Dt(Oe,{})};U.states=Le;U.options=Ee;U.className=ft;U.defaultOptions=Se;var Kt=U;import{Fragment as Ke,jsx as rt}from"react/jsx-runtime";var Ct="k-svg-icon",Be=[],De={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[A.outline,A.solid,A.duotone]},ht={viewBox:"0 0 24 24",variant:A.outline},$=t=>{let{size:e,themeColor:o,rotate:i,flip:l,viewBox:c=ht.viewBox,variant:m=ht.variant,icon:d,...M}=t;if(!d)return rt(Ke,{});if(d==="none")return rt("span",{...M,className:r(t.className,Ct,S("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let y=typeof d=="object"&&d.name&&d.name,b=typeof d=="object"?m&&d.variants?.[m]||d.variants?.outline||d.content:void 0;return rt("span",{...M,className:r(t.className,Ct,S("k-icon",{size:e}),{[`k-svg-i-${y}`]:y,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true",children:rt("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:d?void 0:t.children})})};$.states=Be;$.options=De;$.className=Ct;$.defaultOptions=ht;var xt=$;import*as Nt from"@progress/kendo-svg-icons";var Rt="icon",_t="icons";import{useContext as _e}from"react";import{createContext as Re}from"react";var Ht=Re({iconsType:"svg"});import{Fragment as It,jsx as W}from"react/jsx-runtime";var at="k-icon",He=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ie=[],we={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[A.outline,A.solid,A.duotone]},nt={viewBox:"0 0 24 24",type:"svg",variant:A.outline},k=t=>{let{iconsType:e}=_e(Ht),{size:o,themeColor:i,icon:l,type:c=e||nt.type,rotate:m,flip:d,viewBox:M=nt.viewBox,variant:y=nt.variant,...b}=t;if(!l)return W(It,{});if((e||c)==="svg"){if(l==="none")return W(xt,{...b,className:r(t.className,at),icon:l,size:o,variant:y});let L=Nt[l]?l:He(`${l}-icon`);return Nt[L]?W(xt,{...b,className:r(t.className,at),icon:Nt[L],size:o,themeColor:i,rotate:m,flip:d,viewBox:M,variant:y}):W(It,{})}return W(Kt,{...b,className:r(t.className,at),icon:l,size:o,themeColor:i,rotate:m,flip:d})};k.states=Ie;k.options=we;k.defaultOptions=nt;k.className=at;k.moduleName=Rt;k.folderName=_t;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 bt="button",wt=bt;import{Fragment as zt,jsx as H,jsxs as Pt}from"react/jsx-runtime";var G="k-button",ze=["icon-button"],Pe=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],Fe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[B.undefined,B.solid,B.flat,B.outline,B.clear,B.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},vt={showArrow:!1,arrowIconName:"chevron-down"},n=t=>{let{as:e="button",size:o,rounded:i,fillMode:l,themeColor:c,showArrow:m=vt.showArrow,arrowIconName:d=vt.arrowIconName,variant:M,hover:y,focus:b,active:Q,selected:L,disabled:Z,togglable:lt,ariaDisabled:K,icon:x,iconSize:E,text:j,iconClassName:jt,className:te,...ee}=t,oe=x!=null,re=t.children!==void 0;return Pt(e,{className:r(te,G,gt(G,M),S(G,{size:o,rounded:i,fillMode:l,themeColor:c}),v(G,{hover:y,focus:b,active:Q,disabled:Z||K,selected:L}),{"k-icon-button":!j&&!re&&oe}),"aria-pressed":lt?L?"true":"false":void 0,...ee,"aria-disabled":K?"true":void 0,disabled:Z||void 0,children:[typeof x=="string"&&x&&H(k,{className:r(jt,"k-button-icon"),icon:x,size:E}),x&&typeof x!="string"&&H(zt,{children:x}),j?Pt(zt,{children:[j&&H("span",{className:"k-button-text",children:j}),t.children]}):t.children&&H("span",{className:"k-button-text",children:t.children}),m&&H("span",{className:"k-menu-button-arrow k-button-arrow",children:H(k,{icon:d})})]})};n.states=Pe;n.options=Fe;n.variants=ze;n.className=G;n.defaultOptions=vt;n.moduleName=bt;n.folderName=wt;n.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 Ue}from"react/jsx-runtime";var Ft=t=>Ue(n,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as $e}from"react/jsx-runtime";var Ut=t=>$e(n,{icon:"folder",children:"Button",...t});import{jsx as We}from"react/jsx-runtime";var $t=t=>We(n,{children:"Button",...t});import{jsx as At}from"react/jsx-runtime";var Ge=n.options,Ve=n.states,qe={...n.defaultOptions,variant:"text"},Je=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Xe=[],I=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return At(Ft,{...o,icon:"star"});case"icon-and-text":return At(Ut,{...o,icon:"star",children:"Button"});default:return At($t,{...o,children:"Button"})}};I.options=Ge;I.states=Ve;I.variants=Je;I.defaultOptions=qe;I.modifiers=Xe;I.className=n.className;import{Fragment as Qe,jsx as V,jsxs as Ze}from"react/jsx-runtime";var Ye="k-card-header",q=t=>{let{title:e,subtitle:o,details:i,...l}=t;return Ze("div",{...l,className:r(t.className,Ye),children:[e&&V(D,{children:e}),o&&V(et,{children:o}),V(Qe,{children:t.children}),i&&V("span",{className:"k-card-header-actions",children:V(n,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as to}from"react/jsx-runtime";var je="k-card-footer",kt=t=>{let{...e}=t;return to("div",{...e,className:r(t.className,je),children:t.children})};import{Fragment as oo,jsx as J,jsxs as ro}from"react/jsx-runtime";var eo="k-card-body",T=t=>{let{title:e,subtitle:o,details:i,...l}=t;return ro("div",{...l,className:r(t.className,eo),children:[e&&J(D,{children:e}),o&&J(et,{children:o}),J(oo,{children:t.children}),i&&J("span",{className:"k-card-header-actions",children:J(n,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as io}from"react/jsx-runtime";var Wt="k-card-deck",ao=[],no={},so={},w=t=>{let{...e}=t;return io("div",{...e,className:r(t.className,Wt),children:t.children})};w.states=ao;w.options=no;w.className=Wt;w.defaultOptions=so;w.moduleName=h;w.folderName=N;import{jsx as po}from"react/jsx-runtime";var Gt="k-card-deck-scrollwrap",lo=[],co={},mo={},z=t=>{let{...e}=t;return po("div",{...e,className:r(t.className,Gt),children:t.children})};z.states=lo;z.options=co;z.className=Gt;z.defaultOptions=mo;z.moduleName=h;z.folderName=N;var yt="action-buttons",Vt=yt;import{jsx as Co}from"react/jsx-runtime";var st="k-actions",uo=[],fo={},Mt={alignment:"start",orientation:"horizontal"},C=t=>{let{alignment:e=Mt.alignment,orientation:o=Mt.orientation,...i}=t;return Co("div",{...i,className:r(st,{[`${st}-${e}`]:e,[`${st}-${o}`]:o},t.className),children:t.children})};C.states=uo;C.options=fo;C.className=st;C.defaultOptions=Mt;C.moduleName=yt;C.folderName=Vt;import{Fragment as ho,jsx as P,jsxs as qt}from"react/jsx-runtime";var Jt=t=>P(u,{orientation:"vertical",children:qt(ho,{children:[P(q,{children:"Card Header"}),P(T,{children:P("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),qt(C,{className:"k-card-actions",children:[P(n,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),P(n,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...t});import{Fragment as xo,jsx as X,jsxs as Xt}from"react/jsx-runtime";var Yt=t=>X(u,{orientation:"horizontal",children:Xt(xo,{children:[X(T,{title:"Card Title",children:X("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),Xt(C,{orientation:"vertical",className:"k-card-actions",children:[X(n,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),X(n,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...t});import{jsx as Za,jsxs as ja}from"react/jsx-runtime";import{jsx as f,jsxs as Y}from"react/jsx-runtime";var No=u.options,bo=u.states,Qt={...u.defaultOptions,variant:"vertical"},vo=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Ao=[{name:"media",title:"Card with Media"},{name:"header",title:"Card with Header"},{name:"footer",title:"Card with Footer"}],F=t=>{let{variant:e,modifiers:o,...i}={...Qt,...t},l=!1,c=!1,m=!1;return Object.keys(o||{}).forEach(d=>{switch(d){case"media":{l=!!o?.[d];break}case"header":{c=!!o?.[d];break}case"footer":{m=!!o?.[d];break}}}),e==="horizontal"?Y(Yt,{style:{maxWidth:"420px"},...i,children:[l&&f(ut,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),Y("div",{children:[c&&f(q,{title:"Header Title",subtitle:"Header Subtitle"}),f(T,{title:"Title",subtitle:"Subtitle",children:f("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),m&&f(kt,{children:"Card Footer"})]}),(c||m)&&f("span",{className:"k-separator k-separator-vertical"}),Y(C,{orientation:"vertical",alignment:"stretched",className:"k-card-actions",children:[f(n,{fillMode:"flat",themeColor:"primary",children:"Button"}),f(n,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]}):Y(Jt,{style:{maxHeight:"450px",width:"300px"},...i,children:[c&&f(q,{title:"Header Title",subtitle:"Header Subtitle"}),l&&f(ut,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),f(T,{title:"Title",subtitle:"Subtitle",children:f("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),m&&f(kt,{children:"Card Footer"}),Y(C,{className:"k-card-actions",children:[f(n,{fillMode:"flat",themeColor:"primary",children:"Button"}),f(n,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};F.options=No;F.states=bo;F.variants=vo;F.defaultOptions=Qt;F.modifiers=Ao;F.className=u.className;import{jsx as Mo}from"react/jsx-runtime";var Zt="k-timeline-card-callout",ko=[],yo={},it=t=>{let{...e}=t;return Mo(tt,{className:r(t.className,Zt),...e})};it.states=ko;it.className=Zt;it.defaultOptions=yo;var _n=it;export{Zt as TIMELINECARDCALLOUT_CLASSNAME,it as TimelineCardCallout,_n as default};