UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

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