@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 12.5 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,r)=>e[r]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var f=(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"}),C=(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{Fragment as Ve,jsx as pe}from"react/jsx-runtime";var j="k-icon k-font-icon",Ee=[],Re={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]},Ke={},O=t=>{let{size:e,themeColor:a,icon:r,rotate:i,flip:c,...d}=t;return r?pe("span",{...d,className:l(t.className,j,f(j,{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"})}):pe(Ve,{})};O.states=Ee;O.options=Re;O.className=j;O.defaultOptions=Ke;var me=O;import{Fragment as Fe,jsx as F}from"react/jsx-runtime";var ee="k-icon k-svg-icon",$e=[],_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={viewBox:"0 0 24 24"},L=t=>{let{size:e,themeColor:a,rotate:r,flip:i,viewBox:c=fe.viewBox,icon:d,...b}=t;if(!d)return F(Fe,{});d==="none"&&{...b,className:l(t.className,ee,"k-none")};let h=typeof d=="object"&&d.name&&d.name;return F("span",{...b,className:l(t.className,ee,f("k-icon",{size:e}),{[`k-svg-i-${h}`]:h,[`k-color-${a}`]:a,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:F("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})})};L.states=$e;L.options=_e;L.className=ee;L.defaultOptions=fe;var te=L;import*as xe from"@progress/kendo-svg-icons";import{Fragment as he,jsx as A}from"react/jsx-runtime";var qe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ge=[],Ue={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]},oe={viewBox:"0 0 24 24",type:"svg"},g=t=>{let{size:e,themeColor:a,icon:r,type:i=oe.type,rotate:c,flip:d,viewBox:b=oe.viewBox,...h}=t;if(!r)return A(he,{});if(i==="svg"){if(r==="none")return A(te,{...h,icon:r,size:e});let v=qe(`${r}-icon`);return xe[v]?A(te,{...h,icon:xe[v],size:e,themeColor:a,rotate:c,flip:d,viewBox:b}):A(he,{})}return A(me,{...h,icon:r,size:e,themeColor:a,rotate:c,flip:d})};g.states=Ge;g.options=Ue;g.defaultOptions=oe;import{Fragment as Je,jsx as H,jsxs as be}from"react/jsx-runtime";var q="k-button",Xe=[n.hover,n.focus,n.active,n.selected,n.disabled],De={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]},M={size:s.medium,rounded:u.medium,fillMode:p.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},m=t=>{let{size:e=M.size,rounded:a=M.rounded,fillMode:r=M.fillMode,themeColor:i=M.themeColor,showArrow:c=M.showArrow,arrowIconName:d=M.arrowIconName,hover:b,focus:h,active:v,selected:I,disabled:k,icon:B,text:T,iconClassName:V,...$}=t,Z=B!==void 0,w=t.children!==void 0;return be("button",{...$,className:l(t.className,q,f(q,{size:e,rounded:a,fillMode:r,themeColor:i}),C(q,{hover:b,focus:h,active:v,disabled:k,selected:I}),{"k-icon-button":!T&&!w&&Z}),children:[B&&H(g,{className:l(V,"k-button-icon"),icon:B}),T?be(Je,{children:[T&&H("span",{className:"k-button-text",children:T}),t.children]}):t.children&&H("span",{className:"k-button-text",children:t.children}),c&&H("span",{className:"k-menu-button-arrow k-button-arrow",children:H(g,{icon:d})})]})};m.states=Xe;m.options=De;m.className=q;m.defaultOptions=M;import{jsx as lo}from"react/jsx-runtime";import{jsx as uo}from"react/jsx-runtime";import{jsx as xo}from"react/jsx-runtime";import{jsx as Ye}from"react/jsx-runtime";var G="k-input",Qe=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],We={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},U={size:s.medium,rounded:s.medium,fillMode:p.solid},N=t=>{let{hover:e,focus:a,disabled:r,invalid:i,valid:c,loading:d,readonly:b,size:h=U.size,rounded:v=U.rounded,fillMode:I=U.fillMode,...k}=t;return Ye("span",{...k,className:l(t.className,G,f(G,{size:h,rounded:v,fillMode:I}),C(G,{hover:e,focus:a,disabled:r,invalid:i,valid:c,loading:d,readonly:b}))})};N.states=Qe;N.options=We;N.className=G;N.defaultOptions=U;import{jsx as et}from"react/jsx-runtime";var X="k-picker",Ze=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],je={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},D={size:s.medium,rounded:u.medium,fillMode:p.solid},J=t=>{let{hover:e,focus:a,disabled:r,invalid:i,valid:c,loading:d,readonly:b,size:h=D.size,rounded:v=D.rounded,fillMode:I=D.fillMode,...k}=t;return et("span",{...k,className:l(t.className,X,f(X,{size:h,rounded:v,fillMode:I}),C(X,{hover:e,focus:a,disabled:r,invalid:i,valid:c,loading:d,readonly:b})),children:t.children})};J.states=Ze;J.options=je;J.className=X;J.defaultOptions=D;import{Fragment as nt,jsx as ne}from"react/jsx-runtime";var ge="k-clear-value",tt=[n.disabled,n.loading,n.readonly],ot={},P=t=>{let{disabled:e,loading:a,readonly:r,value:i}=t;return e||r||a||!i?ne(nt,{}):ne("span",{className:l(t.className,ge),children:ne(g,{icon:"x"})})};P.states=tt;P.options=ot;P.className=ge;import{jsx as lt}from"react/jsx-runtime";var se="k-input-inner",st=[],at={},Q={type:"text",autocomplete:"off",value:"",placeholder:""},E=t=>{let{value:e=Q.value,type:a=Q.type,placeholder:r=Q.placeholder,autocomplete:i=Q.autocomplete,...c}=t;return lt("input",{...c,type:a,className:l(t.className,se,f(se,t)),placeholder:r,autoComplete:i,defaultValue:e})};E.states=st;E.options=at;E.className=se;import{jsx as ve,jsxs as ct}from"react/jsx-runtime";var ae="k-input-inner",rt=[],it={},le=t=>{let{value:e,placeholder:a,showValue:r,valueIcon:i,valueIconName:c,...d}=t;return ct("span",{...d,className:l(t.className,ae,f(ae,t)),children:[i,!i&&c&&ve(g,{className:"k-input-value-icon",icon:c}),r&&!e&&a,r&&e&&ve("span",{className:"k-input-value-text",children:e})]})};le.states=rt;le.options=it;le.className=ae;import{jsx as pt}from"react/jsx-runtime";var re="k-input-inner",dt=[],ut={},Ne={value:"",placeholder:""},ie=t=>{let{value:e=Ne.value,placeholder:a=Ne.placeholder,rows:r,...i}=t;return pt("textarea",{...i,className:l(t.className,re,f(re,t)),placeholder:a,rows:r,defaultValue:e})};ie.states=dt;ie.options=ut;ie.className=re;import{Fragment as ft,jsx as Ie}from"react/jsx-runtime";var ye="k-input-loading-icon",mt=[n.disabled,n.loading],W=t=>{let{disabled:e,loading:a}=t;return e||!a?Ie(ft,{}):Ie("span",{className:l(t.className,ye,"k-icon k-i-loading")})};W.states=mt;W.className=ye;import{Fragment as bt,jsx as ke}from"react/jsx-runtime";var Me="k-input-validation-icon",xt=[n.valid,n.invalid,n.disabled,n.loading],ht={},R=t=>{let{valid:e,invalid:a,disabled:r,loading:i}=t,c=a?"warning-circle":"check-circle";return r||i||!!!(e||a)?ke(bt,{}):ke(g,{className:l(Me),icon:c})};R.states=xt;R.options=ht;R.className=Me;import{Fragment as Nt,jsx as Se}from"react/jsx-runtime";var gt="k-input-prefix",vt={direction:"horizontal"},Te=t=>{let{direction:e=vt.direction,...a}=t;return t.children?Se("span",{...a,className:l(gt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Se(Nt,{})};import{Fragment as kt,jsx as we}from"react/jsx-runtime";var It="k-input-suffix",yt={direction:"horizontal"},Ce=t=>{let{direction:e=yt.direction,...a}=t;return t.children?we("span",{...a,className:l(It,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):we(kt,{})};import{jsx as nn}from"react/jsx-runtime";import{jsx as rn}from"react/jsx-runtime";import{jsx as St}from"react/jsx-runtime";var ze="k-input-separator",Mt={direction:"vertical"},ce=t=>{let{direction:e=Mt.direction,...a}=t;return St("span",{...a,className:l(ze,t.className,{[`${ze}-${e}`]:e})})};import{Fragment as Be,jsx as y,jsxs as de}from"react/jsx-runtime";var Oe="k-textbox",Tt=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],wt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},S={showClearButton:!0,showValidationIcon:!0,size:N.defaultOptions.size,rounded:N.defaultOptions.rounded,fillMode:N.defaultOptions.fillMode,separators:!0},z=t=>{let{size:e=S.size,rounded:a=S.rounded,fillMode:r=S.fillMode,separators:i=S.separators,showClearButton:c=S.showClearButton,showValidationIcon:d=S.showValidationIcon,prefix:b,suffix:h,type:v,value:I,placeholder:k,hover:B,focus:T,valid:V,invalid:$,required:Z,loading:w,disabled:_,readonly:ue,...Pe}=t;return de(N,{...Pe,size:e,rounded:a,fillMode:r,hover:B,focus:T,valid:V,invalid:$,required:Z,loading:w,disabled:_,readonly:ue,className:l(t.className,Oe),children:[b&&de(Be,{children:[y(Te,{children:b}),i&&y(ce,{})]}),y(E,{placeholder:k,value:I,type:v}),d&&y(R,{valid:V,invalid:$,loading:w,disabled:_}),y(W,{loading:w,disabled:_}),c&&y(P,{loading:w,disabled:_,readonly:ue,value:I}),h&&de(Be,{children:[i&&y(ce,{}),y(Ce,{children:h})]})]})};z.states=Tt;z.options=wt;z.className=Oe;z.defaultOptions=S;import{jsx as An}from"react/jsx-runtime";import{Fragment as Vn,jsx as Kn}from"react/jsx-runtime";import{Fragment as Xn,jsx as Un}from"react/jsx-runtime";import{Fragment as Bt,jsx as x,jsxs as Y}from"react/jsx-runtime";var Ae="k-chat",Ct=[],zt={},He={showToolbar:!0,showMessageBox:!0,showMoreButton:!0},K=t=>{let{dir:e,showToolbar:a,showMessageBox:r=He.showMessageBox,showMoreButton:i,...c}=t;return Y("div",{...c,className:l(Ae,t.className),dir:e,children:[x("div",{className:"k-message-list k-avatars",children:x("div",{className:"k-message-list-content",children:t.children})}),r&&x(z,{className:"k-message-box",placeholder:"Type a message...",suffix:Y(Bt,{children:[i&&x(m,{fillMode:"flat",icon:"more-horizontal"}),x(m,{fillMode:"flat",icon:"paper-plane",className:"k-chat-send"})]})}),a&&Y("div",{className:"k-chat-toolbar k-toolbar",children:[x(m,{className:l("k-scroll-button","k-scroll-button-left",e==="rtl"?"":"k-hidden"),icon:"chevron-left"}),Y("div",{className:"k-toolbar-group k-button-list",children:[x(m,{icon:"arrow-rotate-cw"}),x(m,{icon:"gear"}),x(m,{icon:"wrench"}),x(m,{icon:"plus"}),x(m,{icon:"search"}),x(m,{icon:"star"}),x(m,{icon:"bell"}),x(m,{icon:"question-circle"}),x(m,{icon:"trash"})]}),x(m,{className:l("k-scroll-button","k-scroll-button-right",e==="rtl"&&"k-hidden"),icon:"chevron-right"})]})]})};K.states=Ct;K.options=zt;K.className=Ae;K.defaultOptions=He;var os=K;export{K as Chat,os as default};