@progress/kendo-themes-html/dist/esm/upload/templates/upload-batch.mjs

A collection of HTML helpers used for developing Kendo UI themes

var a=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((n,s)=>e[s]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var L=(o,e)=>a({[`${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)=>{let{valid:n,invalid:s,hover:r,focus:p,checked:l,active:f,selected:d,disabled:g,indeterminate:E,loading:U,empty:ee,readonly:T,highlighted:O,...P}=e;return a({"k-valid":n,"k-invalid":s,"k-hover":r,"k-focus":p,"k-checked":l,"k-active":f,"k-selected":d,"k-disabled":g,"k-indeterminate":E&&!l,"k-loading":U,"k-empty":ee,"k-readonly":T,"k-highlighted":O},Object.keys(P).reduce((I,y)=>(y.startsWith("k-")?I[y]=P[y]:I[`k-${y}`]=P[y],I),{}))};function Ne(o,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(s=>[`k-${s}`,!0]))}var i={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"},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"},m={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 oe="action-buttons",he=oe;import{jsx as Ie}from"react/jsx-runtime";var V="k-actions",Te=[],Pe={},te={alignment:"start",orientation:"horizontal"},A=o=>{let{alignment:e=te.alignment,orientation:n=te.orientation,...s}=o;return Ie("div",{...s,className:a(V,{[`${V}-${e}`]:e,[`${V}-${n}`]:n},o.className),children:o.children})};A.states=Te;A.options=Pe;A.className=V;A.defaultOptions=te;A.moduleName=oe;A.folderName=he;var xe=A;import{Fragment as De,jsx as ke}from"react/jsx-runtime";var se="k-font-icon",ze=[],Ke={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]},Re={},z=o=>{let{size:e,themeColor:n,icon:s,rotate:r,flip:p,...l}=o;return s?ke("span",{...l,className:a(o.className,se,L(se,{size:e}),{[`k-i-${s}`]:s,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"})}):ke(De,{})};z.states=ze;z.options=Ke;z.className=se;z.defaultOptions=Re;var ve=z;import{Fragment as $e,jsx as G}from"react/jsx-runtime";var ne="k-svg-icon",we=[],Fe={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]},be={viewBox:"0 0 24 24"},K=o=>{let{size:e,themeColor:n,rotate:s,flip:r,viewBox:p=be.viewBox,icon:l,...f}=o;if(!l)return G($e,{});l==="none"&&{...f,className:a(o.className,ne,"k-none")};let d=typeof l=="object"&&l.name&&l.name;return G("span",{...f,className:a(o.className,ne,L("k-icon",{size:e}),{[`k-svg-i-${d}`]:d,[`k-color-${n}`]:n,[`k-rotate-${s}`]:s,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:G("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:p,dangerouslySetInnerHTML:typeof l=="object"?{__html:l.content}:void 0,children:l?void 0:o.children})})};K.states=we;K.options=Fe;K.className=ne;K.defaultOptions=be;var ae=K;import*as re from"@progress/kendo-svg-icons";var ye="icon",Me="icons";import{Fragment as Ae,jsx as R}from"react/jsx-runtime";var W="k-icon",He=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ve=[],Ge={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]},le={viewBox:"0 0 24 24",type:"svg"},u=o=>{let{size:e,themeColor:n,icon:s,type:r=le.type,rotate:p,flip:l,viewBox:f=le.viewBox,...d}=o;if(!s)return R(Ae,{});if(r==="svg"){if(s==="none")return R(ae,{...d,className:a(o.className,W),icon:s,size:e});let g=re[s]?s:He(`${s}-icon`);return re[g]?R(ae,{...d,className:a(o.className,W),icon:re[g],size:e,themeColor:n,rotate:p,flip:l,viewBox:f}):R(Ae,{})}return R(ve,{...d,className:a(o.className,W),icon:s,size:e,themeColor:n,rotate:p,flip:l})};u.states=Ve;u.options=Ge;u.defaultOptions=le;u.className=W;u.moduleName=ye;u.folderName=Me;var ie="button",Be=ie;import{Fragment as Je,jsx as D,jsxs as Se}from"react/jsx-runtime";var w="k-button",We=["icon-button"],qe=[m.hover,m.focus,m.active,m.selected,m.disabled,m.generating],Ze={size:[i.small,i.medium,i.large],rounded:[C.small,C.medium,C.large,C.full],fillMode:[M.solid,M.flat,M.outline,M.clear,M.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:C.medium,fillMode:M.solid,themeColor:t.base,showArrow:!1,arrowIconName:"caret-alt-down"},c=o=>{let{size:e=B.size,rounded:n=B.rounded,fillMode:s=B.fillMode,themeColor:r=B.themeColor,showArrow:p=B.showArrow,arrowIconName:l=B.arrowIconName,variant:f,hover:d,focus:g,active:E,selected:U,disabled:ee,icon:T,text:O,iconClassName:P,...I}=o,y=T!==void 0,Ue=o.children!==void 0;return Se("button",{...I,className:a(o.className,w,Ne(w,f),L(w,{size:e,rounded:n,fillMode:s,themeColor:r}),x(w,{hover:d,focus:g,active:E,disabled:ee,selected:U}),{"k-icon-button":!O&&!Ue&&y}),children:[T&&D(u,{className:a(P,"k-button-icon"),icon:T}),O?Se(Je,{children:[O&&D("span",{className:"k-button-text",children:O}),o.children]}):o.children&&D("span",{className:"k-button-text",children:o.children}),p&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(u,{icon:l})})]})};c.states=qe;c.options=Ze;c.variants=We;c.className=w;c.defaultOptions=B;c.moduleName=ie;c.folderName=Be;import{jsx as Qo}from"react/jsx-runtime";import{jsx as et}from"react/jsx-runtime";import{jsx as nt}from"react/jsx-runtime";import{Fragment as F,jsx as v,jsxs as $}from"react/jsx-runtime";var pe="k-upload-dropzone",Qe=[m.hover],q=o=>{let{hover:e,status:n,...s}=o,r=v(F,{});switch(n){case"uploading":r=$(F,{children:[v(u,{icon:"upload"}),"Uploading..."]});break;case"done":r=$(F,{children:[v(u,{icon:"check"}),"Done"]});break;case"failed":r=$(F,{children:[v(u,{icon:"exclamation-circle"}),"Done"]});break;default:r=v(F,{});break}return $("div",{...s,className:a(o.className,pe,"k-dropzone",x(pe,{hover:e})),children:[$("div",{className:"k-upload-button-wrap",children:[v(c,{className:"k-upload-button",children:"Select files..."}),v("input",{id:"upload-input",className:"k-hidden"})]}),v("span",{className:a("k-dropzone-hint",{"k-hidden":n!=="upload"}),children:"Drop files here to upload"}),n!=="upload"&&v("span",{className:"k-upload-status",children:r})]})};q.states=Qe;q.className=pe;var ce="upload",Oe=ce;import{jsx as Z,jsxs as Le}from"react/jsx-runtime";var me="k-upload",Xe=[m.hover,m.disabled],Ye={},Ce={actionsLayout:"end"},h=o=>{let{async:e,empty:n,actions:s,actionsLayout:r=Ce.actionsLayout,hover:p,status:l,disabled:f,...d}=o;return Le("div",{...d,className:a(o.className,me,x(me,{disabled:f}),{"k-upload-async":e,"k-upload-empty":n}),children:[Z(q,{status:l,hover:p}),o.children&&Z("ul",{className:"k-upload-files",children:o.children}),s&&o.children&&Le(xe,{alignment:r,orientation:"horizontal",children:[Z(c,{className:"k-clear-selected",children:"Clear"}),Z(c,{themeColor:"primary",className:"k-upload-selected",children:"Upload"})]})]})};h.states=Xe;h.options=Ye;h.className=me;h.defaultOptions=Ce;h.moduleName=ce;h.folderName=Oe;var H="progressbar",J=H;import{jsx as ue,jsxs as de}from"react/jsx-runtime";var N="k-progressbar",je=[m.disabled,m.indeterminate],eo={},S={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},b=o=>{let{disabled:e,height:n,indeterminate:s=S.indeterminate,label:r=S.label,labelPosition:p=S.labelPosition,orientation:l=S.orientation,reverse:f=S.reverse,value:d=S.value,width:g,style:E,...U}=o;return de("div",{...U,className:a(o.className,N,x(N,{disabled:e}),{[`${N}-${l}`]:l,[`${N}-indeterminate`]:s,[`${N}-reverse`]:f}),style:{...E,"--kendo-progressbar-value":d,[l==="horizontal"?"height":"width"]:l==="horizontal"?n:g},children:[ue("span",{className:a("k-progress-status-wrap",{[`k-progress-${p}`]:p&&!s}),children:r&&de("span",{className:"k-progress-status",children:[d,"%"]})}),!s&&ue("div",{className:"k-progressbar-value k-selected",children:ue("span",{className:a("k-progress-status-wrap",{[`k-progress-${p}`]:p}),children:r&&de("span",{className:"k-progress-status",children:[o.value,"%"]})})})]})};b.states=je;b.options=eo;b.className=N;b.defaultOptions=S;b.moduleName=H;b.folderName=J;import{jsx as fe}from"react/jsx-runtime";var _e="k-chunk-progressbar",oo=(o,e)=>e<=o-1,to=[m.disabled,m.indeterminate],so={},Q={chunkCount:5,orientation:"horizontal",progress:0},_=o=>{let{disabled:e,chunkCount:n=Q.chunkCount,indeterminate:s,orientation:r=Q.orientation,progress:p=Q.progress,reverse:l,...f}=o;return fe("div",{...f,className:a(o.className,N,_e,x(N,{disabled:e}),{[`${N}-${r}`]:r,[`${N}-indeterminate`]:s,[`${N}-reverse`]:l}),children:fe("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(n)].map((d,g)=>fe("li",{className:a("k-progressbar-chunk",{"k-first":g===0,"k-last":g===[...Array(n)].length-1,"k-selected":oo(p,g)})},g))})})};_.states=to;_.options=so;_.className=_e;_.defaultOptions=Q;_.moduleName=H;_.folderName=J;import{jsx as Kt}from"react/jsx-runtime";import{jsx as $t}from"react/jsx-runtime";import{jsx as ge,jsxs as ao}from"react/jsx-runtime";var no="k-file-info",X=o=>{let{name:e,size:n,validationMsg:s,...r}=o;return ao("div",{...r,className:a(o.className,no),children:[e&&ge("span",{className:"k-file-name",children:e}),n&&ge("span",{className:"k-file-size",children:n}),s&&ge("span",{className:"k-file-validation-message",children:s})]})};import{Fragment as rs,jsx as ns,jsxs as as}from"react/jsx-runtime";import{Fragment as lo,jsx as k,jsxs as Y}from"react/jsx-runtime";var ro="k-file",Ee=o=>{let{status:e,progress:n,validationMsg:s,fileSummary:r,...p}=o;return k("li",{...p,className:a(o.className,ro,{[`k-file-${e}`]:e}),children:Y("div",{className:"k-file-multiple",children:[k(b,{className:a({"k-hidden":e!=="progress"}),value:n,label:!1}),k("span",{className:"k-file-icon-wrapper",children:k(u,{className:"k-file-icon",icon:"copy",size:"xxlarge"})}),Y("div",{className:"k-multiple-files-wrapper",children:[o.children,r&&k("span",{className:a("k-file-summary",{"k-hidden":e!=="progress"}),children:r}),s&&k("span",{className:"k-file-validation-message",children:s})]}),k("div",{className:"k-upload-actions",children:e==="progress"?Y(lo,{children:[Y("span",{className:"k-upload-pct",children:[n,"%"]}),k(c,{icon:"pause-sm",fillMode:"flat",className:"k-upload-action"}),k(c,{icon:"cancel",fillMode:"flat",className:"k-upload-action"})]}):k(c,{icon:"x",fillMode:"flat",className:"k-upload-action"})})]})})};import{Fragment as hs,jsx as Ns,jsxs as xs}from"react/jsx-runtime";import{jsx as ys}from"react/jsx-runtime";import{Fragment as Os,jsx as Ss,jsxs as Ls}from"react/jsx-runtime";import{Fragment as co,jsx as j,jsxs as po}from"react/jsx-runtime";var Fs=o=>j(h,{async:!0,children:j(co,{children:po(Ee,{fileSummary:"Total: 2 files, 157.66 KB",children:[j(X,{name:"Video1_File_with_Very_Very_Very_Very_Long_Name.png",size:"51.23 KB"}),j(X,{name:"Image2.jpg",size:"106.43 KB"})]})}),...o});export{Fs as UploadBatch};