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