@progress/kendo-themes-html/dist/esm/dropzone/demos/dropzone.mjs

A collection of HTML helpers used for developing Kendo UI themes

var l=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,s)=>e[s]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var y=(o,e)=>l({[`${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.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),H=(o,e)=>{let{valid:i,invalid:s,hover:r,focus:c,checked:m,active:a,selected:h,disabled:x,indeterminate:f,loading:B,empty:z,readonly:J,highlighted:W,...I}=e;return l({"k-valid":i,"k-invalid":s,"k-hover":r,"k-focus":c,"k-checked":m,"k-active":a,"k-selected":h,"k-disabled":x,"k-indeterminate":f&&!m,"k-loading":B,"k-empty":z,"k-readonly":J,"k-highlighted":W},Object.keys(I).reduce((M,v)=>(v.startsWith("k-")?M[v]=I[v]:M[`k-${v}`]=I[v],M),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var p={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},t={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",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"};import{Fragment as ee,jsx as K}from"react/jsx-runtime";var A="k-font-icon",Q=[],X={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info]},Y={},N=o=>{let{size:e,themeColor:i,icon:s,rotate:r,flip:c,...m}=o;return s?K("span",{...m,className:l(o.className,A,y(A,{size:e}),{[`k-i-${s}`]:s,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):K(ee,{})};N.states=Q;N.options=X;N.className=A;N.defaultOptions=Y;var F=N;import{Fragment as ne,jsx as O}from"react/jsx-runtime";var T="k-svg-icon",oe=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[p.outline,p.solid,p.duotone]},w={viewBox:"0 0 24 24",variant:p.outline},k=o=>{let{size:e,themeColor:i,rotate:s,flip:r,viewBox:c=w.viewBox,variant:m=w.variant,icon:a,...h}=o;if(!a)return O(ne,{});if(a==="none")return O("span",{...h,className:l(o.className,T,y("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof a=="object"&&a.name&&a.name,f=typeof a=="object"?m&&a.variants?.[m]||a.variants?.outline||a.content:void 0;return O("span",{...h,className:l(o.className,T,y("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${i}`]:i,[`k-rotate-${s}`]:s,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:c,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:a?void 0:o.children})})};k.states=oe;k.options=te;k.className=T;k.defaultOptions=w;var _=k;import*as L from"@progress/kendo-svg-icons";var G="icon",V="icons";import{useContext as ie}from"react";import{createContext as re}from"react";var U=re({iconsType:"svg"});import{Fragment as Z,jsx as b}from"react/jsx-runtime";var C="k-icon",se=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ae=[],le={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[p.outline,p.solid,p.duotone]},S={viewBox:"0 0 24 24",type:"svg",variant:p.outline},u=o=>{let{iconsType:e}=ie(U),{size:i,themeColor:s,icon:r,type:c=e||S.type,rotate:m,flip:a,viewBox:h=S.viewBox,variant:x=S.variant,...f}=o;if(!r)return b(Z,{});if((e||c)==="svg"){if(r==="none")return b(_,{...f,className:l(o.className,C),icon:r,size:i,variant:x});let z=L[r]?r:se(`${r}-icon`);return L[z]?b(_,{...f,className:l(o.className,C),icon:L[z],size:i,themeColor:s,rotate:m,flip:a,viewBox:h,variant:x}):b(Z,{})}return b(F,{...f,className:l(o.className,C),icon:r,size:i,themeColor:s,rotate:m,flip:a})};u.states=ae;u.options=le;u.defaultOptions=S;u.className=C;u.moduleName=G;u.folderName=V;u.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var P="dropzone",j=P;import{jsx as E,jsxs as me}from"react/jsx-runtime";var $="k-external-dropzone",de=[D.disabled,D.hover],ce={},R={icon:"upload",hint:"Drag and drop files here to upload"},d=o=>{let{hover:e,disabled:i,icon:s=R.icon,hint:r=R.hint,note:c,...m}=o;return E("div",{...m,className:l(o.className,$,H($,{disabled:i}),{"k-external-dropzone-hover":e}),children:me("div",{className:"k-dropzone-inner",children:[s&&E(u,{icon:s,className:"k-dropzone-icon",size:"xxxlarge"}),r&&E("span",{className:"k-dropzone-hint",children:r}),c&&E("span",{className:"k-dropzone-note",children:c})]})})};d.states=de;d.options=ce;d.className=$;d.defaultOptions=R;d.moduleName=P;d.folderName=j;import{jsx as ro}from"react/jsx-runtime";import{jsx as pe}from"react/jsx-runtime";var q=o=>pe(d,{...o});import{jsx as ve}from"react/jsx-runtime";var ue=d.options,fe=d.states,xe=d.defaultOptions,ge=[{name:"note",title:"Note"}],he=[],g=o=>{let{modifiers:e,...i}=o,s={};return Object.keys(e||{}).forEach(r=>{r==="note"&&(s.note=e?.[r]?"Only JPEG, PNG and SVG files are allowed.":void 0)}),ve(q,{style:{width:"500px"},...i,...s})};g.options=ue;g.states=fe;g.variants=he;g.defaultOptions=xe;g.modifiers=ge;g.className=d.className;var vo=g;export{g as DropzoneDemo,vo as default};