@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 14.3 kB
JavaScript
var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((n,l)=>e[l]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var x=(t,e)=>a({[`${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"}),H=(t,e)=>a({"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"},p={small:"small",medium:"medium",large:"large",full:"full"},u={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},i={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 We}from"react/jsx-runtime";var D="k-actions",De=[],Ue={},ne={alignment:"start",orientation:"horizontal"},P=t=>{let{alignment:e=ne.alignment,orientation:n=ne.orientation,...l}=t;return We("div",{...l,className:a(D,{[`${D}-${e}`]:e,[`${D}-${n}`]:n},t.className),children:t.children})};P.states=De;P.options=Ue;P.className=D;P.defaultOptions=ne;import{jsx as Ye}from"react/jsx-runtime";var Qe="k-actionsheet-footer",Se={alignment:"stretched",orientation:"horizontal"},ae=t=>{let{alignment:e=Se.alignment,orientation:n=Se.orientation,template:l,as:r=l?"div":P,...c}=t;return Ye(r,{...c,...!l&&{alignment:e,orientation:n},className:a(t.className,Qe),children:t.children})};import{jsx as et}from"react/jsx-runtime";var U="k-input",Ze=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],je={size:[s.small,s.medium,s.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},W={size:s.medium,rounded:s.medium,fillMode:u.solid},N=t=>{let{hover:e,focus:n,disabled:l,invalid:r,valid:c,loading:d,readonly:f,size:m=W.size,rounded:h=W.rounded,fillMode:v=W.fillMode,...g}=t;return et("span",{...g,className:a(t.className,U,x(U,{size:m,rounded:h,fillMode:v}),H(U,{hover:e,focus:n,disabled:l,invalid:r,valid:c,loading:d,readonly:f}))})};N.states=Ze;N.options=je;N.className=U;N.defaultOptions=W;import{jsx as nt}from"react/jsx-runtime";var Q="k-picker",tt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],ot={size:[s.small,s.medium,s.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},Y={size:s.medium,rounded:p.medium,fillMode:u.solid},Z=t=>{let{hover:e,focus:n,disabled:l,invalid:r,valid:c,loading:d,readonly:f,size:m=Y.size,rounded:h=Y.rounded,fillMode:v=Y.fillMode,...g}=t;return nt("span",{...g,className:a(t.className,Q,x(Q,{size:m,rounded:h,fillMode:v}),H(Q,{hover:e,focus:n,disabled:l,invalid:r,valid:c,loading:d,readonly:f})),children:t.children})};Z.states=tt;Z.options=ot;Z.className=Q;Z.defaultOptions=Y;import{Fragment as lt,jsx as ye}from"react/jsx-runtime";var se="k-icon k-font-icon",at=[],st={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},it={},V=t=>{let{size:e,themeColor:n,icon:l,rotate:r,flip:c,...d}=t;return l?ye("span",{...d,className:a(t.className,se,x(se,{size:e}),{[`k-i-${l}`]:l,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):ye(lt,{})};V.states=at;V.options=st;V.className=se;V.defaultOptions=it;var ke=V;import{Fragment as dt,jsx as j}from"react/jsx-runtime";var ie="k-icon k-svg-icon",rt=[],ct={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},Me={viewBox:"0 0 24 24"},$=t=>{let{size:e,themeColor:n,rotate:l,flip:r,viewBox:c=Me.viewBox,icon:d,...f}=t;if(!d)return j(dt,{});d==="none"&&{...f,className:a(t.className,ie,"k-none")};let m=typeof d=="object"&&d.name&&d.name;return j("span",{...f,className:a(t.className,ie,x("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:j("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})})};$.states=rt;$.options=ct;$.className=ie;$.defaultOptions=Me;var le=$;import*as Te from"@progress/kendo-svg-icons";import{Fragment as Ae,jsx as F}from"react/jsx-runtime";var pt=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ut=[],mt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},re={viewBox:"0 0 24 24",type:"svg"},b=t=>{let{size:e,themeColor:n,icon:l,type:r=re.type,rotate:c,flip:d,viewBox:f=re.viewBox,...m}=t;if(!l)return F(Ae,{});if(r==="svg"){if(l==="none")return F(le,{...m,icon:l,size:e});let h=pt(`${l}-icon`);return Te[h]?F(le,{...m,icon:Te[h],size:e,themeColor:n,rotate:c,flip:d,viewBox:f}):F(Ae,{})}return F(ke,{...m,icon:l,size:e,themeColor:n,rotate:c,flip:d})};b.states=ut;b.options=mt;b.defaultOptions=re;import{Fragment as ht,jsx as ce}from"react/jsx-runtime";var ze="k-clear-value",ft=[o.disabled,o.loading,o.readonly],xt={},M=t=>{let{disabled:e,loading:n,readonly:l,value:r}=t;return e||l||n||!r?ce(ht,{}):ce("span",{className:a(t.className,ze),children:ce(b,{icon:"x"})})};M.states=ft;M.options=xt;M.className=ze;import{jsx as Nt}from"react/jsx-runtime";var de="k-input-inner",bt=[],vt={},ee={type:"text",autocomplete:"off",value:"",placeholder:""},T=t=>{let{value:e=ee.value,type:n=ee.type,placeholder:l=ee.placeholder,autocomplete:r=ee.autocomplete,...c}=t;return Nt("input",{...c,type:n,className:a(t.className,de,x(de,t)),placeholder:l,autoComplete:r,defaultValue:e})};T.states=bt;T.options=vt;T.className=de;import{jsx as Ce,jsxs as St}from"react/jsx-runtime";var pe="k-input-inner",gt=[],It={},ue=t=>{let{value:e,placeholder:n,showValue:l,valueIcon:r,valueIconName:c,...d}=t;return St("span",{...d,className:a(t.className,pe,x(pe,t)),children:[r,!r&&c&&Ce(b,{className:"k-input-value-icon",icon:c}),l&&!e&&n,l&&e&&Ce("span",{className:"k-input-value-text",children:e})]})};ue.states=gt;ue.options=It;ue.className=pe;import{jsx as Mt}from"react/jsx-runtime";var me="k-input-inner",yt=[],kt={},Oe={value:"",placeholder:""},fe=t=>{let{value:e=Oe.value,placeholder:n=Oe.placeholder,rows:l,...r}=t;return Mt("textarea",{...r,className:a(t.className,me,x(me,t)),placeholder:n,rows:l,defaultValue:e})};fe.states=yt;fe.options=kt;fe.className=me;import{Fragment as At,jsx as Le}from"react/jsx-runtime";var we="k-input-loading-icon",Tt=[o.disabled,o.loading],R=t=>{let{disabled:e,loading:n}=t;return e||!n?Le(At,{}):Le("span",{className:a(t.className,we,"k-icon k-i-loading")})};R.states=Tt;R.className=we;import{Fragment as Ot,jsx as Ee}from"react/jsx-runtime";var He="k-input-validation-icon",zt=[o.valid,o.invalid,o.disabled,o.loading],Ct={},A=t=>{let{valid:e,invalid:n,disabled:l,loading:r}=t,c=n?"warning-circle":"check-circle";return l||r||!!!(e||n)?Ee(Ot,{}):Ee(b,{className:a(He),icon:c})};A.states=zt;A.options=Ct;A.className=He;import{Fragment as Et,jsx as Pe}from"react/jsx-runtime";var Lt="k-input-prefix",wt={direction:"horizontal"},Re=t=>{let{direction:e=wt.direction,...n}=t;return t.children?Pe("span",{...n,className:a(Lt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Pe(Et,{})};import{Fragment as Rt,jsx as Be}from"react/jsx-runtime";var Ht="k-input-suffix",Pt={direction:"horizontal"},Ke=t=>{let{direction:e=Pt.direction,...n}=t;return t.children?Be("span",{...n,className:a(Ht,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Be(Rt,{})};import{jsx as mn}from"react/jsx-runtime";import{jsx as bn}from"react/jsx-runtime";import{jsx as Kt}from"react/jsx-runtime";var Ve="k-input-separator",Bt={direction:"vertical"},xe=t=>{let{direction:e=Bt.direction,...n}=t;return Kt("span",{...n,className:a(Ve,t.className,{[`${Ve}-${e}`]:e})})};import{jsx as _,jsxs as Ft}from"react/jsx-runtime";var $e="k-searchbox",Vt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading],$t={size:[s.small,s.medium,s.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},he={showIcon:!0,icon:"search",size:N.defaultOptions.size,rounded:N.defaultOptions.rounded,fillMode:N.defaultOptions.fillMode},B=t=>{let{value:e,placeholder:n,size:l,rounded:r,fillMode:c,hover:d,focus:f,valid:m,invalid:h,required:v,loading:g,disabled:k,showIcon:I=he.showIcon,icon:L=he.icon,...w}=t;return Ft(N,{...w,size:l,rounded:r,fillMode:c,hover:d,focus:f,valid:m,invalid:h,required:v,loading:g,disabled:k,className:a(t.className,$e),children:[I&&_(b,{className:"k-input-icon",icon:L}),_(T,{placeholder:n,value:e}),_(R,{...t}),_(A,{...t}),_(M,{...t})]})};B.states=Vt;B.options=$t;B.className=$e;B.defaultOptions=he;import{jsx as qn}from"react/jsx-runtime";import{Fragment as Fe,jsx as S,jsxs as be}from"react/jsx-runtime";var _e="k-textbox",_t=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],Xt={size:[s.small,s.medium,s.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},z={showClearButton:!0,showValidationIcon:!0,size:N.defaultOptions.size,rounded:N.defaultOptions.rounded,fillMode:N.defaultOptions.fillMode,separators:!0},K=t=>{let{size:e=z.size,rounded:n=z.rounded,fillMode:l=z.fillMode,separators:r=z.separators,showClearButton:c=z.showClearButton,showValidationIcon:d=z.showValidationIcon,prefix:f,suffix:m,type:h,value:v,placeholder:g,hover:k,focus:I,valid:L,invalid:w,required:oe,loading:E,disabled:G,readonly:Ie,...Ge}=t;return be(N,{...Ge,size:e,rounded:n,fillMode:l,hover:k,focus:I,valid:L,invalid:w,required:oe,loading:E,disabled:G,readonly:Ie,className:a(t.className,_e),children:[f&&be(Fe,{children:[S(Re,{children:f}),r&&S(xe,{})]}),S(T,{placeholder:g,value:v,type:h}),d&&S(A,{valid:L,invalid:w,loading:E,disabled:G}),S(R,{loading:E,disabled:G}),c&&S(M,{loading:E,disabled:G,readonly:Ie,value:v}),m&&be(Fe,{children:[r&&S(xe,{}),S(Ke,{children:m})]})]})};K.states=_t;K.options=Xt;K.className=_e;K.defaultOptions=z;import{jsx as ta}from"react/jsx-runtime";import{Fragment as la,jsx as ia}from"react/jsx-runtime";import{Fragment as Gt,jsx as X,jsxs as qe}from"react/jsx-runtime";var te="k-button",qt=[o.hover,o.focus,o.active,o.selected,o.disabled],Jt={size:[s.small,s.medium,s.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline,u.clear,u.link],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark,i.inverse]},C={size:s.medium,rounded:p.medium,fillMode:u.solid,themeColor:i.base,showArrow:!1,arrowIconName:"caret-alt-down"},O=t=>{let{size:e=C.size,rounded:n=C.rounded,fillMode:l=C.fillMode,themeColor:r=C.themeColor,showArrow:c=C.showArrow,arrowIconName:d=C.arrowIconName,hover:f,focus:m,active:h,selected:v,disabled:g,icon:k,text:I,iconClassName:L,...w}=t,oe=k!==void 0,E=t.children!==void 0;return qe("button",{...w,className:a(t.className,te,x(te,{size:e,rounded:n,fillMode:l,themeColor:r}),H(te,{hover:f,focus:m,active:h,disabled:g,selected:v}),{"k-icon-button":!I&&!E&&oe}),children:[k&&X(b,{className:a(L,"k-button-icon"),icon:k}),I?qe(Gt,{children:[I&&X("span",{className:"k-button-text",children:I}),t.children]}):t.children&&X("span",{className:"k-button-text",children:t.children}),c&&X("span",{className:"k-menu-button-arrow k-button-arrow",children:X(b,{icon:d})})]})};O.states=qt;O.options=Jt;O.className=te;O.defaultOptions=C;import{jsx as xa}from"react/jsx-runtime";import{jsx as Na}from"react/jsx-runtime";import{jsx as ya}from"react/jsx-runtime";import{Fragment as Pa,jsx as Ha}from"react/jsx-runtime";import{jsx as y,jsxs as ve}from"react/jsx-runtime";var Je="k-actionsheet-titlebar",Dt={},q=t=>{let{title:e,subtitle:n,actionsStart:l,actionsEnd:r,filter:c,input:d,inputValue:f,inputPlaceholder:m,adaptive:h,children:v,...g}=t;return ve("div",{...g,className:a(t.className,Je),children:[ve("div",{className:"k-actionsheet-titlebar-group",children:[l&&y("div",{className:"k-actionsheet-actions",children:l}),!v&&ve("div",{className:"k-actionsheet-title",children:[e&&y("div",{className:"k-text-center",children:e}),n&&y("div",{className:"k-actionsheet-subtitle k-text-center",children:n})]}),v&&y("div",{className:"k-actionsheet-title",children:v}),r&&y("div",{className:"k-actionsheet-actions",children:r})]}),(d||c)&&y("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter",children:d?y(K,{value:f,placeholder:m,size:h?"large":"medium"}):y(B,{placeholder:"Filter",size:h?"large":"medium"})})]})};q.className=Je;q.defaultOptions=Dt;import{jsx as Ne,jsxs as Yt}from"react/jsx-runtime";var ge="k-actionsheet-view",Ut=[],Wt={},Qt={},J=t=>{let{adaptive:e,animated:n,children:l,header:r,footer:c,...d}=t,f=r?.type===q&&Ne(q,{adaptive:e,...r?.props}),m=c?.type===ae&&Ne(ae,{...c?.props});return Yt("div",{...d,className:a(t.className,ge,{[`${ge}-animated`]:n}),children:[f,Ne("div",{className:"k-actionsheet-content",children:l}),m]})};J.states=Ut;J.options=Wt;J.className=ge;J.defaultOptions=Qt;var Qa=J;export{ge as ACTIONSHEETVIEW_CLASSNAME,J as ActionSheetView,Qa as default};