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