@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 7.53 kB
JavaScript
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((s,i)=>e[i]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var v=(t,e)=>l({[`${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"}),F=(t,e)=>l({"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 n={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},m={small:"small",medium:"medium",large:"large",full:"full"},d={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},u={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{Fragment as re,jsx as G}from"react/jsx-runtime";var E="k-icon k-font-icon",ne=[],ie={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},se={},C=t=>{let{size:e,themeColor:s,icon:i,rotate:a,flip:c,...r}=t;return i?G("span",{...r,className:l(t.className,E,v(E,{size:e}),{[`k-i-${i}`]:i,[`k-color-${s}`]:s,[`k-rotate-${a}`]:a,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):G(re,{})};C.states=ne;C.options=ie;C.className=E;C.defaultOptions=se;var V=C;import{Fragment as de,jsx as O}from"react/jsx-runtime";var H="k-icon k-svg-icon",le=[],ae={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},U={viewBox:"0 0 24 24"},S=t=>{let{size:e,themeColor:s,rotate:i,flip:a,viewBox:c=U.viewBox,icon:r,...x}=t;if(!r)return O(de,{});r==="none"&&{...x,className:l(t.className,H,"k-none")};let p=typeof r=="object"&&r.name&&r.name;return O("span",{...x,className:l(t.className,H,v("k-icon",{size:e}),{[`k-svg-i-${p}`]:p,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:c,dangerouslySetInnerHTML:typeof r=="object"?{__html:r.content}:void 0,children:r?void 0:t.children})})};S.states=le;S.options=ae;S.className=H;S.defaultOptions=U;var R=S;import*as q from"@progress/kendo-svg-icons";import{Fragment as D,jsx as z}from"react/jsx-runtime";var ce=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),me=[],ue={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},_={viewBox:"0 0 24 24",type:"svg"},k=t=>{let{size:e,themeColor:s,icon:i,type:a=_.type,rotate:c,flip:r,viewBox:x=_.viewBox,...p}=t;if(!i)return z(D,{});if(a==="svg"){if(i==="none")return z(R,{...p,icon:i,size:e});let y=ce(`${i}-icon`);return q[y]?z(R,{...p,icon:q[y],size:e,themeColor:s,rotate:c,flip:r,viewBox:x}):z(D,{})}return z(V,{...p,icon:i,size:e,themeColor:s,rotate:c,flip:r})};k.states=me;k.options=ue;k.defaultOptions=_;import{Fragment as xe,jsx as B,jsxs as J}from"react/jsx-runtime";var T="k-button",pe=[u.hover,u.focus,u.active,u.selected,u.disabled],fe={size:[n.small,n.medium,n.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[d.solid,d.flat,d.outline,d.clear,d.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},h={size:n.medium,rounded:m.medium,fillMode:d.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},f=t=>{let{size:e=h.size,rounded:s=h.rounded,fillMode:i=h.fillMode,themeColor:a=h.themeColor,showArrow:c=h.showArrow,arrowIconName:r=h.arrowIconName,hover:x,focus:p,active:y,selected:P,disabled:L,icon:w,text:b,iconClassName:A,...$}=t,K=w!==void 0,te=t.children!==void 0;return J("button",{...$,className:l(t.className,T,v(T,{size:e,rounded:s,fillMode:i,themeColor:a}),F(T,{hover:x,focus:p,active:y,disabled:L,selected:P}),{"k-icon-button":!b&&!te&&K}),children:[w&&B(k,{className:l(A,"k-button-icon"),icon:w}),b?J(xe,{children:[b&&B("span",{className:"k-button-text",children:b}),t.children]}):t.children&&B("span",{className:"k-button-text",children:t.children}),c&&B("span",{className:"k-menu-button-arrow k-button-arrow",children:B(k,{icon:r})})]})};f.states=pe;f.options=fe;f.className=T;f.defaultOptions=h;import{jsx as je}from"react/jsx-runtime";import{jsx as no}from"react/jsx-runtime";import{jsx as lo}from"react/jsx-runtime";import{jsx as X}from"react/jsx-runtime";var Q="k-animation-container",he=[],ge={},W={positionMode:"absolute"},M=t=>{let{positionMode:e=W.positionMode,animationStyle:s,offset:i,...a}=t;return X("div",{...a,style:{...i,...t.style},className:l(t.className,Q,"k-animation-container-shown",{"k-animation-container-fixed":e==="fixed"}),children:X("div",{className:"k-child-animation-container",style:s,children:t.children})})};M.states=he;M.options=ge;M.className=Q;M.defaultOptions=W;import{jsx as Y}from"react/jsx-runtime";var Z="k-popup",ye=[],be={},j={positionMode:"absolute"},N=t=>{let{offset:e,positionMode:s=j.positionMode,animationStyle:i,...a}=t;return Y(M,{positionMode:s,offset:e,animationStyle:i,children:Y("div",{...a,className:l(t.className,Z),children:t.children})})};N.states=ye;N.options=be;N.className=Z;N.defaultOptions=j;import{Fragment as Me,jsx as ee,jsxs as Ne}from"react/jsx-runtime";var oe="k-menu-button",ve=[u.hover,u.focus,u.active,u.selected,u.disabled],ke={size:[n.small,n.medium,n.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[d.solid,d.flat,d.outline,d.clear,d.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},g={size:n.medium,rounded:m.medium,fillMode:d.solid,themeColor:o.base,showArrow:!0,arrowIconName:"caret-alt-down"},I=t=>{let{size:e=g.size,rounded:s=g.rounded,fillMode:i=g.fillMode,themeColor:a=g.themeColor,hover:c,focus:r,active:x,selected:p,disabled:y,icon:P,text:L,showArrow:w=g.showArrow,arrowIconName:b=g.arrowIconName,popup:A,opened:$,...K}=t;return Ne(Me,{children:[ee(f,{...K,className:l(t.className,oe),text:L,size:e,rounded:s,fillMode:i,themeColor:a,hover:c,focus:r,active:x,selected:p,disabled:y,icon:P,showArrow:w,arrowIconName:b}),$&&A&&ee(N,{className:"k-menu-popup",children:A})]})};I.states=ve;I.options=ke;I.className=oe;I.defaultOptions=g;var Io=I;export{oe as MENUBUTTON_CLASSNAME,I as MenuButton,Io as default};