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 ze}from"react/jsx-runtime";var E="k-input",Me=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Se={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,...I}=t;return ze("span",{...I,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=Me;b.options=Se;b.className=E;b.defaultOptions=K;import{jsx as Oe}from"react/jsx-runtime";var R="k-picker",Te=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Ce={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,...I}=t;return Oe("span",{...I,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=Te;V.options=Ce;V.className=R;V.defaultOptions=$;import{Fragment as Ae,jsx as le}from"react/jsx-runtime";var W="k-icon k-font-icon",Le=[],we={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]},Be={},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(Ae,{})};T.states=Le;T.options=we;T.className=W;T.defaultOptions=Be;var ie=T;import{Fragment as Ee,jsx as F}from"react/jsx-runtime";var X="k-icon k-svg-icon",He=[],Pe={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(Ee,{});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=He;C.options=Pe;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 Ke=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Re=[],$e={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=Ke(`${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=Re;h.options=$e;h.defaultOptions=Z;import{Fragment as _e,jsx as j}from"react/jsx-runtime";var pe="k-clear-value",Ve=[s.disabled,s.loading,s.readonly],Fe={},L=t=>{let{disabled:e,loading:a,readonly:i,value:r}=t;return e||i||a||!r?j(_e,{}):j("span",{className:l(t.className,pe),children:j(h,{icon:"x"})})};L.states=Ve;L.options=Fe;L.className=pe;import{jsx as Ge}from"react/jsx-runtime";var ee="k-input-inner",De=[],qe={},_={type:"text",autocomplete:"off",value:"",placeholder:""},w=t=>{let{value:e=_.value,type:a=_.type,placeholder:i=_.placeholder,autocomplete:r=_.autocomplete,...p}=t;return Ge("input",{...p,type:a,className:l(t.className,ee,m(ee,t)),placeholder:i,autoComplete:r,defaultValue:e})};w.states=De;w.options=qe;w.className=ee;import{jsx as ue,jsxs as Qe}from"react/jsx-runtime";var te="k-input-inner",Ue=[],Je={},oe=t=>{let{value:e,placeholder:a,showValue:i,valueIcon:r,valueIconName:p,...c}=t;return Qe("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=Ue;oe.options=Je;oe.className=te;import{jsx as Ye}from"react/jsx-runtime";var ne="k-input-inner",We=[],Xe={},me={value:"",placeholder:""},se=t=>{let{value:e=me.value,placeholder:a=me.placeholder,rows:i,...r}=t;return Ye("textarea",{...r,className:l(t.className,ne,m(ne,t)),placeholder:a,rows:i,defaultValue:e})};se.states=We;se.options=Xe;se.className=ne;import{Fragment as je,jsx as fe}from"react/jsx-runtime";var xe="k-input-loading-icon",Ze=[s.disabled,s.loading],D=t=>{let{disabled:e,loading:a}=t;return e||!a?fe(je,{}):fe("span",{className:l(t.className,xe,"k-icon k-i-loading")})};D.states=Ze;D.className=xe;import{Fragment as ot,jsx as he}from"react/jsx-runtime";var ge="k-input-validation-icon",et=[s.valid,s.invalid,s.disabled,s.loading],tt={},B=t=>{let{valid:e,invalid:a,disabled:i,loading:r}=t,p=a?"warning-circle":"check-circle";return i||r||!!!(e||a)?he(ot,{}):he(h,{className:l(ge),icon:p})};B.states=et;B.options=tt;B.className=ge;import{Fragment as uo,jsx as mo}from"react/jsx-runtime";import{Fragment as go,jsx as Io}from"react/jsx-runtime";import{jsx as vo}from"react/jsx-runtime";import{jsx as zo}from"react/jsx-runtime";import{jsx as Lo}from"react/jsx-runtime";import{Fragment as at,jsx as A,jsxs as Ie}from"react/jsx-runtime";var q="k-button",nt=[s.hover,s.focus,s.active,s.selected,s.disabled],st={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"},N=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:I,icon:y,text:k,iconClassName:U,...J}=t,Q=y!==void 0,ke=t.children!==void 0;return Ie("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:I,selected:v}),{"k-icon-button":!k&&!ke&&Q}),children:[y&&A(h,{className:l(U,"k-button-icon"),icon:y}),k?Ie(at,{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})})]})};N.states=nt;N.options=st;N.className=q;N.defaultOptions=M;import{jsx as Zo}from"react/jsx-runtime";import{jsx as on}from"react/jsx-runtime";import{jsx as ln}from"react/jsx-runtime";import{jsx as Ne,jsxs as rt}from"react/jsx-runtime";var be="k-spin-button",lt=[],it={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 rt("span",{...i,className:l(be,t.className),children:[Ne(N,{className:"k-spinner-increase",icon:"caret-alt-up",rounded:null,size:e,fillMode:a}),Ne(N,{className:"k-spinner-decrease",icon:"caret-alt-down",rounded:null,size:e,fillMode:a})]})};z.states=lt;z.options=it;z.className=be;z.defaultOptions=ae;import{jsx as H,jsxs as pt}from"react/jsx-runtime";var ye="k-dateinput",dt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],ct={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:I,disabled:y,readonly:k,showClearButton:U,showSpinButton:J,...Q}=t;return pt(b,{...Q,size:e,rounded:a,fillMode:i,hover:c,focus:x,valid:f,invalid:g,required:v,loading:I,disabled:y,readonly:k,className:l(t.className,ye),children:[H(w,{placeholder:p,value:r}),H(B,{valid:f,invalid:g,loading:I,disabled:y}),H(D,{loading:I,disabled:y}),U&&H(L,{loading:I,disabled:y,readonly:k,value:r}),J&&H(z,{className:"k-input-spinner",size:e,fillMode:i})]})};P.states=dt;P.options=ct;P.className=ye;P.defaultOptions=G;var ve=P;import{jsx as ut}from"react/jsx-runtime";var zn=t=>ut(ve,{...t});export{zn as DateInputNormal};