@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 12.7 kB
JavaScript
var s=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?s(...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)=>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"}),L=(e,t)=>{let{valid:n,invalid:r,hover:i,focus:d,checked:p,active:f,selected:u,disabled:b,indeterminate:I,loading:T,empty:w,readonly:k,highlighted:v,...y}=t;return s({"k-valid":n,"k-invalid":r,"k-hover":i,"k-focus":d,"k-checked":p,"k-active":f,"k-selected":u,"k-disabled":b,"k-indeterminate":I&&!p,"k-loading":T,"k-empty":w,"k-readonly":k,"k-highlighted":v},Object.keys(y).reduce((E,h)=>(h.startsWith("k-")?E[h]=y[h]:E[`k-${h}`]=y[h],E),{}))};function he(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"},c={small:"small",medium:"medium",large:"large",full:"full"},m={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},a={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 ee="floating-label",ge=ee;import{jsx as Ye,jsxs as Ie}from"react/jsx-runtime";var te="k-floating-label-container",Je=[o.hover,o.focus,o.valid,o.invalid,o.empty,o.disabled],We={},Qe={},A=e=>{let{hover:t,focus:n,disabled:r,invalid:i,valid:d,empty:p,label:f,optional:u,...b}=e;return Ie("span",{...b,className:s(e.className,te,L(te,{hover:t,focus:n,disabled:r,empty:p,valid:d,invalid:i})),children:[e.children,f&&Ie("label",{className:"k-floating-label",children:[f,u&&Ye("span",{className:"k-label-optional",children:"(Optional)"})]})]})};A.states=Je;A.options=We;A.className=te;A.defaultOptions=Qe;A.moduleName=ee;A.folderName=ge;var Me=A;var oe="textbox",Te=oe;var H="input",G=H;import{jsx as et}from"react/jsx-runtime";var X="k-input",Ze=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],je={size:[l.small,l.medium,l.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[m.solid,m.flat,m.outline]},q={size:l.medium,rounded:l.medium,fillMode:m.solid},g=e=>{let{hover:t,focus:n,disabled:r,invalid:i,valid:d,loading:p,readonly:f,size:u=q.size,rounded:b=q.rounded,fillMode:I=q.fillMode,...T}=e;return et("span",{...T,className:s(e.className,X,x(X,{size:u,rounded:b,fillMode:I}),L(X,{hover:t,focus:n,disabled:r,invalid:i,valid:d,loading:p,readonly:f}))})};g.states=Ze;g.options=je;g.className=X;g.defaultOptions=q;g.moduleName=H;g.folderName=G;import{jsx as nt}from"react/jsx-runtime";var J="k-picker",tt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],ot={size:[l.small,l.medium,l.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[m.solid,m.flat,m.outline]},W={size:l.medium,rounded:c.medium,fillMode:m.solid},B=e=>{let{hover:t,focus:n,disabled:r,invalid:i,valid:d,loading:p,readonly:f,size:u=W.size,rounded:b=W.rounded,fillMode:I=W.fillMode,...T}=e;return nt("span",{...T,className:s(e.className,J,x(J,{size:u,rounded:b,fillMode:I}),L(J,{hover:t,focus:n,disabled:r,invalid:i,valid:d,loading:p,readonly:f})),children:e.children})};B.states=tt;B.options=ot;B.className=J;B.defaultOptions=W;B.moduleName=H;B.folderName=G;import{Fragment as rt,jsx as ve}from"react/jsx-runtime";var ne="k-font-icon",at=[],st={size:[l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},lt={},P=e=>{let{size:t,themeColor:n,icon:r,rotate:i,flip:d,...p}=e;return r?ve("span",{...p,className:s(e.className,ne,x(ne,{size:t}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"})}):ve(rt,{})};P.states=at;P.options=st;P.className=ne;P.defaultOptions=lt;var ye=P;import{Fragment as dt,jsx as Q}from"react/jsx-runtime";var ae="k-svg-icon",it=[],pt={size:[l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},Le={viewBox:"0 0 24 24"},R=e=>{let{size:t,themeColor:n,rotate:r,flip:i,viewBox:d=Le.viewBox,icon:p,...f}=e;if(!p)return Q(dt,{});p==="none"&&{...f,className:s(e.className,ae,"k-none")};let u=typeof p=="object"&&p.name&&p.name;return Q("span",{...f,className:s(e.className,ae,x("k-icon",{size:t}),{[`k-svg-i-${u}`]:u,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:Q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof p=="object"?p.viewBox:d,dangerouslySetInnerHTML:typeof p=="object"?{__html:p.content}:void 0,children:p?void 0:e.children})})};R.states=it;R.options=pt;R.className=ae;R.defaultOptions=Le;var se=R;import*as le from"@progress/kendo-svg-icons";var Se="icon",Oe="icons";import{Fragment as ke,jsx as K}from"react/jsx-runtime";var Y="k-icon",ct=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),mt=[],ut={size:[l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},re={viewBox:"0 0 24 24",type:"svg"},N=e=>{let{size:t,themeColor:n,icon:r,type:i=re.type,rotate:d,flip:p,viewBox:f=re.viewBox,...u}=e;if(!r)return K(ke,{});if(i==="svg"){if(r==="none")return K(se,{...u,className:s(e.className,Y),icon:r,size:t});let b=le[r]?r:ct(`${r}-icon`);return le[b]?K(se,{...u,className:s(e.className,Y),icon:le[b],size:t,themeColor:n,rotate:d,flip:p,viewBox:f}):K(ke,{})}return K(ye,{...u,className:s(e.className,Y),icon:r,size:t,themeColor:n,rotate:d,flip:p})};N.states=mt;N.options=ut;N.defaultOptions=re;N.className=Y;N.moduleName=Se;N.folderName=Oe;import{Fragment as Nt,jsx as ie}from"react/jsx-runtime";var Ee="k-clear-value",ft=[o.disabled,o.loading,o.readonly],xt={},F=e=>{let{disabled:t,loading:n,readonly:r,value:i}=e;return t||r||n||!i?ie(Nt,{}):ie("span",{className:s(e.className,Ee),children:ie(N,{icon:"x"})})};F.states=ft;F.options=xt;F.className=Ee;import{jsx as gt}from"react/jsx-runtime";var pe="k-input-inner",bt=[],ht={},Z={type:"text",autocomplete:"off",value:"",placeholder:""},V=e=>{let{value:t=Z.value,type:n=Z.type,placeholder:r=Z.placeholder,autocomplete:i=Z.autocomplete,...d}=e;return gt("input",{...d,type:n,className:s(e.className,pe,x(pe,e)),placeholder:r,autoComplete:i,defaultValue:t})};V.states=bt;V.options=ht;V.className=pe;import{jsx as Ae,jsxs as Tt}from"react/jsx-runtime";var de="k-input-inner",It=[],Mt={},ce=e=>{let{value:t,placeholder:n,showValue:r,valueIcon:i,valueIconName:d,...p}=e;return Tt("span",{...p,className:s(e.className,de,x(de,e)),children:[i,!i&&d&&Ae(N,{className:"k-input-value-icon",icon:d}),r&&!t&&n,r&&t&&Ae("span",{className:"k-input-value-text",children:t})]})};ce.states=It;ce.options=Mt;ce.className=de;import{jsx as Lt}from"react/jsx-runtime";var me="k-input-inner",vt=[],yt={},Ce={value:"",placeholder:""},ue=e=>{let{value:t=Ce.value,placeholder:n=Ce.placeholder,rows:r,...i}=e;return Lt("textarea",{...i,className:s(e.className,me,x(me,e)),placeholder:n,rows:r,defaultValue:t})};ue.states=vt;ue.options=yt;ue.className=me;import{Fragment as Ot,jsx as _e}from"react/jsx-runtime";var ze="k-input-loading-icon",St=[o.disabled,o.loading],j=e=>{let{disabled:t,loading:n}=e;return t||!n?_e(Ot,{}):_e("span",{className:s(e.className,ze,"k-icon k-i-loading")})};j.states=St;j.className=ze;import{Fragment as At,jsx as Be}from"react/jsx-runtime";var we="k-input-validation-icon",kt=[o.valid,o.invalid,o.disabled,o.loading],Et={},U=e=>{let{valid:t,invalid:n,disabled:r,loading:i}=e,d=n?"warning-circle":"check-circle";return r||i||!!!(t||n)?Be(At,{}):Be(N,{className:s(we),icon:d})};U.states=kt;U.options=Et;U.className=we;import{Fragment as zt,jsx as He}from"react/jsx-runtime";var Ct="k-input-prefix",_t={direction:"horizontal"},Pe=e=>{let{direction:t=_t.direction,...n}=e;return e.children?He("span",{...n,className:s(Ct,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):He(zt,{})};import{Fragment as Ht,jsx as Re}from"react/jsx-runtime";var Bt="k-input-suffix",wt={direction:"horizontal"},Ke=e=>{let{direction:t=wt.direction,...n}=e;return e.children?Re("span",{...n,className:s(Bt,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):Re(Ht,{})};import{jsx as rn}from"react/jsx-runtime";import{jsx as mn}from"react/jsx-runtime";import{jsx as Rt}from"react/jsx-runtime";var Fe="k-input-separator",Pt={direction:"vertical"},fe=e=>{let{direction:t=Pt.direction,...n}=e;return Rt("span",{...n,className:s(Fe,e.className,{[`${Fe}-${t}`]:t})})};import{Fragment as Ve,jsx as S,jsxs as xe}from"react/jsx-runtime";var Ue="k-textbox",Kt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],Ft={size:[l.small,l.medium,l.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[m.solid,m.flat,m.outline]},C={showClearButton:!0,showValidationIcon:!0,size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode,separators:!0},O=e=>{let{size:t=C.size,rounded:n=C.rounded,fillMode:r=C.fillMode,separators:i=C.separators,showClearButton:d=C.showClearButton,showValidationIcon:p=C.showValidationIcon,prefix:f,suffix:u,type:b,value:I,placeholder:T,hover:w,focus:k,valid:v,invalid:y,required:E,loading:h,disabled:z,readonly:be,...qe}=e;return xe(g,{...qe,size:t,rounded:n,fillMode:r,hover:w,focus:k,valid:v,invalid:y,required:E,loading:h,disabled:z,readonly:be,className:s(e.className,Ue),children:[f&&xe(Ve,{children:[S(Pe,{children:f}),i&&S(fe,{})]}),S(V,{placeholder:T,value:I,type:b}),p&&S(U,{valid:v,invalid:y,loading:h,disabled:z}),S(j,{loading:h,disabled:z}),d&&S(F,{loading:h,disabled:z,readonly:be,value:I}),u&&xe(Ve,{children:[i&&S(fe,{}),S(Ke,{children:u})]})]})};O.states=Kt;O.options=Ft;O.className=Ue;O.defaultOptions=C;O.moduleName=oe;O.folderName=Te;import{jsx as Rn}from"react/jsx-runtime";import{Fragment as Dn,jsx as $n}from"react/jsx-runtime";var Ne="button",De=Ne;import{Fragment as Dt,jsx as $,jsxs as Ge}from"react/jsx-runtime";var D="k-button",Vt=["icon-button"],Ut=[o.hover,o.focus,o.active,o.selected,o.disabled,o.generating],$t={size:[l.small,l.medium,l.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[m.solid,m.flat,m.outline,m.clear,m.link],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark,a.inverse]},_={size:l.medium,rounded:c.medium,fillMode:m.solid,themeColor:a.base,showArrow:!1,arrowIconName:"caret-alt-down"},M=e=>{let{size:t=_.size,rounded:n=_.rounded,fillMode:r=_.fillMode,themeColor:i=_.themeColor,showArrow:d=_.showArrow,arrowIconName:p=_.arrowIconName,variant:f,hover:u,focus:b,active:I,selected:T,disabled:w,icon:k,text:v,iconClassName:y,...E}=e,h=k!==void 0,z=e.children!==void 0;return Ge("button",{...E,className:s(e.className,D,he(D,f),x(D,{size:t,rounded:n,fillMode:r,themeColor:i}),L(D,{hover:u,focus:b,active:I,disabled:w,selected:T}),{"k-icon-button":!v&&!z&&h}),children:[k&&$(N,{className:s(y,"k-button-icon"),icon:k}),v?Ge(Dt,{children:[v&&$("span",{className:"k-button-text",children:v}),e.children]}):e.children&&$("span",{className:"k-button-text",children:e.children}),d&&$("span",{className:"k-menu-button-arrow k-button-arrow",children:$(N,{icon:p})})]})};M.states=Ut;M.options=$t;M.variants=Vt;M.className=D;M.defaultOptions=_;M.moduleName=Ne;M.folderName=De;import{jsx as ea}from"react/jsx-runtime";import{jsx as aa}from"react/jsx-runtime";import{jsx as ia}from"react/jsx-runtime";import{Fragment as Ia,jsx as ga}from"react/jsx-runtime";import{jsx as Xe}from"react/jsx-runtime";var Ea=e=>Xe(Me,{label:"Label",empty:!0,children:Xe(O,{showClearButton:!1}),...e});export{Ea as FloatingLabelNormal};