@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 13.1 kB
JavaScript
var n=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?n(...t):typeof t=="object"?Object.keys(t).map((i,a)=>t[a]||t[i]&&i||null).filter(i=>i!==null).join(" "):t).filter(t=>!!t).join(" ");var h=(e,t)=>n({[`${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"}),k=(e,t)=>n({"k-valid":t.valid,"k-invalid":t.invalid,"k-hover":t.hover,"k-focus":t.focus,"k-checked":t.checked,"k-active":t.active,"k-selected":t.selected,"k-disabled":t.disabled,"k-indeterminate":t.indeterminate&&!t.checked,"k-loading":t.loading,"k-empty":t.empty,"k-readonly":t.readonly,"k-highlighted":t.highlighted});var o={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},g={small:"small",medium:"medium",large:"large",full:"full"},M={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},s={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"};import{Fragment as Gt,jsx as ut}from"react/jsx-runtime";var tt="k-icon k-font-icon",Tt=[],Kt={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},wt={},$=e=>{let{size:t,themeColor:i,icon:a,rotate:c,flip:m,...r}=e;return a?ut("span",{...r,className:n(e.className,tt,h(tt,{size:t}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${c}`]:c,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):ut(Gt,{})};$.states=Tt;$.options=Kt;$.className=tt;$.defaultOptions=wt;var ft=$;import{Fragment as Ht,jsx as J}from"react/jsx-runtime";var et="k-icon k-svg-icon",Et=[],Bt={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},Lt={viewBox:"0 0 24 24"},P=e=>{let{size:t,themeColor:i,rotate:a,flip:c,viewBox:m=Lt.viewBox,icon:r,...f}=e;if(!r)return J(Ht,{});r==="none"&&{...f,className:n(e.className,et,"k-none")};let d=typeof r=="object"&&r.name&&r.name;return J("span",{...f,className:n(e.className,et,h("k-icon",{size:t}),{[`k-svg-i-${d}`]:d,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),children:J("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:m,dangerouslySetInnerHTML:typeof r=="object"?{__html:r.content}:void 0,children:r?void 0:e.children})})};P.states=Et;P.options=Bt;P.className=et;P.defaultOptions=Lt;var ot=P;import*as xt from"@progress/kendo-svg-icons";import{Fragment as ht,jsx as D}from"react/jsx-runtime";var Rt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),$t=[],Pt={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},st={viewBox:"0 0 24 24",type:"svg"},I=e=>{let{size:t,themeColor:i,icon:a,type:c=st.type,rotate:m,flip:r,viewBox:f=st.viewBox,...d}=e;if(!a)return D(ht,{});if(c==="svg"){if(a==="none")return D(ot,{...d,icon:a,size:t});let u=Rt(`${a}-icon`);return xt[u]?D(ot,{...d,icon:xt[u],size:t,themeColor:i,rotate:m,flip:r,viewBox:f}):D(ht,{})}return D(ft,{...d,icon:a,size:t,themeColor:i,rotate:m,flip:r})};I.states=$t;I.options=Pt;I.defaultOptions=st;import{Fragment as Vt,jsx as _,jsxs as bt}from"react/jsx-runtime";var F="k-button",Dt=[l.hover,l.focus,l.active,l.selected,l.disabled],_t={size:[o.small,o.medium,o.large],rounded:[g.small,g.medium,g.large,g.full],fillMode:[M.solid,M.flat,M.outline,M.clear,M.link],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark,s.inverse]},A={size:o.medium,rounded:g.medium,fillMode:M.solid,themeColor:s.base,showArrow:!1,arrowIconName:"caret-alt-down"},C=e=>{let{size:t=A.size,rounded:i=A.rounded,fillMode:a=A.fillMode,themeColor:c=A.themeColor,showArrow:m=A.showArrow,arrowIconName:r=A.arrowIconName,hover:f,focus:d,active:u,selected:y,disabled:b,icon:L,text:x,iconClassName:j,...R}=e,z=L!==void 0,X=e.children!==void 0;return bt("button",{...R,className:n(e.className,F,h(F,{size:t,rounded:i,fillMode:a,themeColor:c}),k(F,{hover:f,focus:d,active:u,disabled:b,selected:y}),{"k-icon-button":!x&&!X&&z}),children:[L&&_(I,{className:n(j,"k-button-icon"),icon:L}),x?bt(Vt,{children:[x&&_("span",{className:"k-button-text",children:x}),e.children]}):e.children&&_("span",{className:"k-button-text",children:e.children}),m&&_("span",{className:"k-menu-button-arrow k-button-arrow",children:_(I,{icon:r})})]})};C.states=Dt;C.options=_t;C.className=F;C.defaultOptions=A;import{jsx as oo}from"react/jsx-runtime";import{jsx as ro}from"react/jsx-runtime";import{jsx as co}from"react/jsx-runtime";import{jsx as Jt}from"react/jsx-runtime";var Xt="k-no-data",V=e=>Jt("span",{className:n(Xt,e.className),children:e.children});import{jsx as w,jsxs as kt}from"react/jsx-runtime";var it="k-list",Ft=[],Ut={size:[o.small,o.medium,o.large]},gt={size:o.medium},v=e=>{let{size:t=gt.size,virtualization:i,children:a,optionLabel:c,customValue:m,screenReaders:r,...f}=e,d,u,y,b,L=[];return a?a.map((x,j)=>{x.type===N?(x.props.root===!0?(d=x.props.label,x.props.children.map((R,z)=>{L.push(w(p,{...R.props},`optChild-${z}-${new Date().getTime()}`))})):x.props.children.forEach((R,z)=>{let X="";z===0&&(X=x.props.label),L.push(w(p,{className:z===0?"k-first":"",...R.props,groupLabel:X},`groupLabel-${z}-${new Date().getTime()}`))}),u=w(N,{label:d,virtualization:i,children:L})):x.type===p&&(L.push(w(p,{...x.props},`${x.type}-${j}`)),y=w(G,{virtualization:i,children:L}),r&&(b=kt(V,{className:"k-sr-only",children:[L.length," items found."]})))}):b=w(V,{children:"No data found."}),kt("div",{...f,className:n(e.className,it,h(it,{size:t}),{"k-virtual-list":i}),children:[c,m,u,y,b]})};v.states=Ft;v.options=Ut;v.className=it;v.defaultOptions=gt;import{jsx as O,jsxs as Qt}from"react/jsx-runtime";var nt="k-list",Wt=[],qt={size:[o.small,o.medium,o.large]},yt={size:o.medium},T=e=>{let{size:t=yt.size,virtualization:i,children:a,...c}=e,m,r,f,d=[];return a?a.map((u,y)=>{u.type===N?(u.props.root===!0?(m=u.props.label,u.props.children.map((b,L)=>{d.push(O(p,{...b.props},`optChild-${L}-${new Date().getTime()}`))})):(d.push(O(Nt,{...u.props,children:u.props.label},`listChild-${y}`)),u.props.children.map((b,L)=>{d.push(O(p,{...b.props},`fwOptChild-${L}-${new Date().getTime()}`))})),r=O(N,{label:m,virtualization:i,children:d})):u.type===p&&(d.push(O(p,{...u.props},`${u.type}-${y}`)),f=O(G,{virtualization:i,children:d}))}):f=O(V,{children:"No data found."}),Qt("div",{...c,className:n(e.className,nt,h(nt,{size:t}),{"k-virtual-list":i}),children:[r,f]})};T.states=Wt;T.options=qt;T.className=nt;T.defaultOptions=yt;import{jsx as vt}from"react/jsx-runtime";var U="k-checkbox",Yt=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],Zt={size:[o.small,o.medium,o.large],rounded:[g.small,g.medium,g.large,g.full]},rt={size:o.medium,rounded:g.medium},S=e=>{let{id:t,checked:i,indeterminate:a,hover:c,focus:m,disabled:r,invalid:f,valid:d,required:u,size:y=rt.size,rounded:b=rt.rounded,...L}=e;return vt("span",{className:"k-checkbox-wrap",children:vt("input",{...L,id:t,type:"checkbox",defaultChecked:i,required:u,className:n(e.className,U,h(U,{size:y,rounded:b}),k(U,{hover:c,focus:m,disabled:r,invalid:f,valid:d,indeterminate:a,checked:i}))})})};S.states=Yt;S.options=Zt;S.className=U;S.defaultOptions=rt;import{jsx as ee}from"react/jsx-runtime";var Ct="k-checkbox-list",jt=[],te={},It={layout:"vertical"},E=e=>{let{layout:t=It.layout,...i}=e;return ee("ul",{...i,className:n(e.className,Ct,{[`k-list-${t}`]:t}),children:e.children})};E.states=jt;E.options=te;E.className=Ct;E.defaultOptions=It;import{jsx as ne}from"react/jsx-runtime";var St="k-checkbox-list-item",oe=[],se={},ie={},B=e=>{let{...t}=e;return ne("li",{...t,className:n(e.className,St),children:e.children})};B.states=oe;B.options=se;B.className=St;B.defaultOptions=ie;import{Fragment as Jo,jsx as Xo,jsxs as Fo}from"react/jsx-runtime";import{Fragment as Yo,jsx as Qo,jsxs as Zo}from"react/jsx-runtime";import{Fragment as ss,jsx as os,jsxs as is}from"react/jsx-runtime";import{Fragment as ms,jsx as ls,jsxs as cs}from"react/jsx-runtime";import{jsx as fs}from"react/jsx-runtime";import{jsx as bs}from"react/jsx-runtime";import{jsx as W,jsxs as me}from"react/jsx-runtime";var lt="k-list-item",re=[l.hover,l.focus,l.selected,l.disabled],ae={},le={},p=e=>{let{text:t,groupLabel:i,group:a,showIcon:c,iconName:m,showCheckbox:r,checked:f,hover:d,focus:u,selected:y,disabled:b,...L}=e,x=t||e.children;return me("li",{...L,className:n(e.className,a?"k-list-group-item":lt,k(lt,{hover:d,focus:u,disabled:b,selected:y})),children:[r&&W(S,{checked:f}),c&&W(I,{icon:m}),W("span",{className:"k-list-item-text",children:x}),i&&i!==""&&W("div",{className:"k-list-item-group-label",children:i})]})};p.states=re;p.options=ae;p.className=lt;p.defaultOptions=le;import{jsx as mt,jsxs as pe}from"react/jsx-runtime";var ce="k-list-content",G=e=>{let{virtualization:t,...i}=e;return pe("div",{...i,className:n(ce,e.className),children:[mt("ul",{className:n("k-list-ul"),children:e.children}),t&&mt("div",{className:"k-height-container",children:mt("div",{})})]})};import{jsx as zt}from"react/jsx-runtime";var de="k-list-group-sticky-header",Mt=e=>zt("div",{className:n(de,e.className),children:zt("div",{className:"k-list-header-text",children:e.children})});import{Fragment as ue,jsx as At,jsxs as fe}from"react/jsx-runtime";var N=e=>{let{virtualization:t,label:i}=e;return fe(ue,{children:[i&&At(Mt,{children:i}),e.children&&At(G,{virtualization:t,children:e.children})]})};import{jsx as Ot}from"react/jsx-runtime";var Le="k-list-group-item",Nt=e=>Ot("li",{className:n(Le,e.className),children:Ot("span",{className:"k-list-item-text",children:e.children})});import{jsx as ke}from"react/jsx-runtime";var ct="k-list-optionlabel",xe=[l.hover,l.focus,l.selected,l.disabled],he={},be={},q=e=>{let{text:t,hover:i,focus:a,selected:c,disabled:m,...r}=e;return ke("div",{...r,className:n(ct,k(ct,{hover:i,focus:a,selected:c,disabled:m})),children:t})};q.states=xe;q.options=he;q.className=ct;q.defaultOptions=be;import{jsx as ve}from"react/jsx-runtime";var pt="k-list-custom-value",ge=[l.hover,l.focus,l.selected,l.disabled],ye={},Ne={},Q=e=>{let{text:t,hover:i,focus:a,selected:c,disabled:m,...r}=e;return ve("div",{...r,className:n(pt,k(pt,{hover:i,focus:a,selected:c,disabled:m})),children:t})};Q.states=ge;Q.options=ye;Q.className=pt;Q.defaultOptions=Ne;import{jsx as ei}from"react/jsx-runtime";import{jsx as ni}from"react/jsx-runtime";import{jsx as mi,jsxs as ci}from"react/jsx-runtime";import{jsx as fi,jsxs as Li}from"react/jsx-runtime";import{jsx as ki}from"react/jsx-runtime";import{jsx as vi,jsxs as Ci}from"react/jsx-runtime";import{jsx as Mi,jsxs as Ai}from"react/jsx-runtime";import{jsx as Y,jsxs as Se}from"react/jsx-runtime";var Z="k-listbox",Ce=[l.disabled],Ie={size:[o.small,o.medium,o.large]},dt={size:o.medium,actionsPosition:"left"},H=e=>{let{size:t=dt.size,disabled:i,children:a,actionsPosition:c=dt.actionsPosition,actions:m,dir:r,...f}=e;return Se("div",{...f,dir:r,className:n(e.className,Z,h(Z,{size:t}),k(Z,{disabled:i}),{[`k-listbox-actions-${c}`]:c}),children:[m&&Y("div",{className:"k-listbox-actions",children:m.map(d=>Y(C,{icon:{left:r!=="rtl"?"caret-alt-left":"caret-alt-right",right:r!=="rtl"?"caret-alt-right":"caret-alt-left",to:r!=="rtl"?"caret-double-alt-right":"caret-double-alt-left",from:r!=="rtl"?"caret-double-alt-left":"caret-double-alt-right",up:"caret-alt-up",down:"caret-alt-down",x:"x"}[d],size:t},d))}),Y("div",{className:n("k-list-scroller","k-selectable"),children:Y(v,{size:t,children:a})})]})};H.states=Ce;H.options=Ie;H.className=Z;H.defaultOptions=dt;import{jsx as K}from"react/jsx-runtime";var nn=e=>K(H,{actions:["up","down","left","right","to","from","x"],children:[K(p,{children:"List item 1"},"ListItem1"),K(p,{children:"List item 2"},"ListItem2"),K(p,{children:"List item 3"},"ListItem3"),K(p,{children:"List item 4"},"ListItem4"),K(p,{children:"List item 5"},"ListItem5"),K(p,{children:"List item 6"},"ListItem6")],...e});export{nn as ListBoxNormal};