@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 11.3 kB
JavaScript
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"}),z=(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 s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},u={small:"small",medium:"medium",large:"large",full:"full"},p={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},n={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 $="k-input",Be=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],He={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},F={size:s.medium,rounded:s.medium,fillMode:p.solid},I=t=>{let{hover:e,focus:a,disabled:i,invalid:r,valid:c,loading:d,readonly:x,size:f=F.size,rounded:g=F.rounded,fillMode:b=F.fillMode,...N}=t;return Pe("span",{...N,className:l(t.className,$,m($,{size:f,rounded:g,fillMode:b}),z($,{hover:e,focus:a,disabled:i,invalid:r,valid:c,loading:d,readonly:x}))})};I.states=Be;I.options=He;I.className=$;I.defaultOptions=F;import{jsx as Ve}from"react/jsx-runtime";var _="k-picker",Ee=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],Re={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},q={size:s.medium,rounded:u.medium,fillMode:p.solid},G=t=>{let{hover:e,focus:a,disabled:i,invalid:r,valid:c,loading:d,readonly:x,size:f=q.size,rounded:g=q.rounded,fillMode:b=q.fillMode,...N}=t;return Ve("span",{...N,className:l(t.className,_,m(_,{size:f,rounded:g,fillMode:b}),z(_,{hover:e,focus:a,disabled:i,invalid:r,valid:c,loading:d,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",Ke=[],$e={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Fe={},w=t=>{let{size:e,themeColor:a,icon:i,rotate:r,flip:c,...d}=t;return i?ce("span",{...d,className:l(t.className,W,m(W,{size:e}),{[`k-i-${i}`]:i,[`k-color-${a}`]:a,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):ce(_e,{})};w.states=Ke;w.options=$e;w.className=W;w.defaultOptions=Fe;var ue=w;import{Fragment as Ue,jsx as U}from"react/jsx-runtime";var Y="k-icon k-svg-icon",qe=[],Ge={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},pe={viewBox:"0 0 24 24"},O=t=>{let{size:e,themeColor:a,rotate:i,flip:r,viewBox:c=pe.viewBox,icon:d,...x}=t;if(!d)return U(Ue,{});d==="none"&&{...x,className:l(t.className,Y,"k-none")};let f=typeof d=="object"&&d.name&&d.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 d=="object"?d.viewBox:c,dangerouslySetInnerHTML:typeof d=="object"?{__html:d.content}:void 0,children:d?void 0:t.children})})};O.states=qe;O.options=Ge;O.className=Y;O.defaultOptions=pe;var Z=O;import*as me from"@progress/kendo-svg-icons";import{Fragment as fe,jsx as L}from"react/jsx-runtime";var Xe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Je=[],De={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},j={viewBox:"0 0 24 24",type:"svg"},h=t=>{let{size:e,themeColor:a,icon:i,type:r=j.type,rotate:c,flip:d,viewBox:x=j.viewBox,...f}=t;if(!i)return L(fe,{});if(r==="svg"){if(i==="none")return L(Z,{...f,icon:i,size:e});let g=Xe(`${i}-icon`);return me[g]?L(Z,{...f,icon:me[g],size:e,themeColor:a,rotate:c,flip:d,viewBox:x}):L(fe,{})}return L(ue,{...f,icon:i,size:e,themeColor:a,rotate:c,flip:d})};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=[n.disabled,n.loading,n.readonly],We={},A=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"})})};A.states=Qe;A.options=We;A.className=xe;import{jsx as et}from"react/jsx-runtime";var te="k-input-inner",Ze=[],je={},X={type:"text",autocomplete:"off",value:"",placeholder:""},B=t=>{let{value:e=X.value,type:a=X.type,placeholder:i=X.placeholder,autocomplete:r=X.autocomplete,...c}=t;return et("input",{...c,type:a,className:l(t.className,te,m(te,t)),placeholder:i,autoComplete:r,defaultValue:e})};B.states=Ze;B.options=je;B.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:c,...d}=t;return nt("span",{...d,className:l(t.className,oe,m(oe,t)),children:[r,!r&&c&&he(h,{className:"k-input-value-icon",icon:c}),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={},ge={value:"",placeholder:""},ae=t=>{let{value:e=ge.value,placeholder:a=ge.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 Ie}from"react/jsx-runtime";var be="k-input-loading-icon",it=[n.disabled,n.loading],J=t=>{let{disabled:e,loading:a}=t;return e||!a?Ie(rt,{}):Ie("span",{className:l(t.className,be,"k-icon k-i-loading")})};J.states=it;J.className=be;import{Fragment as ut,jsx as ye}from"react/jsx-runtime";var ve="k-input-validation-icon",dt=[n.valid,n.invalid,n.disabled,n.loading],ct={},H=t=>{let{valid:e,invalid:a,disabled:i,loading:r}=t,c=a?"warning-circle":"check-circle";return i||r||!!!(e||a)?ye(ut,{}):ye(h,{className:l(ve),icon:c})};H.states=dt;H.options=ct;H.className=ve;import{Fragment as ft,jsx as Ne}from"react/jsx-runtime";var pt="k-input-prefix",mt={direction:"horizontal"},ke=t=>{let{direction:e=mt.direction,...a}=t;return t.children?Ne("span",{...a,className:l(pt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Ne(ft,{})};import{Fragment as gt,jsx as Se}from"react/jsx-runtime";var xt="k-input-suffix",ht={direction:"horizontal"},Me=t=>{let{direction:e=ht.direction,...a}=t;return t.children?Se("span",{...a,className:l(xt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Se(gt,{})};import{jsx as Ao}from"react/jsx-runtime";import{jsx as Eo}from"react/jsx-runtime";import{jsx as bt}from"react/jsx-runtime";var Te="k-input-separator",It={direction:"vertical"},le=t=>{let{direction:e=It.direction,...a}=t;return bt("span",{...a,className:l(Te,t.className,{[`${Te}-${e}`]:e})})};import{Fragment as ze,jsx as y,jsxs as ie}from"react/jsx-runtime";var Ce="k-textbox",yt=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],vt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},k={showClearButton:!0,showValidationIcon:!0,size:I.defaultOptions.size,rounded:I.defaultOptions.rounded,fillMode:I.defaultOptions.fillMode,separators:!0},P=t=>{let{size:e=k.size,rounded:a=k.rounded,fillMode:i=k.fillMode,separators:r=k.separators,showClearButton:c=k.showClearButton,showValidationIcon:d=k.showValidationIcon,prefix:x,suffix:f,type:g,value:b,placeholder:N,hover:C,focus:M,valid:R,invalid:V,required:Q,loading:T,disabled:K,readonly:de,...Ae}=t;return ie(I,{...Ae,size:e,rounded:a,fillMode:i,hover:C,focus:M,valid:R,invalid:V,required:Q,loading:T,disabled:K,readonly:de,className:l(t.className,Ce),children:[x&&ie(ze,{children:[y(ke,{children:x}),r&&y(le,{})]}),y(B,{placeholder:N,value:b,type:g}),d&&y(H,{valid:R,invalid:V,loading:T,disabled:K}),y(J,{loading:T,disabled:K}),c&&y(A,{loading:T,disabled:K,readonly:de,value:b}),f&&ie(ze,{children:[r&&y(le,{}),y(Me,{children:f})]})]})};P.states=yt;P.options=vt;P.className=Ce;P.defaultOptions=k;var we=P;import{Fragment as St,jsx as E,jsxs as Oe}from"react/jsx-runtime";var D="k-button",Nt=[n.hover,n.focus,n.active,n.selected,n.disabled],kt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline,p.clear,p.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},S={size:s.medium,rounded:u.medium,fillMode:p.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},v=t=>{let{size:e=S.size,rounded:a=S.rounded,fillMode:i=S.fillMode,themeColor:r=S.themeColor,showArrow:c=S.showArrow,arrowIconName:d=S.arrowIconName,hover:x,focus:f,active:g,selected:b,disabled:N,icon:C,text:M,iconClassName:R,...V}=t,Q=C!==void 0,T=t.children!==void 0;return Oe("button",{...V,className:l(t.className,D,m(D,{size:e,rounded:a,fillMode:i,themeColor:r}),z(D,{hover:x,focus:f,active:g,disabled:N,selected:b}),{"k-icon-button":!M&&!T&&Q}),children:[C&&E(h,{className:l(R,"k-button-icon"),icon:C}),M?Oe(St,{children:[M&&E("span",{className:"k-button-text",children:M}),t.children]}):t.children&&E("span",{className:"k-button-text",children:t.children}),c&&E("span",{className:"k-menu-button-arrow k-button-arrow",children:E(h,{icon:d})})]})};v.states=Nt;v.options=kt;v.className=D;v.defaultOptions=S;import{jsx as pn}from"react/jsx-runtime";import{jsx as hn}from"react/jsx-runtime";import{jsx as Mt}from"react/jsx-runtime";var Le=t=>Mt(v,{children:"Button",...t});import{Fragment as Tt,jsx as re}from"react/jsx-runtime";var Cn=t=>re(we,{suffix:re(Tt,{children:re(Le,{fillMode:"clear",children:"Send"})}),...t});export{Cn as TextboxSuffix};