UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 11.7 kB
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((a,i)=>e[i]||e[a]&&a||null).filter(a=>a!==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"},s={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 Pe}from"react/jsx-runtime";var V="k-input",Ae=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],He={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},b=t=>{let{hover:e,focus:a,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 Pe("span",{...v,className:l(t.className,V,m(V,{size:f,rounded:N,fillMode:y}),C(V,{hover:e,focus:a,disabled:i,invalid:r,valid:u,loading:c,readonly:x}))})};b.states=Ae;b.options=He;b.className=V;b.defaultOptions=F;import{jsx as Ke}from"react/jsx-runtime";var _="k-picker",Ee=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.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]},q={size:o.medium,rounded:p.medium,fillMode:d.solid},G=t=>{let{hover:e,focus:a,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 Ke("span",{...v,className:l(t.className,_,m(_,{size:f,rounded:N,fillMode:y}),C(_,{hover:e,focus:a,disabled:i,invalid:r,valid:u,loading:c,readonly:x})),children:t.children})};G.states=Ee;G.options=Re;G.className=_;G.defaultOptions=q;import{Fragment as _e,jsx as ce}from"react/jsx-runtime";var W="k-icon k-font-icon",$e=[],Ve={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]},Fe={},B=t=>{let{size:e,themeColor:a,icon:i,rotate:r,flip:u,...c}=t;return i?ce("span",{...c,className:l(t.className,W,m(W,{size:e}),{[`k-i-${i}`]:i,[`k-color-${a}`]:a,[`k-rotate-${r}`]:r,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"})}):ce(_e,{})};B.states=$e;B.options=Ve;B.className=W;B.defaultOptions=Fe;var ue=B;import{Fragment as Ue,jsx as U}from"react/jsx-runtime";var Y="k-icon k-svg-icon",qe=[],Ge={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]},pe={viewBox:"0 0 24 24"},L=t=>{let{size:e,themeColor:a,rotate:i,flip:r,viewBox:u=pe.viewBox,icon:c,...x}=t;if(!c)return U(Ue,{});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-${a}`]:a,[`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=qe;L.options=Ge;L.className=Y;L.defaultOptions=pe;var Z=L;import*as me from"@progress/kendo-svg-icons";import{Fragment as fe,jsx as A}from"react/jsx-runtime";var Xe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Je=[],De={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:a,icon:i,type:r=j.type,rotate:u,flip:c,viewBox:x=j.viewBox,...f}=t;if(!i)return A(fe,{});if(r==="svg"){if(i==="none")return A(Z,{...f,icon:i,size:e});let N=Xe(`${i}-icon`);return me[N]?A(Z,{...f,icon:me[N],size:e,themeColor:a,rotate:u,flip:c,viewBox:x}):A(fe,{})}return A(ue,{...f,icon:i,size:e,themeColor:a,rotate:u,flip:c})};h.states=Je;h.options=De;h.defaultOptions=j;import{Fragment as Ye,jsx as ee}from"react/jsx-runtime";var xe="k-clear-value",Qe=[s.disabled,s.loading,s.readonly],We={},H=t=>{let{disabled:e,loading:a,readonly:i,value:r}=t;return e||i||a||!r?ee(Ye,{}):ee("span",{className:l(t.className,xe),children:ee(h,{icon:"x"})})};H.states=Qe;H.options=We;H.className=xe;import{jsx as et}from"react/jsx-runtime";var te="k-input-inner",Ze=[],je={},X={type:"text",autocomplete:"off",value:"",placeholder:""},P=t=>{let{value:e=X.value,type:a=X.type,placeholder:i=X.placeholder,autocomplete:r=X.autocomplete,...u}=t;return et("input",{...u,type:a,className:l(t.className,te,m(te,t)),placeholder:i,autoComplete:r,defaultValue:e})};P.states=Ze;P.options=je;P.className=te;import{jsx as he,jsxs as nt}from"react/jsx-runtime";var oe="k-input-inner",tt=[],ot={},ne=t=>{let{value:e,placeholder:a,showValue:i,valueIcon:r,valueIconName:u,...c}=t;return nt("span",{...c,className:l(t.className,oe,m(oe,t)),children:[r,!r&&u&&he(h,{className:"k-input-value-icon",icon:u}),i&&!e&&a,i&&e&&he("span",{className:"k-input-value-text",children:e})]})};ne.states=tt;ne.options=ot;ne.className=oe;import{jsx as lt}from"react/jsx-runtime";var se="k-input-inner",st=[],at={},Ne={value:"",placeholder:""},ae=t=>{let{value:e=Ne.value,placeholder:a=Ne.placeholder,rows:i,...r}=t;return lt("textarea",{...r,className:l(t.className,se,m(se,t)),placeholder:a,rows:i,defaultValue:e})};ae.states=st;ae.options=at;ae.className=se;import{Fragment as rt,jsx as ge}from"react/jsx-runtime";var be="k-input-loading-icon",it=[s.disabled,s.loading],J=t=>{let{disabled:e,loading:a}=t;return e||!a?ge(rt,{}):ge("span",{className:l(t.className,be,"k-icon k-i-loading")})};J.states=it;J.className=be;import{Fragment as ut,jsx as Ie}from"react/jsx-runtime";var ye="k-input-validation-icon",dt=[s.valid,s.invalid,s.disabled,s.loading],ct={},E=t=>{let{valid:e,invalid:a,disabled:i,loading:r}=t,u=a?"warning-circle":"check-circle";return i||r||!!!(e||a)?Ie(ut,{}):Ie(h,{className:l(ye),icon:u})};E.states=dt;E.options=ct;E.className=ye;import{Fragment as ft,jsx as ve}from"react/jsx-runtime";var pt="k-input-prefix",mt={direction:"horizontal"},Se=t=>{let{direction:e=mt.direction,...a}=t;return t.children?ve("span",{...a,className:l(pt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):ve(ft,{})};import{Fragment as Nt,jsx as ke}from"react/jsx-runtime";var xt="k-input-suffix",ht={direction:"horizontal"},Me=t=>{let{direction:e=ht.direction,...a}=t;return t.children?ke("span",{...a,className:l(xt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):ke(Nt,{})};import{jsx as Ao}from"react/jsx-runtime";import{jsx as Ro}from"react/jsx-runtime";import{jsx as bt}from"react/jsx-runtime";var ze="k-input-separator",gt={direction:"vertical"},le=t=>{let{direction:e=gt.direction,...a}=t;return bt("span",{...a,className:l(ze,t.className,{[`${ze}-${e}`]:e})})};import{Fragment as vt,jsx as R,jsxs as Te}from"react/jsx-runtime";var D="k-button",It=[s.hover,s.focus,s.active,s.selected,s.disabled],yt={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"},g=t=>{let{size:e=k.size,rounded:a=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,z=w!==void 0,T=t.children!==void 0;return Te("button",{...Q,className:l(t.className,D,m(D,{size:e,rounded:a,fillMode:i,themeColor:r}),C(D,{hover:x,focus:f,active:N,disabled:v,selected:y}),{"k-icon-button":!S&&!T&&z}),children:[w&&R(h,{className:l($,"k-button-icon"),icon:w}),S?Te(vt,{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})})]})};g.states=It;g.options=yt;g.className=D;g.defaultOptions=k;import{jsx as dn}from"react/jsx-runtime";import{jsx as mn}from"react/jsx-runtime";import{jsx as Nn}from"react/jsx-runtime";import{jsx as Ce,jsxs as Mt}from"react/jsx-runtime";var Oe="k-spin-button",St=[],kt={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:a=ie.fillMode,...i}=t;return Mt("span",{...i,className:l(Oe,t.className),children:[Ce(g,{className:"k-spinner-increase",icon:"caret-alt-up",rounded:null,size:e,fillMode:a}),Ce(g,{className:"k-spinner-decrease",icon:"caret-alt-down",rounded:null,size:e,fillMode:a})]})};O.states=St;O.options=kt;O.className=Oe;O.defaultOptions=ie;import{Fragment as we,jsx as I,jsxs as re}from"react/jsx-runtime";var Be="k-numerictextbox",zt=[s.hover,s.focus,s.valid,s.invalid,s.loading,s.required,s.disabled,s.readonly],Tt={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:b.defaultOptions.size,rounded:b.defaultOptions.rounded,fillMode:b.defaultOptions.fillMode,separators:!0},K=t=>{let{size:e=M.size,rounded:a=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:z,disabled:T,readonly:de,...Le}=t;return re(b,{...Le,size:e,rounded:a,fillMode:i,hover:v,focus:w,valid:S,invalid:$,required:Q,loading:z,disabled:T,readonly:de,className:l(t.className,Be),children:[x&&re(we,{children:[I(Se,{children:x}),r&&I(le,{})]}),I(P,{placeholder:y,value:N}),I(E,{valid:S,invalid:$,loading:z,disabled:T}),I(J,{loading:z,disabled:T}),u&&I(H,{loading:z,disabled:T,readonly:de,value:N}),f&&re(we,{children:[r&&I(le,{}),I(Me,{children:f})]}),c&&I(O,{className:"k-input-spinner",size:e,fillMode:i})]})};K.states=zt;K.options=Tt;K.className=Be;K.defaultOptions=M;var An=K;export{Be as NUMERICTEXTBOX_CLASSNAME,K as NumericTextbox,An as default};