UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 12 kB
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((s,i)=>e[i]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var m=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),C=(t,e)=>l({"k-valid":e.valid,"k-invalid":e.invalid,"k-hover":e.hover,"k-focus":e.focus,"k-checked":e.checked,"k-active":e.active,"k-selected":e.selected,"k-disabled":e.disabled,"k-indeterminate":e.indeterminate&&!e.checked,"k-loading":e.loading,"k-empty":e.empty,"k-readonly":e.readonly,"k-highlighted":e.highlighted});var o={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},p={small:"small",medium:"medium",large:"large",full:"full"},d={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},n={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},a={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{jsx as Ke}from"react/jsx-runtime";var V="k-input",Ee=[a.hover,a.focus,a.valid,a.invalid,a.required,a.disabled,a.loading,a.readonly],Re={size:[o.small,o.medium,o.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[d.solid,d.flat,d.outline]},F={size:o.medium,rounded:o.medium,fillMode:d.solid},g=t=>{let{hover:e,focus:s,disabled:i,invalid:r,valid:u,loading:c,readonly:x,size:f=F.size,rounded:N=F.rounded,fillMode:y=F.fillMode,...v}=t;return Ke("span",{...v,className:l(t.className,V,m(V,{size:f,rounded:N,fillMode:y}),C(V,{hover:e,focus:s,disabled:i,invalid:r,valid:u,loading:c,readonly:x}))})};g.states=Ee;g.options=Re;g.className=V;g.defaultOptions=F;import{jsx as Fe}from"react/jsx-runtime";var _="k-picker",$e=[a.hover,a.focus,a.valid,a.invalid,a.required,a.disabled,a.loading,a.readonly],Ve={size:[o.small,o.medium,o.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[d.solid,d.flat,d.outline]},q={size:o.medium,rounded:p.medium,fillMode:d.solid},G=t=>{let{hover:e,focus:s,disabled:i,invalid:r,valid:u,loading:c,readonly:x,size:f=q.size,rounded:N=q.rounded,fillMode:y=q.fillMode,...v}=t;return Fe("span",{...v,className:l(t.className,_,m(_,{size:f,rounded:N,fillMode:y}),C(_,{hover:e,focus:s,disabled:i,invalid:r,valid:u,loading:c,readonly:x})),children:t.children})};G.states=$e;G.options=Ve;G.className=_;G.defaultOptions=q;import{Fragment as Ue,jsx as ue}from"react/jsx-runtime";var W="k-icon k-font-icon",_e=[],qe={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark]},Ge={},B=t=>{let{size:e,themeColor:s,icon:i,rotate:r,flip:u,...c}=t;return i?ue("span",{...c,className:l(t.className,W,m(W,{size:e}),{[`k-i-${i}`]:i,[`k-color-${s}`]:s,[`k-rotate-${r}`]:r,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"})}):ue(Ue,{})};B.states=_e;B.options=qe;B.className=W;B.defaultOptions=Ge;var pe=B;import{Fragment as De,jsx as U}from"react/jsx-runtime";var Y="k-icon k-svg-icon",Xe=[],Je={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark]},me={viewBox:"0 0 24 24"},L=t=>{let{size:e,themeColor:s,rotate:i,flip:r,viewBox:u=me.viewBox,icon:c,...x}=t;if(!c)return U(De,{});c==="none"&&{...x,className:l(t.className,Y,"k-none")};let f=typeof c=="object"&&c.name&&c.name;return U("span",{...x,className:l(t.className,Y,m("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:U("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:u,dangerouslySetInnerHTML:typeof c=="object"?{__html:c.content}:void 0,children:c?void 0:t.children})})};L.states=Xe;L.options=Je;L.className=Y;L.defaultOptions=me;var Z=L;import*as fe from"@progress/kendo-svg-icons";import{Fragment as xe,jsx as A}from"react/jsx-runtime";var Qe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),We=[],Ye={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark]},j={viewBox:"0 0 24 24",type:"svg"},h=t=>{let{size:e,themeColor:s,icon:i,type:r=j.type,rotate:u,flip:c,viewBox:x=j.viewBox,...f}=t;if(!i)return A(xe,{});if(r==="svg"){if(i==="none")return A(Z,{...f,icon:i,size:e});let N=Qe(`${i}-icon`);return fe[N]?A(Z,{...f,icon:fe[N],size:e,themeColor:s,rotate:u,flip:c,viewBox:x}):A(xe,{})}return A(pe,{...f,icon:i,size:e,themeColor:s,rotate:u,flip:c})};h.states=We;h.options=Ye;h.defaultOptions=j;import{Fragment as et,jsx as ee}from"react/jsx-runtime";var he="k-clear-value",Ze=[a.disabled,a.loading,a.readonly],je={},H=t=>{let{disabled:e,loading:s,readonly:i,value:r}=t;return e||i||s||!r?ee(et,{}):ee("span",{className:l(t.className,he),children:ee(h,{icon:"x"})})};H.states=Ze;H.options=je;H.className=he;import{jsx as nt}from"react/jsx-runtime";var te="k-input-inner",tt=[],ot={},X={type:"text",autocomplete:"off",value:"",placeholder:""},P=t=>{let{value:e=X.value,type:s=X.type,placeholder:i=X.placeholder,autocomplete:r=X.autocomplete,...u}=t;return nt("input",{...u,type:s,className:l(t.className,te,m(te,t)),placeholder:i,autoComplete:r,defaultValue:e})};P.states=tt;P.options=ot;P.className=te;import{jsx as Ne,jsxs as lt}from"react/jsx-runtime";var oe="k-input-inner",st=[],at={},ne=t=>{let{value:e,placeholder:s,showValue:i,valueIcon:r,valueIconName:u,...c}=t;return lt("span",{...c,className:l(t.className,oe,m(oe,t)),children:[r,!r&&u&&Ne(h,{className:"k-input-value-icon",icon:u}),i&&!e&&s,i&&e&&Ne("span",{className:"k-input-value-text",children:e})]})};ne.states=st;ne.options=at;ne.className=oe;import{jsx as dt}from"react/jsx-runtime";var se="k-input-inner",it=[],rt={},be={value:"",placeholder:""},ae=t=>{let{value:e=be.value,placeholder:s=be.placeholder,rows:i,...r}=t;return dt("textarea",{...r,className:l(t.className,se,m(se,t)),placeholder:s,rows:i,defaultValue:e})};ae.states=it;ae.options=rt;ae.className=se;import{Fragment as ut,jsx as ge}from"react/jsx-runtime";var Ie="k-input-loading-icon",ct=[a.disabled,a.loading],J=t=>{let{disabled:e,loading:s}=t;return e||!s?ge(ut,{}):ge("span",{className:l(t.className,Ie,"k-icon k-i-loading")})};J.states=ct;J.className=Ie;import{Fragment as ft,jsx as ye}from"react/jsx-runtime";var ve="k-input-validation-icon",pt=[a.valid,a.invalid,a.disabled,a.loading],mt={},E=t=>{let{valid:e,invalid:s,disabled:i,loading:r}=t,u=s?"warning-circle":"check-circle";return i||r||!!!(e||s)?ye(ft,{}):ye(h,{className:l(ve),icon:u})};E.states=pt;E.options=mt;E.className=ve;import{Fragment as Nt,jsx as Se}from"react/jsx-runtime";var xt="k-input-prefix",ht={direction:"horizontal"},ke=t=>{let{direction:e=ht.direction,...s}=t;return t.children?Se("span",{...s,className:l(xt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Se(Nt,{})};import{Fragment as It,jsx as Me}from"react/jsx-runtime";var bt="k-input-suffix",gt={direction:"horizontal"},Te=t=>{let{direction:e=gt.direction,...s}=t;return t.children?Me("span",{...s,className:l(bt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Me(It,{})};import{jsx as $o}from"react/jsx-runtime";import{jsx as vt}from"react/jsx-runtime";var yt="k-input-suffix-text",ze=t=>{let{children:e,...s}=t;return vt("span",{...s,className:l(yt,t.className),children:e})};import{jsx as kt}from"react/jsx-runtime";var Ce="k-input-separator",St={direction:"vertical"},le=t=>{let{direction:e=St.direction,...s}=t;return kt("span",{...s,className:l(Ce,t.className,{[`${Ce}-${e}`]:e})})};import{Fragment as zt,jsx as R,jsxs as Oe}from"react/jsx-runtime";var D="k-button",Mt=[a.hover,a.focus,a.active,a.selected,a.disabled],Tt={size:[o.small,o.medium,o.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[d.solid,d.flat,d.outline,d.clear,d.link],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark,n.inverse]},k={size:o.medium,rounded:p.medium,fillMode:d.solid,themeColor:n.base,showArrow:!1,arrowIconName:"caret-alt-down"},b=t=>{let{size:e=k.size,rounded:s=k.rounded,fillMode:i=k.fillMode,themeColor:r=k.themeColor,showArrow:u=k.showArrow,arrowIconName:c=k.arrowIconName,hover:x,focus:f,active:N,selected:y,disabled:v,icon:w,text:S,iconClassName:$,...Q}=t,T=w!==void 0,z=t.children!==void 0;return Oe("button",{...Q,className:l(t.className,D,m(D,{size:e,rounded:s,fillMode:i,themeColor:r}),C(D,{hover:x,focus:f,active:N,disabled:v,selected:y}),{"k-icon-button":!S&&!z&&T}),children:[w&&R(h,{className:l($,"k-button-icon"),icon:w}),S?Oe(zt,{children:[S&&R("span",{className:"k-button-text",children:S}),t.children]}):t.children&&R("span",{className:"k-button-text",children:t.children}),u&&R("span",{className:"k-menu-button-arrow k-button-arrow",children:R(h,{icon:c})})]})};b.states=Mt;b.options=Tt;b.className=D;b.defaultOptions=k;import{jsx as fn}from"react/jsx-runtime";import{jsx as bn}from"react/jsx-runtime";import{jsx as vn}from"react/jsx-runtime";import{jsx as we,jsxs as wt}from"react/jsx-runtime";var Be="k-spin-button",Ct=[],Ot={size:[o.small,o.medium,o.large],fillMode:[d.solid,d.flat,d.outline,d.clear,d.link]},ie={size:o.medium,fillMode:d.solid},O=t=>{let{size:e=ie.size,fillMode:s=ie.fillMode,...i}=t;return wt("span",{...i,className:l(Be,t.className),children:[we(b,{className:"k-spinner-increase",icon:"caret-alt-up",rounded:null,size:e,fillMode:s}),we(b,{className:"k-spinner-decrease",icon:"caret-alt-down",rounded:null,size:e,fillMode:s})]})};O.states=Ct;O.options=Ot;O.className=Be;O.defaultOptions=ie;import{Fragment as Le,jsx as I,jsxs as re}from"react/jsx-runtime";var Ae="k-numerictextbox",Bt=[a.hover,a.focus,a.valid,a.invalid,a.loading,a.required,a.disabled,a.readonly],Lt={size:[o.small,o.medium,o.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[d.solid,d.flat,d.outline]},M={showSpinButton:!0,showClearButton:!0,size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode,separators:!0},K=t=>{let{size:e=M.size,rounded:s=M.rounded,fillMode:i=M.fillMode,separators:r=M.separators,showClearButton:u=M.showClearButton,showSpinButton:c=M.showSpinButton,prefix:x,suffix:f,value:N,placeholder:y,hover:v,focus:w,valid:S,invalid:$,required:Q,loading:T,disabled:z,readonly:ce,...Pe}=t;return re(g,{...Pe,size:e,rounded:s,fillMode:i,hover:v,focus:w,valid:S,invalid:$,required:Q,loading:T,disabled:z,readonly:ce,className:l(t.className,Ae),children:[x&&re(Le,{children:[I(ke,{children:x}),r&&I(le,{})]}),I(P,{placeholder:y,value:N}),I(E,{valid:S,invalid:$,loading:T,disabled:z}),I(J,{loading:T,disabled:z}),u&&I(H,{loading:T,disabled:z,readonly:ce,value:N}),f&&re(Le,{children:[r&&I(le,{}),I(Te,{children:f})]}),c&&I(O,{className:"k-input-spinner",size:e,fillMode:i})]})};K.states=Bt;K.options=Lt;K.className=Ae;K.defaultOptions=M;var He=K;import{Fragment as At,jsx as de}from"react/jsx-runtime";var _n=t=>de(He,{suffix:de(At,{children:de(ze,{children:"mm"})}),...t});export{_n as NumericTextboxSuffix};