UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 12.7 kB
var n=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?n(...t):typeof t=="object"?Object.keys(t).map((i,a)=>t[a]||t[i]&&i||null).filter(i=>i!==null).join(" "):t).filter(t=>!!t).join(" ");var h=(e,t)=>n({[`${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"}),k=(e,t)=>n({"k-valid":t.valid,"k-invalid":t.invalid,"k-hover":t.hover,"k-focus":t.focus,"k-checked":t.checked,"k-active":t.active,"k-selected":t.selected,"k-disabled":t.disabled,"k-indeterminate":t.indeterminate&&!t.checked,"k-loading":t.loading,"k-empty":t.empty,"k-readonly":t.readonly,"k-highlighted":t.highlighted});var o={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},g={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"},l={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 Gt,jsx as dt}from"react/jsx-runtime";var j="k-icon k-font-icon",Ot=[],Tt={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},Kt={},B=e=>{let{size:t,themeColor:i,icon:a,rotate:c,flip:m,...r}=e;return a?dt("span",{...r,className:n(e.className,j,h(j,{size:t}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${c}`]:c,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):dt(Gt,{})};B.states=Ot;B.options=Tt;B.className=j;B.defaultOptions=Kt;var ut=B;import{Fragment as Ht,jsx as X}from"react/jsx-runtime";var tt="k-icon k-svg-icon",wt=[],Et={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},ft={viewBox:"0 0 24 24"},R=e=>{let{size:t,themeColor:i,rotate:a,flip:c,viewBox:m=ft.viewBox,icon:r,...f}=e;if(!r)return X(Ht,{});r==="none"&&{...f,className:n(e.className,tt,"k-none")};let p=typeof r=="object"&&r.name&&r.name;return X("span",{...f,className:n(e.className,tt,h("k-icon",{size:t}),{[`k-svg-i-${p}`]:p,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),children:X("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:m,dangerouslySetInnerHTML:typeof r=="object"?{__html:r.content}:void 0,children:r?void 0:e.children})})};R.states=wt;R.options=Et;R.className=tt;R.defaultOptions=ft;var et=R;import*as xt from"@progress/kendo-svg-icons";import{Fragment as Lt,jsx as $}from"react/jsx-runtime";var Bt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Rt=[],$t={size:[o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},ot={viewBox:"0 0 24 24",type:"svg"},I=e=>{let{size:t,themeColor:i,icon:a,type:c=ot.type,rotate:m,flip:r,viewBox:f=ot.viewBox,...p}=e;if(!a)return $(Lt,{});if(c==="svg"){if(a==="none")return $(et,{...p,icon:a,size:t});let d=Bt(`${a}-icon`);return xt[d]?$(et,{...p,icon:xt[d],size:t,themeColor:i,rotate:m,flip:r,viewBox:f}):$(Lt,{})}return $(ut,{...p,icon:a,size:t,themeColor:i,rotate:m,flip:r})};I.states=Rt;I.options=$t;I.defaultOptions=ot;import{Fragment as _t,jsx as P,jsxs as ht}from"react/jsx-runtime";var J="k-button",Pt=[l.hover,l.focus,l.active,l.selected,l.disabled],Dt={size:[o.small,o.medium,o.large],rounded:[g.small,g.medium,g.large,g.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]},A={size:o.medium,rounded:g.medium,fillMode:M.solid,themeColor:s.base,showArrow:!1,arrowIconName:"caret-alt-down"},C=e=>{let{size:t=A.size,rounded:i=A.rounded,fillMode:a=A.fillMode,themeColor:c=A.themeColor,showArrow:m=A.showArrow,arrowIconName:r=A.arrowIconName,hover:f,focus:p,active:d,selected:y,disabled:b,icon:x,text:L,iconClassName:Z,...H}=e,z=x!==void 0,V=e.children!==void 0;return ht("button",{...H,className:n(e.className,J,h(J,{size:t,rounded:i,fillMode:a,themeColor:c}),k(J,{hover:f,focus:p,active:d,disabled:b,selected:y}),{"k-icon-button":!L&&!V&&z}),children:[x&&P(I,{className:n(Z,"k-button-icon"),icon:x}),L?ht(_t,{children:[L&&P("span",{className:"k-button-text",children:L}),e.children]}):e.children&&P("span",{className:"k-button-text",children:e.children}),m&&P("span",{className:"k-menu-button-arrow k-button-arrow",children:P(I,{icon:r})})]})};C.states=Pt;C.options=Dt;C.className=J;C.defaultOptions=A;import{jsx as eo}from"react/jsx-runtime";import{jsx as no}from"react/jsx-runtime";import{jsx as mo}from"react/jsx-runtime";import{jsx as Xt}from"react/jsx-runtime";var Vt="k-no-data",D=e=>Xt("span",{className:n(Vt,e.className),children:e.children});import{jsx as K,jsxs as bt}from"react/jsx-runtime";var st="k-list",Jt=[],Ft={size:[o.small,o.medium,o.large]},kt={size:o.medium},v=e=>{let{size:t=kt.size,virtualization:i,children:a,optionLabel:c,customValue:m,screenReaders:r,...f}=e,p,d,y,b,x=[];return a?a.map((L,Z)=>{L.type===N?(L.props.root===!0?(p=L.props.label,L.props.children.map((H,z)=>{x.push(K(u,{...H.props},`optChild-${z}-${new Date().getTime()}`))})):L.props.children.forEach((H,z)=>{let V="";z===0&&(V=L.props.label),x.push(K(u,{className:z===0?"k-first":"",...H.props,groupLabel:V},`groupLabel-${z}-${new Date().getTime()}`))}),d=K(N,{label:p,virtualization:i,children:x})):L.type===u&&(x.push(K(u,{...L.props},`${L.type}-${Z}`)),y=K(G,{virtualization:i,children:x}),r&&(b=bt(D,{className:"k-sr-only",children:[x.length," items found."]})))}):b=K(D,{children:"No data found."}),bt("div",{...f,className:n(e.className,st,h(st,{size:t}),{"k-virtual-list":i}),children:[c,m,d,y,b]})};v.states=Jt;v.options=Ft;v.className=st;v.defaultOptions=kt;import{jsx as O,jsxs as qt}from"react/jsx-runtime";var it="k-list",Ut=[],Wt={size:[o.small,o.medium,o.large]},gt={size:o.medium},T=e=>{let{size:t=gt.size,virtualization:i,children:a,...c}=e,m,r,f,p=[];return a?a.map((d,y)=>{d.type===N?(d.props.root===!0?(m=d.props.label,d.props.children.map((b,x)=>{p.push(O(u,{...b.props},`optChild-${x}-${new Date().getTime()}`))})):(p.push(O(yt,{...d.props,children:d.props.label},`listChild-${y}`)),d.props.children.map((b,x)=>{p.push(O(u,{...b.props},`fwOptChild-${x}-${new Date().getTime()}`))})),r=O(N,{label:m,virtualization:i,children:p})):d.type===u&&(p.push(O(u,{...d.props},`${d.type}-${y}`)),f=O(G,{virtualization:i,children:p}))}):f=O(D,{children:"No data found."}),qt("div",{...c,className:n(e.className,it,h(it,{size:t}),{"k-virtual-list":i}),children:[r,f]})};T.states=Ut;T.options=Wt;T.className=it;T.defaultOptions=gt;import{jsx as Nt}from"react/jsx-runtime";var F="k-checkbox",Qt=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],Yt={size:[o.small,o.medium,o.large],rounded:[g.small,g.medium,g.large,g.full]},nt={size:o.medium,rounded:g.medium},S=e=>{let{id:t,checked:i,indeterminate:a,hover:c,focus:m,disabled:r,invalid:f,valid:p,required:d,size:y=nt.size,rounded:b=nt.rounded,...x}=e;return Nt("span",{className:"k-checkbox-wrap",children:Nt("input",{...x,id:t,type:"checkbox",defaultChecked:i,required:d,className:n(e.className,F,h(F,{size:y,rounded:b}),k(F,{hover:c,focus:m,disabled:r,invalid:f,valid:p,indeterminate:a,checked:i}))})})};S.states=Qt;S.options=Yt;S.className=F;S.defaultOptions=nt;import{jsx as te}from"react/jsx-runtime";var vt="k-checkbox-list",Zt=[],jt={},Ct={layout:"vertical"},w=e=>{let{layout:t=Ct.layout,...i}=e;return te("ul",{...i,className:n(e.className,vt,{[`k-list-${t}`]:t}),children:e.children})};w.states=Zt;w.options=jt;w.className=vt;w.defaultOptions=Ct;import{jsx as ie}from"react/jsx-runtime";var It="k-checkbox-list-item",ee=[],oe={},se={},E=e=>{let{...t}=e;return ie("li",{...t,className:n(e.className,It),children:e.children})};E.states=ee;E.options=oe;E.className=It;E.defaultOptions=se;import{Fragment as Xo,jsx as Vo,jsxs as Jo}from"react/jsx-runtime";import{Fragment as Qo,jsx as qo,jsxs as Yo}from"react/jsx-runtime";import{Fragment as os,jsx as es,jsxs as ss}from"react/jsx-runtime";import{Fragment as ls,jsx as as,jsxs as ms}from"react/jsx-runtime";import{jsx as us}from"react/jsx-runtime";import{jsx as hs}from"react/jsx-runtime";import{jsx as U,jsxs as le}from"react/jsx-runtime";var at="k-list-item",ne=[l.hover,l.focus,l.selected,l.disabled],re={},ae={},u=e=>{let{text:t,groupLabel:i,group:a,showIcon:c,iconName:m,showCheckbox:r,checked:f,hover:p,focus:d,selected:y,disabled:b,...x}=e,L=t||e.children;return le("li",{...x,className:n(e.className,a?"k-list-group-item":at,k(at,{hover:p,focus:d,disabled:b,selected:y})),children:[r&&U(S,{checked:f}),c&&U(I,{icon:m}),U("span",{className:"k-list-item-text",children:L}),i&&i!==""&&U("div",{className:"k-list-item-group-label",children:i})]})};u.states=ne;u.options=re;u.className=at;u.defaultOptions=ae;import{jsx as lt,jsxs as ce}from"react/jsx-runtime";var me="k-list-content",G=e=>{let{virtualization:t,...i}=e;return ce("div",{...i,className:n(me,e.className),children:[lt("ul",{className:n("k-list-ul"),children:e.children}),t&&lt("div",{className:"k-height-container",children:lt("div",{})})]})};import{jsx as St}from"react/jsx-runtime";var pe="k-list-group-sticky-header",zt=e=>St("div",{className:n(pe,e.className),children:St("div",{className:"k-list-header-text",children:e.children})});import{Fragment as de,jsx as Mt,jsxs as ue}from"react/jsx-runtime";var N=e=>{let{virtualization:t,label:i}=e;return ue(de,{children:[i&&Mt(zt,{children:i}),e.children&&Mt(G,{virtualization:t,children:e.children})]})};import{jsx as At}from"react/jsx-runtime";var fe="k-list-group-item",yt=e=>At("li",{className:n(fe,e.className),children:At("span",{className:"k-list-item-text",children:e.children})});import{jsx as be}from"react/jsx-runtime";var mt="k-list-optionlabel",xe=[l.hover,l.focus,l.selected,l.disabled],Le={},he={},W=e=>{let{text:t,hover:i,focus:a,selected:c,disabled:m,...r}=e;return be("div",{...r,className:n(mt,k(mt,{hover:i,focus:a,selected:c,disabled:m})),children:t})};W.states=xe;W.options=Le;W.className=mt;W.defaultOptions=he;import{jsx as Ne}from"react/jsx-runtime";var ct="k-list-custom-value",ke=[l.hover,l.focus,l.selected,l.disabled],ge={},ye={},q=e=>{let{text:t,hover:i,focus:a,selected:c,disabled:m,...r}=e;return Ne("div",{...r,className:n(ct,k(ct,{hover:i,focus:a,selected:c,disabled:m})),children:t})};q.states=ke;q.options=ge;q.className=ct;q.defaultOptions=ye;import{jsx as ti}from"react/jsx-runtime";import{jsx as ii}from"react/jsx-runtime";import{jsx as li,jsxs as mi}from"react/jsx-runtime";import{jsx as ui,jsxs as fi}from"react/jsx-runtime";import{jsx as bi}from"react/jsx-runtime";import{jsx as Ni,jsxs as vi}from"react/jsx-runtime";import{jsx as zi,jsxs as Mi}from"react/jsx-runtime";import{jsx as Q,jsxs as Ie}from"react/jsx-runtime";var Y="k-listbox",ve=[l.disabled],Ce={size:[o.small,o.medium,o.large]},pt={size:o.medium,actionsPosition:"left"},_=e=>{let{size:t=pt.size,disabled:i,children:a,actionsPosition:c=pt.actionsPosition,actions:m,dir:r,...f}=e;return Ie("div",{...f,dir:r,className:n(e.className,Y,h(Y,{size:t}),k(Y,{disabled:i}),{[`k-listbox-actions-${c}`]:c}),children:[m&&Q("div",{className:"k-listbox-actions",children:m.map(p=>Q(C,{icon:{left:r!=="rtl"?"caret-alt-left":"caret-alt-right",right:r!=="rtl"?"caret-alt-right":"caret-alt-left",to:r!=="rtl"?"caret-double-alt-right":"caret-double-alt-left",from:r!=="rtl"?"caret-double-alt-left":"caret-double-alt-right",up:"caret-alt-up",down:"caret-alt-down",x:"x"}[p],size:t},p))}),Q("div",{className:n("k-list-scroller","k-selectable"),children:Q(v,{size:t,children:a})})]})};_.states=ve;_.options=Ce;_.className=Y;_.defaultOptions=pt;var Qi=_;export{Y as LISTBOX_CLASSNAME,_ as ListBox,Qi as default};