\n
\n `;\n const imagesHTML = this.files.filter(f => f).reduce(imagesReducer, previewHeader);\n this.imagesListTarget.innerHTML = imagesHTML;\n }\n\n togglePreview() {\n this.imagesListTarget.classList.toggle(\"hidden\");\n }\n\n hideUploader() {\n this.uploaderTarget.classList.add(\"hidden\");\n this.filesListContainerTarget.classList.remove(\"hidden\");\n }\n\n onImagesSelected() {\n this.files = Array.from(this.inputTarget.files);\n this.filesIndices = Array.from(this.files.keys());\n this.hideUploader();\n this.renderFiles();\n this.renderPreview();\n }\n\n connect() {\n this.sortable = Sortable.create(this.filesListTarget, {\n animation: 150,\n ghostClass: \"dragging\",\n onEnd: this.onEnd.bind(this),\n });\n }\n\n swap(arr, indexA, indexB) {\n let temp = arr[indexA];\n arr[indexA] = arr[indexB];\n arr[indexB] = temp;\n };\n\n onEnd(event) {\n this.swap(this.files, event.oldIndex, event.newIndex);\n this.renderPreview();\n }\n}","// src/index.ts\nvar CONTROLLER_FILENAME_REGEX = /^(?:.*?(?:controllers|components)\\/|\\.?\\.\\/)?(.+)(?:[_-]controller\\..+?)$/;\nfunction registerControllers(application, controllerModules) {\n application.load(definitionsFromGlob(controllerModules));\n}\nfunction definitionsFromGlob(controllerModules) {\n return Object.entries(controllerModules).map(definitionFromEntry).filter((value) => value);\n}\nfunction definitionFromEntry([name, controllerModule]) {\n const identifier = identifierForGlobKey(name);\n const controllerConstructor = controllerModule.default;\n if (identifier && typeof controllerConstructor == \"function\") {\n return {identifier, controllerConstructor};\n }\n}\nfunction identifierForGlobKey(key) {\n const logicalName = (key.match(CONTROLLER_FILENAME_REGEX) || [])[1];\n if (logicalName) {\n return logicalName.replace(/_/g, \"-\").replace(/\\//g, \"--\");\n }\n}\nexport {\n CONTROLLER_FILENAME_REGEX,\n definitionsFromGlob,\n identifierForGlobKey,\n registerControllers\n};\n","// Load all the controllers within this directory and all subdirectories.\n// Controller files must be named *_controller.js.\n\nimport { Application } from \"stimulus\"\nimport { registerControllers } from \"stimulus-vite-helpers\"\n\nconst application = Application.start()\n\nconst controllers = import.meta.globEager('./*_controller.js')\nregisterControllers(application, controllers)\n","/**\n * Make a map and return a function for checking if a key\n * is in that map.\n * IMPORTANT: all calls of this function must be prefixed with\n * \\/\\*#\\_\\_PURE\\_\\_\\*\\/\n * So that rollup can tree-shake them if necessary.\n */\nfunction makeMap(str, expectsLowerCase) {\n const map = Object.create(null);\n const list = str.split(',');\n for (let i = 0; i < list.length; i++) {\n map[list[i]] = true;\n }\n return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];\n}\n\n/**\n * dev only flag -> name mapping\n */\nconst PatchFlagNames = {\n [1 /* PatchFlags.TEXT */]: `TEXT`,\n [2 /* PatchFlags.CLASS */]: `CLASS`,\n [4 /* PatchFlags.STYLE */]: `STYLE`,\n [8 /* PatchFlags.PROPS */]: `PROPS`,\n [16 /* PatchFlags.FULL_PROPS */]: `FULL_PROPS`,\n [32 /* PatchFlags.HYDRATE_EVENTS */]: `HYDRATE_EVENTS`,\n [64 /* PatchFlags.STABLE_FRAGMENT */]: `STABLE_FRAGMENT`,\n [128 /* PatchFlags.KEYED_FRAGMENT */]: `KEYED_FRAGMENT`,\n [256 /* PatchFlags.UNKEYED_FRAGMENT */]: `UNKEYED_FRAGMENT`,\n [512 /* PatchFlags.NEED_PATCH */]: `NEED_PATCH`,\n [1024 /* PatchFlags.DYNAMIC_SLOTS */]: `DYNAMIC_SLOTS`,\n [2048 /* PatchFlags.DEV_ROOT_FRAGMENT */]: `DEV_ROOT_FRAGMENT`,\n [-1 /* PatchFlags.HOISTED */]: `HOISTED`,\n [-2 /* PatchFlags.BAIL */]: `BAIL`\n};\n\n/**\n * Dev only\n */\nconst slotFlagsText = {\n [1 /* SlotFlags.STABLE */]: 'STABLE',\n [2 /* SlotFlags.DYNAMIC */]: 'DYNAMIC',\n [3 /* SlotFlags.FORWARDED */]: 'FORWARDED'\n};\n\nconst GLOBALS_WHITE_LISTED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +\n 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +\n 'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt';\nconst isGloballyWhitelisted = /*#__PURE__*/ makeMap(GLOBALS_WHITE_LISTED);\n\nconst range = 2;\nfunction generateCodeFrame(source, start = 0, end = source.length) {\n // Split the content into individual lines but capture the newline sequence\n // that separated each line. This is important because the actual sequence is\n // needed to properly take into account the full line length for offset\n // comparison\n let lines = source.split(/(\\r?\\n)/);\n // Separate the lines and newline sequences into separate arrays for easier referencing\n const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);\n lines = lines.filter((_, idx) => idx % 2 === 0);\n let count = 0;\n const res = [];\n for (let i = 0; i < lines.length; i++) {\n count +=\n lines[i].length +\n ((newlineSequences[i] && newlineSequences[i].length) || 0);\n if (count >= start) {\n for (let j = i - range; j <= i + range || end > count; j++) {\n if (j < 0 || j >= lines.length)\n continue;\n const line = j + 1;\n res.push(`${line}${' '.repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]}`);\n const lineLength = lines[j].length;\n const newLineSeqLength = (newlineSequences[j] && newlineSequences[j].length) || 0;\n if (j === i) {\n // push underline\n const pad = start - (count - (lineLength + newLineSeqLength));\n const length = Math.max(1, end > count ? lineLength - pad : end - start);\n res.push(` | ` + ' '.repeat(pad) + '^'.repeat(length));\n }\n else if (j > i) {\n if (end > count) {\n const length = Math.max(Math.min(end - count, lineLength), 1);\n res.push(` | ` + '^'.repeat(length));\n }\n count += lineLength + newLineSeqLength;\n }\n }\n break;\n }\n }\n return res.join('\\n');\n}\n\nfunction normalizeStyle(value) {\n if (isArray(value)) {\n const res = {};\n for (let i = 0; i < value.length; i++) {\n const item = value[i];\n const normalized = isString(item)\n ? parseStringStyle(item)\n : normalizeStyle(item);\n if (normalized) {\n for (const key in normalized) {\n res[key] = normalized[key];\n }\n }\n }\n return res;\n }\n else if (isString(value)) {\n return value;\n }\n else if (isObject(value)) {\n return value;\n }\n}\nconst listDelimiterRE = /;(?![^(]*\\))/g;\nconst propertyDelimiterRE = /:([^]+)/;\nconst styleCommentRE = /\\/\\*.*?\\*\\//gs;\nfunction parseStringStyle(cssText) {\n const ret = {};\n cssText\n .replace(styleCommentRE, '')\n .split(listDelimiterRE)\n .forEach(item => {\n if (item) {\n const tmp = item.split(propertyDelimiterRE);\n tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());\n }\n });\n return ret;\n}\nfunction stringifyStyle(styles) {\n let ret = '';\n if (!styles || isString(styles)) {\n return ret;\n }\n for (const key in styles) {\n const value = styles[key];\n const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key);\n if (isString(value) || typeof value === 'number') {\n // only render valid values\n ret += `${normalizedKey}:${value};`;\n }\n }\n return ret;\n}\nfunction normalizeClass(value) {\n let res = '';\n if (isString(value)) {\n res = value;\n }\n else if (isArray(value)) {\n for (let i = 0; i < value.length; i++) {\n const normalized = normalizeClass(value[i]);\n if (normalized) {\n res += normalized + ' ';\n }\n }\n }\n else if (isObject(value)) {\n for (const name in value) {\n if (value[name]) {\n res += name + ' ';\n }\n }\n }\n return res.trim();\n}\nfunction normalizeProps(props) {\n if (!props)\n return null;\n let { class: klass, style } = props;\n if (klass && !isString(klass)) {\n props.class = normalizeClass(klass);\n }\n if (style) {\n props.style = normalizeStyle(style);\n }\n return props;\n}\n\n// These tag configs are shared between compiler-dom and runtime-dom, so they\n// https://developer.mozilla.org/en-US/docs/Web/HTML/Element\nconst HTML_TAGS = 'html,body,base,head,link,meta,style,title,address,article,aside,footer,' +\n 'header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,' +\n 'figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,' +\n 'data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,' +\n 'time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,' +\n 'canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,' +\n 'th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,' +\n 'option,output,progress,select,textarea,details,dialog,menu,' +\n 'summary,template,blockquote,iframe,tfoot';\n// https://developer.mozilla.org/en-US/docs/Web/SVG/Element\nconst SVG_TAGS = 'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' +\n 'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' +\n 'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' +\n 'feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' +\n 'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' +\n 'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' +\n 'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' +\n 'mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,' +\n 'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +\n 'text,textPath,title,tspan,unknown,use,view';\nconst VOID_TAGS = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr';\n/**\n * Compiler only.\n * Do NOT use in runtime code paths unless behind `(process.env.NODE_ENV !== 'production')` flag.\n */\nconst isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS);\n/**\n * Compiler only.\n * Do NOT use in runtime code paths unless behind `(process.env.NODE_ENV !== 'production')` flag.\n */\nconst isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS);\n/**\n * Compiler only.\n * Do NOT use in runtime code paths unless behind `(process.env.NODE_ENV !== 'production')` flag.\n */\nconst isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS);\n\n/**\n * On the client we only need to offer special cases for boolean attributes that\n * have different names from their corresponding dom properties:\n * - itemscope -> N/A\n * - allowfullscreen -> allowFullscreen\n * - formnovalidate -> formNoValidate\n * - ismap -> isMap\n * - nomodule -> noModule\n * - novalidate -> noValidate\n * - readonly -> readOnly\n */\nconst specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;\nconst isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);\n/**\n * The full list is needed during SSR to produce the correct initial markup.\n */\nconst isBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs +\n `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,` +\n `loop,open,required,reversed,scoped,seamless,` +\n `checked,muted,multiple,selected`);\n/**\n * Boolean attributes should be included if the value is truthy or ''.\n * e.g. `Drag and drop the above rows and use the preview button below to ensure your images are shown the correct order.
\nupload-list#togglePreview\">
\n