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