@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 16.5 kB
JavaScript
var o=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?o(...t):typeof t=="object"?Object.keys(t).map((n,a)=>t[a]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var b=(e,t)=>o({[`${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"}),E=(e,t)=>{let{valid:n,invalid:a,hover:s,focus:u,checked:l,active:T,selected:f,disabled:R,indeterminate:Me,loading:Le,empty:Ae,readonly:X,highlighted:y,...q}=t;return o({"k-valid":n,"k-invalid":a,"k-hover":s,"k-focus":u,"k-checked":l,"k-active":T,"k-selected":f,"k-disabled":R,"k-indeterminate":Me&&!l,"k-loading":Le,"k-empty":Ae,"k-readonly":X,"k-highlighted":y},Object.keys(q).reduce((Y,I)=>(I.startsWith("k-")?Y[I]=q[I]:Y[`k-${I}`]=q[I],Y),{}))};function we(e,t){if(!t)return{};let n=Array.isArray(t)?t:[t];return Object.fromEntries(n.map(a=>[`k-${a}`,!0]))}var i={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},H={small:"small",medium:"medium",large:"large",full:"full"},S={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},r={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},m={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"},Pe={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var c="timeline",d=c;import{Fragment as At,jsx as Fe}from"react/jsx-runtime";var Z="k-timeline",Mt=[],Lt={},ze={orientation:"vertical"},M=e=>{let{orientation:t=ze.orientation,collapsibleEvents:n,alternatingMode:a,...s}=e;return Fe("div",{...s,className:o(e.className,Z,{[`${Z}-${t}`]:t,[`${Z}-alternating`]:a,[`${Z}-collapsible`]:n}),children:Fe(At,{children:e.children})})};M.states=Mt;M.options=Lt;M.className=Z;M.defaultOptions=ze;M.moduleName=c;M.folderName=d;import{jsx as ht}from"react/jsx-runtime";var xt="k-card-callout",ce=e=>{let{callout:t,...n}=e;return ht("span",{...n,className:o(e.className,xt,{[`k-callout-${Pe.calloutMap[t]||t}`]:t})})};var N="card",C=N;import{Fragment as Ot,jsx as Ue,jsxs as It}from"react/jsx-runtime";var de="k-card",vt=[m.hover,m.focus,m.selected,m.disabled],bt={themeColor:[r.primary,r.success,r.warning,r.error,r.info]},kt={},h=e=>{let{orientation:t,themeColor:n,callout:a,hover:s,focus:u,selected:l,disabled:T,...f}=e;return It("div",{...f,className:o(e.className,de,b(de,{themeColor:n}),E(de,{hover:s,focus:u,disabled:T,selected:l}),{[`k-card-${t}`]:t,"k-card-with-callout":a}),children:[a&&a!=="true"&&Ue(ce,{callout:a}),Ue(Ot,{children:e.children})]})};h.states=vt;h.options=bt;h.className=de;h.defaultOptions=kt;h.moduleName=N;h.folderName=C;import{Fragment as Kt,jsx as We}from"react/jsx-runtime";var xe="k-card-list",St=[],_t={},gt={},B=e=>{let{...t}=e;return We("div",{...t,className:o(e.className,xe,E(xe,{})),children:We(Kt,{children:e.children})})};B.states=St;B.options=_t;B.className=xe;B.defaultOptions=gt;B.moduleName=N;B.folderName=C;import{jsx as Ht}from"react/jsx-runtime";var $e="k-card-group",Dt=[],Rt={},yt={},w=e=>{let{...t}=e;return Ht("div",{...t,className:o(e.className,$e),children:e.children})};w.states=Dt;w.options=Rt;w.className=$e;w.defaultOptions=yt;w.moduleName=N;w.folderName=C;import{jsx as Ft}from"react/jsx-runtime";var he="k-card-wrap",Bt=[m.focus,m.selected],wt={},Pt={},P=e=>{let{focus:t,selected:n,...a}=e;return Ft("div",{...a,className:o(e.className,he,E(he,{focus:t,selected:n})),children:e.children})};P.states=Bt;P.options=wt;P.className=he;P.defaultOptions=Pt;P.moduleName=N;P.folderName=C;import{jsx as Ut}from"react/jsx-runtime";var ve="k-card-title",zt=[m.hover,m.focus],F=e=>{let{hover:t,focus:n,...a}=e;return Ut("div",{...a,className:o(e.className,ve,E(ve,{hover:t,focus:n})),children:e.children})};F.states=zt;F.className=ve;import{jsx as $t}from"react/jsx-runtime";var Wt="k-card-subtitle",k=e=>{let{...t}=e;return $t("div",{...t,className:o(e.className,Wt),children:e.children})};import{Fragment as Pn,jsx as wn}from"react/jsx-runtime";import{Fragment as Xt,jsx as Ve}from"react/jsx-runtime";var be="k-font-icon",Vt=[],Gt={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.light,r.dark]},Jt={},Q=e=>{let{size:t,themeColor:n,icon:a,rotate:s,flip:u,...l}=e;return a?Ve("span",{...l,className:o(e.className,be,b(be,{size:t}),{[`k-i-${a}`]:a,[`k-color-${n}`]:n,[`k-rotate-${s}`]:s,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"})}):Ve(Xt,{})};Q.states=Vt;Q.options=Gt;Q.className=be;Q.defaultOptions=Jt;var Ge=Q;import{Fragment as Zt,jsx as pe}from"react/jsx-runtime";var ke="k-svg-icon",qt=[],Yt={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.light,r.dark]},Je={viewBox:"0 0 24 24"},j=e=>{let{size:t,themeColor:n,rotate:a,flip:s,viewBox:u=Je.viewBox,icon:l,...T}=e;if(!l)return pe(Zt,{});l==="none"&&{...T,className:o(e.className,ke,"k-none")};let f=typeof l=="object"&&l.name&&l.name;return pe("span",{...T,className:o(e.className,ke,b("k-icon",{size:t}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${a}`]:a,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),children:pe("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:u,dangerouslySetInnerHTML:typeof l=="object"?{__html:l.content}:void 0,children:l?void 0:e.children})})};j.states=qt;j.options=Yt;j.className=ke;j.defaultOptions=Je;var Oe=j;import*as Ie from"@progress/kendo-svg-icons";var Xe="icon",qe="icons";import{Fragment as Ye,jsx as ee}from"react/jsx-runtime";var ue="k-icon",Qt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),jt=[],eo={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.light,r.dark]},Se={viewBox:"0 0 24 24",type:"svg"},L=e=>{let{size:t,themeColor:n,icon:a,type:s=Se.type,rotate:u,flip:l,viewBox:T=Se.viewBox,...f}=e;if(!a)return ee(Ye,{});if(s==="svg"){if(a==="none")return ee(Oe,{...f,className:o(e.className,ue),icon:a,size:t});let R=Ie[a]?a:Qt(`${a}-icon`);return Ie[R]?ee(Oe,{...f,className:o(e.className,ue),icon:Ie[R],size:t,themeColor:n,rotate:u,flip:l,viewBox:T}):ee(Ye,{})}return ee(Ge,{...f,className:o(e.className,ue),icon:a,size:t,themeColor:n,rotate:u,flip:l})};L.states=jt;L.options=eo;L.defaultOptions=Se;L.className=ue;L.moduleName=Xe;L.folderName=qe;var _e="button",Ze=_e;import{Fragment as ro,jsx as te,jsxs as Qe}from"react/jsx-runtime";var oe="k-button",to=["icon-button"],oo=[m.hover,m.focus,m.active,m.selected,m.disabled,m.generating],no={size:[i.small,i.medium,i.large],rounded:[H.small,H.medium,H.large,H.full],fillMode:[S.solid,S.flat,S.outline,S.clear,S.link],themeColor:[r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.light,r.dark,r.inverse]},_={size:i.medium,rounded:H.medium,fillMode:S.solid,themeColor:r.base,showArrow:!1,arrowIconName:"caret-alt-down"},p=e=>{let{size:t=_.size,rounded:n=_.rounded,fillMode:a=_.fillMode,themeColor:s=_.themeColor,showArrow:u=_.showArrow,arrowIconName:l=_.arrowIconName,variant:T,hover:f,focus:R,active:Me,selected:Le,disabled:Ae,icon:X,text:y,iconClassName:q,...Y}=e,I=X!==void 0,Ct=e.children!==void 0;return Qe("button",{...Y,className:o(e.className,oe,we(oe,T),b(oe,{size:t,rounded:n,fillMode:a,themeColor:s}),E(oe,{hover:f,focus:R,active:Me,disabled:Ae,selected:Le}),{"k-icon-button":!y&&!Ct&&I}),children:[X&&te(L,{className:o(q,"k-button-icon"),icon:X}),y?Qe(ro,{children:[y&&te("span",{className:"k-button-text",children:y}),e.children]}):e.children&&te("span",{className:"k-button-text",children:e.children}),u&&te("span",{className:"k-menu-button-arrow k-button-arrow",children:te(L,{icon:l})})]})};p.states=oo;p.options=no;p.variants=to;p.className=oe;p.defaultOptions=_;p.moduleName=_e;p.folderName=Ze;import{jsx as pr}from"react/jsx-runtime";import{jsx as Tr}from"react/jsx-runtime";import{jsx as Lr}from"react/jsx-runtime";import{Fragment as io,jsx as ne,jsxs as so}from"react/jsx-runtime";var ao="k-card-header",re=e=>{let{title:t,subtitle:n,details:a,...s}=e;return so("div",{...s,className:o(e.className,ao),children:[t&&ne(F,{children:t}),n&&ne(k,{children:n}),ne(io,{children:e.children}),a&&ne("span",{className:"k-card-header-actions",children:ne(p,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as yr}from"react/jsx-runtime";import{Fragment as mo,jsx as ae,jsxs as co}from"react/jsx-runtime";var lo="k-card-body",z=e=>{let{title:t,subtitle:n,details:a,...s}=e;return co("div",{...s,className:o(e.className,lo),children:[t&&ae(F,{children:t}),n&&ae(k,{children:n}),ae(mo,{children:e.children}),a&&ae("span",{className:"k-card-header-actions",children:ae(p,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as No}from"react/jsx-runtime";var je="k-card-deck",po=[],uo={},fo={},U=e=>{let{...t}=e;return No("div",{...t,className:o(e.className,je),children:e.children})};U.states=po;U.options=uo;U.className=je;U.defaultOptions=fo;U.moduleName=N;U.folderName=C;import{jsx as Mo}from"react/jsx-runtime";var et="k-card-deck-scrollwrap",To=[],Eo={},Co={},W=e=>{let{...t}=e;return Mo("div",{...t,className:o(e.className,et),children:e.children})};W.states=To;W.options=Eo;W.className=et;W.defaultOptions=Co;W.moduleName=N;W.folderName=C;var ge="action-buttons",tt=ge;import{jsx as xo}from"react/jsx-runtime";var fe="k-actions",Lo=[],Ao={},Ke={alignment:"start",orientation:"horizontal"},O=e=>{let{alignment:t=Ke.alignment,orientation:n=Ke.orientation,...a}=e;return xo("div",{...a,className:o(fe,{[`${fe}-${t}`]:t,[`${fe}-${n}`]:n},e.className),children:e.children})};O.states=Lo;O.options=Ao;O.className=fe;O.defaultOptions=Ke;O.moduleName=ge;O.folderName=tt;import{Fragment as ca,jsx as la,jsxs as ma}from"react/jsx-runtime";import{Fragment as Ca,jsx as Ta,jsxs as Ea}from"react/jsx-runtime";import{jsx as v,jsxs as De}from"react/jsx-runtime";var ot="k-timeline-event",ho=[],vo={},$={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},A=e=>{let{date:t,content:n=$.content,collapsed:a=$.collapsed,reverse:s=$.reverse,title:u=$.title,subtitle:l=$.subtitle,showCollapseButton:T,...f}=e;return De("li",{...f,className:o(e.className,ot,{"k-reverse":s}),children:[t&&v("div",{className:"k-timeline-date-wrap",children:v("span",{className:"k-timeline-date",children:t})}),v(V,{}),n&&v("div",{className:o("k-timeline-card",{"k-collapsed":a}),children:v(G,{...s?{callout:"right"}:{callout:"left"},children:De("div",{className:"k-card-inner",children:[De(re,{children:[v(g,{collapsible:T,children:u}),v(k,{children:l})]}),v(z,{children:v("div",{className:"k-card-description",children:n})})]})})}),e.children]})};A.states=ho;A.options=vo;A.className=ot;A.defaultOptions=$;A.moduleName=c;A.folderName=d;import{jsx as J,jsxs as Re}from"react/jsx-runtime";var nt="k-timeline-event",bo=[],ko={},Ne={title:"Event title",subtitle:"Event subtitle",content:"Event content"},K=e=>{let{content:t=Ne.content,title:n=Ne.title,subtitle:a=Ne.subtitle,...s}=e;return Re("li",{...s,className:o(e.className,nt),children:[t&&J("div",{className:o("k-timeline-card"),children:J(G,{orientation:"vertical",callout:"top",children:Re("div",{className:"k-card-inner",children:[Re(re,{children:[J(g,{children:n}),J(k,{children:a})]}),J(z,{children:J("div",{className:"k-card-description",children:t})})]})})}),e.children]})};K.states=bo;K.options=ko;K.className=nt;K.defaultOptions=Ne;K.moduleName=c;K.folderName=d;import{jsx as rt}from"react/jsx-runtime";var at="k-timeline-events-list",Te=e=>{let{...t}=e;return rt("div",{...t,className:o(e.className,at),children:rt("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};Te.className=at;Te.moduleName=c;Te.folderName=d;import{jsx as So,jsxs as _o}from"react/jsx-runtime";var it="k-timeline-flag-wrap",Oo=[m.focus,m.selected],Io={},st={year:"2020"},x=e=>{let{year:t=st.year,...n}=e;return _o("li",{...n,className:o(e.className,it),children:[So("span",{className:"k-timeline-flag",children:t}),e.children]})};x.states=Oo;x.options=Io;x.className=it;x.defaultOptions=st;x.moduleName=c;x.folderName=d;import{jsx as go}from"react/jsx-runtime";var lt="k-timeline-circle",V=e=>{let{...t}=e;return go("span",{...t,className:o(e.className,lt)})};V.className=lt;V.moduleName=c;V.folderName=d;import{jsx as Ko}from"react/jsx-runtime";var mt="k-timeline-flag",Ee=e=>{let{content:t,...n}=e;return Ko("span",{...n,className:o(e.className,mt),children:t})};Ee.className=mt;Ee.moduleName=c;Ee.folderName=d;import{jsx as yo,jsxs as Ho}from"react/jsx-runtime";var Do=[],Ro={},G=e=>{let{callout:t,children:n,...a}=e;return Ho(h,{className:o(e.className),orientation:"vertical",callout:"true",...a,children:[t&&yo(ie,{callout:t}),n]})};G.states=Do;G.defaultOptions=Ro;import{jsx as ye,jsxs as Po}from"react/jsx-runtime";var ct="k-card-title",Bo=[],wo={},g=e=>{let{collapsible:t,children:n,...a}=e;return Po("div",{className:o(e.className,ct),...a,children:[ye("span",{className:"k-event-title",children:n}),t&&ye("span",{className:"k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button",children:ye(L,{icon:"chevron-right",className:"k-button-icon"})})]})};g.states=Bo;g.className=ct;g.defaultOptions=wo;import{jsx as Uo}from"react/jsx-runtime";var dt="k-timeline-card-callout",Fo=[],zo={},ie=e=>{let{...t}=e;return Uo(ce,{className:o(e.className,dt),...t})};ie.states=Fo;ie.className=dt;ie.defaultOptions=zo;import{jsx as pt}from"react/jsx-runtime";var ut="k-timeline-date-wrap",Wo=[],$o={},ft={date:"May 25, 2008"},D=e=>{let{date:t=ft.date,...n}=e;return pt("div",{...n,className:o(e.className,ut),children:pt("span",{className:"k-timeline-date",children:t})})};D.states=Wo;D.options=$o;D.className=ut;D.defaultOptions=ft;D.moduleName=c;D.folderName=d;import{jsx as He,jsxs as Vo}from"react/jsx-runtime";var Nt="k-timeline-track-wrap",Ce=e=>{let{...t}=e;return Vo("div",{...t,className:o(e.className,Nt),children:[He(p,{className:"k-timeline-arrow k-timeline-arrow-left",rounded:"full",icon:"caret-alt-left",disabled:!0}),He(p,{className:"k-timeline-arrow k-timeline-arrow-right",rounded:"full",icon:"caret-alt-right"}),He(se,{children:e.children})]})};Ce.className=Nt;Ce.moduleName=c;Ce.folderName=d;import{jsx as Tt}from"react/jsx-runtime";var Et="k-timeline-track",se=e=>{let{...t}=e;return Tt("div",{...t,className:o(e.className,Et),children:Tt("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};se.className=Et;se.moduleName=c;se.folderName=d;import{jsxs as Jo}from"react/jsx-runtime";var Be="k-timeline-track-item",Go=[m.focus],le=e=>{let{content:t,focus:n,...a}=e;return Jo("li",{...a,className:o(e.className,Be,E(Be,{focus:n})),children:[t,e.children]})};le.states=Go;le.className=Be;le.moduleName=c;le.folderName=d;import{jsx as Vi,jsxs as Gi}from"react/jsx-runtime";import{jsx as Yi,jsxs as Zi}from"react/jsx-runtime";import{Fragment as ns,jsx as ts,jsxs as os}from"react/jsx-runtime";import{jsx as me,jsxs as Xo}from"react/jsx-runtime";var bs=e=>me(M,{collapsibleEvents:!0,children:Xo("ul",{children:[me(x,{year:"2010"}),me(A,{date:"May 11, 2010",collapsed:!1,showCollapseButton:!0}),me(x,{year:"2011"}),me(A,{date:"Oct 11, 2011",subtitle:"Collapsed",collapsed:!0,showCollapseButton:!0})]}),...e});export{bs as TimelineNormalCollapsible};