UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 16.4 kB
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"}),C=(e,t)=>{let{valid:n,invalid:a,hover:s,focus:u,checked:l,active:E,selected:f,disabled:y,indeterminate:Me,loading:Le,empty:Ae,readonly:q,highlighted:H,...Y}=t;return o({"k-valid":n,"k-invalid":a,"k-hover":s,"k-focus":u,"k-checked":l,"k-active":E,"k-selected":f,"k-disabled":y,"k-indeterminate":Me&&!l,"k-loading":Le,"k-empty":Ae,"k-readonly":q,"k-highlighted":H},Object.keys(Y).reduce((Z,I)=>(I.startsWith("k-")?Z[I]=Y[I]:Z[`k-${I}`]=Y[I],Z),{}))};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"},B={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 Q="k-timeline",Mt=[],Lt={},ze={orientation:"vertical"},L=e=>{let{orientation:t=ze.orientation,collapsibleEvents:n,alternatingMode:a,...s}=e;return Fe("div",{...s,className:o(e.className,Q,{[`${Q}-${t}`]:t,[`${Q}-alternating`]:a,[`${Q}-collapsible`]:n}),children:Fe(At,{children:e.children})})};L.states=Mt;L.options=Lt;L.className=Q;L.defaultOptions=ze;L.moduleName=c;L.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",M=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:E,...f}=e;return It("div",{...f,className:o(e.className,de,b(de,{themeColor:n}),C(de,{hover:s,focus:u,disabled:E,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=M;import{Fragment as Kt,jsx as We}from"react/jsx-runtime";var xe="k-card-list",St=[],_t={},gt={},w=e=>{let{...t}=e;return We("div",{...t,className:o(e.className,xe,C(xe,{})),children:We(Kt,{children:e.children})})};w.states=St;w.options=_t;w.className=xe;w.defaultOptions=gt;w.moduleName=N;w.folderName=M;import{jsx as Ht}from"react/jsx-runtime";var $e="k-card-group",Dt=[],Rt={},yt={},P=e=>{let{...t}=e;return Ht("div",{...t,className:o(e.className,$e),children:e.children})};P.states=Dt;P.options=Rt;P.className=$e;P.defaultOptions=yt;P.moduleName=N;P.folderName=M;import{jsx as Ft}from"react/jsx-runtime";var he="k-card-wrap",Bt=[m.focus,m.selected],wt={},Pt={},F=e=>{let{focus:t,selected:n,...a}=e;return Ft("div",{...a,className:o(e.className,he,C(he,{focus:t,selected:n})),children:e.children})};F.states=Bt;F.options=wt;F.className=he;F.defaultOptions=Pt;F.moduleName=N;F.folderName=M;import{jsx as Ut}from"react/jsx-runtime";var ve="k-card-title",zt=[m.hover,m.focus],z=e=>{let{hover:t,focus:n,...a}=e;return Ut("div",{...a,className:o(e.className,ve,C(ve,{hover:t,focus:n})),children:e.children})};z.states=zt;z.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={},j=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,{})};j.states=Vt;j.options=Gt;j.className=be;j.defaultOptions=Jt;var Ge=j;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"},ee=e=>{let{size:t,themeColor:n,rotate:a,flip:s,viewBox:u=Je.viewBox,icon:l,...E}=e;if(!l)return pe(Zt,{});l==="none"&&{...E,className:o(e.className,ke,"k-none")};let f=typeof l=="object"&&l.name&&l.name;return pe("span",{...E,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})})};ee.states=qt;ee.options=Yt;ee.className=ke;ee.defaultOptions=Je;var Oe=ee;import*as Ie from"@progress/kendo-svg-icons";var Xe="icon",qe="icons";import{Fragment as Ye,jsx as te}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"},A=e=>{let{size:t,themeColor:n,icon:a,type:s=Se.type,rotate:u,flip:l,viewBox:E=Se.viewBox,...f}=e;if(!a)return te(Ye,{});if(s==="svg"){if(a==="none")return te(Oe,{...f,className:o(e.className,ue),icon:a,size:t});let y=Ie[a]?a:Qt(`${a}-icon`);return Ie[y]?te(Oe,{...f,className:o(e.className,ue),icon:Ie[y],size:t,themeColor:n,rotate:u,flip:l,viewBox:E}):te(Ye,{})}return te(Ge,{...f,className:o(e.className,ue),icon:a,size:t,themeColor:n,rotate:u,flip:l})};A.states=jt;A.options=eo;A.defaultOptions=Se;A.className=ue;A.moduleName=Xe;A.folderName=qe;var _e="button",Ze=_e;import{Fragment as ro,jsx as oe,jsxs as Qe}from"react/jsx-runtime";var ne="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:[B.small,B.medium,B.large,B.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:B.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:E,hover:f,focus:y,active:Me,selected:Le,disabled:Ae,icon:q,text:H,iconClassName:Y,...Z}=e,I=q!==void 0,Ct=e.children!==void 0;return Qe("button",{...Z,className:o(e.className,ne,we(ne,E),b(ne,{size:t,rounded:n,fillMode:a,themeColor:s}),C(ne,{hover:f,focus:y,active:Me,disabled:Ae,selected:Le}),{"k-icon-button":!H&&!Ct&&I}),children:[q&&oe(A,{className:o(Y,"k-button-icon"),icon:q}),H?Qe(ro,{children:[H&&oe("span",{className:"k-button-text",children:H}),e.children]}):e.children&&oe("span",{className:"k-button-text",children:e.children}),u&&oe("span",{className:"k-menu-button-arrow k-button-arrow",children:oe(A,{icon:l})})]})};p.states=oo;p.options=no;p.variants=to;p.className=ne;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 re,jsxs as so}from"react/jsx-runtime";var ao="k-card-header",ae=e=>{let{title:t,subtitle:n,details:a,...s}=e;return so("div",{...s,className:o(e.className,ao),children:[t&&re(z,{children:t}),n&&re(k,{children:n}),re(io,{children:e.children}),a&&re("span",{className:"k-card-header-actions",children:re(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 ie,jsxs as co}from"react/jsx-runtime";var lo="k-card-body",U=e=>{let{title:t,subtitle:n,details:a,...s}=e;return co("div",{...s,className:o(e.className,lo),children:[t&&ie(z,{children:t}),n&&ie(k,{children:n}),ie(mo,{children:e.children}),a&&ie("span",{className:"k-card-header-actions",children:ie(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={},W=e=>{let{...t}=e;return No("div",{...t,className:o(e.className,je),children:e.children})};W.states=po;W.options=uo;W.className=je;W.defaultOptions=fo;W.moduleName=N;W.folderName=M;import{jsx as Mo}from"react/jsx-runtime";var et="k-card-deck-scrollwrap",To=[],Eo={},Co={},$=e=>{let{...t}=e;return Mo("div",{...t,className:o(e.className,et),children:e.children})};$.states=To;$.options=Eo;$.className=et;$.defaultOptions=Co;$.moduleName=N;$.folderName=M;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={},V={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},T=e=>{let{date:t,content:n=V.content,collapsed:a=V.collapsed,reverse:s=V.reverse,title:u=V.title,subtitle:l=V.subtitle,showCollapseButton:E,...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(G,{}),n&&v("div",{className:o("k-timeline-card",{"k-collapsed":a}),children:v(J,{...s?{callout:"right"}:{callout:"left"},children:De("div",{className:"k-card-inner",children:[De(ae,{children:[v(g,{collapsible:E,children:u}),v(k,{children:l})]}),v(U,{children:v("div",{className:"k-card-description",children:n})})]})})}),e.children]})};T.states=ho;T.options=vo;T.className=ot;T.defaultOptions=V;T.moduleName=c;T.folderName=d;import{jsx as X,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&&X("div",{className:o("k-timeline-card"),children:X(J,{orientation:"vertical",callout:"top",children:Re("div",{className:"k-card-inner",children:[Re(ae,{children:[X(g,{children:n}),X(k,{children:a})]}),X(U,{children:X("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",G=e=>{let{...t}=e;return go("span",{...t,className:o(e.className,lt)})};G.className=lt;G.moduleName=c;G.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={},J=e=>{let{callout:t,children:n,...a}=e;return Ho(h,{className:o(e.className),orientation:"vertical",callout:"true",...a,children:[t&&yo(se,{callout:t}),n]})};J.states=Do;J.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(A,{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={},se=e=>{let{...t}=e;return Uo(ce,{className:o(e.className,dt),...t})};se.states=Fo;se.className=dt;se.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(le,{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",le=e=>{let{...t}=e;return Tt("div",{...t,className:o(e.className,Et),children:Tt("ul",{className:"k-timeline-scrollable-wrap",children:e.children})})};le.className=Et;le.moduleName=c;le.folderName=d;import{jsxs as Jo}from"react/jsx-runtime";var Be="k-timeline-track-item",Go=[m.focus],me=e=>{let{content:t,focus:n,...a}=e;return Jo("li",{...a,className:o(e.className,Be,C(Be,{focus:n})),children:[t,e.children]})};me.states=Go;me.className=Be;me.moduleName=c;me.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 R,jsxs as Xo}from"react/jsx-runtime";var bs=e=>R(L,{alternatingMode:!0,children:Xo("ul",{children:[R(x,{year:"2010"}),R(T,{date:"Apr 11, 2010",reverse:!0}),R(T,{date:"May 11, 2010"}),R(x,{year:"2011"}),R(T,{date:"Oct 11, 2011",reverse:!0}),R(T,{date:"Dec 11, 2011"})]}),...e});export{bs as TimelineNormalAlternating};