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