UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 10.9 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"}),S=(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"},u={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 Se}from"react/jsx-runtime";var E="k-input",ke=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Me={size:[o.small,o.medium,o.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[d.solid,d.flat,d.outline]},K={size:o.medium,rounded:o.medium,fillMode:d.solid},b=t=>{let{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:c,readonly:x,size:f=K.size,rounded:g=K.rounded,fillMode:v=K.fillMode,...N}=t;return Se("span",{...N,className:l(t.className,E,m(E,{size:f,rounded:g,fillMode:v}),S(E,{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:c,readonly:x}))})};b.states=ke;b.options=Me;b.className=E;b.defaultOptions=K;import{jsx as Ce}from"react/jsx-runtime";var R="k-picker",ze=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Te={size:[o.small,o.medium,o.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[d.solid,d.flat,d.outline]},$={size:o.medium,rounded:u.medium,fillMode:d.solid},V=t=>{let{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:c,readonly:x,size:f=$.size,rounded:g=$.rounded,fillMode:v=$.fillMode,...N}=t;return Ce("span",{...N,className:l(t.className,R,m(R,{size:f,rounded:g,fillMode:v}),S(R,{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:c,readonly:x})),children:t.children})};V.states=ze;V.options=Te;V.className=R;V.defaultOptions=$;import{Fragment as Be,jsx as le}from"react/jsx-runtime";var W="k-icon k-font-icon",Oe=[],Le={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]},we={},T=t=>{let{size:e,themeColor:a,icon:i,rotate:r,flip:p,...c}=t;return i?le("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":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"})}):le(Be,{})};T.states=Oe;T.options=Le;T.className=W;T.defaultOptions=we;var ie=T;import{Fragment as Pe,jsx as F}from"react/jsx-runtime";var X="k-icon k-svg-icon",Ae=[],He={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]},re={viewBox:"0 0 24 24"},C=t=>{let{size:e,themeColor:a,rotate:i,flip:r,viewBox:p=re.viewBox,icon:c,...x}=t;if(!c)return F(Pe,{});c==="none"&&{...x,className:l(t.className,X,"k-none")};let f=typeof c=="object"&&c.name&&c.name;return F("span",{...x,className:l(t.className,X,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:F("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:p,dangerouslySetInnerHTML:typeof c=="object"?{__html:c.content}:void 0,children:c?void 0:t.children})})};C.states=Ae;C.options=He;C.className=X;C.defaultOptions=re;var Y=C;import*as de from"@progress/kendo-svg-icons";import{Fragment as ce,jsx as O}from"react/jsx-runtime";var Ee=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ke=[],Re={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]},Z={viewBox:"0 0 24 24",type:"svg"},h=t=>{let{size:e,themeColor:a,icon:i,type:r=Z.type,rotate:p,flip:c,viewBox:x=Z.viewBox,...f}=t;if(!i)return O(ce,{});if(r==="svg"){if(i==="none")return O(Y,{...f,icon:i,size:e});let g=Ee(`${i}-icon`);return de[g]?O(Y,{...f,icon:de[g],size:e,themeColor:a,rotate:p,flip:c,viewBox:x}):O(ce,{})}return O(ie,{...f,icon:i,size:e,themeColor:a,rotate:p,flip:c})};h.states=Ke;h.options=Re;h.defaultOptions=Z;import{Fragment as Fe,jsx as j}from"react/jsx-runtime";var pe="k-clear-value",$e=[s.disabled,s.loading,s.readonly],Ve={},L=t=>{let{disabled:e,loading:a,readonly:i,value:r}=t;return e||i||a||!r?j(Fe,{}):j("span",{className:l(t.className,pe),children:j(h,{icon:"x"})})};L.states=$e;L.options=Ve;L.className=pe;import{jsx as qe}from"react/jsx-runtime";var ee="k-input-inner",_e=[],De={},_={type:"text",autocomplete:"off",value:"",placeholder:""},w=t=>{let{value:e=_.value,type:a=_.type,placeholder:i=_.placeholder,autocomplete:r=_.autocomplete,...p}=t;return qe("input",{...p,type:a,className:l(t.className,ee,m(ee,t)),placeholder:i,autoComplete:r,defaultValue:e})};w.states=_e;w.options=De;w.className=ee;import{jsx as ue,jsxs as Je}from"react/jsx-runtime";var te="k-input-inner",Ge=[],Ue={},oe=t=>{let{value:e,placeholder:a,showValue:i,valueIcon:r,valueIconName:p,...c}=t;return Je("span",{...c,className:l(t.className,te,m(te,t)),children:[r,!r&&p&&ue(h,{className:"k-input-value-icon",icon:p}),i&&!e&&a,i&&e&&ue("span",{className:"k-input-value-text",children:e})]})};oe.states=Ge;oe.options=Ue;oe.className=te;import{jsx as Xe}from"react/jsx-runtime";var ne="k-input-inner",Qe=[],We={},me={value:"",placeholder:""},se=t=>{let{value:e=me.value,placeholder:a=me.placeholder,rows:i,...r}=t;return Xe("textarea",{...r,className:l(t.className,ne,m(ne,t)),placeholder:a,rows:i,defaultValue:e})};se.states=Qe;se.options=We;se.className=ne;import{Fragment as Ze,jsx as fe}from"react/jsx-runtime";var xe="k-input-loading-icon",Ye=[s.disabled,s.loading],D=t=>{let{disabled:e,loading:a}=t;return e||!a?fe(Ze,{}):fe("span",{className:l(t.className,xe,"k-icon k-i-loading")})};D.states=Ye;D.className=xe;import{Fragment as tt,jsx as he}from"react/jsx-runtime";var ge="k-input-validation-icon",je=[s.valid,s.invalid,s.disabled,s.loading],et={},B=t=>{let{valid:e,invalid:a,disabled:i,loading:r}=t,p=a?"warning-circle":"check-circle";return i||r||!!!(e||a)?he(tt,{}):he(h,{className:l(ge),icon:p})};B.states=je;B.options=et;B.className=ge;import{Fragment as co,jsx as po}from"react/jsx-runtime";import{Fragment as xo,jsx as ho}from"react/jsx-runtime";import{jsx as bo}from"react/jsx-runtime";import{jsx as Mo}from"react/jsx-runtime";import{jsx as Co}from"react/jsx-runtime";import{Fragment as st,jsx as A,jsxs as Ne}from"react/jsx-runtime";var q="k-button",ot=[s.hover,s.focus,s.active,s.selected,s.disabled],nt={size:[o.small,o.medium,o.large],rounded:[u.small,u.medium,u.large,u.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]},M={size:o.medium,rounded:u.medium,fillMode:d.solid,themeColor:n.base,showArrow:!1,arrowIconName:"caret-alt-down"},I=t=>{let{size:e=M.size,rounded:a=M.rounded,fillMode:i=M.fillMode,themeColor:r=M.themeColor,showArrow:p=M.showArrow,arrowIconName:c=M.arrowIconName,hover:x,focus:f,active:g,selected:v,disabled:N,icon:y,text:k,iconClassName:U,...J}=t,Q=y!==void 0,ve=t.children!==void 0;return Ne("button",{...J,className:l(t.className,q,m(q,{size:e,rounded:a,fillMode:i,themeColor:r}),S(q,{hover:x,focus:f,active:g,disabled:N,selected:v}),{"k-icon-button":!k&&!ve&&Q}),children:[y&&A(h,{className:l(U,"k-button-icon"),icon:y}),k?Ne(st,{children:[k&&A("span",{className:"k-button-text",children:k}),t.children]}):t.children&&A("span",{className:"k-button-text",children:t.children}),p&&A("span",{className:"k-menu-button-arrow k-button-arrow",children:A(h,{icon:c})})]})};I.states=ot;I.options=nt;I.className=q;I.defaultOptions=M;import{jsx as Xo}from"react/jsx-runtime";import{jsx as en}from"react/jsx-runtime";import{jsx as sn}from"react/jsx-runtime";import{jsx as Ie,jsxs as it}from"react/jsx-runtime";var be="k-spin-button",at=[],lt={size:[o.small,o.medium,o.large],fillMode:[d.solid,d.flat,d.outline,d.clear,d.link]},ae={size:o.medium,fillMode:d.solid},z=t=>{let{size:e=ae.size,fillMode:a=ae.fillMode,...i}=t;return it("span",{...i,className:l(be,t.className),children:[Ie(I,{className:"k-spinner-increase",icon:"caret-alt-up",rounded:null,size:e,fillMode:a}),Ie(I,{className:"k-spinner-decrease",icon:"caret-alt-down",rounded:null,size:e,fillMode:a})]})};z.states=at;z.options=lt;z.className=be;z.defaultOptions=ae;import{jsx as H,jsxs as ct}from"react/jsx-runtime";var ye="k-dateinput",rt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],dt={size:[o.small,o.medium,o.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[d.solid,d.flat,d.outline]},G={size:b.defaultOptions.size,rounded:b.defaultOptions.rounded,fillMode:b.defaultOptions.fillMode},P=t=>{let{size:e=G.size,rounded:a=G.rounded,fillMode:i=G.fillMode,value:r,placeholder:p,hover:c,focus:x,valid:f,invalid:g,required:v,loading:N,disabled:y,readonly:k,showClearButton:U,showSpinButton:J,...Q}=t;return ct(b,{...Q,size:e,rounded:a,fillMode:i,hover:c,focus:x,valid:f,invalid:g,required:v,loading:N,disabled:y,readonly:k,className:l(t.className,ye),children:[H(w,{placeholder:p,value:r}),H(B,{valid:f,invalid:g,loading:N,disabled:y}),H(D,{loading:N,disabled:y}),U&&H(L,{loading:N,disabled:y,readonly:k,value:r}),J&&H(z,{className:"k-input-spinner",size:e,fillMode:i})]})};P.states=rt;P.options=dt;P.className=ye;P.defaultOptions=G;var yn=P;export{ye as DATEINPUT_CLASSNAME,P as DateInput,yn as default};