@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 11.9 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((s,r)=>e[r]||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});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"};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:r,invalid:i,valid:d,empty:c,label:f,optional:m,...b}=t;return pe("span",{...b,className:l(t.className,Y,N(Y,{hover:e,focus:s,disabled:r,empty:c,valid:d,invalid:i})),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:r,invalid:i,valid:d,loading:c,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:r,invalid:i,valid:d,loading:c,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:r,invalid:i,valid:d,loading:c,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:r,invalid:i,valid:d,loading:c,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:r,rotate:i,flip:d,...c}=t;return r?me("span",{...c,className:l(t.className,Z,x(Z,{size:e}),{[`k-i-${r}`]:r,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="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:r,flip:i,viewBox:d=xe.viewBox,icon:c,...f}=t;if(!c)return X(Ze,{});c==="none"&&{...f,className:l(t.className,j,"k-none")};let m=typeof c=="object"&&c.name&&c.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-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:X("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:d,dangerouslySetInnerHTML:typeof c=="object"?{__html:c.content}:void 0,children:c?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:r,type:i=te.type,rotate:d,flip:c,viewBox:f=te.viewBox,...m}=t;if(!r)return B(be,{});if(i==="svg"){if(r==="none")return B(ee,{...m,icon:r,size:e});let b=je(`${r}-icon`);return he[b]?B(ee,{...m,icon:he[b],size:e,themeColor:s,rotate:d,flip:c,viewBox:f}):B(be,{})}return B(fe,{...m,icon:r,size:e,themeColor:s,rotate:d,flip:c})};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:r,value:i}=t;return e||r||s||!i?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 rt}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:r=J.placeholder,autocomplete:i=J.autocomplete,...d}=t;return rt("input",{...d,type:s,className:l(t.className,ne,x(ne,t)),placeholder:r,autoComplete:i,defaultValue:e})};P.states=st;P.options=lt;P.className=ne;import{jsx as Ie,jsxs as dt}from"react/jsx-runtime";var ae="k-input-inner",it=[],ct={},se=t=>{let{value:e,placeholder:s,showValue:r,valueIcon:i,valueIconName:d,...c}=t;return dt("span",{...c,className:l(t.className,ae,x(ae,t)),children:[i,!i&&d&&Ie(h,{className:"k-input-value-icon",icon:d}),r&&!e&&s,r&&e&&Ie("span",{className:"k-input-value-text",children:e})]})};se.states=it;se.options=ct;se.className=ae;import{jsx as mt}from"react/jsx-runtime";var le="k-input-inner",pt=[],ut={},Ne={value:"",placeholder:""},re=t=>{let{value:e=Ne.value,placeholder:s=Ne.placeholder,rows:r,...i}=t;return mt("textarea",{...i,className:l(t.className,le,x(le,t)),placeholder:s,rows:r,defaultValue:e})};re.states=pt;re.options=ut;re.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 Se}from"react/jsx-runtime";var ke="k-input-validation-icon",ht=[o.valid,o.invalid,o.disabled,o.loading],bt={},E=t=>{let{valid:e,invalid:s,disabled:r,loading:i}=t,d=s?"warning-circle":"check-circle";return r||i||!!!(e||s)?Se(gt,{}):Se(h,{className:l(ke),icon:d})};E.states=ht;E.options=bt;E.className=ke;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 kt,jsx as Ce}from"react/jsx-runtime";var yt="k-input-suffix",St={direction:"horizontal"},Le=t=>{let{direction:e=St.direction,...s}=t;return t.children?Ce("span",{...s,className:l(yt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Ce(kt,{})};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"},ie=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 ce}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]},S={showClearButton:!0,showValidationIcon:!0,size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode,separators:!0},L=t=>{let{size:e=S.size,rounded:s=S.rounded,fillMode:r=S.fillMode,separators:i=S.separators,showClearButton:d=S.showClearButton,showValidationIcon:c=S.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:de,...Pe}=t;return ce(g,{...Pe,size:e,rounded:s,fillMode:r,hover:z,focus:T,valid:K,invalid:V,required:W,loading:C,disabled:$,readonly:de,className:l(t.className,we),children:[f&&ce(Oe,{children:[v(Te,{children:f}),i&&v(ie,{})]}),v(P,{placeholder:y,value:I,type:b}),c&&v(E,{valid:K,invalid:V,loading:C,disabled:$}),v(D,{loading:C,disabled:$}),d&&v(H,{loading:C,disabled:$,readonly:de,value:I}),m&&ce(Oe,{children:[i&&v(ie,{}),v(Le,{children:m})]})]})};L.states=Ct;L.options=Lt;L.className=we;L.defaultOptions=S;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]},k={size:a.medium,rounded:p.medium,fillMode:u.solid,themeColor:n.base,showArrow:!1,arrowIconName:"caret-alt-down"},M=t=>{let{size:e=k.size,rounded:s=k.rounded,fillMode:r=k.fillMode,themeColor:i=k.themeColor,showArrow:d=k.showArrow,arrowIconName:c=k.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:r,themeColor:i}),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}),d&&R("span",{className:"k-menu-button-arrow k-button-arrow",children:R(h,{icon:c})})]})};M.states=zt;M.options=Ot;M.className=Q;M.defaultOptions=k;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",empty:!0,children:He(L,{showClearButton:!1}),...t});export{sa as FloatingLabelNormal};