UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 13.8 kB
var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((n,r)=>t[r]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var x=(e,t)=>a({[`${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"}),y=(e,t)=>{let{valid:n,invalid:r,hover:i,focus:p,checked:c,active:u,selected:f,disabled:v,indeterminate:I,loading:T,empty:w,readonly:L,highlighted:S,...k}=t;return a({"k-valid":n,"k-invalid":r,"k-hover":i,"k-focus":p,"k-checked":c,"k-active":u,"k-selected":f,"k-disabled":v,"k-indeterminate":I&&!c,"k-loading":T,"k-empty":w,"k-readonly":L,"k-highlighted":S},Object.keys(k).reduce((A,b)=>(b.startsWith("k-")?A[b]=k[b]:A[`k-${b}`]=k[b],A),{}))};function J(e,t){if(!t)return{};let n=Array.isArray(t)?t:[t];return Object.fromEntries(n.map(r=>[`k-${r}`,!0]))}var l={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},d={small:"small",medium:"medium",large:"large",full:"full"},m={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},s={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"};import{Fragment as nt,jsx as ke}from"react/jsx-runtime";var ae="k-font-icon",et=[],tt={size:[l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},ot={},R=e=>{let{size:t,themeColor:n,icon:r,rotate:i,flip:p,...c}=e;return r?ke("span",{...c,className:a(e.className,ae,x(ae,{size:t}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"})}):ke(nt,{})};R.states=et;R.options=tt;R.className=ae;R.defaultOptions=ot;var ye=R;import{Fragment as rt,jsx as W}from"react/jsx-runtime";var se="k-svg-icon",at=[],st={size:[l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},Ee={viewBox:"0 0 24 24"},B=e=>{let{size:t,themeColor:n,rotate:r,flip:i,viewBox:p=Ee.viewBox,icon:c,...u}=e;if(!c)return W(rt,{});c==="none"&&{...u,className:a(e.className,se,"k-none")};let f=typeof c=="object"&&c.name&&c.name;return W("span",{...u,className:a(e.className,se,x("k-icon",{size:t}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:W("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:e.children})})};B.states=at;B.options=st;B.className=se;B.defaultOptions=Ee;var re=B;import*as le from"@progress/kendo-svg-icons";var Oe="icon",Ce="icons";import{Fragment as Le,jsx as V}from"react/jsx-runtime";var Q="k-icon",lt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),it=[],ct={size:[l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},ie={viewBox:"0 0 24 24",type:"svg"},N=e=>{let{size:t,themeColor:n,icon:r,type:i=ie.type,rotate:p,flip:c,viewBox:u=ie.viewBox,...f}=e;if(!r)return V(Le,{});if(i==="svg"){if(r==="none")return V(re,{...f,className:a(e.className,Q),icon:r,size:t});let v=le[r]?r:lt(`${r}-icon`);return le[v]?V(re,{...f,className:a(e.className,Q),icon:le[v],size:t,themeColor:n,rotate:p,flip:c,viewBox:u}):V(Le,{})}return V(ye,{...f,className:a(e.className,Q),icon:r,size:t,themeColor:n,rotate:p,flip:c})};N.states=it;N.options=ct;N.defaultOptions=ie;N.className=Q;N.moduleName=Oe;N.folderName=Ce;var ce="button",Ae=ce;import{Fragment as ut,jsx as D,jsxs as _e}from"react/jsx-runtime";var U="k-button",pt=["icon-button"],dt=[o.hover,o.focus,o.active,o.selected,o.disabled,o.generating],mt={size:[l.small,l.medium,l.large],rounded:[d.small,d.medium,d.large,d.full],fillMode:[m.solid,m.flat,m.outline,m.clear,m.link],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark,s.inverse]},_={size:l.medium,rounded:d.medium,fillMode:m.solid,themeColor:s.base,showArrow:!1,arrowIconName:"caret-alt-down"},h=e=>{let{size:t=_.size,rounded:n=_.rounded,fillMode:r=_.fillMode,themeColor:i=_.themeColor,showArrow:p=_.showArrow,arrowIconName:c=_.arrowIconName,variant:u,hover:f,focus:v,active:I,selected:T,disabled:w,icon:L,text:S,iconClassName:k,...A}=e,b=L!==void 0,K=e.children!==void 0;return _e("button",{...A,className:a(e.className,U,J(U,u),x(U,{size:t,rounded:n,fillMode:r,themeColor:i}),y(U,{hover:f,focus:v,active:I,disabled:w,selected:T}),{"k-icon-button":!S&&!K&&b}),children:[L&&D(N,{className:a(k,"k-button-icon"),icon:L}),S?_e(ut,{children:[S&&D("span",{className:"k-button-text",children:S}),e.children]}):e.children&&D("span",{className:"k-button-text",children:e.children}),p&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(N,{icon:c})})]})};h.states=dt;h.options=mt;h.variants=pt;h.className=U;h.defaultOptions=_;h.moduleName=ce;h.folderName=Ae;import{jsx as zo}from"react/jsx-runtime";import{jsx as Ro}from"react/jsx-runtime";import{jsx as Uo}from"react/jsx-runtime";var pe="textbox",Pe=pe;var $="input",Y=$;import{jsx as Nt}from"react/jsx-runtime";var Z="k-input",ft=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],xt={size:[l.small,l.medium,l.large],rounded:[d.small,d.medium,d.large,d.full],fillMode:[m.solid,m.flat,m.outline]},j={size:l.medium,rounded:l.medium,fillMode:m.solid},g=e=>{let{hover:t,focus:n,disabled:r,invalid:i,valid:p,loading:c,readonly:u,size:f=j.size,rounded:v=j.rounded,fillMode:I=j.fillMode,...T}=e;return Nt("span",{...T,className:a(e.className,Z,x(Z,{size:f,rounded:v,fillMode:I}),y(Z,{hover:t,focus:n,disabled:r,invalid:i,valid:p,loading:c,readonly:u}))})};g.states=ft;g.options=xt;g.className=Z;g.defaultOptions=j;g.moduleName=$;g.folderName=Y;import{jsx as bt}from"react/jsx-runtime";var ee="k-picker",ht=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],vt={size:[l.small,l.medium,l.large],rounded:[d.small,d.medium,d.large,d.full],fillMode:[m.solid,m.flat,m.outline]},te={size:l.medium,rounded:d.medium,fillMode:m.solid},H=e=>{let{hover:t,focus:n,disabled:r,invalid:i,valid:p,loading:c,readonly:u,size:f=te.size,rounded:v=te.rounded,fillMode:I=te.fillMode,...T}=e;return bt("span",{...T,className:a(e.className,ee,x(ee,{size:f,rounded:v,fillMode:I}),y(ee,{hover:t,focus:n,disabled:r,invalid:i,valid:p,loading:c,readonly:u})),children:e.children})};H.states=ht;H.options=vt;H.className=ee;H.defaultOptions=te;H.moduleName=$;H.folderName=Y;import{Fragment as It,jsx as de}from"react/jsx-runtime";var ze="k-clear-value",gt=[o.disabled,o.loading,o.readonly],Mt={},F=e=>{let{disabled:t,loading:n,readonly:r,value:i}=e;return t||r||n||!i?de(It,{}):de("span",{className:a(e.className,ze),children:de(N,{icon:"x"})})};F.states=gt;F.options=Mt;F.className=ze;import{jsx as kt}from"react/jsx-runtime";var me="k-input-inner",Tt=[],St={},oe={type:"text",autocomplete:"off",value:"",placeholder:""},X=e=>{let{value:t=oe.value,type:n=oe.type,placeholder:r=oe.placeholder,autocomplete:i=oe.autocomplete,...p}=e;return kt("input",{...p,type:n,className:a(e.className,me,x(me,e)),placeholder:r,autoComplete:i,defaultValue:t})};X.states=Tt;X.options=St;X.className=me;import{jsx as Ke,jsxs as Ot}from"react/jsx-runtime";var ue="k-input-inner",yt=[],Et={},fe=e=>{let{value:t,placeholder:n,showValue:r,valueIcon:i,valueIconName:p,...c}=e;return Ot("span",{...c,className:a(e.className,ue,x(ue,e)),children:[i,!i&&p&&Ke(N,{className:"k-input-value-icon",icon:p}),r&&!t&&n,r&&t&&Ke("span",{className:"k-input-value-text",children:t})]})};fe.states=yt;fe.options=Et;fe.className=ue;import{jsx as At}from"react/jsx-runtime";var xe="k-input-inner",Ct=[],Lt={},He={value:"",placeholder:""},Ne=e=>{let{value:t=He.value,placeholder:n=He.placeholder,rows:r,...i}=e;return At("textarea",{...i,className:a(e.className,xe,x(xe,e)),placeholder:n,rows:r,defaultValue:t})};Ne.states=Ct;Ne.options=Lt;Ne.className=xe;import{Fragment as Pt,jsx as we}from"react/jsx-runtime";var Re="k-input-loading-icon",_t=[o.disabled,o.loading],ne=e=>{let{disabled:t,loading:n}=e;return t||!n?we(Pt,{}):we("span",{className:a(e.className,Re,"k-icon k-i-loading")})};ne.states=_t;ne.className=Re;import{Fragment as Ht,jsx as Be}from"react/jsx-runtime";var Ve="k-input-validation-icon",zt=[o.valid,o.invalid,o.disabled,o.loading],Kt={},q=e=>{let{valid:t,invalid:n,disabled:r,loading:i}=e,p=n?"warning-circle":"check-circle";return r||i||!!!(t||n)?Be(Ht,{}):Be(N,{className:a(Ve),icon:p})};q.states=zt;q.options=Kt;q.className=Ve;import{Fragment as Bt,jsx as De}from"react/jsx-runtime";var wt="k-input-prefix",Rt={direction:"horizontal"},Ue=e=>{let{direction:t=Rt.direction,...n}=e;return e.children?De("span",{...n,className:a(wt,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):De(Bt,{})};import{Fragment as Ut,jsx as $e}from"react/jsx-runtime";var Vt="k-input-suffix",Dt={direction:"horizontal"},Fe=e=>{let{direction:t=Dt.direction,...n}=e;return e.children?$e("span",{...n,className:a(Vt,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):$e(Ut,{})};import{jsx as Kn}from"react/jsx-runtime";import{jsx as Bn}from"react/jsx-runtime";import{jsx as Ft}from"react/jsx-runtime";var Xe="k-input-separator",$t={direction:"vertical"},he=e=>{let{direction:t=$t.direction,...n}=e;return Ft("span",{...n,className:a(Xe,e.className,{[`${Xe}-${t}`]:t})})};import{Fragment as qe,jsx as E,jsxs as ve}from"react/jsx-runtime";var Ge="k-textbox",Xt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],qt={size:[l.small,l.medium,l.large],rounded:[d.small,d.medium,d.large,d.full],fillMode:[m.solid,m.flat,m.outline]},P={showClearButton:!0,showValidationIcon:!0,size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode,separators:!0},O=e=>{let{size:t=P.size,rounded:n=P.rounded,fillMode:r=P.fillMode,separators:i=P.separators,showClearButton:p=P.showClearButton,showValidationIcon:c=P.showValidationIcon,prefix:u,suffix:f,type:v,value:I,placeholder:T,hover:w,focus:L,valid:S,invalid:k,required:A,loading:b,disabled:K,readonly:Se,...je}=e;return ve(g,{...je,size:t,rounded:n,fillMode:r,hover:w,focus:L,valid:S,invalid:k,required:A,loading:b,disabled:K,readonly:Se,className:a(e.className,Ge),children:[u&&ve(qe,{children:[E(Ue,{children:u}),i&&E(he,{})]}),E(X,{placeholder:T,value:I,type:v}),c&&E(q,{valid:S,invalid:k,loading:b,disabled:K}),E(ne,{loading:b,disabled:K}),p&&E(F,{loading:b,disabled:K,readonly:Se,value:I}),f&&ve(qe,{children:[i&&E(he,{}),E(Fe,{children:f})]})]})};O.states=Xt;O.options=qt;O.className=Ge;O.defaultOptions=P;O.moduleName=pe;O.folderName=Pe;import{jsx as da}from"react/jsx-runtime";import{Fragment as ha,jsx as Na}from"react/jsx-runtime";import{Fragment as Sa,jsx as Ta}from"react/jsx-runtime";var be="skeleton",We=be;import{jsx as Qt}from"react/jsx-runtime";var ge="k-skeleton",Gt=["circle","text","rect"],Jt=[],Wt={},Me={variant:"text",shape:"text",animation:"pulse"},M=e=>{let{variant:t,shape:n,animation:r=Me.animation,...i}=e,p=`skeleton-${t||n||Me.variant}`;return Qt("span",{...i,className:a(e.className,ge,J(ge,p),{[`k-skeleton-${r}`]:r}),style:e.style})};M.states=Jt;M.options=Wt;M.variants=Gt;M.className=ge;M.defaultOptions=Me;M.moduleName=be;M.folderName=We;import{jsx as Ra}from"react/jsx-runtime";import{jsx as Yt}from"react/jsx-runtime";var Qe=e=>Yt(M,{shape:"rect",...e});import{jsx as Xa}from"react/jsx-runtime";var Ie="captcha",Ye=Ie;import{jsx as C,jsxs as G}from"react/jsx-runtime";var Te="k-captcha",Zt=[o.loading,o.valid,o.invalid,o.disabled],jt={},Ze={imgPath:"/packages/html/assets/captcha.jpg"},z=e=>{let{value:t,valid:n,invalid:r,loading:i,disabled:p,imgPath:c=Ze.imgPath,...u}=e;return G("div",{...u,className:a(e.className,Te,y(Te,{disabled:p}),{"k-captcha-loading":i}),children:[G("div",{className:"k-captcha-image-wrap k-hstack",children:[G("div",{className:"k-captcha-image",children:[C("img",{className:a({"k-hidden":i}),src:c}),i&&C(Qe,{style:{width:"100%",height:"100%"}})]}),G("div",{className:"k-captcha-image-controls k-vstack",children:[C(h,{icon:"volume-up",disabled:i===!0}),C(h,{icon:"arrow-rotate-cw",disabled:i===!0})]}),C("div",{className:"k-captcha-volume-control k-vstack k-pos-absolute k-hidden",children:C("div",{className:"k-widget k-slider k-slider-vertical"})})]}),G("div",{className:"k-captcha-input k-vstack",children:[C(O,{value:t,valid:n,invalid:r,disabled:i===!0}),n&&!i&&C("span",{className:"k-captcha-validation-message !k-text-success",children:"Verification Success"})]})]})};z.states=Zt;z.options=jt;z.className=Te;z.defaultOptions=Ze;z.moduleName=Ie;z.folderName=Ye;var as=z;export{Te as CAPTCHA_CLASSNAME,z as Captcha,as as default};