@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 13.2 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 x=(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"}),E=(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"},p={small:"small",medium:"medium",large:"large",full:"full"},u={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"};import{jsx as Fe}from"react/jsx-runtime";var X="k-input",Ve=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],$e={size:[n.small,n.medium,n.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},G={size:n.medium,rounded:n.medium,fillMode:u.solid},g=t=>{let{hover:e,focus:s,disabled:i,invalid:r,valid:c,loading:d,readonly:f,size:m=G.size,rounded:h=G.rounded,fillMode:v=G.fillMode,...I}=t;return Fe("span",{...I,className:l(t.className,X,x(X,{size:m,rounded:h,fillMode:v}),E(X,{hover:e,focus:s,disabled:i,invalid:r,valid:c,loading:d,readonly:f}))})};g.states=Ve;g.options=$e;g.className=X;g.defaultOptions=G;import{jsx as Xe}from"react/jsx-runtime";var J="k-picker",_e=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],qe={size:[n.small,n.medium,n.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},U={size:n.medium,rounded:p.medium,fillMode:u.solid},D=t=>{let{hover:e,focus:s,disabled:i,invalid:r,valid:c,loading:d,readonly:f,size:m=U.size,rounded:h=U.rounded,fillMode:v=U.fillMode,...I}=t;return Xe("span",{...I,className:l(t.className,J,x(J,{size:m,rounded:h,fillMode:v}),E(J,{hover:e,focus:s,disabled:i,invalid:r,valid:c,loading:d,readonly:f})),children:t.children})};D.states=_e;D.options=qe;D.className=J;D.defaultOptions=U;import{Fragment as De,jsx as xe}from"react/jsx-runtime";var j="k-icon k-font-icon",Ge=[],Je={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},Ue={},K=t=>{let{size:e,themeColor:s,icon:i,rotate:r,flip:c,...d}=t;return i?xe("span",{...d,className:l(t.className,j,x(j,{size:e}),{[`k-i-${i}`]:i,[`k-color-${s}`]:s,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):xe(De,{})};K.states=Ge;K.options=Je;K.className=j;K.defaultOptions=Ue;var he=K;import{Fragment as Ye,jsx as Q}from"react/jsx-runtime";var ee="k-icon k-svg-icon",Qe=[],We={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},be={viewBox:"0 0 24 24"},V=t=>{let{size:e,themeColor:s,rotate:i,flip:r,viewBox:c=be.viewBox,icon:d,...f}=t;if(!d)return Q(Ye,{});d==="none"&&{...f,className:l(t.className,ee,"k-none")};let m=typeof d=="object"&&d.name&&d.name;return Q("span",{...f,className:l(t.className,ee,x("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:Q("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})})};V.states=Qe;V.options=We;V.className=ee;V.defaultOptions=be;var te=V;import*as ve from"@progress/kendo-svg-icons";import{Fragment as ge,jsx as $}from"react/jsx-runtime";var Ze=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),je=[],et={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},oe={viewBox:"0 0 24 24",type:"svg"},b=t=>{let{size:e,themeColor:s,icon:i,type:r=oe.type,rotate:c,flip:d,viewBox:f=oe.viewBox,...m}=t;if(!i)return $(ge,{});if(r==="svg"){if(i==="none")return $(te,{...m,icon:i,size:e});let h=Ze(`${i}-icon`);return ve[h]?$(te,{...m,icon:ve[h],size:e,themeColor:s,rotate:c,flip:d,viewBox:f}):$(ge,{})}return $(he,{...m,icon:i,size:e,themeColor:s,rotate:c,flip:d})};b.states=je;b.options=et;b.defaultOptions=oe;import{Fragment as nt,jsx as ne}from"react/jsx-runtime";var Ie="k-clear-value",tt=[o.disabled,o.loading,o.readonly],ot={},M=t=>{let{disabled:e,loading:s,readonly:i,value:r}=t;return e||i||s||!r?ne(nt,{}):ne("span",{className:l(t.className,Ie),children:ne(b,{icon:"x"})})};M.states=tt;M.options=ot;M.className=Ie;import{jsx as lt}from"react/jsx-runtime";var ae="k-input-inner",at=[],st={},W={type:"text",autocomplete:"off",value:"",placeholder:""},T=t=>{let{value:e=W.value,type:s=W.type,placeholder:i=W.placeholder,autocomplete:r=W.autocomplete,...c}=t;return lt("input",{...c,type:s,className:l(t.className,ae,x(ae,t)),placeholder:i,autoComplete:r,defaultValue:e})};T.states=at;T.options=st;T.className=ae;import{jsx as Ne,jsxs as dt}from"react/jsx-runtime";var se="k-input-inner",it=[],rt={},le=t=>{let{value:e,placeholder:s,showValue:i,valueIcon:r,valueIconName:c,...d}=t;return dt("span",{...d,className:l(t.className,se,x(se,t)),children:[r,!r&&c&&Ne(b,{className:"k-input-value-icon",icon:c}),i&&!e&&s,i&&e&&Ne("span",{className:"k-input-value-text",children:e})]})};le.states=it;le.options=rt;le.className=se;import{jsx as ut}from"react/jsx-runtime";var ie="k-input-inner",ct=[],pt={},ye={value:"",placeholder:""},re=t=>{let{value:e=ye.value,placeholder:s=ye.placeholder,rows:i,...r}=t;return ut("textarea",{...r,className:l(t.className,ie,x(ie,t)),placeholder:s,rows:i,defaultValue:e})};re.states=ct;re.options=pt;re.className=ie;import{Fragment as ft,jsx as Se}from"react/jsx-runtime";var ke="k-input-loading-icon",mt=[o.disabled,o.loading],P=t=>{let{disabled:e,loading:s}=t;return e||!s?Se(ft,{}):Se("span",{className:l(t.className,ke,"k-icon k-i-loading")})};P.states=mt;P.className=ke;import{Fragment as bt,jsx as Me}from"react/jsx-runtime";var Te="k-input-validation-icon",xt=[o.valid,o.invalid,o.disabled,o.loading],ht={},z=t=>{let{valid:e,invalid:s,disabled:i,loading:r}=t,c=s?"warning-circle":"check-circle";return i||r||!!!(e||s)?Me(bt,{}):Me(b,{className:l(Te),icon:c})};z.states=xt;z.options=ht;z.className=Te;import{Fragment as It,jsx as ze}from"react/jsx-runtime";var vt="k-input-prefix",gt={direction:"horizontal"},Ce=t=>{let{direction:e=gt.direction,...s}=t;return t.children?ze("span",{...s,className:l(vt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):ze(It,{})};import{Fragment as St,jsx as Oe}from"react/jsx-runtime";var Nt="k-input-suffix",yt={direction:"horizontal"},we=t=>{let{direction:e=yt.direction,...s}=t;return t.children?Oe("span",{...s,className:l(Nt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Oe(St,{})};import{jsx as $o}from"react/jsx-runtime";import{jsx as Xo}from"react/jsx-runtime";import{jsx as Mt}from"react/jsx-runtime";var Le="k-input-separator",kt={direction:"vertical"},de=t=>{let{direction:e=kt.direction,...s}=t;return Mt("span",{...s,className:l(Le,t.className,{[`${Le}-${e}`]:e})})};import{jsx as F,jsxs as Ct}from"react/jsx-runtime";var Ae="k-searchbox",Tt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading],zt={size:[n.small,n.medium,n.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},ce={showIcon:!0,icon:"search",size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode},B=t=>{let{value:e,placeholder:s,size:i,rounded:r,fillMode:c,hover:d,focus:f,valid:m,invalid:h,required:v,loading:I,disabled:k,showIcon:N=ce.showIcon,icon:L=ce.icon,...A}=t;return Ct(g,{...A,size:i,rounded:r,fillMode:c,hover:d,focus:f,valid:m,invalid:h,required:v,loading:I,disabled:k,className:l(t.className,Ae),children:[N&&F(b,{className:"k-input-icon",icon:L}),F(T,{placeholder:s,value:e}),F(P,{...t}),F(z,{...t}),F(M,{...t})]})};B.states=Tt;B.options=zt;B.className=Ae;B.defaultOptions=ce;import{jsx as vn}from"react/jsx-runtime";import{Fragment as He,jsx as y,jsxs as pe}from"react/jsx-runtime";var Ee="k-textbox",Ot=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],wt={size:[n.small,n.medium,n.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},C={showClearButton:!0,showValidationIcon:!0,size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode,separators:!0},R=t=>{let{size:e=C.size,rounded:s=C.rounded,fillMode:i=C.fillMode,separators:r=C.separators,showClearButton:c=C.showClearButton,showValidationIcon:d=C.showValidationIcon,prefix:f,suffix:m,type:h,value:v,placeholder:I,hover:k,focus:N,valid:L,invalid:A,required:Z,loading:H,disabled:q,readonly:fe,...Ke}=t;return pe(g,{...Ke,size:e,rounded:s,fillMode:i,hover:k,focus:N,valid:L,invalid:A,required:Z,loading:H,disabled:q,readonly:fe,className:l(t.className,Ee),children:[f&&pe(He,{children:[y(Ce,{children:f}),r&&y(de,{})]}),y(T,{placeholder:I,value:v,type:h}),d&&y(z,{valid:L,invalid:A,loading:H,disabled:q}),y(P,{loading:H,disabled:q}),c&&y(M,{loading:H,disabled:q,readonly:fe,value:v}),m&&pe(He,{children:[r&&y(de,{}),y(we,{children:m})]})]})};R.states=Ot;R.options=wt;R.className=Ee;R.defaultOptions=C;import{jsx as On}from"react/jsx-runtime";import{Fragment as Pn,jsx as En}from"react/jsx-runtime";import{Fragment as Ht,jsx as _,jsxs as Be}from"react/jsx-runtime";var Y="k-button",Lt=[o.hover,o.focus,o.active,o.selected,o.disabled],At={size:[n.small,n.medium,n.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline,u.clear,u.link],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark,a.inverse]},O={size:n.medium,rounded:p.medium,fillMode:u.solid,themeColor:a.base,showArrow:!1,arrowIconName:"caret-alt-down"},w=t=>{let{size:e=O.size,rounded:s=O.rounded,fillMode:i=O.fillMode,themeColor:r=O.themeColor,showArrow:c=O.showArrow,arrowIconName:d=O.arrowIconName,hover:f,focus:m,active:h,selected:v,disabled:I,icon:k,text:N,iconClassName:L,...A}=t,Z=k!==void 0,H=t.children!==void 0;return Be("button",{...A,className:l(t.className,Y,x(Y,{size:e,rounded:s,fillMode:i,themeColor:r}),E(Y,{hover:f,focus:m,active:h,disabled:I,selected:v}),{"k-icon-button":!N&&!H&&Z}),children:[k&&_(b,{className:l(L,"k-button-icon"),icon:k}),N?Be(Ht,{children:[N&&_("span",{className:"k-button-text",children:N}),t.children]}):t.children&&_("span",{className:"k-button-text",children:t.children}),c&&_("span",{className:"k-menu-button-arrow k-button-arrow",children:_(b,{icon:d})})]})};w.states=Lt;w.options=At;w.className=Y;w.defaultOptions=O;import{jsx as qn}from"react/jsx-runtime";import{jsx as Un}from"react/jsx-runtime";import{jsx as Yn}from"react/jsx-runtime";import{Fragment as da,jsx as ra}from"react/jsx-runtime";import{jsx as S,jsxs as ue}from"react/jsx-runtime";var Re="k-actionsheet-titlebar",Et={},me=t=>{let{title:e,subtitle:s,actionsStart:i,actionsEnd:r,filter:c,input:d,inputValue:f,inputPlaceholder:m,adaptive:h,children:v,...I}=t;return ue("div",{...I,className:l(t.className,Re),children:[ue("div",{className:"k-actionsheet-titlebar-group",children:[i&&S("div",{className:"k-actionsheet-actions",children:i}),!v&&ue("div",{className:"k-actionsheet-title",children:[e&&S("div",{className:"k-text-center",children:e}),s&&S("div",{className:"k-actionsheet-subtitle k-text-center",children:s})]}),v&&S("div",{className:"k-actionsheet-title",children:v}),r&&S("div",{className:"k-actionsheet-actions",children:r})]}),(d||c)&&S("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter",children:d?S(R,{value:f,placeholder:m,size:h?"large":"medium"}):S(B,{placeholder:"Filter",size:h?"large":"medium"})})]})};me.className=Re;me.defaultOptions=Et;var ga=me;export{Re as ACTIONSHEETHEADER_CLASSNAME,me as ActionSheetHeader,ga as default};