UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 11.2 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,r)=>e[r]||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});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"};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},b=t=>{let{hover:e,focus:a,disabled:r,invalid:i,valid:c,loading:d,readonly:x,size:f=F.size,rounded:I=F.rounded,fillMode:g=F.fillMode,...N}=t;return Pe("span",{...N,className:l(t.className,$,m($,{size:f,rounded:I,fillMode:g}),z($,{hover:e,focus:a,disabled:r,invalid:i,valid:c,loading:d,readonly:x}))})};b.states=Be;b.options=He;b.className=$;b.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:r,invalid:i,valid:c,loading:d,readonly:x,size:f=q.size,rounded:I=q.rounded,fillMode:g=q.fillMode,...N}=t;return Ve("span",{...N,className:l(t.className,_,m(_,{size:f,rounded:I,fillMode:g}),z(_,{hover:e,focus:a,disabled:r,invalid:i,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:r,rotate:i,flip:c,...d}=t;return r?ce("span",{...d,className:l(t.className,W,m(W,{size:e}),{[`k-i-${r}`]:r,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"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:r,flip:i,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-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="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:r,type:i=j.type,rotate:c,flip:d,viewBox:x=j.viewBox,...f}=t;if(!r)return L(fe,{});if(i==="svg"){if(r==="none")return L(Z,{...f,icon:r,size:e});let I=Xe(`${r}-icon`);return me[I]?L(Z,{...f,icon:me[I],size:e,themeColor:a,rotate:c,flip:d,viewBox:x}):L(fe,{})}return L(ue,{...f,icon:r,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:r,value:i}=t;return e||r||a||!i?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:r=X.placeholder,autocomplete:i=X.autocomplete,...c}=t;return et("input",{...c,type:a,className:l(t.className,te,m(te,t)),placeholder:r,autoComplete:i,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:r,valueIcon:i,valueIconName:c,...d}=t;return nt("span",{...d,className:l(t.className,oe,m(oe,t)),children:[i,!i&&c&&he(h,{className:"k-input-value-icon",icon:c}),r&&!e&&a,r&&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={},Ie={value:"",placeholder:""},ae=t=>{let{value:e=Ie.value,placeholder:a=Ie.placeholder,rows:r,...i}=t;return lt("textarea",{...i,className:l(t.className,se,m(se,t)),placeholder:a,rows:r,defaultValue:e})};ae.states=st;ae.options=at;ae.className=se;import{Fragment as it,jsx as be}from"react/jsx-runtime";var ge="k-input-loading-icon",rt=[n.disabled,n.loading],J=t=>{let{disabled:e,loading:a}=t;return e||!a?be(it,{}):be("span",{className:l(t.className,ge,"k-icon k-i-loading")})};J.states=rt;J.className=ge;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:r,loading:i}=t,c=a?"warning-circle":"check-circle";return r||i||!!!(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 It,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(It,{})};import{jsx as Ao}from"react/jsx-runtime";import{jsx as Eo}from"react/jsx-runtime";import{jsx as gt}from"react/jsx-runtime";var Te="k-input-separator",bt={direction:"vertical"},le=t=>{let{direction:e=bt.direction,...a}=t;return gt("span",{...a,className:l(Te,t.className,{[`${Te}-${e}`]:e})})};import{Fragment as ze,jsx as y,jsxs as re}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:b.defaultOptions.size,rounded:b.defaultOptions.rounded,fillMode:b.defaultOptions.fillMode,separators:!0},P=t=>{let{size:e=k.size,rounded:a=k.rounded,fillMode:r=k.fillMode,separators:i=k.separators,showClearButton:c=k.showClearButton,showValidationIcon:d=k.showValidationIcon,prefix:x,suffix:f,type:I,value:g,placeholder:N,hover:C,focus:M,valid:R,invalid:V,required:Q,loading:T,disabled:K,readonly:de,...Ae}=t;return re(b,{...Ae,size:e,rounded:a,fillMode:r,hover:C,focus:M,valid:R,invalid:V,required:Q,loading:T,disabled:K,readonly:de,className:l(t.className,Ce),children:[x&&re(ze,{children:[y(ke,{children:x}),i&&y(le,{})]}),y(B,{placeholder:N,value:g,type:I}),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:g}),f&&re(ze,{children:[i&&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:r=S.fillMode,themeColor:i=S.themeColor,showArrow:c=S.showArrow,arrowIconName:d=S.arrowIconName,hover:x,focus:f,active:I,selected:g,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:r,themeColor:i}),z(D,{hover:x,focus:f,active:I,disabled:N,selected:g}),{"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 ie}from"react/jsx-runtime";var Cn=t=>ie(we,{suffix:ie(Tt,{children:ie(Le,{fillMode:"clear",children:"Send"})}),...t});export{Cn as TextboxSuffix};