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