UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 11.2 kB
var n=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?n(...e):typeof e=="object"?Object.keys(e).map((s,a)=>e[a]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var M=(o,e)=>n({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${e.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${o}-${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"}),x=(o,e)=>n({"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 i={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},z={small:"small",medium:"medium",large:"large",full:"full"},y={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},t={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},d={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 be}from"react/jsx-runtime";var O="k-actions",Ne=[],ye={},q={alignment:"start",orientation:"horizontal"},C=o=>{let{alignment:e=q.alignment,orientation:s=q.orientation,...a}=o;return be("div",{...a,className:n(O,{[`${O}-${e}`]:e,[`${O}-${s}`]:s},o.className),children:o.children})};C.states=Ne;C.options=ye;C.className=O;C.defaultOptions=q;var re=C;import{Fragment as ze,jsx as le}from"react/jsx-runtime";var Z="k-icon k-font-icon",Be=[],Se={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},Me={},I=o=>{let{size:e,themeColor:s,icon:a,rotate:r,flip:c,...l}=o;return a?le("span",{...l,className:n(o.className,Z,M(Z,{size:e}),{[`k-i-${a}`]:a,[`k-color-${s}`]:s,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):le(ze,{})};I.states=Be;I.options=Se;I.className=Z;I.defaultOptions=Me;var ie=I;import{Fragment as Ae,jsx as T}from"react/jsx-runtime";var J="k-icon k-svg-icon",Ce=[],Ie={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},ce={viewBox:"0 0 24 24"},A=o=>{let{size:e,themeColor:s,rotate:a,flip:r,viewBox:c=ce.viewBox,icon:l,...u}=o;if(!l)return T(Ae,{});l==="none"&&{...u,className:n(o.className,J,"k-none")};let m=typeof l=="object"&&l.name&&l.name;return T("span",{...u,className:n(o.className,J,M("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${s}`]:s,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:T("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:c,dangerouslySetInnerHTML:typeof l=="object"?{__html:l.content}:void 0,children:l?void 0:o.children})})};A.states=Ce;A.options=Ie;A.className=J;A.defaultOptions=ce;var Q=A;import*as de from"@progress/kendo-svg-icons";import{Fragment as pe,jsx as U}from"react/jsx-runtime";var Ue=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Le=[],Pe={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},X={viewBox:"0 0 24 24",type:"svg"},f=o=>{let{size:e,themeColor:s,icon:a,type:r=X.type,rotate:c,flip:l,viewBox:u=X.viewBox,...m}=o;if(!a)return U(pe,{});if(r==="svg"){if(a==="none")return U(Q,{...m,icon:a,size:e});let h=Ue(`${a}-icon`);return de[h]?U(Q,{...m,icon:de[h],size:e,themeColor:s,rotate:c,flip:l,viewBox:u}):U(pe,{})}return U(ie,{...m,icon:a,size:e,themeColor:s,rotate:c,flip:l})};f.states=Le;f.options=Pe;f.defaultOptions=X;import{Fragment as Oe,jsx as L,jsxs as me}from"react/jsx-runtime";var _="k-button",we=[d.hover,d.focus,d.active,d.selected,d.disabled],Ke={size:[i.small,i.medium,i.large],rounded:[z.small,z.medium,z.large,z.full],fillMode:[y.solid,y.flat,y.outline,y.clear,y.link],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark,t.inverse]},b={size:i.medium,rounded:z.medium,fillMode:y.solid,themeColor:t.base,showArrow:!1,arrowIconName:"caret-alt-down"},p=o=>{let{size:e=b.size,rounded:s=b.rounded,fillMode:a=b.fillMode,themeColor:r=b.themeColor,showArrow:c=b.showArrow,arrowIconName:l=b.arrowIconName,hover:u,focus:m,active:h,selected:V,disabled:G,icon:W,text:K,iconClassName:he,...xe}=o,ke=W!==void 0,ve=o.children!==void 0;return me("button",{...xe,className:n(o.className,_,M(_,{size:e,rounded:s,fillMode:a,themeColor:r}),x(_,{hover:u,focus:m,active:h,disabled:G,selected:V}),{"k-icon-button":!K&&!ve&&ke}),children:[W&&L(f,{className:n(he,"k-button-icon"),icon:W}),K?me(Oe,{children:[K&&L("span",{className:"k-button-text",children:K}),o.children]}):o.children&&L("span",{className:"k-button-text",children:o.children}),c&&L("span",{className:"k-menu-button-arrow k-button-arrow",children:L(f,{icon:l})})]})};p.states=we;p.options=Ke;p.className=_;p.defaultOptions=b;import{jsx as Ao}from"react/jsx-runtime";import{jsx as wo}from"react/jsx-runtime";import{jsx as _o}from"react/jsx-runtime";import{Fragment as P,jsx as k,jsxs as w}from"react/jsx-runtime";var Y="k-upload-dropzone",Te=[d.hover],$=o=>{let{hover:e,status:s,...a}=o,r=k(P,{});switch(s){case"uploading":r=w(P,{children:[k(f,{icon:"upload"}),"Uploading..."]});break;case"done":r=w(P,{children:[k(f,{icon:"check"}),"Done"]});break;case"failed":r=w(P,{children:[k(f,{icon:"exclamation-circle"}),"Done"]});break;default:r=k(P,{});break}return w("div",{...a,className:n(o.className,Y,"k-dropzone",x(Y,{hover:e})),children:[w("div",{className:"k-upload-button-wrap",children:[k(p,{className:"k-upload-button",children:"Select files..."}),k("input",{id:"upload-input",className:"k-hidden"})]}),k("span",{className:n("k-dropzone-hint",{"k-hidden":s!=="upload"}),children:"Drop files here to upload"}),s!=="upload"&&k("span",{className:"k-upload-status",children:r})]})};$.states=Te;$.className=Y;import{jsx as F,jsxs as ue}from"react/jsx-runtime";var j="k-upload",_e=[d.hover,d.disabled],$e={},fe={actionsLayout:"end"},v=o=>{let{async:e,empty:s,actions:a,actionsLayout:r=fe.actionsLayout,hover:c,status:l,disabled:u,...m}=o;return ue("div",{...m,className:n(o.className,j,x(j,{disabled:u}),{"k-upload-async":e,"k-upload-empty":s}),children:[F($,{status:l,hover:c}),o.children&&F("ul",{className:"k-upload-files",children:o.children}),a&&o.children&&ue(re,{alignment:r,orientation:"horizontal",children:[F(p,{className:"k-clear-selected",children:"Clear"}),F(p,{themeColor:"primary",className:"k-upload-selected",children:"Upload"})]})]})};v.states=_e;v.options=$e;v.className=j;v.defaultOptions=fe;import{jsx as oe,jsxs as ee}from"react/jsx-runtime";var g="k-progressbar",Fe=[d.disabled,d.indeterminate],Ee={},B={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},S=o=>{let{disabled:e,height:s,indeterminate:a=B.indeterminate,label:r=B.label,labelPosition:c=B.labelPosition,orientation:l=B.orientation,reverse:u=B.reverse,value:m=B.value,width:h,style:V,...G}=o;return ee("div",{...G,className:n(o.className,g,x(g,{disabled:e}),{[`${g}-${l}`]:l,[`${g}-indeterminate`]:a,[`${g}-reverse`]:u}),style:{...V,"--kendo-progressbar-value":m,[l==="horizontal"?"height":"width"]:l==="horizontal"?s:h},children:[oe("span",{className:n("k-progress-status-wrap",{[`k-progress-${c}`]:c&&!a}),children:r&&ee("span",{className:"k-progress-status",children:[m,"%"]})}),!a&&oe("div",{className:"k-progressbar-value k-selected",children:oe("span",{className:n("k-progress-status-wrap",{[`k-progress-${c}`]:c}),children:r&&ee("span",{className:"k-progress-status",children:[o.value,"%"]})})})]})};S.states=Fe;S.options=Ee;S.className=g;S.defaultOptions=B;import{jsx as te}from"react/jsx-runtime";var ge="k-chunk-progressbar",He=(o,e)=>e<=o-1,Re=[d.disabled,d.indeterminate],De={},E={chunkCount:5,orientation:"horizontal",progress:0},H=o=>{let{disabled:e,chunkCount:s=E.chunkCount,indeterminate:a,orientation:r=E.orientation,progress:c=E.progress,reverse:l,...u}=o;return te("div",{...u,className:n(o.className,g,ge,x(g,{disabled:e}),{[`${g}-${r}`]:r,[`${g}-indeterminate`]:a,[`${g}-reverse`]:l}),children:te("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(s)].map((m,h)=>te("li",{className:n("k-progressbar-chunk",{"k-first":h===0,"k-last":h===[...Array(s)].length-1,"k-selected":He(c,h)})},h))})})};H.states=Re;H.options=De;H.className=ge;H.defaultOptions=E;import{jsx as pt}from"react/jsx-runtime";import{jsx as ht}from"react/jsx-runtime";import{jsx as se,jsxs as Ge}from"react/jsx-runtime";var Ve="k-file-info",ae=o=>{let{name:e,size:s,validationMsg:a,...r}=o;return Ge("div",{...r,className:n(o.className,Ve),children:[e&&se("span",{className:"k-file-name",children:e}),s&&se("span",{className:"k-file-size",children:s}),a&&se("span",{className:"k-file-validation-message",children:a})]})};import{Fragment as qe,jsx as N,jsxs as R}from"react/jsx-runtime";var We="k-file",D=o=>{let{status:e,progress:s,name:a,icon:r,size:c,state:l,validationMsg:u,...m}=o;return N("li",{...m,className:n(o.className,We,{[`k-file-${e}`]:e}),children:R("div",{className:"k-file-single",children:[N(S,{className:n({"k-hidden":e!=="progress"}),value:s,label:!1}),R("span",{className:"k-file-icon-wrapper",children:[N(f,{className:"k-file-icon",icon:r,size:"xxlarge"}),l&&N("span",{className:"k-file-state",children:l})]}),N(ae,{name:a,size:c,validationMsg:u}),N("div",{className:"k-upload-actions",children:e==="progress"?R(qe,{children:[R("span",{className:"k-upload-pct",children:[s,"%"]}),N(p,{icon:"pause-sm",fillMode:"flat",className:"k-upload-action"}),N(p,{icon:"cancel",fillMode:"flat",className:"k-upload-action"})]}):N(p,{icon:"x",fillMode:"flat",className:"k-upload-action"})})]})})};import{Fragment as Et,jsx as $t,jsxs as Ft}from"react/jsx-runtime";import{Fragment as qt,jsx as Gt,jsxs as Wt}from"react/jsx-runtime";import{jsx as Xt}from"react/jsx-runtime";import{Fragment as ts,jsx as os,jsxs as ss}from"react/jsx-runtime";import{Fragment as Ze,jsx as ne,jsxs as Je}from"react/jsx-runtime";var hs=o=>ne(v,{async:!0,children:Je(Ze,{children:[ne(D,{name:"Image_With_Very_Very_Very_Very_Very_Long_Name1.png",icon:"file-image",size:"51.23 KB"}),ne(D,{name:"Image2.jpg",icon:"file-image",size:"106.43 KB"})]}),...o});export{hs as UploadChunk};