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