@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 10.5 kB
JavaScript
var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((a,n)=>t[n]||t[a]&&a||null).filter(a=>a!==null).join(" "):t).filter(t=>!!t).join(" ");var M=(e,t)=>r({[`${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.fillMode}-${t.themeColor}`]:t.fillMode&&t.themeColor},{[`${e}-${t.themeColor}`]:t.themeColor&&t.fillMode===void 0},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full"}),N=(e,t)=>{let{valid:a,invalid:n,hover:d,focus:m,checked:i,active:C,selected:u,disabled:T,indeterminate:q,loading:J,empty:X,readonly:D,highlighted:E,...K}=t;return r({"k-valid":a,"k-invalid":n,"k-hover":d,"k-focus":m,"k-checked":i,"k-active":C,"k-selected":u,"k-disabled":T,"k-indeterminate":q&&!i,"k-loading":J,"k-empty":X,"k-readonly":D,"k-highlighted":E},Object.keys(K).reduce((R,b)=>(b.startsWith("k-")?R[b]=K[b]:R[`k-${b}`]=K[b],R),{}))};function de(e,t){if(!t)return{};let a=Array.isArray(t)?t:[t];return Object.fromEntries(a.map(n=>[`k-${n}`,!0]))}var s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},g={small:"small",medium:"medium",large:"large",full:"full"},v={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},l={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"},ce={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as Oe}from"react/jsx-runtime";var ye="k-card-callout",me=e=>{let{callout:t,...a}=e;return Oe("span",{...a,className:r(e.className,ye,{[`k-callout-${ce.calloutMap[t]||t}`]:t})})};var p="card",f=p;import{Fragment as Ke,jsx as pe,jsxs as Re}from"react/jsx-runtime";var F="k-card",ke=[l.hover,l.focus,l.selected,l.disabled],_e={themeColor:[o.primary,o.success,o.warning,o.error,o.info]},De={},x=e=>{let{orientation:t,themeColor:a,callout:n,hover:d,focus:m,selected:i,disabled:C,...u}=e;return Re("div",{...u,className:r(e.className,F,M(F,{themeColor:a}),N(F,{hover:d,focus:m,disabled:C,selected:i}),{[`k-card-${t}`]:t,"k-card-with-callout":n}),children:[n&&n!=="true"&&pe(me,{callout:n}),pe(Ke,{children:e.children})]})};x.states=ke;x.options=_e;x.className=F;x.defaultOptions=De;x.moduleName=p;x.folderName=f;import{Fragment as we,jsx as ue}from"react/jsx-runtime";var Y="k-card-list",Be=[],He={},Ie={},S=e=>{let{...t}=e;return ue("div",{...t,className:r(e.className,Y,N(Y,{})),children:ue(we,{children:e.children})})};S.states=Be;S.options=He;S.className=Y;S.defaultOptions=Ie;S.moduleName=p;S.folderName=f;import{jsx as $e}from"react/jsx-runtime";var fe="k-card-group",ze=[],Pe={},Ue={},y=e=>{let{...t}=e;return $e("div",{...t,className:r(e.className,fe),children:e.children})};y.states=ze;y.options=Pe;y.className=fe;y.defaultOptions=Ue;y.moduleName=p;y.folderName=f;import{jsx as Ve}from"react/jsx-runtime";var Q="k-card-wrap",Fe=[l.focus,l.selected],Ge={},We={},O=e=>{let{focus:t,selected:a,...n}=e;return Ve("div",{...n,className:r(e.className,Q,N(Q,{focus:t,selected:a})),children:e.children})};O.states=Fe;O.options=Ge;O.className=Q;O.defaultOptions=We;O.moduleName=p;O.folderName=f;import{jsx as Je}from"react/jsx-runtime";var Z="k-card-title",qe=[l.hover,l.focus],B=e=>{let{hover:t,focus:a,...n}=e;return Je("div",{...n,className:r(e.className,Z,N(Z,{hover:t,focus:a})),children:e.children})};B.states=qe;B.className=Z;import{jsx as Ye}from"react/jsx-runtime";var Xe="k-card-subtitle",j=e=>{let{...t}=e;return Ye("div",{...t,className:r(e.className,Xe),children:e.children})};import{Fragment as mo,jsx as co}from"react/jsx-runtime";import{Fragment as et,jsx as Ce}from"react/jsx-runtime";var ee="k-font-icon",Qe=[],Ze={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},je={},H=e=>{let{size:t,themeColor:a,icon:n,rotate:d,flip:m,...i}=e;return n?Ce("span",{...i,className:r(e.className,ee,M(ee,{size:t}),{[`k-i-${n}`]:n,[`k-color-${a}`]:a,[`k-rotate-${d}`]:d,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):Ce(et,{})};H.states=Qe;H.options=Ze;H.className=ee;H.defaultOptions=je;var Ne=H;import{Fragment as rt,jsx as G}from"react/jsx-runtime";var te="k-svg-icon",tt=[],ot={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},xe={viewBox:"0 0 24 24"},I=e=>{let{size:t,themeColor:a,rotate:n,flip:d,viewBox:m=xe.viewBox,icon:i,...C}=e;if(!i)return G(rt,{});i==="none"&&{...C,className:r(e.className,te,"k-none")};let u=typeof i=="object"&&i.name&&i.name;return G("span",{...C,className:r(e.className,te,M("k-icon",{size:t}),{[`k-svg-i-${u}`]:u,[`k-color-${a}`]:a,[`k-rotate-${n}`]:n,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),children:G("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:m,dangerouslySetInnerHTML:typeof i=="object"?{__html:i.content}:void 0,children:i?void 0:e.children})})};I.states=tt;I.options=ot;I.className=te;I.defaultOptions=xe;var oe=I;import*as re from"@progress/kendo-svg-icons";var he="icon",Ae="icons";import{Fragment as Me,jsx as w}from"react/jsx-runtime";var W="k-icon",nt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),at=[],st={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ne={viewBox:"0 0 24 24",type:"svg"},h=e=>{let{size:t,themeColor:a,icon:n,type:d=ne.type,rotate:m,flip:i,viewBox:C=ne.viewBox,...u}=e;if(!n)return w(Me,{});if(d==="svg"){if(n==="none")return w(oe,{...u,className:r(e.className,W),icon:n,size:t});let T=re[n]?n:nt(`${n}-icon`);return re[T]?w(oe,{...u,className:r(e.className,W),icon:re[T],size:t,themeColor:a,rotate:m,flip:i,viewBox:C}):w(Me,{})}return w(Ne,{...u,className:r(e.className,W),icon:n,size:t,themeColor:a,rotate:m,flip:i})};h.states=at;h.options=st;h.defaultOptions=ne;h.className=W;h.moduleName=he;h.folderName=Ae;var ae="button",be=ae;import{Fragment as ct,jsx as z,jsxs as ve}from"react/jsx-runtime";var P="k-button",it=["icon-button"],lt=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],dt={size:[s.small,s.medium,s.large],rounded:[g.small,g.medium,g.large,g.full],fillMode:[v.solid,v.flat,v.outline,v.clear,v.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},L={size:s.medium,rounded:g.medium,fillMode:v.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},c=e=>{let{size:t=L.size,rounded:a=L.rounded,fillMode:n=L.fillMode,themeColor:d=L.themeColor,showArrow:m=L.showArrow,arrowIconName:i=L.arrowIconName,variant:C,hover:u,focus:T,active:q,selected:J,disabled:X,icon:D,text:E,iconClassName:K,...R}=e,b=D!==void 0,Se=e.children!==void 0;return ve("button",{...R,className:r(e.className,P,de(P,C),M(P,{size:t,rounded:a,fillMode:n,themeColor:d}),N(P,{hover:u,focus:T,active:q,disabled:X,selected:J}),{"k-icon-button":!E&&!Se&&b}),children:[D&&z(h,{className:r(K,"k-button-icon"),icon:D}),E?ve(ct,{children:[E&&z("span",{className:"k-button-text",children:E}),e.children]}):e.children&&z("span",{className:"k-button-text",children:e.children}),m&&z("span",{className:"k-menu-button-arrow k-button-arrow",children:z(h,{icon:i})})]})};c.states=lt;c.options=dt;c.variants=it;c.className=P;c.defaultOptions=L;c.moduleName=ae;c.folderName=be;import{jsx as wo}from"react/jsx-runtime";import{jsx as $o}from"react/jsx-runtime";import{jsx as Vo}from"react/jsx-runtime";import{Fragment as ar,jsx as nr,jsxs as sr}from"react/jsx-runtime";import{jsx as cr}from"react/jsx-runtime";import{Fragment as pt,jsx as U,jsxs as ut}from"react/jsx-runtime";var mt="k-card-body",se=e=>{let{title:t,subtitle:a,details:n,...d}=e;return ut("div",{...d,className:r(e.className,mt),children:[t&&U(B,{children:t}),a&&U(j,{children:a}),U(pt,{children:e.children}),n&&U("span",{className:"k-card-header-actions",children:U(c,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as xt}from"react/jsx-runtime";var Le="k-card-deck",ft=[],Ct={},Nt={},k=e=>{let{...t}=e;return xt("div",{...t,className:r(e.className,Le),children:e.children})};k.states=ft;k.options=Ct;k.className=Le;k.defaultOptions=Nt;k.moduleName=p;k.folderName=f;import{jsx as bt}from"react/jsx-runtime";var Te="k-card-deck-scrollwrap",ht=[],At={},Mt={},_=e=>{let{...t}=e;return bt("div",{...t,className:r(e.className,Te),children:e.children})};_.states=ht;_.options=At;_.className=Te;_.defaultOptions=Mt;_.moduleName=p;_.folderName=f;var ie="action-buttons",Ee=ie;import{jsx as Tt}from"react/jsx-runtime";var V="k-actions",vt=[],Lt={},le={alignment:"start",orientation:"horizontal"},A=e=>{let{alignment:t=le.alignment,orientation:a=le.orientation,...n}=e;return Tt("div",{...n,className:r(V,{[`${V}-${t}`]:t,[`${V}-${a}`]:a},e.className),children:e.children})};A.states=vt;A.options=Lt;A.className=V;A.defaultOptions=le;A.moduleName=ie;A.folderName=Ee;import{Fragment as Pr,jsx as wr,jsxs as zr}from"react/jsx-runtime";import{Fragment as Et,jsx as $,jsxs as ge}from"react/jsx-runtime";var ln=e=>$(x,{orientation:"horizontal",children:ge(Et,{children:[$(se,{title:"Card Title",children:$("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),ge(A,{orientation:"vertical",className:"k-card-actions",children:[$(c,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),$(c,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});export{ln as CardHorizontal};