\n Unit for lease\n
\n\n{#if edit && editing}\n \n
\n \n\n","import {\n\trun_all,\n\tsubscribe,\n\tnoop,\n\tsafe_not_equal,\n\tis_function,\n\tget_store_value\n} from '../internal/index.js';\n\nconst subscriber_queue = [];\n\n/**\n * Creates a `Readable` store that allows reading by subscription.\n *\n * https://svelte.dev/docs/svelte-store#readable\n * @template T\n * @param {T} [value] initial value\n * @param {import('./public.js').StartStopNotifier\n
\n\n
\n {/if}\n \n \n \n Lease #{lease.serial_num}\n \n \n
\n \n ${[`${lease.price.toFixed()}`, lease.price_footage].join(\" / \")} ft.\n
\n\n\n
\n Balance: \n {numberToCurrency(lease.customer.balance)}\n \n \n {/if}\n
\n \n {numberToCurrency(lease.customer?.pastDue ?? 0)}\n \n \n Past Due\n
\n \n
\n","const getCSRFToken = (): string => {\n return (\n document\n .querySelector(\"meta[name='csrf-token']\")\n ?.getAttribute(\"content\") ?? \"\"\n )\n}\n\nconst baseRequest = async \n {\n e.preventDefault()\n zoomReset()\n }}\n class=\"hover:bg-black/20 cursor-pointer w-10 h-10 flex items-center justify-center text-2xl\"\n >\n \n \n \n {\n e.preventDefault()\n zoomIn()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-4 w-10 h-10 flex items-center justify-center text-2xl\"\n >\n +\n \n {\n e.preventDefault()\n zoomOut()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-4 w-10 h-10 flex items-center justify-center text-2xl\"\n >\n -\n \n
\n\n
\n\n \n
\n\n \n \n \n \n View\n \n
\n \n \n \n \n Edit\n \n
\n \n \n \n {#each customers as customer}\n \n {/each}\n \n
\n \n \n
\n \n\n \n
\n {:else if storageUnit.occupancyStatus === \"vacant\"}\n \n
\n\n {#if storageUnit.disabled}\n
\n {:else if storageUnit.auction}\n {#if storageUnit.customer}\n \n \n \n Unit #{unit.name}\n \n \n
\n \n ${[`${storageUnit.price}`, storageUnit.priceDuration]\n .filter((s) => s)\n .join(\" / \")}\n
\n\n {unit.dimensions}\n
\n {#if storageUnit.lockCode}\n \n Lock code: {storageUnit.lockCode}\n
\n {/if}\n \n\n {#if storageUnit.disabled}\n
\n \n Disabled
\n This unit cannot be leased\n
\n \n This unit cannot be leased\n
\n
\n
\n {/if}\n {#if storageUnit.customer}\n Auction date:
\n\n {new Date(storageUnit.auctionDate).toLocaleDateString()}\n
\nBalance:
\n\n
\n {/if}\n \n {numberToCurrency(storageUnit.customer.balance)}\n
\n\n \n In Auction\n
\n \n \n Move In\n \n
\n {:else}\n \n Scheduled move out: \n {new Date(storageUnit.scheduledMoveOut).toLocaleDateString()}\n Balance: \n {numberToCurrency(storageUnit.customer.balance)}\n \n \n {/if}\n {#if storageUnit.customer}\n \n \n {/if}\n
\n \n {numberToCurrency(storageUnit.customer?.pastDue ?? 0)}\n \n \n Past Due\n
\n \n {/if}\n {/if}\n {#if storageUnit.locked}\n \n \n Locked\n
\n \n {/if}\n \n \n\n","/**\n\tA function to help truth test values. Returns a `true` if zero.\n\t@param {any} val The value to test.\n\t@returns {any}\n*/\nexport default function canBeZero (val) {\n\tif (val === 0) {\n\t\treturn true;\n\t}\n\treturn val;\n}\n","import canBeZero from './canBeZero.js';\n/**\n\tMake an accessor from a string, number, function or an array of the combination of any\n\t@param {String|Number|Function|Array} acc The accessor function, key or list of them.\n\t@returns {Function} An accessor function.\n*/\nexport default function makeAccessor (acc) {\n\tif (!canBeZero(acc)) return null;\n\tif (Array.isArray(acc)) {\n\t\treturn d => acc.map(k => {\n\t\t\treturn typeof k !== 'function' ? d[k] : k(d);\n\t\t});\n\t} else if (typeof acc !== 'function') { // eslint-disable-line no-else-return\n\t\treturn d => d[acc];\n\t}\n\treturn acc;\n}\n","// From Object.fromEntries polyfill https://github.com/tc39/proposal-object-from-entries/blob/master/polyfill.js#L1\nfunction fromEntries(iter) {\n\tconst obj = {};\n\n\tfor (const pair of iter) {\n\t\tif (Object(pair) !== pair) {\n\t\t\tthrow new TypeError(\"iterable for fromEntries should yield objects\");\n\t\t}\n\t\t// Consistency with Map: contract is that entry has \"0\" and \"1\" keys, not\n\t\t// that it is an array or iterable.\n\t\tconst { \"0\": key, \"1\": val } = pair;\n\n\t\tObject.defineProperty(obj, key, {\n\t\t\tconfigurable: true,\n\t\t\tenumerable: true,\n\t\t\twritable: true,\n\t\t\tvalue: val,\n\t\t});\n\t}\n\n\treturn obj;\n}\n\n/**\n\tRemove undefined fields from an object\n\t@param {object} obj The object to filter\n\t@param {object} [comparisonObj={}] An object that, for any key, if the key is not present on that object, the key will be filtered out. Note, this ignores the value on that object\n\t@returns {object}\n*/\nexport default function filterObject (obj, comparisonObj = {}) {\n\treturn fromEntries(Object.entries(obj).filter(([key, value]) => {\n\t\treturn value !== undefined\n\t\t\t&& comparisonObj[key] === undefined;\n\t}));\n}\n","/**\n\tA simple debounce function taken from here https://www.freecodecamp.org/news/javascript-debounce-example/\n\t@param {function} func The function to debounce.\n\t@param {number} timeout The time in ms to wait.\n\t@returns {function}\n*/\nexport default function debounce(func, timeout = 300) {\n\tlet timer;\n\treturn (...args) => {\n\t\tclearTimeout(timer);\n\t\ttimer = setTimeout(() => {\n\t\t\tfunc.apply(this, args);\n\t\t}, timeout);\n\t};\n}\n","export default function ascending(a, b) {\n return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;\n}\n","export default function descending(a, b) {\n return a == null || b == null ? NaN\n : b < a ? -1\n : b > a ? 1\n : b >= a ? 0\n : NaN;\n}\n","import ascending from \"./ascending.js\";\nimport descending from \"./descending.js\";\n\nexport default function bisector(f) {\n let compare1, compare2, delta;\n\n // If an accessor is specified, promote it to a comparator. In this case we\n // can test whether the search value is (self-) comparable. We can’t do this\n // for a comparator (except for specific, known comparators) because we can’t\n // tell if the comparator is symmetric, and an asymmetric comparator can’t be\n // used to test whether a single value is comparable.\n if (f.length !== 2) {\n compare1 = ascending;\n compare2 = (d, x) => ascending(f(d), x);\n delta = (d, x) => f(d) - x;\n } else {\n compare1 = f === ascending || f === descending ? f : zero;\n compare2 = f;\n delta = f;\n }\n\n function left(a, x, lo = 0, hi = a.length) {\n if (lo < hi) {\n if (compare1(x, x) !== 0) return hi;\n do {\n const mid = (lo + hi) >>> 1;\n if (compare2(a[mid], x) < 0) lo = mid + 1;\n else hi = mid;\n } while (lo < hi);\n }\n return lo;\n }\n\n function right(a, x, lo = 0, hi = a.length) {\n if (lo < hi) {\n if (compare1(x, x) !== 0) return hi;\n do {\n const mid = (lo + hi) >>> 1;\n if (compare2(a[mid], x) <= 0) lo = mid + 1;\n else hi = mid;\n } while (lo < hi);\n }\n return lo;\n }\n\n function center(a, x, lo = 0, hi = a.length) {\n const i = left(a, x, lo, hi - 1);\n return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;\n }\n\n return {left, center, right};\n}\n\nfunction zero() {\n return 0;\n}\n","export default function number(x) {\n return x === null ? NaN : +x;\n}\n\nexport function* numbers(values, valueof) {\n if (valueof === undefined) {\n for (let value of values) {\n if (value != null && (value = +value) >= value) {\n yield value;\n }\n }\n } else {\n let index = -1;\n for (let value of values) {\n if ((value = valueof(value, ++index, values)) != null && (value = +value) >= value) {\n yield value;\n }\n }\n }\n}\n","import ascending from \"./ascending.js\";\nimport bisector from \"./bisector.js\";\nimport number from \"./number.js\";\n\nconst ascendingBisect = bisector(ascending);\nexport const bisectRight = ascendingBisect.right;\nexport const bisectLeft = ascendingBisect.left;\nexport const bisectCenter = bisector(number).center;\nexport default bisectRight;\n","export class InternMap extends Map {\n constructor(entries, key = keyof) {\n super();\n Object.defineProperties(this, {_intern: {value: new Map()}, _key: {value: key}});\n if (entries != null) for (const [key, value] of entries) this.set(key, value);\n }\n get(key) {\n return super.get(intern_get(this, key));\n }\n has(key) {\n return super.has(intern_get(this, key));\n }\n set(key, value) {\n return super.set(intern_set(this, key), value);\n }\n delete(key) {\n return super.delete(intern_delete(this, key));\n }\n}\n\nexport class InternSet extends Set {\n constructor(values, key = keyof) {\n super();\n Object.defineProperties(this, {_intern: {value: new Map()}, _key: {value: key}});\n if (values != null) for (const value of values) this.add(value);\n }\n has(value) {\n return super.has(intern_get(this, value));\n }\n add(value) {\n return super.add(intern_set(this, value));\n }\n delete(value) {\n return super.delete(intern_delete(this, value));\n }\n}\n\nfunction intern_get({_intern, _key}, value) {\n const key = _key(value);\n return _intern.has(key) ? _intern.get(key) : value;\n}\n\nfunction intern_set({_intern, _key}, value) {\n const key = _key(value);\n if (_intern.has(key)) return _intern.get(key);\n _intern.set(key, value);\n return value;\n}\n\nfunction intern_delete({_intern, _key}, value) {\n const key = _key(value);\n if (_intern.has(key)) {\n value = _intern.get(key);\n _intern.delete(key);\n }\n return value;\n}\n\nfunction keyof(value) {\n return value !== null && typeof value === \"object\" ? value.valueOf() : value;\n}\n","const e10 = Math.sqrt(50),\n e5 = Math.sqrt(10),\n e2 = Math.sqrt(2);\n\nfunction tickSpec(start, stop, count) {\n const step = (stop - start) / Math.max(0, count),\n power = Math.floor(Math.log10(step)),\n error = step / Math.pow(10, power),\n factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;\n let i1, i2, inc;\n if (power < 0) {\n inc = Math.pow(10, -power) / factor;\n i1 = Math.round(start * inc);\n i2 = Math.round(stop * inc);\n if (i1 / inc < start) ++i1;\n if (i2 / inc > stop) --i2;\n inc = -inc;\n } else {\n inc = Math.pow(10, power) * factor;\n i1 = Math.round(start / inc);\n i2 = Math.round(stop / inc);\n if (i1 * inc < start) ++i1;\n if (i2 * inc > stop) --i2;\n }\n if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);\n return [i1, i2, inc];\n}\n\nexport default function ticks(start, stop, count) {\n stop = +stop, start = +start, count = +count;\n if (!(count > 0)) return [];\n if (start === stop) return [start];\n const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);\n if (!(i2 >= i1)) return [];\n const n = i2 - i1 + 1, ticks = new Array(n);\n if (reverse) {\n if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;\n else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;\n } else {\n if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;\n else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;\n }\n return ticks;\n}\n\nexport function tickIncrement(start, stop, count) {\n stop = +stop, start = +start, count = +count;\n return tickSpec(start, stop, count)[2];\n}\n\nexport function tickStep(start, stop, count) {\n stop = +stop, start = +start, count = +count;\n const reverse = stop < start, inc = reverse ? tickIncrement(stop, start, count) : tickIncrement(start, stop, count);\n return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);\n}\n","/**\n\tCalculate the unique values of desired fields\n\tFor example, data like this:\n\t[{ x: 0, y: -10 }, { x: 10, y: 0 }, { x: 5, y: 10 }]\n\tand a fields object like this:\n\t`{'x': d => d.x, 'y': d => d.y}`\n\treturns an object like this:\n\t`{ x: [0, 10, 5], y: [-10, 0, 10] }`\n\t@param {Array} data A flat array of objects.\n\t@param {{x?: Function, y?: Function, z?: Function, r?: Function}} fields An object containing `x`, `y`, `r` or `z` keys that equal an accessor function. If an accessor function returns an array of values, each value will also be evaluated..\n\t@returns {{x?: [min: Number, max: Number]|[min: String, max: String], y?: [min: Number, max: Number]|[min: String, max: String], z?: [min: Number, max: Number]|[min: String, max: String], r?: [min: Number, max: Number]|[min: String, max: String]}} An object with the same structure as `fields` but instead of an accessor, each key contains an array of unique items.\n*/\nimport { ascending, InternSet } from 'd3-array';\n\nexport default function calcUniques (data, fields, { sort = false } = {}) {\n\tif (!Array.isArray(data)) {\n\t\tthrow new TypeError(`The first argument of calcUniques() must be an array. You passed in a ${typeof data}. If you got this error using the \n {}}\n on:wheel={handleWheel}\n >\n {#if debugStore.enabled}\n \n {#each Object.entries(debugStore) as [key, value]}\n
\n {/if}\n\n {key}: {value}
\n {/each}\n \n {\n e.preventDefault()\n centerMap()\n }}\n class=\"hover:bg-black/20 transition-colors cursor-pointer w-10 h-10 flex items-center justify-center text-2xl rounded-xl\"\n >\n \n \n \n
\n\n \n
\n \n \n {#if shouldShowCustomerPopover}\n {#each storageUnitRows as row}\n {#each row.storageUnits as unit}\n {#if unit.id == selectedUnit}\n \n
\n \n {\n e.preventDefault()\n zoomReset()\n }}\n class=\"hover:bg-black/20 cursor-pointer w-10 h-10 flex items-center justify-center text-2xl\"\n title=\"Reset zoom (Ctrl+0)\"\n >\n \n \n \n {\n e.preventDefault()\n zoomIn()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-4 w-10 h-10 flex items-center justify-center text-2xl\"\n title=\"Zoom in (Ctrl++)\"\n >\n +\n \n {\n e.preventDefault()\n zoomOut()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-4 w-10 h-10 flex items-center justify-center text-2xl\"\n title=\"Zoom out (Ctrl+-)\"\n >\n -\n \n
\n \n
\n{/if}\n\n{#if status == \"loading\"}\n \n
\n \n \n \n
\n\n Error
\n\n {loadError}\n
\n\n \n
\n{/if}\n","import { get, patch } from \"api\"\n\nexport const getSiteMap = async (siteMapId: string) => {\n return get(`/company_admin/site_maps/${siteMapId}`)\n}\n\nexport const getCustomerSiteMap = async (siteMapId: string) => {\n return get(`/site-maps/${siteMapId}`)\n}\n\ninterface CustomerType {\n id: string\n name: string\n balance: number\n pastDue: number\n}\n\nexport interface UnitType {\n occupancyStatus: \"past_due\" | \"vacant\" | \"occupied\"\n customer?: CustomerType\n price: number\n disabled: boolean\n locked: boolean\n auction: boolean\n priceDuration: string\n scheduledMoveOut?: string,\n lockCode?: string,\n auctionDate?: string\n}\ninterface GetSiteMapUnitStatusesResponse {\n units: {\n [key: string]: UnitType\n }\n}\nexport const getSiteMapUnitStatuses = async (siteMapId: string) => {\n return getSite map loading...
\n${this.calendarSvg()}
`)\n }\n\n connect = () => {\n const isMobileDevice = window.matchMedia(\"only screen and (max-width: 760px)\").matches\n const change = this.change\n const min = this.element.getAttribute(\"min\")\n const max = this.element.getAttribute(\"max\")\n let plugins = [AmpPlugin]\n if (min || max) {\n plugins.push(LockPlugin)\n }\n if (this.rangeValue) {\n plugins.push(RangePlugin)\n }\n\n if (isMobileDevice) {\n this.element.dataset.action = \"change->datepicker#focusNext\"\n } else {\n this.addIcon()\n new easepick.create({\n element: this.element,\n css: [\n 'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',\n '/datepicker.css'\n ],\n plugins,\n firstDay: 0,\n AmpPlugin: {\n dropdown: {\n years: true,\n months: true,\n maxYear: (new Date()).getFullYear() + 1\n },\n resetButton: true,\n darkMode: false,\n locale: {\n resetButton: \"Remove Date\",\n }\n },\n LockPlugin: {\n minDate: min,\n maxDate: max\n },\n setup(picker) {\n picker.on(\"select\", (e) => {\n this.element.dispatchEvent(new Event('change'));\n change(e.detail)\n })\n }\n });\n\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"dialog\"]\n\n close = (e) => {\n e.preventDefault();\n this.closeDialog();\n };\n\n closeDialog = () => {\n const dialog = this.dialogTarget\n this.resetClasses(dialog)\n setTimeout(() => {\n dialog.close()\n }, 500)\n }\n\n open = (e) => {\n e?.preventDefault();\n document.body.classList.add(\"overflow-hidden\");\n const dialog = this.dialogTarget\n dialog.showModal();\n dialog.classList.remove(\"backdrop:opacity-0\", \"opacity-0\")\n dialog.classList.add(\"backdrop:opacity-100\", \"opacity-100\")\n }\n\n resetClasses = (dialog) => {\n document.body.classList.remove(\"overflow-hidden\");\n dialog.classList.add(\"backdrop:opacity-0\", \"opacity-0\")\n dialog.classList.remove(\"backdrop:opacity-100\", \"opacity-100\")\n }\n\n connect() {\n const dialog = this.dialogTarget\n dialog.addEventListener(\"close\", () => {\n this.resetClasses(dialog)\n });\n\n if (dialog.hasAttribute(\"data-auto-open\")) {\n this.open()\n }\n }\n\n disconnect() {\n if (this.dialogTarget.open) {\n this.resetClasses(this.dialogTarget)\n this.dialogTarget.close()\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n submit = (e) => {\n this.element.querySelectorAll(\"[type=submit]\").forEach((element) => {\n element.disabled = true\n element.innerHTML = `\n \n \n Loading...\n \n `\n })\n }\n\n connect = () => {\n const existingActions = this.element.dataset.action || \"\"\n this.element.dataset.action = [existingActions, \"submit->disable-on-submit#submit\"].join(\" \")\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"preview\", \"answer\"]\n\n preview() {\n this.previewTarget.querySelector(\"dt\").innerText = this.element.querySelector(\"input[type='text']\").value\n this.previewTarget.querySelector(\"dd\").innerHTML = this.element.querySelector(\"textarea\").value\n }\n\n insertLink(e) {\n e.preventDefault()\n this.element.querySelector(\"textarea\").value += `Link`\n this.preview()\n }\n}\n","/*!\n * FilePond 4.30.6\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */\n\n/* eslint-disable */\n\nconst isNode = value => value instanceof HTMLElement;\n\nconst createStore = (initialState, queries = [], actions = []) => {\n // internal state\n const state = {\n ...initialState,\n };\n\n // contains all actions for next frame, is clear when actions are requested\n const actionQueue = [];\n const dispatchQueue = [];\n\n // returns a duplicate of the current state\n const getState = () => ({ ...state });\n\n // returns a duplicate of the actions array and clears the actions array\n const processActionQueue = () => {\n // create copy of actions queue\n const queue = [...actionQueue];\n\n // clear actions queue (we don't want no double actions)\n actionQueue.length = 0;\n\n return queue;\n };\n\n // processes actions that might block the main UI thread\n const processDispatchQueue = () => {\n // create copy of actions queue\n const queue = [...dispatchQueue];\n\n // clear actions queue (we don't want no double actions)\n dispatchQueue.length = 0;\n\n // now dispatch these actions\n queue.forEach(({ type, data }) => {\n dispatch(type, data);\n });\n };\n\n // adds a new action, calls its handler and\n const dispatch = (type, data, isBlocking) => {\n // is blocking action (should never block if document is hidden)\n if (isBlocking && !document.hidden) {\n dispatchQueue.push({ type, data });\n return;\n }\n\n // if this action has a handler, handle the action\n if (actionHandlers[type]) {\n actionHandlers[type](data);\n }\n\n // now add action\n actionQueue.push({\n type,\n data,\n });\n };\n\n const query = (str, ...args) => (queryHandles[str] ? queryHandles[str](...args) : null);\n\n const api = {\n getState,\n processActionQueue,\n processDispatchQueue,\n dispatch,\n query,\n };\n\n let queryHandles = {};\n queries.forEach(query => {\n queryHandles = {\n ...query(state),\n ...queryHandles,\n };\n });\n\n let actionHandlers = {};\n actions.forEach(action => {\n actionHandlers = {\n ...action(dispatch, query, state),\n ...actionHandlers,\n };\n });\n\n return api;\n};\n\nconst defineProperty = (obj, property, definition) => {\n if (typeof definition === 'function') {\n obj[property] = definition;\n return;\n }\n Object.defineProperty(obj, property, { ...definition });\n};\n\nconst forin = (obj, cb) => {\n for (const key in obj) {\n if (!obj.hasOwnProperty(key)) {\n continue;\n }\n\n cb(key, obj[key]);\n }\n};\n\nconst createObject = definition => {\n const obj = {};\n forin(definition, property => {\n defineProperty(obj, property, definition[property]);\n });\n return obj;\n};\n\nconst attr = (node, name, value = null) => {\n if (value === null) {\n return node.getAttribute(name) || node.hasAttribute(name);\n }\n node.setAttribute(name, value);\n};\n\nconst ns = 'http://www.w3.org/2000/svg';\nconst svgElements = ['svg', 'path']; // only svg elements used\n\nconst isSVGElement = tag => svgElements.includes(tag);\n\nconst createElement = (tag, className, attributes = {}) => {\n if (typeof className === 'object') {\n attributes = className;\n className = null;\n }\n const element = isSVGElement(tag)\n ? document.createElementNS(ns, tag)\n : document.createElement(tag);\n if (className) {\n if (isSVGElement(tag)) {\n attr(element, 'class', className);\n } else {\n element.className = className;\n }\n }\n forin(attributes, (name, value) => {\n attr(element, name, value);\n });\n return element;\n};\n\nconst appendChild = parent => (child, index) => {\n if (typeof index !== 'undefined' && parent.children[index]) {\n parent.insertBefore(child, parent.children[index]);\n } else {\n parent.appendChild(child);\n }\n};\n\nconst appendChildView = (parent, childViews) => (view, index) => {\n if (typeof index !== 'undefined') {\n childViews.splice(index, 0, view);\n } else {\n childViews.push(view);\n }\n\n return view;\n};\n\nconst removeChildView = (parent, childViews) => view => {\n // remove from child views\n childViews.splice(childViews.indexOf(view), 1);\n\n // remove the element\n if (view.element.parentNode) {\n parent.removeChild(view.element);\n }\n\n return view;\n};\n\nconst IS_BROWSER = (() =>\n typeof window !== 'undefined' && typeof window.document !== 'undefined')();\nconst isBrowser = () => IS_BROWSER;\n\nconst testElement = isBrowser() ? createElement('svg') : {};\nconst getChildCount =\n 'children' in testElement ? el => el.children.length : el => el.childNodes.length;\n\nconst getViewRect = (elementRect, childViews, offset, scale) => {\n const left = offset[0] || elementRect.left;\n const top = offset[1] || elementRect.top;\n const right = left + elementRect.width;\n const bottom = top + elementRect.height * (scale[1] || 1);\n\n const rect = {\n // the rectangle of the element itself\n element: {\n ...elementRect,\n },\n\n // the rectangle of the element expanded to contain its children, does not include any margins\n inner: {\n left: elementRect.left,\n top: elementRect.top,\n right: elementRect.right,\n bottom: elementRect.bottom,\n },\n\n // the rectangle of the element expanded to contain its children including own margin and child margins\n // margins will be added after we've recalculated the size\n outer: {\n left,\n top,\n right,\n bottom,\n },\n };\n\n // expand rect to fit all child rectangles\n childViews\n .filter(childView => !childView.isRectIgnored())\n .map(childView => childView.rect)\n .forEach(childViewRect => {\n expandRect(rect.inner, { ...childViewRect.inner });\n expandRect(rect.outer, { ...childViewRect.outer });\n });\n\n // calculate inner width and height\n calculateRectSize(rect.inner);\n\n // append additional margin (top and left margins are included in top and left automatically)\n rect.outer.bottom += rect.element.marginBottom;\n rect.outer.right += rect.element.marginRight;\n\n // calculate outer width and height\n calculateRectSize(rect.outer);\n\n return rect;\n};\n\nconst expandRect = (parent, child) => {\n // adjust for parent offset\n child.top += parent.top;\n child.right += parent.left;\n child.bottom += parent.top;\n child.left += parent.left;\n\n if (child.bottom > parent.bottom) {\n parent.bottom = child.bottom;\n }\n\n if (child.right > parent.right) {\n parent.right = child.right;\n }\n};\n\nconst calculateRectSize = rect => {\n rect.width = rect.right - rect.left;\n rect.height = rect.bottom - rect.top;\n};\n\nconst isNumber = value => typeof value === 'number';\n\n/**\n * Determines if position is at destination\n * @param position\n * @param destination\n * @param velocity\n * @param errorMargin\n * @returns {boolean}\n */\nconst thereYet = (position, destination, velocity, errorMargin = 0.001) => {\n return Math.abs(position - destination) < errorMargin && Math.abs(velocity) < errorMargin;\n};\n\n/**\n * Spring animation\n */\nconst spring =\n // default options\n ({ stiffness = 0.5, damping = 0.75, mass = 10 } = {}) =>\n // method definition\n {\n let target = null;\n let position = null;\n let velocity = 0;\n let resting = false;\n\n // updates spring state\n const interpolate = (ts, skipToEndState) => {\n // in rest, don't animate\n if (resting) return;\n\n // need at least a target or position to do springy things\n if (!(isNumber(target) && isNumber(position))) {\n resting = true;\n velocity = 0;\n return;\n }\n\n // calculate spring force\n const f = -(position - target) * stiffness;\n\n // update velocity by adding force based on mass\n velocity += f / mass;\n\n // update position by adding velocity\n position += velocity;\n\n // slow down based on amount of damping\n velocity *= damping;\n\n // we've arrived if we're near target and our velocity is near zero\n if (thereYet(position, target, velocity) || skipToEndState) {\n position = target;\n velocity = 0;\n resting = true;\n\n // we done\n api.onupdate(position);\n api.oncomplete(position);\n } else {\n // progress update\n api.onupdate(position);\n }\n };\n\n /**\n * Set new target value\n * @param value\n */\n const setTarget = value => {\n // if currently has no position, set target and position to this value\n if (isNumber(value) && !isNumber(position)) {\n position = value;\n }\n\n // next target value will not be animated to\n if (target === null) {\n target = value;\n position = value;\n }\n\n // let start moving to target\n target = value;\n\n // already at target\n if (position === target || typeof target === 'undefined') {\n // now resting as target is current position, stop moving\n resting = true;\n velocity = 0;\n\n // done!\n api.onupdate(position);\n api.oncomplete(position);\n\n return;\n }\n\n resting = false;\n };\n\n // need 'api' to call onupdate callback\n const api = createObject({\n interpolate,\n target: {\n set: setTarget,\n get: () => target,\n },\n resting: {\n get: () => resting,\n },\n onupdate: value => {},\n oncomplete: value => {},\n });\n\n return api;\n };\n\nconst easeLinear = t => t;\nconst easeInOutQuad = t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);\n\nconst tween =\n // default values\n ({ duration = 500, easing = easeInOutQuad, delay = 0 } = {}) =>\n // method definition\n {\n let start = null;\n let t;\n let p;\n let resting = true;\n let reverse = false;\n let target = null;\n\n const interpolate = (ts, skipToEndState) => {\n if (resting || target === null) return;\n\n if (start === null) {\n start = ts;\n }\n\n if (ts - start < delay) return;\n\n t = ts - start - delay;\n\n if (t >= duration || skipToEndState) {\n t = 1;\n p = reverse ? 0 : 1;\n api.onupdate(p * target);\n api.oncomplete(p * target);\n resting = true;\n } else {\n p = t / duration;\n api.onupdate((t >= 0 ? easing(reverse ? 1 - p : p) : 0) * target);\n }\n };\n\n // need 'api' to call onupdate callback\n const api = createObject({\n interpolate,\n target: {\n get: () => (reverse ? 0 : target),\n set: value => {\n // is initial value\n if (target === null) {\n target = value;\n api.onupdate(value);\n api.oncomplete(value);\n return;\n }\n\n // want to tween to a smaller value and have a current value\n if (value < target) {\n target = 1;\n reverse = true;\n } else {\n // not tweening to a smaller value\n reverse = false;\n target = value;\n }\n\n // let's go!\n resting = false;\n start = null;\n },\n },\n resting: {\n get: () => resting,\n },\n onupdate: value => {},\n oncomplete: value => {},\n });\n\n return api;\n };\n\nconst animator = {\n spring,\n tween,\n};\n\n/*\n { type: 'spring', stiffness: .5, damping: .75, mass: 10 };\n { translation: { type: 'spring', ... }, ... }\n { translation: { x: { type: 'spring', ... } } }\n*/\nconst createAnimator = (definition, category, property) => {\n // default is single definition\n // we check if transform is set, if so, we check if property is set\n const def =\n definition[category] && typeof definition[category][property] === 'object'\n ? definition[category][property]\n : definition[category] || definition;\n\n const type = typeof def === 'string' ? def : def.type;\n const props = typeof def === 'object' ? { ...def } : {};\n\n return animator[type] ? animator[type](props) : null;\n};\n\nconst addGetSet = (keys, obj, props, overwrite = false) => {\n obj = Array.isArray(obj) ? obj : [obj];\n obj.forEach(o => {\n keys.forEach(key => {\n let name = key;\n let getter = () => props[key];\n let setter = value => (props[key] = value);\n\n if (typeof key === 'object') {\n name = key.key;\n getter = key.getter || getter;\n setter = key.setter || setter;\n }\n\n if (o[name] && !overwrite) {\n return;\n }\n\n o[name] = {\n get: getter,\n set: setter,\n };\n });\n });\n};\n\n// add to state,\n// add getters and setters to internal and external api (if not set)\n// setup animators\n\nconst animations = ({ mixinConfig, viewProps, viewInternalAPI, viewExternalAPI }) => {\n // initial properties\n const initialProps = { ...viewProps };\n\n // list of all active animations\n const animations = [];\n\n // setup animators\n forin(mixinConfig, (property, animation) => {\n const animator = createAnimator(animation);\n if (!animator) {\n return;\n }\n\n // when the animator updates, update the view state value\n animator.onupdate = value => {\n viewProps[property] = value;\n };\n\n // set animator target\n animator.target = initialProps[property];\n\n // when value is set, set the animator target value\n const prop = {\n key: property,\n setter: value => {\n // if already at target, we done!\n if (animator.target === value) {\n return;\n }\n\n animator.target = value;\n },\n getter: () => viewProps[property],\n };\n\n // add getters and setters\n addGetSet([prop], [viewInternalAPI, viewExternalAPI], viewProps, true);\n\n // add it to the list for easy updating from the _write method\n animations.push(animator);\n });\n\n // expose internal write api\n return {\n write: ts => {\n let skipToEndState = document.hidden;\n let resting = true;\n animations.forEach(animation => {\n if (!animation.resting) resting = false;\n animation.interpolate(ts, skipToEndState);\n });\n return resting;\n },\n destroy: () => {},\n };\n};\n\nconst addEvent = element => (type, fn) => {\n element.addEventListener(type, fn);\n};\n\nconst removeEvent = element => (type, fn) => {\n element.removeEventListener(type, fn);\n};\n\n// mixin\nconst listeners = ({\n mixinConfig,\n viewProps,\n viewInternalAPI,\n viewExternalAPI,\n viewState,\n view,\n}) => {\n const events = [];\n\n const add = addEvent(view.element);\n const remove = removeEvent(view.element);\n\n viewExternalAPI.on = (type, fn) => {\n events.push({\n type,\n fn,\n });\n add(type, fn);\n };\n\n viewExternalAPI.off = (type, fn) => {\n events.splice(events.findIndex(event => event.type === type && event.fn === fn), 1);\n remove(type, fn);\n };\n\n return {\n write: () => {\n // not busy\n return true;\n },\n destroy: () => {\n events.forEach(event => {\n remove(event.type, event.fn);\n });\n },\n };\n};\n\n// add to external api and link to props\n\nconst apis = ({ mixinConfig, viewProps, viewExternalAPI }) => {\n addGetSet(mixinConfig, viewExternalAPI, viewProps);\n};\n\nconst isDefined = value => value != null;\n\n// add to state,\n// add getters and setters to internal and external api (if not set)\n// set initial state based on props in viewProps\n// apply as transforms each frame\n\nconst defaults = {\n opacity: 1,\n scaleX: 1,\n scaleY: 1,\n translateX: 0,\n translateY: 0,\n rotateX: 0,\n rotateY: 0,\n rotateZ: 0,\n originX: 0,\n originY: 0,\n};\n\nconst styles = ({ mixinConfig, viewProps, viewInternalAPI, viewExternalAPI, view }) => {\n // initial props\n const initialProps = { ...viewProps };\n\n // current props\n const currentProps = {};\n\n // we will add those properties to the external API and link them to the viewState\n addGetSet(mixinConfig, [viewInternalAPI, viewExternalAPI], viewProps);\n\n // override rect on internal and external rect getter so it takes in account transforms\n const getOffset = () => [viewProps['translateX'] || 0, viewProps['translateY'] || 0];\n const getScale = () => [viewProps['scaleX'] || 0, viewProps['scaleY'] || 0];\n const getRect = () =>\n view.rect ? getViewRect(view.rect, view.childViews, getOffset(), getScale()) : null;\n viewInternalAPI.rect = { get: getRect };\n viewExternalAPI.rect = { get: getRect };\n\n // apply view props\n mixinConfig.forEach(key => {\n viewProps[key] =\n typeof initialProps[key] === 'undefined' ? defaults[key] : initialProps[key];\n });\n\n // expose api\n return {\n write: () => {\n // see if props have changed\n if (!propsHaveChanged(currentProps, viewProps)) {\n return;\n }\n\n // moves element to correct position on screen\n applyStyles(view.element, viewProps);\n\n // store new transforms\n Object.assign(currentProps, { ...viewProps });\n\n // no longer busy\n return true;\n },\n destroy: () => {},\n };\n};\n\nconst propsHaveChanged = (currentProps, newProps) => {\n // different amount of keys\n if (Object.keys(currentProps).length !== Object.keys(newProps).length) {\n return true;\n }\n\n // lets analyze the individual props\n for (const prop in newProps) {\n if (newProps[prop] !== currentProps[prop]) {\n return true;\n }\n }\n\n return false;\n};\n\nconst applyStyles = (\n element,\n {\n opacity,\n perspective,\n translateX,\n translateY,\n scaleX,\n scaleY,\n rotateX,\n rotateY,\n rotateZ,\n originX,\n originY,\n width,\n height,\n }\n) => {\n let transforms = '';\n let styles = '';\n\n // handle transform origin\n if (isDefined(originX) || isDefined(originY)) {\n styles += `transform-origin: ${originX || 0}px ${originY || 0}px;`;\n }\n\n // transform order is relevant\n // 0. perspective\n if (isDefined(perspective)) {\n transforms += `perspective(${perspective}px) `;\n }\n\n // 1. translate\n if (isDefined(translateX) || isDefined(translateY)) {\n transforms += `translate3d(${translateX || 0}px, ${translateY || 0}px, 0) `;\n }\n\n // 2. scale\n if (isDefined(scaleX) || isDefined(scaleY)) {\n transforms += `scale3d(${isDefined(scaleX) ? scaleX : 1}, ${\n isDefined(scaleY) ? scaleY : 1\n }, 1) `;\n }\n\n // 3. rotate\n if (isDefined(rotateZ)) {\n transforms += `rotateZ(${rotateZ}rad) `;\n }\n\n if (isDefined(rotateX)) {\n transforms += `rotateX(${rotateX}rad) `;\n }\n\n if (isDefined(rotateY)) {\n transforms += `rotateY(${rotateY}rad) `;\n }\n\n // add transforms\n if (transforms.length) {\n styles += `transform:${transforms};`;\n }\n\n // add opacity\n if (isDefined(opacity)) {\n styles += `opacity:${opacity};`;\n\n // if we reach zero, we make the element inaccessible\n if (opacity === 0) {\n styles += `visibility:hidden;`;\n }\n\n // if we're below 100% opacity this element can't be clicked\n if (opacity < 1) {\n styles += `pointer-events:none;`;\n }\n }\n\n // add height\n if (isDefined(height)) {\n styles += `height:${height}px;`;\n }\n\n // add width\n if (isDefined(width)) {\n styles += `width:${width}px;`;\n }\n\n // apply styles\n const elementCurrentStyle = element.elementCurrentStyle || '';\n\n // if new styles does not match current styles, lets update!\n if (styles.length !== elementCurrentStyle.length || styles !== elementCurrentStyle) {\n element.style.cssText = styles;\n // store current styles so we can compare them to new styles later on\n // _not_ getting the style value is faster\n element.elementCurrentStyle = styles;\n }\n};\n\nconst Mixins = {\n styles,\n listeners,\n animations,\n apis,\n};\n\nconst updateRect = (rect = {}, element = {}, style = {}) => {\n if (!element.layoutCalculated) {\n rect.paddingTop = parseInt(style.paddingTop, 10) || 0;\n rect.marginTop = parseInt(style.marginTop, 10) || 0;\n rect.marginRight = parseInt(style.marginRight, 10) || 0;\n rect.marginBottom = parseInt(style.marginBottom, 10) || 0;\n rect.marginLeft = parseInt(style.marginLeft, 10) || 0;\n element.layoutCalculated = true;\n }\n\n rect.left = element.offsetLeft || 0;\n rect.top = element.offsetTop || 0;\n rect.width = element.offsetWidth || 0;\n rect.height = element.offsetHeight || 0;\n\n rect.right = rect.left + rect.width;\n rect.bottom = rect.top + rect.height;\n\n rect.scrollTop = element.scrollTop;\n\n rect.hidden = element.offsetParent === null;\n\n return rect;\n};\n\nconst createView =\n // default view definition\n ({\n // element definition\n tag = 'div',\n name = null,\n attributes = {},\n\n // view interaction\n read = () => {},\n write = () => {},\n create = () => {},\n destroy = () => {},\n\n // hooks\n filterFrameActionsForChild = (child, actions) => actions,\n didCreateView = () => {},\n didWriteView = () => {},\n\n // rect related\n ignoreRect = false,\n ignoreRectUpdate = false,\n\n // mixins\n mixins = [],\n } = {}) => (\n // each view requires reference to store\n store,\n // specific properties for this view\n props = {}\n ) => {\n // root element should not be changed\n const element = createElement(tag, `filepond--${name}`, attributes);\n\n // style reference should also not be changed\n const style = window.getComputedStyle(element, null);\n\n // element rectangle\n const rect = updateRect();\n let frameRect = null;\n\n // rest state\n let isResting = false;\n\n // pretty self explanatory\n const childViews = [];\n\n // loaded mixins\n const activeMixins = [];\n\n // references to created children\n const ref = {};\n\n // state used for each instance\n const state = {};\n\n // list of writers that will be called to update this view\n const writers = [\n write, // default writer\n ];\n\n const readers = [\n read, // default reader\n ];\n\n const destroyers = [\n destroy, // default destroy\n ];\n\n // core view methods\n const getElement = () => element;\n const getChildViews = () => childViews.concat();\n const getReference = () => ref;\n const createChildView = store => (view, props) => view(store, props);\n const getRect = () => {\n if (frameRect) {\n return frameRect;\n }\n frameRect = getViewRect(rect, childViews, [0, 0], [1, 1]);\n return frameRect;\n };\n const getStyle = () => style;\n\n /**\n * Read data from DOM\n * @private\n */\n const _read = () => {\n frameRect = null;\n\n // read child views\n childViews.forEach(child => child._read());\n\n const shouldUpdate = !(ignoreRectUpdate && rect.width && rect.height);\n if (shouldUpdate) {\n updateRect(rect, element, style);\n }\n\n // readers\n const api = { root: internalAPI, props, rect };\n readers.forEach(reader => reader(api));\n };\n\n /**\n * Write data to DOM\n * @private\n */\n const _write = (ts, frameActions, shouldOptimize) => {\n // if no actions, we assume that the view is resting\n let resting = frameActions.length === 0;\n\n // writers\n writers.forEach(writer => {\n const writerResting = writer({\n props,\n root: internalAPI,\n actions: frameActions,\n timestamp: ts,\n shouldOptimize,\n });\n if (writerResting === false) {\n resting = false;\n }\n });\n\n // run mixins\n activeMixins.forEach(mixin => {\n // if one of the mixins is still busy after write operation, we are not resting\n const mixinResting = mixin.write(ts);\n if (mixinResting === false) {\n resting = false;\n }\n });\n\n // updates child views that are currently attached to the DOM\n childViews\n .filter(child => !!child.element.parentNode)\n .forEach(child => {\n // if a child view is not resting, we are not resting\n const childResting = child._write(\n ts,\n filterFrameActionsForChild(child, frameActions),\n shouldOptimize\n );\n if (!childResting) {\n resting = false;\n }\n });\n\n // append new elements to DOM and update those\n childViews\n //.filter(child => !child.element.parentNode)\n .forEach((child, index) => {\n // skip\n if (child.element.parentNode) {\n return;\n }\n\n // append to DOM\n internalAPI.appendChild(child.element, index);\n\n // call read (need to know the size of these elements)\n child._read();\n\n // re-call write\n child._write(\n ts,\n filterFrameActionsForChild(child, frameActions),\n shouldOptimize\n );\n\n // we just added somthing to the dom, no rest\n resting = false;\n });\n\n // update resting state\n isResting = resting;\n\n didWriteView({\n props,\n root: internalAPI,\n actions: frameActions,\n timestamp: ts,\n });\n\n // let parent know if we are resting\n return resting;\n };\n\n const _destroy = () => {\n activeMixins.forEach(mixin => mixin.destroy());\n destroyers.forEach(destroyer => {\n destroyer({ root: internalAPI, props });\n });\n childViews.forEach(child => child._destroy());\n };\n\n // sharedAPI\n const sharedAPIDefinition = {\n element: {\n get: getElement,\n },\n style: {\n get: getStyle,\n },\n childViews: {\n get: getChildViews,\n },\n };\n\n // private API definition\n const internalAPIDefinition = {\n ...sharedAPIDefinition,\n rect: {\n get: getRect,\n },\n\n // access to custom children references\n ref: {\n get: getReference,\n },\n\n // dom modifiers\n is: needle => name === needle,\n appendChild: appendChild(element),\n createChildView: createChildView(store),\n linkView: view => {\n childViews.push(view);\n return view;\n },\n unlinkView: view => {\n childViews.splice(childViews.indexOf(view), 1);\n },\n appendChildView: appendChildView(element, childViews),\n removeChildView: removeChildView(element, childViews),\n registerWriter: writer => writers.push(writer),\n registerReader: reader => readers.push(reader),\n registerDestroyer: destroyer => destroyers.push(destroyer),\n invalidateLayout: () => (element.layoutCalculated = false),\n\n // access to data store\n dispatch: store.dispatch,\n query: store.query,\n };\n\n // public view API methods\n const externalAPIDefinition = {\n element: {\n get: getElement,\n },\n childViews: {\n get: getChildViews,\n },\n rect: {\n get: getRect,\n },\n resting: {\n get: () => isResting,\n },\n isRectIgnored: () => ignoreRect,\n _read,\n _write,\n _destroy,\n };\n\n // mixin API methods\n const mixinAPIDefinition = {\n ...sharedAPIDefinition,\n rect: {\n get: () => rect,\n },\n };\n\n // add mixin functionality\n Object.keys(mixins)\n .sort((a, b) => {\n // move styles to the back of the mixin list (so adjustments of other mixins are applied to the props correctly)\n if (a === 'styles') {\n return 1;\n } else if (b === 'styles') {\n return -1;\n }\n return 0;\n })\n .forEach(key => {\n const mixinAPI = Mixins[key]({\n mixinConfig: mixins[key],\n viewProps: props,\n viewState: state,\n viewInternalAPI: internalAPIDefinition,\n viewExternalAPI: externalAPIDefinition,\n view: createObject(mixinAPIDefinition),\n });\n\n if (mixinAPI) {\n activeMixins.push(mixinAPI);\n }\n });\n\n // construct private api\n const internalAPI = createObject(internalAPIDefinition);\n\n // create the view\n create({\n root: internalAPI,\n props,\n });\n\n // append created child views to root node\n const childCount = getChildCount(element); // need to know the current child count so appending happens in correct order\n childViews.forEach((child, index) => {\n internalAPI.appendChild(child.element, childCount + index);\n });\n\n // call did create\n didCreateView(internalAPI);\n\n // expose public api\n return createObject(externalAPIDefinition);\n };\n\nconst createPainter = (read, write, fps = 60) => {\n const name = '__framePainter';\n\n // set global painter\n if (window[name]) {\n window[name].readers.push(read);\n window[name].writers.push(write);\n return;\n }\n\n window[name] = {\n readers: [read],\n writers: [write],\n };\n\n const painter = window[name];\n\n const interval = 1000 / fps;\n let last = null;\n let id = null;\n let requestTick = null;\n let cancelTick = null;\n\n const setTimerType = () => {\n if (document.hidden) {\n requestTick = () => window.setTimeout(() => tick(performance.now()), interval);\n cancelTick = () => window.clearTimeout(id);\n } else {\n requestTick = () => window.requestAnimationFrame(tick);\n cancelTick = () => window.cancelAnimationFrame(id);\n }\n };\n\n document.addEventListener('visibilitychange', () => {\n if (cancelTick) cancelTick();\n setTimerType();\n tick(performance.now());\n });\n\n const tick = ts => {\n // queue next tick\n id = requestTick(tick);\n\n // limit fps\n if (!last) {\n last = ts;\n }\n\n const delta = ts - last;\n\n if (delta <= interval) {\n // skip frame\n return;\n }\n\n // align next frame\n last = ts - (delta % interval);\n\n // update view\n painter.readers.forEach(read => read());\n painter.writers.forEach(write => write(ts));\n };\n\n setTimerType();\n tick(performance.now());\n\n return {\n pause: () => {\n cancelTick(id);\n },\n };\n};\n\nconst createRoute = (routes, fn) => ({ root, props, actions = [], timestamp, shouldOptimize }) => {\n actions\n .filter(action => routes[action.type])\n .forEach(action =>\n routes[action.type]({ root, props, action: action.data, timestamp, shouldOptimize })\n );\n if (fn) {\n fn({ root, props, actions, timestamp, shouldOptimize });\n }\n};\n\nconst insertBefore = (newNode, referenceNode) =>\n referenceNode.parentNode.insertBefore(newNode, referenceNode);\n\nconst insertAfter = (newNode, referenceNode) => {\n return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);\n};\n\nconst isArray = value => Array.isArray(value);\n\nconst isEmpty = value => value == null;\n\nconst trim = str => str.trim();\n\nconst toString = value => '' + value;\n\nconst toArray = (value, splitter = ',') => {\n if (isEmpty(value)) {\n return [];\n }\n if (isArray(value)) {\n return value;\n }\n return toString(value)\n .split(splitter)\n .map(trim)\n .filter(str => str.length);\n};\n\nconst isBoolean = value => typeof value === 'boolean';\n\nconst toBoolean = value => (isBoolean(value) ? value : value === 'true');\n\nconst isString = value => typeof value === 'string';\n\nconst toNumber = value =>\n isNumber(value) ? value : isString(value) ? toString(value).replace(/[a-z]+/gi, '') : 0;\n\nconst toInt = value => parseInt(toNumber(value), 10);\n\nconst toFloat = value => parseFloat(toNumber(value));\n\nconst isInt = value => isNumber(value) && isFinite(value) && Math.floor(value) === value;\n\nconst toBytes = (value, base = 1000) => {\n // is in bytes\n if (isInt(value)) {\n return value;\n }\n\n // is natural file size\n let naturalFileSize = toString(value).trim();\n\n // if is value in megabytes\n if (/MB$/i.test(naturalFileSize)) {\n naturalFileSize = naturalFileSize.replace(/MB$i/, '').trim();\n return toInt(naturalFileSize) * base * base;\n }\n\n // if is value in kilobytes\n if (/KB/i.test(naturalFileSize)) {\n naturalFileSize = naturalFileSize.replace(/KB$i/, '').trim();\n return toInt(naturalFileSize) * base;\n }\n\n return toInt(naturalFileSize);\n};\n\nconst isFunction = value => typeof value === 'function';\n\nconst toFunctionReference = string => {\n let ref = self;\n let levels = string.split('.');\n let level = null;\n while ((level = levels.shift())) {\n ref = ref[level];\n if (!ref) {\n return null;\n }\n }\n return ref;\n};\n\nconst methods = {\n process: 'POST',\n patch: 'PATCH',\n revert: 'DELETE',\n fetch: 'GET',\n restore: 'GET',\n load: 'GET',\n};\n\nconst createServerAPI = outline => {\n const api = {};\n\n api.url = isString(outline) ? outline : outline.url || '';\n api.timeout = outline.timeout ? parseInt(outline.timeout, 10) : 0;\n api.headers = outline.headers ? outline.headers : {};\n\n forin(methods, key => {\n api[key] = createAction(key, outline[key], methods[key], api.timeout, api.headers);\n });\n\n // remove process if no url or process on outline\n api.process = outline.process || isString(outline) || outline.url ? api.process : null;\n\n // special treatment for remove\n api.remove = outline.remove || null;\n\n // remove generic headers from api object\n delete api.headers;\n\n return api;\n};\n\nconst createAction = (name, outline, method, timeout, headers) => {\n // is explicitely set to null so disable\n if (outline === null) {\n return null;\n }\n\n // if is custom function, done! Dev handles everything.\n if (typeof outline === 'function') {\n return outline;\n }\n\n // build action object\n const action = {\n url: method === 'GET' || method === 'PATCH' ? `?${name}=` : '',\n method,\n headers,\n withCredentials: false,\n timeout,\n onload: null,\n ondata: null,\n onerror: null,\n };\n\n // is a single url\n if (isString(outline)) {\n action.url = outline;\n return action;\n }\n\n // overwrite\n Object.assign(action, outline);\n\n // see if should reformat headers;\n if (isString(action.headers)) {\n const parts = action.headers.split(/:(.+)/);\n action.headers = {\n header: parts[0],\n value: parts[1],\n };\n }\n\n // if is bool withCredentials\n action.withCredentials = toBoolean(action.withCredentials);\n\n return action;\n};\n\nconst toServerAPI = value => createServerAPI(value);\n\nconst isNull = value => value === null;\n\nconst isObject = value => typeof value === 'object' && value !== null;\n\nconst isAPI = value => {\n return (\n isObject(value) &&\n isString(value.url) &&\n isObject(value.process) &&\n isObject(value.revert) &&\n isObject(value.restore) &&\n isObject(value.fetch)\n );\n};\n\nconst getType = value => {\n if (isArray(value)) {\n return 'array';\n }\n\n if (isNull(value)) {\n return 'null';\n }\n\n if (isInt(value)) {\n return 'int';\n }\n\n if (/^[0-9]+ ?(?:GB|MB|KB)$/gi.test(value)) {\n return 'bytes';\n }\n\n if (isAPI(value)) {\n return 'api';\n }\n\n return typeof value;\n};\n\nconst replaceSingleQuotes = str =>\n str\n .replace(/{\\s*'/g, '{\"')\n .replace(/'\\s*}/g, '\"}')\n .replace(/'\\s*:/g, '\":')\n .replace(/:\\s*'/g, ':\"')\n .replace(/,\\s*'/g, ',\"')\n .replace(/'\\s*,/g, '\",');\n\nconst conversionTable = {\n array: toArray,\n boolean: toBoolean,\n int: value => (getType(value) === 'bytes' ? toBytes(value) : toInt(value)),\n number: toFloat,\n float: toFloat,\n bytes: toBytes,\n string: value => (isFunction(value) ? value : toString(value)),\n function: value => toFunctionReference(value),\n serverapi: toServerAPI,\n object: value => {\n try {\n return JSON.parse(replaceSingleQuotes(value));\n } catch (e) {\n return null;\n }\n },\n};\n\nconst convertTo = (value, type) => conversionTable[type](value);\n\nconst getValueByType = (newValue, defaultValue, valueType) => {\n // can always assign default value\n if (newValue === defaultValue) {\n return newValue;\n }\n\n // get the type of the new value\n let newValueType = getType(newValue);\n\n // is valid type?\n if (newValueType !== valueType) {\n // is string input, let's attempt to convert\n const convertedValue = convertTo(newValue, valueType);\n\n // what is the type now\n newValueType = getType(convertedValue);\n\n // no valid conversions found\n if (convertedValue === null) {\n throw `Trying to assign value with incorrect type to \"${option}\", allowed type: \"${valueType}\"`;\n } else {\n newValue = convertedValue;\n }\n }\n\n // assign new value\n return newValue;\n};\n\nconst createOption = (defaultValue, valueType) => {\n let currentValue = defaultValue;\n return {\n enumerable: true,\n get: () => currentValue,\n set: newValue => {\n currentValue = getValueByType(newValue, defaultValue, valueType);\n },\n };\n};\n\nconst createOptions = options => {\n const obj = {};\n forin(options, prop => {\n const optionDefinition = options[prop];\n obj[prop] = createOption(optionDefinition[0], optionDefinition[1]);\n });\n return createObject(obj);\n};\n\nconst createInitialState = options => ({\n // model\n items: [],\n\n // timeout used for calling update items\n listUpdateTimeout: null,\n\n // timeout used for stacking metadata updates\n itemUpdateTimeout: null,\n\n // queue of items waiting to be processed\n processingQueue: [],\n\n // options\n options: createOptions(options),\n});\n\nconst fromCamels = (string, separator = '-') =>\n string\n .split(/(?=[A-Z])/)\n .map(part => part.toLowerCase())\n .join(separator);\n\nconst createOptionAPI = (store, options) => {\n const obj = {};\n forin(options, key => {\n obj[key] = {\n get: () => store.getState().options[key],\n set: value => {\n store.dispatch(`SET_${fromCamels(key, '_').toUpperCase()}`, {\n value,\n });\n },\n };\n });\n return obj;\n};\n\nconst createOptionActions = options => (dispatch, query, state) => {\n const obj = {};\n forin(options, key => {\n const name = fromCamels(key, '_').toUpperCase();\n\n obj[`SET_${name}`] = action => {\n try {\n state.options[key] = action.value;\n } catch (e) {\n // nope, failed\n }\n\n // we successfully set the value of this option\n dispatch(`DID_SET_${name}`, { value: state.options[key] });\n };\n });\n return obj;\n};\n\nconst createOptionQueries = options => state => {\n const obj = {};\n forin(options, key => {\n obj[`GET_${fromCamels(key, '_').toUpperCase()}`] = action => state.options[key];\n });\n return obj;\n};\n\nconst InteractionMethod = {\n API: 1,\n DROP: 2,\n BROWSE: 3,\n PASTE: 4,\n NONE: 5,\n};\n\nconst getUniqueId = () =>\n Math.random()\n .toString(36)\n .substring(2, 11);\n\nconst arrayRemove = (arr, index) => arr.splice(index, 1);\n\nconst run = (cb, sync) => {\n if (sync) {\n cb();\n } else if (document.hidden) {\n Promise.resolve(1).then(cb);\n } else {\n setTimeout(cb, 0);\n }\n};\n\nconst on = () => {\n const listeners = [];\n const off = (event, cb) => {\n arrayRemove(\n listeners,\n listeners.findIndex(listener => listener.event === event && (listener.cb === cb || !cb))\n );\n };\n const fire = (event, args, sync) => {\n listeners\n .filter(listener => listener.event === event)\n .map(listener => listener.cb)\n .forEach(cb => run(() => cb(...args), sync));\n };\n return {\n fireSync: (event, ...args) => {\n fire(event, args, true);\n },\n fire: (event, ...args) => {\n fire(event, args, false);\n },\n on: (event, cb) => {\n listeners.push({ event, cb });\n },\n onOnce: (event, cb) => {\n listeners.push({\n event,\n cb: (...args) => {\n off(event, cb);\n cb(...args);\n },\n });\n },\n off,\n };\n};\n\nconst copyObjectPropertiesToObject = (src, target, excluded) => {\n Object.getOwnPropertyNames(src)\n .filter(property => !excluded.includes(property))\n .forEach(key =>\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(src, key))\n );\n};\n\nconst PRIVATE = [\n 'fire',\n 'process',\n 'revert',\n 'load',\n 'on',\n 'off',\n 'onOnce',\n 'retryLoad',\n 'extend',\n 'archive',\n 'archived',\n 'release',\n 'released',\n 'requestProcessing',\n 'freeze',\n];\n\nconst createItemAPI = item => {\n const api = {};\n copyObjectPropertiesToObject(item, api, PRIVATE);\n return api;\n};\n\nconst removeReleasedItems = items => {\n items.forEach((item, index) => {\n if (item.released) {\n arrayRemove(items, index);\n }\n });\n};\n\nconst ItemStatus = {\n INIT: 1,\n IDLE: 2,\n PROCESSING_QUEUED: 9,\n PROCESSING: 3,\n PROCESSING_COMPLETE: 5,\n PROCESSING_ERROR: 6,\n PROCESSING_REVERT_ERROR: 10,\n LOADING: 7,\n LOAD_ERROR: 8,\n};\n\nconst FileOrigin = {\n INPUT: 1,\n LIMBO: 2,\n LOCAL: 3,\n};\n\nconst getNonNumeric = str => /[^0-9]+/.exec(str);\n\nconst getDecimalSeparator = () => getNonNumeric((1.1).toLocaleString())[0];\n\nconst getThousandsSeparator = () => {\n // Added for browsers that do not return the thousands separator (happend on native browser Android 4.4.4)\n // We check against the normal toString output and if they're the same return a comma when decimal separator is a dot\n const decimalSeparator = getDecimalSeparator();\n const thousandsStringWithSeparator = (1000.0).toLocaleString();\n const thousandsStringWithoutSeparator = (1000.0).toString();\n if (thousandsStringWithSeparator !== thousandsStringWithoutSeparator) {\n return getNonNumeric(thousandsStringWithSeparator)[0];\n }\n return decimalSeparator === '.' ? ',' : '.';\n};\n\nconst Type = {\n BOOLEAN: 'boolean',\n INT: 'int',\n NUMBER: 'number',\n STRING: 'string',\n ARRAY: 'array',\n OBJECT: 'object',\n FUNCTION: 'function',\n ACTION: 'action',\n SERVER_API: 'serverapi',\n REGEX: 'regex',\n};\n\n// all registered filters\nconst filters = [];\n\n// loops over matching filters and passes options to each filter, returning the mapped results\nconst applyFilterChain = (key, value, utils) =>\n new Promise((resolve, reject) => {\n // find matching filters for this key\n const matchingFilters = filters.filter(f => f.key === key).map(f => f.cb);\n\n // resolve now\n if (matchingFilters.length === 0) {\n resolve(value);\n return;\n }\n\n // first filter to kick things of\n const initialFilter = matchingFilters.shift();\n\n // chain filters\n matchingFilters\n .reduce(\n // loop over promises passing value to next promise\n (current, next) => current.then(value => next(value, utils)),\n\n // call initial filter, will return a promise\n initialFilter(value, utils)\n\n // all executed\n )\n .then(value => resolve(value))\n .catch(error => reject(error));\n });\n\nconst applyFilters = (key, value, utils) =>\n filters.filter(f => f.key === key).map(f => f.cb(value, utils));\n\n// adds a new filter to the list\nconst addFilter = (key, cb) => filters.push({ key, cb });\n\nconst extendDefaultOptions = additionalOptions => Object.assign(defaultOptions, additionalOptions);\n\nconst getOptions = () => ({ ...defaultOptions });\n\nconst setOptions = opts => {\n forin(opts, (key, value) => {\n // key does not exist, so this option cannot be set\n if (!defaultOptions[key]) {\n return;\n }\n defaultOptions[key][0] = getValueByType(\n value,\n defaultOptions[key][0],\n defaultOptions[key][1]\n );\n });\n};\n\n// default options on app\nconst defaultOptions = {\n // the id to add to the root element\n id: [null, Type.STRING],\n\n // input field name to use\n name: ['filepond', Type.STRING],\n\n // disable the field\n disabled: [false, Type.BOOLEAN],\n\n // classname to put on wrapper\n className: [null, Type.STRING],\n\n // is the field required\n required: [false, Type.BOOLEAN],\n\n // Allow media capture when value is set\n captureMethod: [null, Type.STRING],\n // - \"camera\", \"microphone\" or \"camcorder\",\n // - Does not work with multiple on apple devices\n // - If set, acceptedFileTypes must be made to match with media wildcard \"image/*\", \"audio/*\" or \"video/*\"\n\n // sync `acceptedFileTypes` property with `accept` attribute\n allowSyncAcceptAttribute: [true, Type.BOOLEAN],\n\n // Feature toggles\n allowDrop: [true, Type.BOOLEAN], // Allow dropping of files\n allowBrowse: [true, Type.BOOLEAN], // Allow browsing the file system\n allowPaste: [true, Type.BOOLEAN], // Allow pasting files\n allowMultiple: [false, Type.BOOLEAN], // Allow multiple files (disabled by default, as multiple attribute is also required on input to allow multiple)\n allowReplace: [true, Type.BOOLEAN], // Allow dropping a file on other file to replace it (only works when multiple is set to false)\n allowRevert: [true, Type.BOOLEAN], // Allows user to revert file upload\n allowRemove: [true, Type.BOOLEAN], // Allow user to remove a file\n allowProcess: [true, Type.BOOLEAN], // Allows user to process a file, when set to false, this removes the file upload button\n allowReorder: [false, Type.BOOLEAN], // Allow reordering of files\n allowDirectoriesOnly: [false, Type.BOOLEAN], // Allow only selecting directories with browse (no support for filtering dnd at this point)\n\n // Try store file if `server` not set\n storeAsFile: [false, Type.BOOLEAN],\n\n // Revert mode\n forceRevert: [false, Type.BOOLEAN], // Set to 'force' to require the file to be reverted before removal\n\n // Input requirements\n maxFiles: [null, Type.INT], // Max number of files\n checkValidity: [false, Type.BOOLEAN], // Enables custom validity messages\n\n // Where to put file\n itemInsertLocationFreedom: [true, Type.BOOLEAN], // Set to false to always add items to begin or end of list\n itemInsertLocation: ['before', Type.STRING], // Default index in list to add items that have been dropped at the top of the list\n itemInsertInterval: [75, Type.INT],\n\n // Drag 'n Drop related\n dropOnPage: [false, Type.BOOLEAN], // Allow dropping of files anywhere on page (prevents browser from opening file if dropped outside of Up)\n dropOnElement: [true, Type.BOOLEAN], // Drop needs to happen on element (set to false to also load drops outside of Up)\n dropValidation: [false, Type.BOOLEAN], // Enable or disable validating files on drop\n ignoredFiles: [['.ds_store', 'thumbs.db', 'desktop.ini'], Type.ARRAY],\n\n // Upload related\n instantUpload: [true, Type.BOOLEAN], // Should upload files immediately on drop\n maxParallelUploads: [2, Type.INT], // Maximum files to upload in parallel\n allowMinimumUploadDuration: [true, Type.BOOLEAN], // if true uploads take at least 750 ms, this ensures the user sees the upload progress giving trust the upload actually happened\n\n // Chunks\n chunkUploads: [false, Type.BOOLEAN], // Enable chunked uploads\n chunkForce: [false, Type.BOOLEAN], // Force use of chunk uploads even for files smaller than chunk size\n chunkSize: [5000000, Type.INT], // Size of chunks (5MB default)\n chunkRetryDelays: [[500, 1000, 3000], Type.ARRAY], // Amount of times to retry upload of a chunk when it fails\n\n // The server api end points to use for uploading (see docs)\n server: [null, Type.SERVER_API],\n\n // File size calculations, can set to 1024, this is only used for display, properties use file size base 1000\n fileSizeBase: [1000, Type.INT],\n\n // Labels and status messages\n labelFileSizeBytes: ['bytes', Type.STRING],\n labelFileSizeKilobytes: ['KB', Type.STRING],\n labelFileSizeMegabytes: ['MB', Type.STRING],\n labelFileSizeGigabytes: ['GB', Type.STRING],\n\n labelDecimalSeparator: [getDecimalSeparator(), Type.STRING], // Default is locale separator\n labelThousandsSeparator: [getThousandsSeparator(), Type.STRING], // Default is locale separator\n\n labelIdle: [\n 'Drag & Drop your files or Browse',\n Type.STRING,\n ],\n labelInvalidField: ['Field contains invalid files', Type.STRING],\n labelFileWaitingForSize: ['Waiting for size', Type.STRING],\n labelFileSizeNotAvailable: ['Size not available', Type.STRING],\n labelFileCountSingular: ['file in list', Type.STRING],\n labelFileCountPlural: ['files in list', Type.STRING],\n labelFileLoading: ['Loading', Type.STRING],\n labelFileAdded: ['Added', Type.STRING], // assistive only\n labelFileLoadError: ['Error during load', Type.STRING],\n labelFileRemoved: ['Removed', Type.STRING], // assistive only\n labelFileRemoveError: ['Error during remove', Type.STRING],\n labelFileProcessing: ['Uploading', Type.STRING],\n labelFileProcessingComplete: ['Upload complete', Type.STRING],\n labelFileProcessingAborted: ['Upload cancelled', Type.STRING],\n labelFileProcessingError: ['Error during upload', Type.STRING],\n labelFileProcessingRevertError: ['Error during revert', Type.STRING],\n\n labelTapToCancel: ['tap to cancel', Type.STRING],\n labelTapToRetry: ['tap to retry', Type.STRING],\n labelTapToUndo: ['tap to undo', Type.STRING],\n\n labelButtonRemoveItem: ['Remove', Type.STRING],\n labelButtonAbortItemLoad: ['Abort', Type.STRING],\n labelButtonRetryItemLoad: ['Retry', Type.STRING],\n labelButtonAbortItemProcessing: ['Cancel', Type.STRING],\n labelButtonUndoItemProcessing: ['Undo', Type.STRING],\n labelButtonRetryItemProcessing: ['Retry', Type.STRING],\n labelButtonProcessItem: ['Upload', Type.STRING],\n\n // make sure width and height plus viewpox are even numbers so icons are nicely centered\n iconRemove: [\n '',\n Type.STRING,\n ],\n iconProcess: [\n '',\n Type.STRING,\n ],\n iconRetry: [\n '',\n Type.STRING,\n ],\n iconUndo: [\n '',\n Type.STRING,\n ],\n iconDone: [\n '',\n Type.STRING,\n ],\n\n // event handlers\n oninit: [null, Type.FUNCTION],\n onwarning: [null, Type.FUNCTION],\n onerror: [null, Type.FUNCTION],\n onactivatefile: [null, Type.FUNCTION],\n oninitfile: [null, Type.FUNCTION],\n onaddfilestart: [null, Type.FUNCTION],\n onaddfileprogress: [null, Type.FUNCTION],\n onaddfile: [null, Type.FUNCTION],\n onprocessfilestart: [null, Type.FUNCTION],\n onprocessfileprogress: [null, Type.FUNCTION],\n onprocessfileabort: [null, Type.FUNCTION],\n onprocessfilerevert: [null, Type.FUNCTION],\n onprocessfile: [null, Type.FUNCTION],\n onprocessfiles: [null, Type.FUNCTION],\n onremovefile: [null, Type.FUNCTION],\n onpreparefile: [null, Type.FUNCTION],\n onupdatefiles: [null, Type.FUNCTION],\n onreorderfiles: [null, Type.FUNCTION],\n\n // hooks\n beforeDropFile: [null, Type.FUNCTION],\n beforeAddFile: [null, Type.FUNCTION],\n beforeRemoveFile: [null, Type.FUNCTION],\n beforePrepareFile: [null, Type.FUNCTION],\n\n // styles\n stylePanelLayout: [null, Type.STRING], // null 'integrated', 'compact', 'circle'\n stylePanelAspectRatio: [null, Type.STRING], // null or '3:2' or 1\n styleItemPanelAspectRatio: [null, Type.STRING],\n styleButtonRemoveItemPosition: ['left', Type.STRING],\n styleButtonProcessItemPosition: ['right', Type.STRING],\n styleLoadIndicatorPosition: ['right', Type.STRING],\n styleProgressIndicatorPosition: ['right', Type.STRING],\n styleButtonRemoveItemAlign: [false, Type.BOOLEAN],\n\n // custom initial files array\n files: [[], Type.ARRAY],\n\n // show support by displaying credits\n credits: [['https://pqina.nl/', 'Powered by PQINA'], Type.ARRAY],\n};\n\nconst getItemByQuery = (items, query) => {\n // just return first index\n if (isEmpty(query)) {\n return items[0] || null;\n }\n\n // query is index\n if (isInt(query)) {\n return items[query] || null;\n }\n\n // if query is item, get the id\n if (typeof query === 'object') {\n query = query.id;\n }\n\n // assume query is a string and return item by id\n return items.find(item => item.id === query) || null;\n};\n\nconst getNumericAspectRatioFromString = aspectRatio => {\n if (isEmpty(aspectRatio)) {\n return aspectRatio;\n }\n if (/:/.test(aspectRatio)) {\n const parts = aspectRatio.split(':');\n return parts[1] / parts[0];\n }\n return parseFloat(aspectRatio);\n};\n\nconst getActiveItems = items => items.filter(item => !item.archived);\n\nconst Status = {\n EMPTY: 0,\n IDLE: 1, // waiting\n ERROR: 2, // a file is in error state\n BUSY: 3, // busy processing or loading\n READY: 4, // all files uploaded\n};\n\nlet res = null;\nconst canUpdateFileInput = () => {\n if (res === null) {\n try {\n const dataTransfer = new DataTransfer();\n dataTransfer.items.add(new File(['hello world'], 'This_Works.txt'));\n const el = document.createElement('input');\n el.setAttribute('type', 'file');\n el.files = dataTransfer.files;\n res = el.files.length === 1;\n } catch (err) {\n res = false;\n }\n }\n return res;\n};\n\nconst ITEM_ERROR = [\n ItemStatus.LOAD_ERROR,\n ItemStatus.PROCESSING_ERROR,\n ItemStatus.PROCESSING_REVERT_ERROR,\n];\nconst ITEM_BUSY = [\n ItemStatus.LOADING,\n ItemStatus.PROCESSING,\n ItemStatus.PROCESSING_QUEUED,\n ItemStatus.INIT,\n];\nconst ITEM_READY = [ItemStatus.PROCESSING_COMPLETE];\n\nconst isItemInErrorState = item => ITEM_ERROR.includes(item.status);\nconst isItemInBusyState = item => ITEM_BUSY.includes(item.status);\nconst isItemInReadyState = item => ITEM_READY.includes(item.status);\n\nconst isAsync = state =>\n isObject(state.options.server) &&\n (isObject(state.options.server.process) || isFunction(state.options.server.process));\n\nconst queries = state => ({\n GET_STATUS: () => {\n const items = getActiveItems(state.items);\n\n const { EMPTY, ERROR, BUSY, IDLE, READY } = Status;\n\n if (items.length === 0) return EMPTY;\n\n if (items.some(isItemInErrorState)) return ERROR;\n\n if (items.some(isItemInBusyState)) return BUSY;\n\n if (items.some(isItemInReadyState)) return READY;\n\n return IDLE;\n },\n\n GET_ITEM: query => getItemByQuery(state.items, query),\n\n GET_ACTIVE_ITEM: query => getItemByQuery(getActiveItems(state.items), query),\n\n GET_ACTIVE_ITEMS: () => getActiveItems(state.items),\n\n GET_ITEMS: () => state.items,\n\n GET_ITEM_NAME: query => {\n const item = getItemByQuery(state.items, query);\n return item ? item.filename : null;\n },\n\n GET_ITEM_SIZE: query => {\n const item = getItemByQuery(state.items, query);\n return item ? item.fileSize : null;\n },\n\n GET_STYLES: () =>\n Object.keys(state.options)\n .filter(key => /^style/.test(key))\n .map(option => ({\n name: option,\n value: state.options[option],\n })),\n\n GET_PANEL_ASPECT_RATIO: () => {\n const isShapeCircle = /circle/.test(state.options.stylePanelLayout);\n const aspectRatio = isShapeCircle\n ? 1\n : getNumericAspectRatioFromString(state.options.stylePanelAspectRatio);\n return aspectRatio;\n },\n\n GET_ITEM_PANEL_ASPECT_RATIO: () => state.options.styleItemPanelAspectRatio,\n\n GET_ITEMS_BY_STATUS: status =>\n getActiveItems(state.items).filter(item => item.status === status),\n\n GET_TOTAL_ITEMS: () => getActiveItems(state.items).length,\n\n SHOULD_UPDATE_FILE_INPUT: () =>\n state.options.storeAsFile && canUpdateFileInput() && !isAsync(state),\n\n IS_ASYNC: () => isAsync(state),\n\n GET_FILE_SIZE_LABELS: query => ({\n labelBytes: query('GET_LABEL_FILE_SIZE_BYTES') || undefined,\n labelKilobytes: query('GET_LABEL_FILE_SIZE_KILOBYTES') || undefined,\n labelMegabytes: query('GET_LABEL_FILE_SIZE_MEGABYTES') || undefined,\n labelGigabytes: query('GET_LABEL_FILE_SIZE_GIGABYTES') || undefined,\n }),\n});\n\nconst hasRoomForItem = state => {\n const count = getActiveItems(state.items).length;\n\n // if cannot have multiple items, to add one item it should currently not contain items\n if (!state.options.allowMultiple) {\n return count === 0;\n }\n\n // if allows multiple items, we check if a max item count has been set, if not, there's no limit\n const maxFileCount = state.options.maxFiles;\n if (maxFileCount === null) {\n return true;\n }\n\n // we check if the current count is smaller than the max count, if so, another file can still be added\n if (count < maxFileCount) {\n return true;\n }\n\n // no more room for another file\n return false;\n};\n\nconst limit = (value, min, max) => Math.max(Math.min(max, value), min);\n\nconst arrayInsert = (arr, index, item) => arr.splice(index, 0, item);\n\nconst insertItem = (items, item, index) => {\n if (isEmpty(item)) {\n return null;\n }\n\n // if index is undefined, append\n if (typeof index === 'undefined') {\n items.push(item);\n return item;\n }\n\n // limit the index to the size of the items array\n index = limit(index, 0, items.length);\n\n // add item to array\n arrayInsert(items, index, item);\n\n // expose\n return item;\n};\n\nconst isBase64DataURI = str =>\n /^\\s*data:([a-z]+\\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\\-._~:@\\/?%\\s]*)\\s*$/i.test(\n str\n );\n\nconst getFilenameFromURL = url =>\n `${url}`\n .split('/')\n .pop()\n .split('?')\n .shift();\n\nconst getExtensionFromFilename = name => name.split('.').pop();\n\nconst guesstimateExtension = type => {\n // if no extension supplied, exit here\n if (typeof type !== 'string') {\n return '';\n }\n\n // get subtype\n const subtype = type.split('/').pop();\n\n // is svg subtype\n if (/svg/.test(subtype)) {\n return 'svg';\n }\n\n if (/zip|compressed/.test(subtype)) {\n return 'zip';\n }\n\n if (/plain/.test(subtype)) {\n return 'txt';\n }\n\n if (/msword/.test(subtype)) {\n return 'doc';\n }\n\n // if is valid subtype\n if (/[a-z]+/.test(subtype)) {\n // always use jpg extension\n if (subtype === 'jpeg') {\n return 'jpg';\n }\n\n // return subtype\n return subtype;\n }\n\n return '';\n};\n\nconst leftPad = (value, padding = '') => (padding + value).slice(-padding.length);\n\nconst getDateString = (date = new Date()) =>\n `${date.getFullYear()}-${leftPad(date.getMonth() + 1, '00')}-${leftPad(\n date.getDate(),\n '00'\n )}_${leftPad(date.getHours(), '00')}-${leftPad(date.getMinutes(), '00')}-${leftPad(\n date.getSeconds(),\n '00'\n )}`;\n\nconst getFileFromBlob = (blob, filename, type = null, extension = null) => {\n const file =\n typeof type === 'string'\n ? blob.slice(0, blob.size, type)\n : blob.slice(0, blob.size, blob.type);\n file.lastModifiedDate = new Date();\n\n // copy relative path\n if (blob._relativePath) file._relativePath = blob._relativePath;\n\n // if blob has name property, use as filename if no filename supplied\n if (!isString(filename)) {\n filename = getDateString();\n }\n\n // if filename supplied but no extension and filename has extension\n if (filename && extension === null && getExtensionFromFilename(filename)) {\n file.name = filename;\n } else {\n extension = extension || guesstimateExtension(file.type);\n file.name = filename + (extension ? '.' + extension : '');\n }\n\n return file;\n};\n\nconst getBlobBuilder = () => {\n return (window.BlobBuilder =\n window.BlobBuilder ||\n window.WebKitBlobBuilder ||\n window.MozBlobBuilder ||\n window.MSBlobBuilder);\n};\n\nconst createBlob = (arrayBuffer, mimeType) => {\n const BB = getBlobBuilder();\n\n if (BB) {\n const bb = new BB();\n bb.append(arrayBuffer);\n return bb.getBlob(mimeType);\n }\n\n return new Blob([arrayBuffer], {\n type: mimeType,\n });\n};\n\nconst getBlobFromByteStringWithMimeType = (byteString, mimeType) => {\n const ab = new ArrayBuffer(byteString.length);\n const ia = new Uint8Array(ab);\n\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n\n return createBlob(ab, mimeType);\n};\n\nconst getMimeTypeFromBase64DataURI = dataURI => {\n return (/^data:(.+);/.exec(dataURI) || [])[1] || null;\n};\n\nconst getBase64DataFromBase64DataURI = dataURI => {\n // get data part of string (remove data:image/jpeg...,)\n const data = dataURI.split(',')[1];\n\n // remove any whitespace as that causes InvalidCharacterError in IE\n return data.replace(/\\s/g, '');\n};\n\nconst getByteStringFromBase64DataURI = dataURI => {\n return atob(getBase64DataFromBase64DataURI(dataURI));\n};\n\nconst getBlobFromBase64DataURI = dataURI => {\n const mimeType = getMimeTypeFromBase64DataURI(dataURI);\n const byteString = getByteStringFromBase64DataURI(dataURI);\n\n return getBlobFromByteStringWithMimeType(byteString, mimeType);\n};\n\nconst getFileFromBase64DataURI = (dataURI, filename, extension) => {\n return getFileFromBlob(getBlobFromBase64DataURI(dataURI), filename, null, extension);\n};\n\nconst getFileNameFromHeader = header => {\n // test if is content disposition header, if not exit\n if (!/^content-disposition:/i.test(header)) return null;\n\n // get filename parts\n const matches = header\n .split(/filename=|filename\\*=.+''/)\n .splice(1)\n .map(name => name.trim().replace(/^[\"']|[;\"']{0,2}$/g, ''))\n .filter(name => name.length);\n\n return matches.length ? decodeURI(matches[matches.length - 1]) : null;\n};\n\nconst getFileSizeFromHeader = header => {\n if (/content-length:/i.test(header)) {\n const size = header.match(/[0-9]+/)[0];\n return size ? parseInt(size, 10) : null;\n }\n return null;\n};\n\nconst getTranfserIdFromHeader = header => {\n if (/x-content-transfer-id:/i.test(header)) {\n const id = (header.split(':')[1] || '').trim();\n return id || null;\n }\n return null;\n};\n\nconst getFileInfoFromHeaders = headers => {\n const info = {\n source: null,\n name: null,\n size: null,\n };\n\n const rows = headers.split('\\n');\n for (let header of rows) {\n const name = getFileNameFromHeader(header);\n if (name) {\n info.name = name;\n continue;\n }\n\n const size = getFileSizeFromHeader(header);\n if (size) {\n info.size = size;\n continue;\n }\n\n const source = getTranfserIdFromHeader(header);\n if (source) {\n info.source = source;\n continue;\n }\n }\n\n return info;\n};\n\nconst createFileLoader = fetchFn => {\n const state = {\n source: null,\n complete: false,\n progress: 0,\n size: null,\n timestamp: null,\n duration: 0,\n request: null,\n };\n\n const getProgress = () => state.progress;\n const abort = () => {\n if (state.request && state.request.abort) {\n state.request.abort();\n }\n };\n\n // load source\n const load = () => {\n // get quick reference\n const source = state.source;\n\n api.fire('init', source);\n\n // Load Files\n if (source instanceof File) {\n api.fire('load', source);\n } else if (source instanceof Blob) {\n // Load blobs, set default name to current date\n api.fire('load', getFileFromBlob(source, source.name));\n } else if (isBase64DataURI(source)) {\n // Load base 64, set default name to current date\n api.fire('load', getFileFromBase64DataURI(source));\n } else {\n // Deal as if is external URL, let's load it!\n loadURL(source);\n }\n };\n\n // loads a url\n const loadURL = url => {\n // is remote url and no fetch method supplied\n if (!fetchFn) {\n api.fire('error', {\n type: 'error',\n body: \"Can't load URL\",\n code: 400,\n });\n return;\n }\n\n // set request start\n state.timestamp = Date.now();\n\n // load file\n state.request = fetchFn(\n url,\n response => {\n // update duration\n state.duration = Date.now() - state.timestamp;\n\n // done!\n state.complete = true;\n\n // turn blob response into a file\n if (response instanceof Blob) {\n response = getFileFromBlob(response, response.name || getFilenameFromURL(url));\n }\n\n api.fire(\n 'load',\n // if has received blob, we go with blob, if no response, we return null\n response instanceof Blob ? response : response ? response.body : null\n );\n },\n error => {\n api.fire(\n 'error',\n typeof error === 'string'\n ? {\n type: 'error',\n code: 0,\n body: error,\n }\n : error\n );\n },\n (computable, current, total) => {\n // collected some meta data already\n if (total) {\n state.size = total;\n }\n\n // update duration\n state.duration = Date.now() - state.timestamp;\n\n // if we can't compute progress, we're not going to fire progress events\n if (!computable) {\n state.progress = null;\n return;\n }\n\n // update progress percentage\n state.progress = current / total;\n\n // expose\n api.fire('progress', state.progress);\n },\n () => {\n api.fire('abort');\n },\n response => {\n const fileinfo = getFileInfoFromHeaders(\n typeof response === 'string' ? response : response.headers\n );\n api.fire('meta', {\n size: state.size || fileinfo.size,\n filename: fileinfo.name,\n source: fileinfo.source,\n });\n }\n );\n };\n\n const api = {\n ...on(),\n setSource: source => (state.source = source),\n getProgress, // file load progress\n abort, // abort file load\n load, // start load\n };\n\n return api;\n};\n\nconst isGet = method => /GET|HEAD/.test(method);\n\nconst sendRequest = (data, url, options) => {\n const api = {\n onheaders: () => {},\n onprogress: () => {},\n onload: () => {},\n ontimeout: () => {},\n onerror: () => {},\n onabort: () => {},\n abort: () => {\n aborted = true;\n xhr.abort();\n },\n };\n\n // timeout identifier, only used when timeout is defined\n let aborted = false;\n let headersReceived = false;\n\n // set default options\n options = {\n method: 'POST',\n headers: {},\n withCredentials: false,\n ...options,\n };\n\n // encode url\n url = encodeURI(url);\n\n // if method is GET, add any received data to url\n\n if (isGet(options.method) && data) {\n url = `${url}${encodeURIComponent(typeof data === 'string' ? data : JSON.stringify(data))}`;\n }\n\n // create request\n const xhr = new XMLHttpRequest();\n\n // progress of load\n const process = isGet(options.method) ? xhr : xhr.upload;\n process.onprogress = e => {\n // no progress event when aborted ( onprogress is called once after abort() )\n if (aborted) {\n return;\n }\n\n api.onprogress(e.lengthComputable, e.loaded, e.total);\n };\n\n // tries to get header info to the app as fast as possible\n xhr.onreadystatechange = () => {\n // not interesting in these states ('unsent' and 'openend' as they don't give us any additional info)\n if (xhr.readyState < 2) {\n return;\n }\n\n // no server response\n if (xhr.readyState === 4 && xhr.status === 0) {\n return;\n }\n\n if (headersReceived) {\n return;\n }\n\n headersReceived = true;\n\n // we've probably received some useful data in response headers\n api.onheaders(xhr);\n };\n\n // load successful\n xhr.onload = () => {\n // is classified as valid response\n if (xhr.status >= 200 && xhr.status < 300) {\n api.onload(xhr);\n } else {\n api.onerror(xhr);\n }\n };\n\n // error during load\n xhr.onerror = () => api.onerror(xhr);\n\n // request aborted\n xhr.onabort = () => {\n aborted = true;\n api.onabort();\n };\n\n // request timeout\n xhr.ontimeout = () => api.ontimeout(xhr);\n\n // open up open up!\n xhr.open(options.method, url, true);\n\n // set timeout if defined (do it after open so IE11 plays ball)\n if (isInt(options.timeout)) {\n xhr.timeout = options.timeout;\n }\n\n // add headers\n Object.keys(options.headers).forEach(key => {\n const value = unescape(encodeURIComponent(options.headers[key]));\n xhr.setRequestHeader(key, value);\n });\n\n // set type of response\n if (options.responseType) {\n xhr.responseType = options.responseType;\n }\n\n // set credentials\n if (options.withCredentials) {\n xhr.withCredentials = true;\n }\n\n // let's send our data\n xhr.send(data);\n\n return api;\n};\n\nconst createResponse = (type, code, body, headers) => ({\n type,\n code,\n body,\n headers,\n});\n\nconst createTimeoutResponse = cb => xhr => {\n cb(createResponse('error', 0, 'Timeout', xhr.getAllResponseHeaders()));\n};\n\nconst hasQS = str => /\\?/.test(str);\nconst buildURL = (...parts) => {\n let url = '';\n parts.forEach(part => {\n url += hasQS(url) && hasQS(part) ? part.replace(/\\?/, '&') : part;\n });\n return url;\n};\n\nconst createFetchFunction = (apiUrl = '', action) => {\n // custom handler (should also handle file, load, error, progress and abort)\n if (typeof action === 'function') {\n return action;\n }\n\n // no action supplied\n if (!action || !isString(action.url)) {\n return null;\n }\n\n // set onload hanlder\n const onload = action.onload || (res => res);\n const onerror = action.onerror || (res => null);\n\n // internal handler\n return (url, load, error, progress, abort, headers) => {\n // do local or remote request based on if the url is external\n const request = sendRequest(url, buildURL(apiUrl, action.url), {\n ...action,\n responseType: 'blob',\n });\n\n request.onload = xhr => {\n // get headers\n const headers = xhr.getAllResponseHeaders();\n\n // get filename\n const filename = getFileInfoFromHeaders(headers).name || getFilenameFromURL(url);\n\n // create response\n load(\n createResponse(\n 'load',\n xhr.status,\n action.method === 'HEAD'\n ? null\n : getFileFromBlob(onload(xhr.response), filename),\n headers\n )\n );\n };\n\n request.onerror = xhr => {\n error(\n createResponse(\n 'error',\n xhr.status,\n onerror(xhr.response) || xhr.statusText,\n xhr.getAllResponseHeaders()\n )\n );\n };\n\n request.onheaders = xhr => {\n headers(createResponse('headers', xhr.status, null, xhr.getAllResponseHeaders()));\n };\n\n request.ontimeout = createTimeoutResponse(error);\n request.onprogress = progress;\n request.onabort = abort;\n\n // should return request\n return request;\n };\n};\n\nconst ChunkStatus = {\n QUEUED: 0,\n COMPLETE: 1,\n PROCESSING: 2,\n ERROR: 3,\n WAITING: 4,\n};\n\n/*\nfunction signature:\n (file, metadata, load, error, progress, abort, transfer, options) => {\n return {\n abort:() => {}\n }\n}\n*/\n\n// apiUrl, action, name, file, metadata, load, error, progress, abort, transfer, options\nconst processFileChunked = (\n apiUrl,\n action,\n name,\n file,\n metadata,\n load,\n error,\n progress,\n abort,\n transfer,\n options\n) => {\n // all chunks\n const chunks = [];\n const { chunkTransferId, chunkServer, chunkSize, chunkRetryDelays } = options;\n\n // default state\n const state = {\n serverId: chunkTransferId,\n aborted: false,\n };\n\n // set onload handlers\n const ondata = action.ondata || (fd => fd);\n const onload =\n action.onload ||\n ((xhr, method) =>\n method === 'HEAD' ? xhr.getResponseHeader('Upload-Offset') : xhr.response);\n const onerror = action.onerror || (res => null);\n\n // create server hook\n const requestTransferId = cb => {\n const formData = new FormData();\n\n // add metadata under same name\n if (isObject(metadata)) formData.append(name, JSON.stringify(metadata));\n\n const headers =\n typeof action.headers === 'function'\n ? action.headers(file, metadata)\n : {\n ...action.headers,\n 'Upload-Length': file.size,\n };\n\n const requestParams = {\n ...action,\n headers,\n };\n\n // send request object\n const request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), requestParams);\n\n request.onload = xhr => cb(onload(xhr, requestParams.method));\n\n request.onerror = xhr =>\n error(\n createResponse(\n 'error',\n xhr.status,\n onerror(xhr.response) || xhr.statusText,\n xhr.getAllResponseHeaders()\n )\n );\n\n request.ontimeout = createTimeoutResponse(error);\n };\n\n const requestTransferOffset = cb => {\n const requestUrl = buildURL(apiUrl, chunkServer.url, state.serverId);\n\n const headers =\n typeof action.headers === 'function'\n ? action.headers(state.serverId)\n : {\n ...action.headers,\n };\n\n const requestParams = {\n headers,\n method: 'HEAD',\n };\n\n const request = sendRequest(null, requestUrl, requestParams);\n\n request.onload = xhr => cb(onload(xhr, requestParams.method));\n\n request.onerror = xhr =>\n error(\n createResponse(\n 'error',\n xhr.status,\n onerror(xhr.response) || xhr.statusText,\n xhr.getAllResponseHeaders()\n )\n );\n\n request.ontimeout = createTimeoutResponse(error);\n };\n\n // create chunks\n const lastChunkIndex = Math.floor(file.size / chunkSize);\n for (let i = 0; i <= lastChunkIndex; i++) {\n const offset = i * chunkSize;\n const data = file.slice(offset, offset + chunkSize, 'application/offset+octet-stream');\n chunks[i] = {\n index: i,\n size: data.size,\n offset,\n data,\n file,\n progress: 0,\n retries: [...chunkRetryDelays],\n status: ChunkStatus.QUEUED,\n error: null,\n request: null,\n timeout: null,\n };\n }\n\n const completeProcessingChunks = () => load(state.serverId);\n\n const canProcessChunk = chunk =>\n chunk.status === ChunkStatus.QUEUED || chunk.status === ChunkStatus.ERROR;\n\n const processChunk = chunk => {\n // processing is paused, wait here\n if (state.aborted) return;\n\n // get next chunk to process\n chunk = chunk || chunks.find(canProcessChunk);\n\n // no more chunks to process\n if (!chunk) {\n // all done?\n if (chunks.every(chunk => chunk.status === ChunkStatus.COMPLETE)) {\n completeProcessingChunks();\n }\n\n // no chunk to handle\n return;\n }\n\n // now processing this chunk\n chunk.status = ChunkStatus.PROCESSING;\n chunk.progress = null;\n\n // allow parsing of formdata\n const ondata = chunkServer.ondata || (fd => fd);\n const onerror = chunkServer.onerror || (res => null);\n\n // send request object\n const requestUrl = buildURL(apiUrl, chunkServer.url, state.serverId);\n\n const headers =\n typeof chunkServer.headers === 'function'\n ? chunkServer.headers(chunk)\n : {\n ...chunkServer.headers,\n 'Content-Type': 'application/offset+octet-stream',\n 'Upload-Offset': chunk.offset,\n 'Upload-Length': file.size,\n 'Upload-Name': file.name,\n };\n\n const request = (chunk.request = sendRequest(ondata(chunk.data), requestUrl, {\n ...chunkServer,\n headers,\n }));\n\n request.onload = () => {\n // done!\n chunk.status = ChunkStatus.COMPLETE;\n\n // remove request reference\n chunk.request = null;\n\n // start processing more chunks\n processChunks();\n };\n\n request.onprogress = (lengthComputable, loaded, total) => {\n chunk.progress = lengthComputable ? loaded : null;\n updateTotalProgress();\n };\n\n request.onerror = xhr => {\n chunk.status = ChunkStatus.ERROR;\n chunk.request = null;\n chunk.error = onerror(xhr.response) || xhr.statusText;\n if (!retryProcessChunk(chunk)) {\n error(\n createResponse(\n 'error',\n xhr.status,\n onerror(xhr.response) || xhr.statusText,\n xhr.getAllResponseHeaders()\n )\n );\n }\n };\n\n request.ontimeout = xhr => {\n chunk.status = ChunkStatus.ERROR;\n chunk.request = null;\n if (!retryProcessChunk(chunk)) {\n createTimeoutResponse(error)(xhr);\n }\n };\n\n request.onabort = () => {\n chunk.status = ChunkStatus.QUEUED;\n chunk.request = null;\n abort();\n };\n };\n\n const retryProcessChunk = chunk => {\n // no more retries left\n if (chunk.retries.length === 0) return false;\n\n // new retry\n chunk.status = ChunkStatus.WAITING;\n clearTimeout(chunk.timeout);\n chunk.timeout = setTimeout(() => {\n processChunk(chunk);\n }, chunk.retries.shift());\n\n // we're going to retry\n return true;\n };\n\n const updateTotalProgress = () => {\n // calculate total progress fraction\n const totalBytesTransfered = chunks.reduce((p, chunk) => {\n if (p === null || chunk.progress === null) return null;\n return p + chunk.progress;\n }, 0);\n\n // can't compute progress\n if (totalBytesTransfered === null) return progress(false, 0, 0);\n\n // calculate progress values\n const totalSize = chunks.reduce((total, chunk) => total + chunk.size, 0);\n\n // can update progress indicator\n progress(true, totalBytesTransfered, totalSize);\n };\n\n // process new chunks\n const processChunks = () => {\n const totalProcessing = chunks.filter(chunk => chunk.status === ChunkStatus.PROCESSING)\n .length;\n if (totalProcessing >= 1) return;\n processChunk();\n };\n\n const abortChunks = () => {\n chunks.forEach(chunk => {\n clearTimeout(chunk.timeout);\n if (chunk.request) {\n chunk.request.abort();\n }\n });\n };\n\n // let's go!\n if (!state.serverId) {\n requestTransferId(serverId => {\n // stop here if aborted, might have happened in between request and callback\n if (state.aborted) return;\n\n // pass back to item so we can use it if something goes wrong\n transfer(serverId);\n\n // store internally\n state.serverId = serverId;\n processChunks();\n });\n } else {\n requestTransferOffset(offset => {\n // stop here if aborted, might have happened in between request and callback\n if (state.aborted) return;\n\n // mark chunks with lower offset as complete\n chunks\n .filter(chunk => chunk.offset < offset)\n .forEach(chunk => {\n chunk.status = ChunkStatus.COMPLETE;\n chunk.progress = chunk.size;\n });\n\n // continue processing\n processChunks();\n });\n }\n\n return {\n abort: () => {\n state.aborted = true;\n abortChunks();\n },\n };\n};\n\n/*\nfunction signature:\n (file, metadata, load, error, progress, abort) => {\n return {\n abort:() => {}\n }\n}\n*/\nconst createFileProcessorFunction = (apiUrl, action, name, options) => (\n file,\n metadata,\n load,\n error,\n progress,\n abort,\n transfer\n) => {\n // no file received\n if (!file) return;\n\n // if was passed a file, and we can chunk it, exit here\n const canChunkUpload = options.chunkUploads;\n const shouldChunkUpload = canChunkUpload && file.size > options.chunkSize;\n const willChunkUpload = canChunkUpload && (shouldChunkUpload || options.chunkForce);\n if (file instanceof Blob && willChunkUpload)\n return processFileChunked(\n apiUrl,\n action,\n name,\n file,\n metadata,\n load,\n error,\n progress,\n abort,\n transfer,\n options\n );\n\n // set handlers\n const ondata = action.ondata || (fd => fd);\n const onload = action.onload || (res => res);\n const onerror = action.onerror || (res => null);\n\n const headers =\n typeof action.headers === 'function'\n ? action.headers(file, metadata) || {}\n : {\n ...action.headers,\n };\n\n const requestParams = {\n ...action,\n headers,\n };\n\n // create formdata object\n var formData = new FormData();\n\n // add metadata under same name\n if (isObject(metadata)) {\n formData.append(name, JSON.stringify(metadata));\n }\n\n // Turn into an array of objects so no matter what the input, we can handle it the same way\n (file instanceof Blob ? [{ name: null, file }] : file).forEach(item => {\n formData.append(\n name,\n item.file,\n item.name === null ? item.file.name : `${item.name}${item.file.name}`\n );\n });\n\n // send request object\n const request = sendRequest(ondata(formData), buildURL(apiUrl, action.url), requestParams);\n request.onload = xhr => {\n load(createResponse('load', xhr.status, onload(xhr.response), xhr.getAllResponseHeaders()));\n };\n\n request.onerror = xhr => {\n error(\n createResponse(\n 'error',\n xhr.status,\n onerror(xhr.response) || xhr.statusText,\n xhr.getAllResponseHeaders()\n )\n );\n };\n\n request.ontimeout = createTimeoutResponse(error);\n request.onprogress = progress;\n request.onabort = abort;\n\n // should return request\n return request;\n};\n\nconst createProcessorFunction = (apiUrl = '', action, name, options) => {\n // custom handler (should also handle file, load, error, progress and abort)\n if (typeof action === 'function') return (...params) => action(name, ...params, options);\n\n // no action supplied\n if (!action || !isString(action.url)) return null;\n\n // internal handler\n return createFileProcessorFunction(apiUrl, action, name, options);\n};\n\n/*\n function signature:\n (uniqueFileId, load, error) => { }\n */\nconst createRevertFunction = (apiUrl = '', action) => {\n // is custom implementation\n if (typeof action === 'function') {\n return action;\n }\n\n // no action supplied, return stub function, interface will work, but file won't be removed\n if (!action || !isString(action.url)) {\n return (uniqueFileId, load) => load();\n }\n\n // set onload hanlder\n const onload = action.onload || (res => res);\n const onerror = action.onerror || (res => null);\n\n // internal implementation\n return (uniqueFileId, load, error) => {\n const request = sendRequest(\n uniqueFileId,\n apiUrl + action.url,\n action // contains method, headers and withCredentials properties\n );\n request.onload = xhr => {\n load(\n createResponse(\n 'load',\n xhr.status,\n onload(xhr.response),\n xhr.getAllResponseHeaders()\n )\n );\n };\n\n request.onerror = xhr => {\n error(\n createResponse(\n 'error',\n xhr.status,\n onerror(xhr.response) || xhr.statusText,\n xhr.getAllResponseHeaders()\n )\n );\n };\n\n request.ontimeout = createTimeoutResponse(error);\n\n return request;\n };\n};\n\nconst getRandomNumber = (min = 0, max = 1) => min + Math.random() * (max - min);\n\nconst createPerceivedPerformanceUpdater = (\n cb,\n duration = 1000,\n offset = 0,\n tickMin = 25,\n tickMax = 250\n) => {\n let timeout = null;\n const start = Date.now();\n\n const tick = () => {\n let runtime = Date.now() - start;\n let delay = getRandomNumber(tickMin, tickMax);\n\n if (runtime + delay > duration) {\n delay = runtime + delay - duration;\n }\n\n let progress = runtime / duration;\n if (progress >= 1 || document.hidden) {\n cb(1);\n return;\n }\n\n cb(progress);\n\n timeout = setTimeout(tick, delay);\n };\n\n if (duration > 0) tick();\n\n return {\n clear: () => {\n clearTimeout(timeout);\n },\n };\n};\n\nconst createFileProcessor = (processFn, options) => {\n const state = {\n complete: false,\n perceivedProgress: 0,\n perceivedPerformanceUpdater: null,\n progress: null,\n timestamp: null,\n perceivedDuration: 0,\n duration: 0,\n request: null,\n response: null,\n };\n\n const { allowMinimumUploadDuration } = options;\n\n const process = (file, metadata) => {\n const progressFn = () => {\n // we've not yet started the real download, stop here\n // the request might not go through, for instance, there might be some server trouble\n // if state.progress is null, the server does not allow computing progress and we show the spinner instead\n if (state.duration === 0 || state.progress === null) return;\n\n // as we're now processing, fire the progress event\n api.fire('progress', api.getProgress());\n };\n\n const completeFn = () => {\n state.complete = true;\n api.fire('load-perceived', state.response.body);\n };\n\n // let's start processing\n api.fire('start');\n\n // set request start\n state.timestamp = Date.now();\n\n // create perceived performance progress indicator\n state.perceivedPerformanceUpdater = createPerceivedPerformanceUpdater(\n progress => {\n state.perceivedProgress = progress;\n state.perceivedDuration = Date.now() - state.timestamp;\n\n progressFn();\n\n // if fake progress is done, and a response has been received,\n // and we've not yet called the complete method\n if (state.response && state.perceivedProgress === 1 && !state.complete) {\n // we done!\n completeFn();\n }\n },\n // random delay as in a list of files you start noticing\n // files uploading at the exact same speed\n allowMinimumUploadDuration ? getRandomNumber(750, 1500) : 0\n );\n\n // remember request so we can abort it later\n state.request = processFn(\n // the file to process\n file,\n\n // the metadata to send along\n metadata,\n\n // callbacks (load, error, progress, abort, transfer)\n // load expects the body to be a server id if\n // you want to make use of revert\n response => {\n // we put the response in state so we can access\n // it outside of this method\n state.response = isObject(response)\n ? response\n : {\n type: 'load',\n code: 200,\n body: `${response}`,\n headers: {},\n };\n\n // update duration\n state.duration = Date.now() - state.timestamp;\n\n // force progress to 1 as we're now done\n state.progress = 1;\n\n // actual load is done let's share results\n api.fire('load', state.response.body);\n\n // we are really done\n // if perceived progress is 1 ( wait for perceived progress to complete )\n // or if server does not support progress ( null )\n if (\n !allowMinimumUploadDuration ||\n (allowMinimumUploadDuration && state.perceivedProgress === 1)\n ) {\n completeFn();\n }\n },\n\n // error is expected to be an object with type, code, body\n error => {\n // cancel updater\n state.perceivedPerformanceUpdater.clear();\n\n // update others about this error\n api.fire(\n 'error',\n isObject(error)\n ? error\n : {\n type: 'error',\n code: 0,\n body: `${error}`,\n }\n );\n },\n\n // actual processing progress\n (computable, current, total) => {\n // update actual duration\n state.duration = Date.now() - state.timestamp;\n\n // update actual progress\n state.progress = computable ? current / total : null;\n\n progressFn();\n },\n\n // abort does not expect a value\n () => {\n // stop updater\n state.perceivedPerformanceUpdater.clear();\n\n // fire the abort event so we can switch visuals\n api.fire('abort', state.response ? state.response.body : null);\n },\n\n // register the id for this transfer\n transferId => {\n api.fire('transfer', transferId);\n }\n );\n };\n\n const abort = () => {\n // no request running, can't abort\n if (!state.request) return;\n\n // stop updater\n state.perceivedPerformanceUpdater.clear();\n\n // abort actual request\n if (state.request.abort) state.request.abort();\n\n // if has response object, we've completed the request\n state.complete = true;\n };\n\n const reset = () => {\n abort();\n state.complete = false;\n state.perceivedProgress = 0;\n state.progress = 0;\n state.timestamp = null;\n state.perceivedDuration = 0;\n state.duration = 0;\n state.request = null;\n state.response = null;\n };\n\n const getProgress = allowMinimumUploadDuration\n ? () => (state.progress ? Math.min(state.progress, state.perceivedProgress) : null)\n : () => state.progress || null;\n\n const getDuration = allowMinimumUploadDuration\n ? () => Math.min(state.duration, state.perceivedDuration)\n : () => state.duration;\n\n const api = {\n ...on(),\n process, // start processing file\n abort, // abort active process request\n getProgress,\n getDuration,\n reset,\n };\n\n return api;\n};\n\nconst getFilenameWithoutExtension = name => name.substring(0, name.lastIndexOf('.')) || name;\n\nconst createFileStub = source => {\n let data = [source.name, source.size, source.type];\n\n // is blob or base64, then we need to set the name\n if (source instanceof Blob || isBase64DataURI(source)) {\n data[0] = source.name || getDateString();\n } else if (isBase64DataURI(source)) {\n // if is base64 data uri we need to determine the average size and type\n data[1] = source.length;\n data[2] = getMimeTypeFromBase64DataURI(source);\n } else if (isString(source)) {\n // url\n data[0] = getFilenameFromURL(source);\n data[1] = 0;\n data[2] = 'application/octet-stream';\n }\n\n return {\n name: data[0],\n size: data[1],\n type: data[2],\n };\n};\n\nconst isFile = value => !!(value instanceof File || (value instanceof Blob && value.name));\n\nconst deepCloneObject = src => {\n if (!isObject(src)) return src;\n const target = isArray(src) ? [] : {};\n for (const key in src) {\n if (!src.hasOwnProperty(key)) continue;\n const v = src[key];\n target[key] = v && isObject(v) ? deepCloneObject(v) : v;\n }\n return target;\n};\n\nconst createItem = (origin = null, serverFileReference = null, file = null) => {\n // unique id for this item, is used to identify the item across views\n const id = getUniqueId();\n\n /**\n * Internal item state\n */\n const state = {\n // is archived\n archived: false,\n\n // if is frozen, no longer fires events\n frozen: false,\n\n // removed from view\n released: false,\n\n // original source\n source: null,\n\n // file model reference\n file,\n\n // id of file on server\n serverFileReference,\n\n // id of file transfer on server\n transferId: null,\n\n // is aborted\n processingAborted: false,\n\n // current item status\n status: serverFileReference ? ItemStatus.PROCESSING_COMPLETE : ItemStatus.INIT,\n\n // active processes\n activeLoader: null,\n activeProcessor: null,\n };\n\n // callback used when abort processing is called to link back to the resolve method\n let abortProcessingRequestComplete = null;\n\n /**\n * Externally added item metadata\n */\n const metadata = {};\n\n // item data\n const setStatus = status => (state.status = status);\n\n // fire event unless the item has been archived\n const fire = (event, ...params) => {\n if (state.released || state.frozen) return;\n api.fire(event, ...params);\n };\n\n // file data\n const getFileExtension = () => getExtensionFromFilename(state.file.name);\n const getFileType = () => state.file.type;\n const getFileSize = () => state.file.size;\n const getFile = () => state.file;\n\n //\n // logic to load a file\n //\n const load = (source, loader, onload) => {\n // remember the original item source\n state.source = source;\n\n // source is known\n api.fireSync('init');\n\n // file stub is already there\n if (state.file) {\n api.fireSync('load-skip');\n return;\n }\n\n // set a stub file object while loading the actual data\n state.file = createFileStub(source);\n\n // starts loading\n loader.on('init', () => {\n fire('load-init');\n });\n\n // we'eve received a size indication, let's update the stub\n loader.on('meta', meta => {\n // set size of file stub\n state.file.size = meta.size;\n\n // set name of file stub\n state.file.filename = meta.filename;\n\n // if has received source, we done\n if (meta.source) {\n origin = FileOrigin.LIMBO;\n state.serverFileReference = meta.source;\n state.status = ItemStatus.PROCESSING_COMPLETE;\n }\n\n // size has been updated\n fire('load-meta');\n });\n\n // the file is now loading we need to update the progress indicators\n loader.on('progress', progress => {\n setStatus(ItemStatus.LOADING);\n\n fire('load-progress', progress);\n });\n\n // an error was thrown while loading the file, we need to switch to error state\n loader.on('error', error => {\n setStatus(ItemStatus.LOAD_ERROR);\n\n fire('load-request-error', error);\n });\n\n // user or another process aborted the file load (cannot retry)\n loader.on('abort', () => {\n setStatus(ItemStatus.INIT);\n fire('load-abort');\n });\n\n // done loading\n loader.on('load', file => {\n // as we've now loaded the file the loader is no longer required\n state.activeLoader = null;\n\n // called when file has loaded succesfully\n const success = result => {\n // set (possibly) transformed file\n state.file = isFile(result) ? result : state.file;\n\n // file received\n if (origin === FileOrigin.LIMBO && state.serverFileReference) {\n setStatus(ItemStatus.PROCESSING_COMPLETE);\n } else {\n setStatus(ItemStatus.IDLE);\n }\n\n fire('load');\n };\n\n const error = result => {\n // set original file\n state.file = file;\n fire('load-meta');\n\n setStatus(ItemStatus.LOAD_ERROR);\n fire('load-file-error', result);\n };\n\n // if we already have a server file reference, we don't need to call the onload method\n if (state.serverFileReference) {\n success(file);\n return;\n }\n\n // no server id, let's give this file the full treatment\n onload(file, success, error);\n });\n\n // set loader source data\n loader.setSource(source);\n\n // set as active loader\n state.activeLoader = loader;\n\n // load the source data\n loader.load();\n };\n\n const retryLoad = () => {\n if (!state.activeLoader) {\n return;\n }\n state.activeLoader.load();\n };\n\n const abortLoad = () => {\n if (state.activeLoader) {\n state.activeLoader.abort();\n return;\n }\n setStatus(ItemStatus.INIT);\n fire('load-abort');\n };\n\n //\n // logic to process a file\n //\n const process = (processor, onprocess) => {\n // processing was aborted\n if (state.processingAborted) {\n state.processingAborted = false;\n return;\n }\n\n // now processing\n setStatus(ItemStatus.PROCESSING);\n\n // reset abort callback\n abortProcessingRequestComplete = null;\n\n // if no file loaded we'll wait for the load event\n if (!(state.file instanceof Blob)) {\n api.on('load', () => {\n process(processor, onprocess);\n });\n return;\n }\n\n // setup processor\n processor.on('load', serverFileReference => {\n // need this id to be able to revert the upload\n state.transferId = null;\n state.serverFileReference = serverFileReference;\n });\n\n // register transfer id\n processor.on('transfer', transferId => {\n // need this id to be able to revert the upload\n state.transferId = transferId;\n });\n\n processor.on('load-perceived', serverFileReference => {\n // no longer required\n state.activeProcessor = null;\n\n // need this id to be able to rever the upload\n state.transferId = null;\n state.serverFileReference = serverFileReference;\n\n setStatus(ItemStatus.PROCESSING_COMPLETE);\n fire('process-complete', serverFileReference);\n });\n\n processor.on('start', () => {\n fire('process-start');\n });\n\n processor.on('error', error => {\n state.activeProcessor = null;\n setStatus(ItemStatus.PROCESSING_ERROR);\n fire('process-error', error);\n });\n\n processor.on('abort', serverFileReference => {\n state.activeProcessor = null;\n\n // if file was uploaded but processing was cancelled during perceived processor time store file reference\n state.serverFileReference = serverFileReference;\n\n setStatus(ItemStatus.IDLE);\n fire('process-abort');\n\n // has timeout so doesn't interfere with remove action\n if (abortProcessingRequestComplete) {\n abortProcessingRequestComplete();\n }\n });\n\n processor.on('progress', progress => {\n fire('process-progress', progress);\n });\n\n // when successfully transformed\n const success = file => {\n // if was archived in the mean time, don't process\n if (state.archived) return;\n\n // process file!\n processor.process(file, { ...metadata });\n };\n\n // something went wrong during transform phase\n const error = console.error;\n\n // start processing the file\n onprocess(state.file, success, error);\n\n // set as active processor\n state.activeProcessor = processor;\n };\n\n const requestProcessing = () => {\n state.processingAborted = false;\n setStatus(ItemStatus.PROCESSING_QUEUED);\n };\n\n const abortProcessing = () =>\n new Promise(resolve => {\n if (!state.activeProcessor) {\n state.processingAborted = true;\n\n setStatus(ItemStatus.IDLE);\n fire('process-abort');\n\n resolve();\n return;\n }\n\n abortProcessingRequestComplete = () => {\n resolve();\n };\n\n state.activeProcessor.abort();\n });\n\n //\n // logic to revert a processed file\n //\n const revert = (revertFileUpload, forceRevert) =>\n new Promise((resolve, reject) => {\n // a completed upload will have a serverFileReference, a failed chunked upload where\n // getting a serverId succeeded but >=0 chunks have been uploaded will have transferId set\n const serverTransferId =\n state.serverFileReference !== null ? state.serverFileReference : state.transferId;\n\n // cannot revert without a server id for this process\n if (serverTransferId === null) {\n resolve();\n return;\n }\n\n // revert the upload (fire and forget)\n revertFileUpload(\n serverTransferId,\n () => {\n // reset file server id and transfer id as now it's not available on the server\n state.serverFileReference = null;\n state.transferId = null;\n resolve();\n },\n error => {\n // don't set error state when reverting is optional, it will always resolve\n if (!forceRevert) {\n resolve();\n return;\n }\n\n // oh no errors\n setStatus(ItemStatus.PROCESSING_REVERT_ERROR);\n fire('process-revert-error');\n reject(error);\n }\n );\n\n // fire event\n setStatus(ItemStatus.IDLE);\n fire('process-revert');\n });\n\n // exposed methods\n const setMetadata = (key, value, silent) => {\n const keys = key.split('.');\n const root = keys[0];\n const last = keys.pop();\n let data = metadata;\n keys.forEach(key => (data = data[key]));\n\n // compare old value against new value, if they're the same, we're not updating\n if (JSON.stringify(data[last]) === JSON.stringify(value)) return;\n\n // update value\n data[last] = value;\n\n // fire update\n fire('metadata-update', {\n key: root,\n value: metadata[root],\n silent,\n });\n };\n\n const getMetadata = key => deepCloneObject(key ? metadata[key] : metadata);\n\n const api = {\n id: { get: () => id },\n origin: { get: () => origin, set: value => (origin = value) },\n serverId: { get: () => state.serverFileReference },\n transferId: { get: () => state.transferId },\n status: { get: () => state.status },\n filename: { get: () => state.file.name },\n filenameWithoutExtension: { get: () => getFilenameWithoutExtension(state.file.name) },\n fileExtension: { get: getFileExtension },\n fileType: { get: getFileType },\n fileSize: { get: getFileSize },\n file: { get: getFile },\n relativePath: { get: () => state.file._relativePath },\n\n source: { get: () => state.source },\n\n getMetadata,\n setMetadata: (key, value, silent) => {\n if (isObject(key)) {\n const data = key;\n Object.keys(data).forEach(key => {\n setMetadata(key, data[key], value);\n });\n return key;\n }\n setMetadata(key, value, silent);\n return value;\n },\n\n extend: (name, handler) => (itemAPI[name] = handler),\n\n abortLoad,\n retryLoad,\n requestProcessing,\n abortProcessing,\n\n load,\n process,\n revert,\n\n ...on(),\n\n freeze: () => (state.frozen = true),\n\n release: () => (state.released = true),\n released: { get: () => state.released },\n\n archive: () => (state.archived = true),\n archived: { get: () => state.archived },\n };\n\n // create it here instead of returning it instantly so we can extend it later\n const itemAPI = createObject(api);\n\n return itemAPI;\n};\n\nconst getItemIndexByQuery = (items, query) => {\n // just return first index\n if (isEmpty(query)) {\n return 0;\n }\n\n // invalid queries\n if (!isString(query)) {\n return -1;\n }\n\n // return item by id (or -1 if not found)\n return items.findIndex(item => item.id === query);\n};\n\nconst getItemById = (items, itemId) => {\n const index = getItemIndexByQuery(items, itemId);\n if (index < 0) {\n return;\n }\n return items[index] || null;\n};\n\nconst fetchBlob = (url, load, error, progress, abort, headers) => {\n const request = sendRequest(null, url, {\n method: 'GET',\n responseType: 'blob',\n });\n\n request.onload = xhr => {\n // get headers\n const headers = xhr.getAllResponseHeaders();\n\n // get filename\n const filename = getFileInfoFromHeaders(headers).name || getFilenameFromURL(url);\n\n // create response\n load(createResponse('load', xhr.status, getFileFromBlob(xhr.response, filename), headers));\n };\n\n request.onerror = xhr => {\n error(createResponse('error', xhr.status, xhr.statusText, xhr.getAllResponseHeaders()));\n };\n\n request.onheaders = xhr => {\n headers(createResponse('headers', xhr.status, null, xhr.getAllResponseHeaders()));\n };\n\n request.ontimeout = createTimeoutResponse(error);\n request.onprogress = progress;\n request.onabort = abort;\n\n // should return request\n return request;\n};\n\nconst getDomainFromURL = url => {\n if (url.indexOf('//') === 0) {\n url = location.protocol + url;\n }\n return url\n .toLowerCase()\n .replace('blob:', '')\n .replace(/([a-z])?:\\/\\//, '$1')\n .split('/')[0];\n};\n\nconst isExternalURL = url =>\n (url.indexOf(':') > -1 || url.indexOf('//') > -1) &&\n getDomainFromURL(location.href) !== getDomainFromURL(url);\n\nconst dynamicLabel = label => (...params) => (isFunction(label) ? label(...params) : label);\n\nconst isMockItem = item => !isFile(item.file);\n\nconst listUpdated = (dispatch, state) => {\n clearTimeout(state.listUpdateTimeout);\n state.listUpdateTimeout = setTimeout(() => {\n dispatch('DID_UPDATE_ITEMS', { items: getActiveItems(state.items) });\n }, 0);\n};\n\nconst optionalPromise = (fn, ...params) =>\n new Promise(resolve => {\n if (!fn) {\n return resolve(true);\n }\n\n const result = fn(...params);\n\n if (result == null) {\n return resolve(true);\n }\n\n if (typeof result === 'boolean') {\n return resolve(result);\n }\n\n if (typeof result.then === 'function') {\n result.then(resolve);\n }\n });\n\nconst sortItems = (state, compare) => {\n state.items.sort((a, b) => compare(createItemAPI(a), createItemAPI(b)));\n};\n\n// returns item based on state\nconst getItemByQueryFromState = (state, itemHandler) => ({\n query,\n success = () => {},\n failure = () => {},\n ...options\n} = {}) => {\n const item = getItemByQuery(state.items, query);\n if (!item) {\n failure({\n error: createResponse('error', 0, 'Item not found'),\n file: null,\n });\n return;\n }\n itemHandler(item, success, failure, options || {});\n};\n\nconst actions = (dispatch, query, state) => ({\n /**\n * Aborts all ongoing processes\n */\n ABORT_ALL: () => {\n getActiveItems(state.items).forEach(item => {\n item.freeze();\n item.abortLoad();\n item.abortProcessing();\n });\n },\n\n /**\n * Sets initial files\n */\n DID_SET_FILES: ({ value = [] }) => {\n // map values to file objects\n const files = value.map(file => ({\n source: file.source ? file.source : file,\n options: file.options,\n }));\n\n // loop over files, if file is in list, leave it be, if not, remove\n // test if items should be moved\n let activeItems = getActiveItems(state.items);\n\n activeItems.forEach(item => {\n // if item not is in new value, remove\n if (!files.find(file => file.source === item.source || file.source === item.file)) {\n dispatch('REMOVE_ITEM', { query: item, remove: false });\n }\n });\n\n // add new files\n activeItems = getActiveItems(state.items);\n files.forEach((file, index) => {\n // if file is already in list\n if (activeItems.find(item => item.source === file.source || item.file === file.source))\n return;\n\n // not in list, add\n dispatch('ADD_ITEM', {\n ...file,\n interactionMethod: InteractionMethod.NONE,\n index,\n });\n });\n },\n\n DID_UPDATE_ITEM_METADATA: ({ id, action, change }) => {\n // don't do anything\n if (change.silent) return;\n\n // if is called multiple times in close succession we combined all calls together to save resources\n clearTimeout(state.itemUpdateTimeout);\n state.itemUpdateTimeout = setTimeout(() => {\n const item = getItemById(state.items, id);\n\n // only revert and attempt to upload when we're uploading to a server\n if (!query('IS_ASYNC')) {\n // should we update the output data\n applyFilterChain('SHOULD_PREPARE_OUTPUT', false, {\n item,\n query,\n action,\n change,\n }).then(shouldPrepareOutput => {\n // plugins determined the output data should be prepared (or not), can be adjusted with beforePrepareOutput hook\n const beforePrepareFile = query('GET_BEFORE_PREPARE_FILE');\n if (beforePrepareFile)\n shouldPrepareOutput = beforePrepareFile(item, shouldPrepareOutput);\n\n if (!shouldPrepareOutput) return;\n\n dispatch(\n 'REQUEST_PREPARE_OUTPUT',\n {\n query: id,\n item,\n success: file => {\n dispatch('DID_PREPARE_OUTPUT', { id, file });\n },\n },\n true\n );\n });\n\n return;\n }\n\n // if is local item we need to enable upload button so change can be propagated to server\n if (item.origin === FileOrigin.LOCAL) {\n dispatch('DID_LOAD_ITEM', {\n id: item.id,\n error: null,\n serverFileReference: item.source,\n });\n }\n\n // for async scenarios\n const upload = () => {\n // we push this forward a bit so the interface is updated correctly\n setTimeout(() => {\n dispatch('REQUEST_ITEM_PROCESSING', { query: id });\n }, 32);\n };\n\n const revert = doUpload => {\n item.revert(\n createRevertFunction(state.options.server.url, state.options.server.revert),\n query('GET_FORCE_REVERT')\n )\n .then(doUpload ? upload : () => {})\n .catch(() => {});\n };\n\n const abort = doUpload => {\n item.abortProcessing().then(doUpload ? upload : () => {});\n };\n\n // if we should re-upload the file immediately\n if (item.status === ItemStatus.PROCESSING_COMPLETE) {\n return revert(state.options.instantUpload);\n }\n\n // if currently uploading, cancel upload\n if (item.status === ItemStatus.PROCESSING) {\n return abort(state.options.instantUpload);\n }\n\n if (state.options.instantUpload) {\n upload();\n }\n }, 0);\n },\n\n MOVE_ITEM: ({ query, index }) => {\n const item = getItemByQuery(state.items, query);\n if (!item) return;\n const currentIndex = state.items.indexOf(item);\n index = limit(index, 0, state.items.length - 1);\n if (currentIndex === index) return;\n state.items.splice(index, 0, state.items.splice(currentIndex, 1)[0]);\n },\n\n SORT: ({ compare }) => {\n sortItems(state, compare);\n dispatch('DID_SORT_ITEMS', {\n items: query('GET_ACTIVE_ITEMS'),\n });\n },\n\n ADD_ITEMS: ({ items, index, interactionMethod, success = () => {}, failure = () => {} }) => {\n let currentIndex = index;\n\n if (index === -1 || typeof index === 'undefined') {\n const insertLocation = query('GET_ITEM_INSERT_LOCATION');\n const totalItems = query('GET_TOTAL_ITEMS');\n currentIndex = insertLocation === 'before' ? 0 : totalItems;\n }\n\n const ignoredFiles = query('GET_IGNORED_FILES');\n const isValidFile = source =>\n isFile(source) ? !ignoredFiles.includes(source.name.toLowerCase()) : !isEmpty(source);\n const validItems = items.filter(isValidFile);\n\n const promises = validItems.map(\n source =>\n new Promise((resolve, reject) => {\n dispatch('ADD_ITEM', {\n interactionMethod,\n source: source.source || source,\n success: resolve,\n failure: reject,\n index: currentIndex++,\n options: source.options || {},\n });\n })\n );\n\n Promise.all(promises)\n .then(success)\n .catch(failure);\n },\n\n /**\n * @param source\n * @param index\n * @param interactionMethod\n */\n ADD_ITEM: ({\n source,\n index = -1,\n interactionMethod,\n success = () => {},\n failure = () => {},\n options = {},\n }) => {\n // if no source supplied\n if (isEmpty(source)) {\n failure({\n error: createResponse('error', 0, 'No source'),\n file: null,\n });\n return;\n }\n\n // filter out invalid file items, used to filter dropped directory contents\n if (isFile(source) && state.options.ignoredFiles.includes(source.name.toLowerCase())) {\n // fail silently\n return;\n }\n\n // test if there's still room in the list of files\n if (!hasRoomForItem(state)) {\n // if multiple allowed, we can't replace\n // or if only a single item is allowed but we're not allowed to replace it we exit\n if (\n state.options.allowMultiple ||\n (!state.options.allowMultiple && !state.options.allowReplace)\n ) {\n const error = createResponse('warning', 0, 'Max files');\n\n dispatch('DID_THROW_MAX_FILES', {\n source,\n error,\n });\n\n failure({ error, file: null });\n\n return;\n }\n\n // let's replace the item\n // id of first item we're about to remove\n const item = getActiveItems(state.items)[0];\n\n // if has been processed remove it from the server as well\n if (\n item.status === ItemStatus.PROCESSING_COMPLETE ||\n item.status === ItemStatus.PROCESSING_REVERT_ERROR\n ) {\n const forceRevert = query('GET_FORCE_REVERT');\n item.revert(\n createRevertFunction(state.options.server.url, state.options.server.revert),\n forceRevert\n )\n .then(() => {\n if (!forceRevert) return;\n\n // try to add now\n dispatch('ADD_ITEM', {\n source,\n index,\n interactionMethod,\n success,\n failure,\n options,\n });\n })\n .catch(() => {}); // no need to handle this catch state for now\n\n if (forceRevert) return;\n }\n\n // remove first item as it will be replaced by this item\n dispatch('REMOVE_ITEM', { query: item.id });\n }\n\n // where did the file originate\n const origin =\n options.type === 'local'\n ? FileOrigin.LOCAL\n : options.type === 'limbo'\n ? FileOrigin.LIMBO\n : FileOrigin.INPUT;\n\n // create a new blank item\n const item = createItem(\n // where did this file come from\n origin,\n\n // an input file never has a server file reference\n origin === FileOrigin.INPUT ? null : source,\n\n // file mock data, if defined\n options.file\n );\n\n // set initial meta data\n Object.keys(options.metadata || {}).forEach(key => {\n item.setMetadata(key, options.metadata[key]);\n });\n\n // created the item, let plugins add methods\n applyFilters('DID_CREATE_ITEM', item, { query, dispatch });\n\n // where to insert new items\n const itemInsertLocation = query('GET_ITEM_INSERT_LOCATION');\n\n // adjust index if is not allowed to pick location\n if (!state.options.itemInsertLocationFreedom) {\n index = itemInsertLocation === 'before' ? -1 : state.items.length;\n }\n\n // add item to list\n insertItem(state.items, item, index);\n\n // sort items in list\n if (isFunction(itemInsertLocation) && source) {\n sortItems(state, itemInsertLocation);\n }\n\n // get a quick reference to the item id\n const id = item.id;\n\n // observe item events\n item.on('init', () => {\n dispatch('DID_INIT_ITEM', { id });\n });\n\n item.on('load-init', () => {\n dispatch('DID_START_ITEM_LOAD', { id });\n });\n\n item.on('load-meta', () => {\n dispatch('DID_UPDATE_ITEM_META', { id });\n });\n\n item.on('load-progress', progress => {\n dispatch('DID_UPDATE_ITEM_LOAD_PROGRESS', { id, progress });\n });\n\n item.on('load-request-error', error => {\n const mainStatus = dynamicLabel(state.options.labelFileLoadError)(error);\n\n // is client error, no way to recover\n if (error.code >= 400 && error.code < 500) {\n dispatch('DID_THROW_ITEM_INVALID', {\n id,\n error,\n status: {\n main: mainStatus,\n sub: `${error.code} (${error.body})`,\n },\n });\n\n // reject the file so can be dealt with through API\n failure({ error, file: createItemAPI(item) });\n return;\n }\n\n // is possible server error, so might be possible to retry\n dispatch('DID_THROW_ITEM_LOAD_ERROR', {\n id,\n error,\n status: {\n main: mainStatus,\n sub: state.options.labelTapToRetry,\n },\n });\n });\n\n item.on('load-file-error', error => {\n dispatch('DID_THROW_ITEM_INVALID', {\n id,\n error: error.status,\n status: error.status,\n });\n failure({ error: error.status, file: createItemAPI(item) });\n });\n\n item.on('load-abort', () => {\n dispatch('REMOVE_ITEM', { query: id });\n });\n\n item.on('load-skip', () => {\n dispatch('COMPLETE_LOAD_ITEM', {\n query: id,\n item,\n data: {\n source,\n success,\n },\n });\n });\n\n item.on('load', () => {\n const handleAdd = shouldAdd => {\n // no should not add this file\n if (!shouldAdd) {\n dispatch('REMOVE_ITEM', {\n query: id,\n });\n return;\n }\n\n // now interested in metadata updates\n item.on('metadata-update', change => {\n dispatch('DID_UPDATE_ITEM_METADATA', { id, change });\n });\n\n // let plugins decide if the output data should be prepared at this point\n // means we'll do this and wait for idle state\n applyFilterChain('SHOULD_PREPARE_OUTPUT', false, { item, query }).then(\n shouldPrepareOutput => {\n // plugins determined the output data should be prepared (or not), can be adjusted with beforePrepareOutput hook\n const beforePrepareFile = query('GET_BEFORE_PREPARE_FILE');\n if (beforePrepareFile)\n shouldPrepareOutput = beforePrepareFile(item, shouldPrepareOutput);\n\n const loadComplete = () => {\n dispatch('COMPLETE_LOAD_ITEM', {\n query: id,\n item,\n data: {\n source,\n success,\n },\n });\n\n listUpdated(dispatch, state);\n };\n\n // exit\n if (shouldPrepareOutput) {\n // wait for idle state and then run PREPARE_OUTPUT\n dispatch(\n 'REQUEST_PREPARE_OUTPUT',\n {\n query: id,\n item,\n success: file => {\n dispatch('DID_PREPARE_OUTPUT', { id, file });\n loadComplete();\n },\n },\n true\n );\n\n return;\n }\n\n loadComplete();\n }\n );\n };\n\n // item loaded, allow plugins to\n // - read data (quickly)\n // - add metadata\n applyFilterChain('DID_LOAD_ITEM', item, { query, dispatch })\n .then(() => {\n optionalPromise(query('GET_BEFORE_ADD_FILE'), createItemAPI(item)).then(\n handleAdd\n );\n })\n .catch(e => {\n if (!e || !e.error || !e.status) return handleAdd(false);\n dispatch('DID_THROW_ITEM_INVALID', {\n id,\n error: e.error,\n status: e.status,\n });\n });\n });\n\n item.on('process-start', () => {\n dispatch('DID_START_ITEM_PROCESSING', { id });\n });\n\n item.on('process-progress', progress => {\n dispatch('DID_UPDATE_ITEM_PROCESS_PROGRESS', { id, progress });\n });\n\n item.on('process-error', error => {\n dispatch('DID_THROW_ITEM_PROCESSING_ERROR', {\n id,\n error,\n status: {\n main: dynamicLabel(state.options.labelFileProcessingError)(error),\n sub: state.options.labelTapToRetry,\n },\n });\n });\n\n item.on('process-revert-error', error => {\n dispatch('DID_THROW_ITEM_PROCESSING_REVERT_ERROR', {\n id,\n error,\n status: {\n main: dynamicLabel(state.options.labelFileProcessingRevertError)(error),\n sub: state.options.labelTapToRetry,\n },\n });\n });\n\n item.on('process-complete', serverFileReference => {\n dispatch('DID_COMPLETE_ITEM_PROCESSING', {\n id,\n error: null,\n serverFileReference,\n });\n dispatch('DID_DEFINE_VALUE', { id, value: serverFileReference });\n });\n\n item.on('process-abort', () => {\n dispatch('DID_ABORT_ITEM_PROCESSING', { id });\n });\n\n item.on('process-revert', () => {\n dispatch('DID_REVERT_ITEM_PROCESSING', { id });\n dispatch('DID_DEFINE_VALUE', { id, value: null });\n });\n\n // let view know the item has been inserted\n dispatch('DID_ADD_ITEM', { id, index, interactionMethod });\n\n listUpdated(dispatch, state);\n\n // start loading the source\n const { url, load, restore, fetch } = state.options.server || {};\n\n item.load(\n source,\n\n // this creates a function that loads the file based on the type of file (string, base64, blob, file) and location of file (local, remote, limbo)\n createFileLoader(\n origin === FileOrigin.INPUT\n ? // input, if is remote, see if should use custom fetch, else use default fetchBlob\n isString(source) && isExternalURL(source)\n ? fetch\n ? createFetchFunction(url, fetch)\n : fetchBlob // remote url\n : fetchBlob // try to fetch url\n : // limbo or local\n origin === FileOrigin.LIMBO\n ? createFetchFunction(url, restore) // limbo\n : createFetchFunction(url, load) // local\n ),\n\n // called when the file is loaded so it can be piped through the filters\n (file, success, error) => {\n // let's process the file\n applyFilterChain('LOAD_FILE', file, { query })\n .then(success)\n .catch(error);\n }\n );\n },\n\n REQUEST_PREPARE_OUTPUT: ({ item, success, failure = () => {} }) => {\n // error response if item archived\n const err = {\n error: createResponse('error', 0, 'Item not found'),\n file: null,\n };\n\n // don't handle archived items, an item could have been archived (load aborted) while waiting to be prepared\n if (item.archived) return failure(err);\n\n // allow plugins to alter the file data\n applyFilterChain('PREPARE_OUTPUT', item.file, { query, item }).then(result => {\n applyFilterChain('COMPLETE_PREPARE_OUTPUT', result, { query, item }).then(result => {\n // don't handle archived items, an item could have been archived (load aborted) while being prepared\n if (item.archived) return failure(err);\n\n // we done!\n success(result);\n });\n });\n },\n\n COMPLETE_LOAD_ITEM: ({ item, data }) => {\n const { success, source } = data;\n\n // sort items in list\n const itemInsertLocation = query('GET_ITEM_INSERT_LOCATION');\n if (isFunction(itemInsertLocation) && source) {\n sortItems(state, itemInsertLocation);\n }\n\n // let interface know the item has loaded\n dispatch('DID_LOAD_ITEM', {\n id: item.id,\n error: null,\n serverFileReference: item.origin === FileOrigin.INPUT ? null : source,\n });\n\n // item has been successfully loaded and added to the\n // list of items so can now be safely returned for use\n success(createItemAPI(item));\n\n // if this is a local server file we need to show a different state\n if (item.origin === FileOrigin.LOCAL) {\n dispatch('DID_LOAD_LOCAL_ITEM', { id: item.id });\n return;\n }\n\n // if is a temp server file we prevent async upload call here (as the file is already on the server)\n if (item.origin === FileOrigin.LIMBO) {\n dispatch('DID_COMPLETE_ITEM_PROCESSING', {\n id: item.id,\n error: null,\n serverFileReference: source,\n });\n\n dispatch('DID_DEFINE_VALUE', {\n id: item.id,\n value: item.serverId || source,\n });\n return;\n }\n\n // id we are allowed to upload the file immediately, lets do it\n if (query('IS_ASYNC') && state.options.instantUpload) {\n dispatch('REQUEST_ITEM_PROCESSING', { query: item.id });\n }\n },\n\n RETRY_ITEM_LOAD: getItemByQueryFromState(state, item => {\n // try loading the source one more time\n item.retryLoad();\n }),\n\n REQUEST_ITEM_PREPARE: getItemByQueryFromState(state, (item, success, failure) => {\n dispatch(\n 'REQUEST_PREPARE_OUTPUT',\n {\n query: item.id,\n item,\n success: file => {\n dispatch('DID_PREPARE_OUTPUT', { id: item.id, file });\n success({\n file: item,\n output: file,\n });\n },\n failure,\n },\n true\n );\n }),\n\n REQUEST_ITEM_PROCESSING: getItemByQueryFromState(state, (item, success, failure) => {\n // cannot be queued (or is already queued)\n const itemCanBeQueuedForProcessing =\n // waiting for something\n item.status === ItemStatus.IDLE ||\n // processing went wrong earlier\n item.status === ItemStatus.PROCESSING_ERROR;\n\n // not ready to be processed\n if (!itemCanBeQueuedForProcessing) {\n const processNow = () =>\n dispatch('REQUEST_ITEM_PROCESSING', { query: item, success, failure });\n\n const process = () => (document.hidden ? processNow() : setTimeout(processNow, 32));\n\n // if already done processing or tried to revert but didn't work, try again\n if (\n item.status === ItemStatus.PROCESSING_COMPLETE ||\n item.status === ItemStatus.PROCESSING_REVERT_ERROR\n ) {\n item.revert(\n createRevertFunction(state.options.server.url, state.options.server.revert),\n query('GET_FORCE_REVERT')\n )\n .then(process)\n .catch(() => {}); // don't continue with processing if something went wrong\n } else if (item.status === ItemStatus.PROCESSING) {\n item.abortProcessing().then(process);\n }\n\n return;\n }\n\n // already queued for processing\n if (item.status === ItemStatus.PROCESSING_QUEUED) return;\n\n item.requestProcessing();\n\n dispatch('DID_REQUEST_ITEM_PROCESSING', { id: item.id });\n\n dispatch('PROCESS_ITEM', { query: item, success, failure }, true);\n }),\n\n PROCESS_ITEM: getItemByQueryFromState(state, (item, success, failure) => {\n const maxParallelUploads = query('GET_MAX_PARALLEL_UPLOADS');\n const totalCurrentUploads = query('GET_ITEMS_BY_STATUS', ItemStatus.PROCESSING).length;\n\n // queue and wait till queue is freed up\n if (totalCurrentUploads === maxParallelUploads) {\n // queue for later processing\n state.processingQueue.push({\n id: item.id,\n success,\n failure,\n });\n\n // stop it!\n return;\n }\n\n // if was not queued or is already processing exit here\n if (item.status === ItemStatus.PROCESSING) return;\n\n const processNext = () => {\n // process queueud items\n const queueEntry = state.processingQueue.shift();\n\n // no items left\n if (!queueEntry) return;\n\n // get item reference\n const { id, success, failure } = queueEntry;\n const itemReference = getItemByQuery(state.items, id);\n\n // if item was archived while in queue, jump to next\n if (!itemReference || itemReference.archived) {\n processNext();\n return;\n }\n\n // process queued item\n dispatch('PROCESS_ITEM', { query: id, success, failure }, true);\n };\n\n // we done function\n item.onOnce('process-complete', () => {\n success(createItemAPI(item));\n processNext();\n\n // if origin is local, and we're instant uploading, trigger remove of original\n // as revert will remove file from list\n const server = state.options.server;\n const instantUpload = state.options.instantUpload;\n if (instantUpload && item.origin === FileOrigin.LOCAL && isFunction(server.remove)) {\n const noop = () => {};\n item.origin = FileOrigin.LIMBO;\n state.options.server.remove(item.source, noop, noop);\n }\n\n // All items processed? No errors?\n const allItemsProcessed =\n query('GET_ITEMS_BY_STATUS', ItemStatus.PROCESSING_COMPLETE).length ===\n state.items.length;\n if (allItemsProcessed) {\n dispatch('DID_COMPLETE_ITEM_PROCESSING_ALL');\n }\n });\n\n // we error function\n item.onOnce('process-error', error => {\n failure({ error, file: createItemAPI(item) });\n processNext();\n });\n\n // start file processing\n const options = state.options;\n item.process(\n createFileProcessor(\n createProcessorFunction(options.server.url, options.server.process, options.name, {\n chunkTransferId: item.transferId,\n chunkServer: options.server.patch,\n chunkUploads: options.chunkUploads,\n chunkForce: options.chunkForce,\n chunkSize: options.chunkSize,\n chunkRetryDelays: options.chunkRetryDelays,\n }),\n {\n allowMinimumUploadDuration: query('GET_ALLOW_MINIMUM_UPLOAD_DURATION'),\n }\n ),\n // called when the file is about to be processed so it can be piped through the transform filters\n (file, success, error) => {\n // allow plugins to alter the file data\n applyFilterChain('PREPARE_OUTPUT', file, { query, item })\n .then(file => {\n dispatch('DID_PREPARE_OUTPUT', { id: item.id, file });\n\n success(file);\n })\n .catch(error);\n }\n );\n }),\n\n RETRY_ITEM_PROCESSING: getItemByQueryFromState(state, item => {\n dispatch('REQUEST_ITEM_PROCESSING', { query: item });\n }),\n\n REQUEST_REMOVE_ITEM: getItemByQueryFromState(state, item => {\n optionalPromise(query('GET_BEFORE_REMOVE_FILE'), createItemAPI(item)).then(shouldRemove => {\n if (!shouldRemove) {\n return;\n }\n dispatch('REMOVE_ITEM', { query: item });\n });\n }),\n\n RELEASE_ITEM: getItemByQueryFromState(state, item => {\n item.release();\n }),\n\n REMOVE_ITEM: getItemByQueryFromState(state, (item, success, failure, options) => {\n const removeFromView = () => {\n // get id reference\n const id = item.id;\n\n // archive the item, this does not remove it from the list\n getItemById(state.items, id).archive();\n\n // tell the view the item has been removed\n dispatch('DID_REMOVE_ITEM', { error: null, id, item });\n\n // now the list has been modified\n listUpdated(dispatch, state);\n\n // correctly removed\n success(createItemAPI(item));\n };\n\n // if this is a local file and the `server.remove` function has been configured,\n // send source there so dev can remove file from server\n const server = state.options.server;\n if (\n item.origin === FileOrigin.LOCAL &&\n server &&\n isFunction(server.remove) &&\n options.remove !== false\n ) {\n dispatch('DID_START_ITEM_REMOVE', { id: item.id });\n\n server.remove(\n item.source,\n () => removeFromView(),\n status => {\n dispatch('DID_THROW_ITEM_REMOVE_ERROR', {\n id: item.id,\n error: createResponse('error', 0, status, null),\n status: {\n main: dynamicLabel(state.options.labelFileRemoveError)(status),\n sub: state.options.labelTapToRetry,\n },\n });\n }\n );\n } else {\n // if is requesting revert and can revert need to call revert handler (not calling request_ because that would also trigger beforeRemoveHook)\n if (\n (options.revert && item.origin !== FileOrigin.LOCAL && item.serverId !== null) ||\n // if chunked uploads are enabled and we're uploading in chunks for this specific file\n // or if the file isn't big enough for chunked uploads but chunkForce is set then call\n // revert before removing from the view...\n (state.options.chunkUploads && item.file.size > state.options.chunkSize) ||\n (state.options.chunkUploads && state.options.chunkForce)\n ) {\n item.revert(\n createRevertFunction(state.options.server.url, state.options.server.revert),\n query('GET_FORCE_REVERT')\n );\n }\n\n // can now safely remove from view\n removeFromView();\n }\n }),\n\n ABORT_ITEM_LOAD: getItemByQueryFromState(state, item => {\n item.abortLoad();\n }),\n\n ABORT_ITEM_PROCESSING: getItemByQueryFromState(state, item => {\n // test if is already processed\n if (item.serverId) {\n dispatch('REVERT_ITEM_PROCESSING', { id: item.id });\n return;\n }\n\n // abort\n item.abortProcessing().then(() => {\n const shouldRemove = state.options.instantUpload;\n if (shouldRemove) {\n dispatch('REMOVE_ITEM', { query: item.id });\n }\n });\n }),\n\n REQUEST_REVERT_ITEM_PROCESSING: getItemByQueryFromState(state, item => {\n // not instant uploading, revert immediately\n if (!state.options.instantUpload) {\n dispatch('REVERT_ITEM_PROCESSING', { query: item });\n return;\n }\n\n // if we're instant uploading the file will also be removed if we revert,\n // so if a before remove file hook is defined we need to run it now\n const handleRevert = shouldRevert => {\n if (!shouldRevert) return;\n dispatch('REVERT_ITEM_PROCESSING', { query: item });\n };\n\n const fn = query('GET_BEFORE_REMOVE_FILE');\n if (!fn) {\n return handleRevert(true);\n }\n\n const requestRemoveResult = fn(createItemAPI(item));\n if (requestRemoveResult == null) {\n // undefined or null\n return handleRevert(true);\n }\n\n if (typeof requestRemoveResult === 'boolean') {\n return handleRevert(requestRemoveResult);\n }\n\n if (typeof requestRemoveResult.then === 'function') {\n requestRemoveResult.then(handleRevert);\n }\n }),\n\n REVERT_ITEM_PROCESSING: getItemByQueryFromState(state, item => {\n item.revert(\n createRevertFunction(state.options.server.url, state.options.server.revert),\n query('GET_FORCE_REVERT')\n )\n .then(() => {\n const shouldRemove = state.options.instantUpload || isMockItem(item);\n if (shouldRemove) {\n dispatch('REMOVE_ITEM', { query: item.id });\n }\n })\n .catch(() => {});\n }),\n\n SET_OPTIONS: ({ options }) => {\n // get all keys passed\n const optionKeys = Object.keys(options);\n\n // get prioritized keyed to include (remove once not in options object)\n const prioritizedOptionKeys = PrioritizedOptions.filter(key => optionKeys.includes(key));\n\n // order the keys, prioritized first, then rest\n const orderedOptionKeys = [\n // add prioritized first if passed to options, else remove\n ...prioritizedOptionKeys,\n\n // prevent duplicate keys\n ...Object.keys(options).filter(key => !prioritizedOptionKeys.includes(key)),\n ];\n\n // dispatch set event for each option\n orderedOptionKeys.forEach(key => {\n dispatch(`SET_${fromCamels(key, '_').toUpperCase()}`, {\n value: options[key],\n });\n });\n },\n});\n\nconst PrioritizedOptions = [\n 'server', // must be processed before \"files\"\n];\n\nconst formatFilename = name => name;\n\nconst createElement$1 = tagName => {\n return document.createElement(tagName);\n};\n\nconst text = (node, value) => {\n let textNode = node.childNodes[0];\n if (!textNode) {\n textNode = document.createTextNode(value);\n node.appendChild(textNode);\n } else if (value !== textNode.nodeValue) {\n textNode.nodeValue = value;\n }\n};\n\nconst polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {\n const angleInRadians = (((angleInDegrees % 360) - 90) * Math.PI) / 180.0;\n return {\n x: centerX + radius * Math.cos(angleInRadians),\n y: centerY + radius * Math.sin(angleInRadians),\n };\n};\n\nconst describeArc = (x, y, radius, startAngle, endAngle, arcSweep) => {\n const start = polarToCartesian(x, y, radius, endAngle);\n const end = polarToCartesian(x, y, radius, startAngle);\n return ['M', start.x, start.y, 'A', radius, radius, 0, arcSweep, 0, end.x, end.y].join(' ');\n};\n\nconst percentageArc = (x, y, radius, from, to) => {\n let arcSweep = 1;\n if (to > from && to - from <= 0.5) {\n arcSweep = 0;\n }\n if (from > to && from - to >= 0.5) {\n arcSweep = 0;\n }\n return describeArc(\n x,\n y,\n radius,\n Math.min(0.9999, from) * 360,\n Math.min(0.9999, to) * 360,\n arcSweep\n );\n};\n\nconst create = ({ root, props }) => {\n // start at 0\n props.spin = false;\n props.progress = 0;\n props.opacity = 0;\n\n // svg\n const svg = createElement('svg');\n root.ref.path = createElement('path', {\n 'stroke-width': 2,\n 'stroke-linecap': 'round',\n });\n svg.appendChild(root.ref.path);\n\n root.ref.svg = svg;\n\n root.appendChild(svg);\n};\n\nconst write = ({ root, props }) => {\n if (props.opacity === 0) {\n return;\n }\n\n if (props.align) {\n root.element.dataset.align = props.align;\n }\n\n // get width of stroke\n const ringStrokeWidth = parseInt(attr(root.ref.path, 'stroke-width'), 10);\n\n // calculate size of ring\n const size = root.rect.element.width * 0.5;\n\n // ring state\n let ringFrom = 0;\n let ringTo = 0;\n\n // now in busy mode\n if (props.spin) {\n ringFrom = 0;\n ringTo = 0.5;\n } else {\n ringFrom = 0;\n ringTo = props.progress;\n }\n\n // get arc path\n const coordinates = percentageArc(size, size, size - ringStrokeWidth, ringFrom, ringTo);\n\n // update progress bar\n attr(root.ref.path, 'd', coordinates);\n\n // hide while contains 0 value\n attr(root.ref.path, 'stroke-opacity', props.spin || props.progress > 0 ? 1 : 0);\n};\n\nconst progressIndicator = createView({\n tag: 'div',\n name: 'progress-indicator',\n ignoreRectUpdate: true,\n ignoreRect: true,\n create,\n write,\n mixins: {\n apis: ['progress', 'spin', 'align'],\n styles: ['opacity'],\n animations: {\n opacity: { type: 'tween', duration: 500 },\n progress: {\n type: 'spring',\n stiffness: 0.95,\n damping: 0.65,\n mass: 10,\n },\n },\n },\n});\n\nconst create$1 = ({ root, props }) => {\n root.element.innerHTML = (props.icon || '') + `${props.label}`;\n\n props.isDisabled = false;\n};\n\nconst write$1 = ({ root, props }) => {\n const { isDisabled } = props;\n const shouldDisable = root.query('GET_DISABLED') || props.opacity === 0;\n\n if (shouldDisable && !isDisabled) {\n props.isDisabled = true;\n attr(root.element, 'disabled', 'disabled');\n } else if (!shouldDisable && isDisabled) {\n props.isDisabled = false;\n root.element.removeAttribute('disabled');\n }\n};\n\nconst fileActionButton = createView({\n tag: 'button',\n attributes: {\n type: 'button',\n },\n ignoreRect: true,\n ignoreRectUpdate: true,\n name: 'file-action-button',\n mixins: {\n apis: ['label'],\n styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity'],\n animations: {\n scaleX: 'spring',\n scaleY: 'spring',\n translateX: 'spring',\n translateY: 'spring',\n opacity: { type: 'tween', duration: 250 },\n },\n listeners: true,\n },\n create: create$1,\n write: write$1,\n});\n\nconst toNaturalFileSize = (bytes, decimalSeparator = '.', base = 1000, options = {}) => {\n const {\n labelBytes = 'bytes',\n labelKilobytes = 'KB',\n labelMegabytes = 'MB',\n labelGigabytes = 'GB',\n } = options;\n\n // no negative byte sizes\n bytes = Math.round(Math.abs(bytes));\n\n const KB = base;\n const MB = base * base;\n const GB = base * base * base;\n\n // just bytes\n if (bytes < KB) {\n return `${bytes} ${labelBytes}`;\n }\n\n // kilobytes\n if (bytes < MB) {\n return `${Math.floor(bytes / KB)} ${labelKilobytes}`;\n }\n\n // megabytes\n if (bytes < GB) {\n return `${removeDecimalsWhenZero(bytes / MB, 1, decimalSeparator)} ${labelMegabytes}`;\n }\n\n // gigabytes\n return `${removeDecimalsWhenZero(bytes / GB, 2, decimalSeparator)} ${labelGigabytes}`;\n};\n\nconst removeDecimalsWhenZero = (value, decimalCount, separator) => {\n return value\n .toFixed(decimalCount)\n .split('.')\n .filter(part => part !== '0')\n .join(separator);\n};\n\nconst create$2 = ({ root, props }) => {\n // filename\n const fileName = createElement$1('span');\n fileName.className = 'filepond--file-info-main';\n // hide for screenreaders\n // the file is contained in a fieldset with legend that contains the filename\n // no need to read it twice\n attr(fileName, 'aria-hidden', 'true');\n root.appendChild(fileName);\n root.ref.fileName = fileName;\n\n // filesize\n const fileSize = createElement$1('span');\n fileSize.className = 'filepond--file-info-sub';\n root.appendChild(fileSize);\n root.ref.fileSize = fileSize;\n\n // set initial values\n text(fileSize, root.query('GET_LABEL_FILE_WAITING_FOR_SIZE'));\n text(fileName, formatFilename(root.query('GET_ITEM_NAME', props.id)));\n};\n\nconst updateFile = ({ root, props }) => {\n text(\n root.ref.fileSize,\n toNaturalFileSize(\n root.query('GET_ITEM_SIZE', props.id),\n '.',\n root.query('GET_FILE_SIZE_BASE'),\n root.query('GET_FILE_SIZE_LABELS', root.query)\n )\n );\n text(root.ref.fileName, formatFilename(root.query('GET_ITEM_NAME', props.id)));\n};\n\nconst updateFileSizeOnError = ({ root, props }) => {\n // if size is available don't fallback to unknown size message\n if (isInt(root.query('GET_ITEM_SIZE', props.id))) {\n updateFile({ root, props });\n return;\n }\n\n text(root.ref.fileSize, root.query('GET_LABEL_FILE_SIZE_NOT_AVAILABLE'));\n};\n\nconst fileInfo = createView({\n name: 'file-info',\n ignoreRect: true,\n ignoreRectUpdate: true,\n write: createRoute({\n DID_LOAD_ITEM: updateFile,\n DID_UPDATE_ITEM_META: updateFile,\n DID_THROW_ITEM_LOAD_ERROR: updateFileSizeOnError,\n DID_THROW_ITEM_INVALID: updateFileSizeOnError,\n }),\n didCreateView: root => {\n applyFilters('CREATE_VIEW', { ...root, view: root });\n },\n create: create$2,\n mixins: {\n styles: ['translateX', 'translateY'],\n animations: {\n translateX: 'spring',\n translateY: 'spring',\n },\n },\n});\n\nconst toPercentage = value => Math.round(value * 100);\n\nconst create$3 = ({ root }) => {\n // main status\n const main = createElement$1('span');\n main.className = 'filepond--file-status-main';\n root.appendChild(main);\n root.ref.main = main;\n\n // sub status\n const sub = createElement$1('span');\n sub.className = 'filepond--file-status-sub';\n root.appendChild(sub);\n root.ref.sub = sub;\n\n didSetItemLoadProgress({ root, action: { progress: null } });\n};\n\nconst didSetItemLoadProgress = ({ root, action }) => {\n const title =\n action.progress === null\n ? root.query('GET_LABEL_FILE_LOADING')\n : `${root.query('GET_LABEL_FILE_LOADING')} ${toPercentage(action.progress)}%`;\n text(root.ref.main, title);\n text(root.ref.sub, root.query('GET_LABEL_TAP_TO_CANCEL'));\n};\n\nconst didSetItemProcessProgress = ({ root, action }) => {\n const title =\n action.progress === null\n ? root.query('GET_LABEL_FILE_PROCESSING')\n : `${root.query('GET_LABEL_FILE_PROCESSING')} ${toPercentage(action.progress)}%`;\n text(root.ref.main, title);\n text(root.ref.sub, root.query('GET_LABEL_TAP_TO_CANCEL'));\n};\n\nconst didRequestItemProcessing = ({ root }) => {\n text(root.ref.main, root.query('GET_LABEL_FILE_PROCESSING'));\n text(root.ref.sub, root.query('GET_LABEL_TAP_TO_CANCEL'));\n};\n\nconst didAbortItemProcessing = ({ root }) => {\n text(root.ref.main, root.query('GET_LABEL_FILE_PROCESSING_ABORTED'));\n text(root.ref.sub, root.query('GET_LABEL_TAP_TO_RETRY'));\n};\n\nconst didCompleteItemProcessing = ({ root }) => {\n text(root.ref.main, root.query('GET_LABEL_FILE_PROCESSING_COMPLETE'));\n text(root.ref.sub, root.query('GET_LABEL_TAP_TO_UNDO'));\n};\n\nconst clear = ({ root }) => {\n text(root.ref.main, '');\n text(root.ref.sub, '');\n};\n\nconst error = ({ root, action }) => {\n text(root.ref.main, action.status.main);\n text(root.ref.sub, action.status.sub);\n};\n\nconst fileStatus = createView({\n name: 'file-status',\n ignoreRect: true,\n ignoreRectUpdate: true,\n write: createRoute({\n DID_LOAD_ITEM: clear,\n DID_REVERT_ITEM_PROCESSING: clear,\n DID_REQUEST_ITEM_PROCESSING: didRequestItemProcessing,\n DID_ABORT_ITEM_PROCESSING: didAbortItemProcessing,\n DID_COMPLETE_ITEM_PROCESSING: didCompleteItemProcessing,\n DID_UPDATE_ITEM_PROCESS_PROGRESS: didSetItemProcessProgress,\n DID_UPDATE_ITEM_LOAD_PROGRESS: didSetItemLoadProgress,\n DID_THROW_ITEM_LOAD_ERROR: error,\n DID_THROW_ITEM_INVALID: error,\n DID_THROW_ITEM_PROCESSING_ERROR: error,\n DID_THROW_ITEM_PROCESSING_REVERT_ERROR: error,\n DID_THROW_ITEM_REMOVE_ERROR: error,\n }),\n didCreateView: root => {\n applyFilters('CREATE_VIEW', { ...root, view: root });\n },\n create: create$3,\n mixins: {\n styles: ['translateX', 'translateY', 'opacity'],\n animations: {\n opacity: { type: 'tween', duration: 250 },\n translateX: 'spring',\n translateY: 'spring',\n },\n },\n});\n\n/**\n * Button definitions for the file view\n */\n\nconst Buttons = {\n AbortItemLoad: {\n label: 'GET_LABEL_BUTTON_ABORT_ITEM_LOAD',\n action: 'ABORT_ITEM_LOAD',\n className: 'filepond--action-abort-item-load',\n align: 'LOAD_INDICATOR_POSITION', // right\n },\n RetryItemLoad: {\n label: 'GET_LABEL_BUTTON_RETRY_ITEM_LOAD',\n action: 'RETRY_ITEM_LOAD',\n icon: 'GET_ICON_RETRY',\n className: 'filepond--action-retry-item-load',\n align: 'BUTTON_PROCESS_ITEM_POSITION', // right\n },\n RemoveItem: {\n label: 'GET_LABEL_BUTTON_REMOVE_ITEM',\n action: 'REQUEST_REMOVE_ITEM',\n icon: 'GET_ICON_REMOVE',\n className: 'filepond--action-remove-item',\n align: 'BUTTON_REMOVE_ITEM_POSITION', // left\n },\n ProcessItem: {\n label: 'GET_LABEL_BUTTON_PROCESS_ITEM',\n action: 'REQUEST_ITEM_PROCESSING',\n icon: 'GET_ICON_PROCESS',\n className: 'filepond--action-process-item',\n align: 'BUTTON_PROCESS_ITEM_POSITION', // right\n },\n AbortItemProcessing: {\n label: 'GET_LABEL_BUTTON_ABORT_ITEM_PROCESSING',\n action: 'ABORT_ITEM_PROCESSING',\n className: 'filepond--action-abort-item-processing',\n align: 'BUTTON_PROCESS_ITEM_POSITION', // right\n },\n RetryItemProcessing: {\n label: 'GET_LABEL_BUTTON_RETRY_ITEM_PROCESSING',\n action: 'RETRY_ITEM_PROCESSING',\n icon: 'GET_ICON_RETRY',\n className: 'filepond--action-retry-item-processing',\n align: 'BUTTON_PROCESS_ITEM_POSITION', // right\n },\n RevertItemProcessing: {\n label: 'GET_LABEL_BUTTON_UNDO_ITEM_PROCESSING',\n action: 'REQUEST_REVERT_ITEM_PROCESSING',\n icon: 'GET_ICON_UNDO',\n className: 'filepond--action-revert-item-processing',\n align: 'BUTTON_PROCESS_ITEM_POSITION', // right\n },\n};\n\n// make a list of buttons, we can then remove buttons from this list if they're disabled\nconst ButtonKeys = [];\nforin(Buttons, key => {\n ButtonKeys.push(key);\n});\n\nconst calculateFileInfoOffset = root => {\n if (getRemoveIndicatorAligment(root) === 'right') return 0;\n const buttonRect = root.ref.buttonRemoveItem.rect.element;\n return buttonRect.hidden ? null : buttonRect.width + buttonRect.left;\n};\n\nconst calculateButtonWidth = root => {\n const buttonRect = root.ref.buttonAbortItemLoad.rect.element;\n return buttonRect.width;\n};\n\n// Force on full pixels so text stays crips\nconst calculateFileVerticalCenterOffset = root =>\n Math.floor(root.ref.buttonRemoveItem.rect.element.height / 4);\nconst calculateFileHorizontalCenterOffset = root =>\n Math.floor(root.ref.buttonRemoveItem.rect.element.left / 2);\n\nconst getLoadIndicatorAlignment = root => root.query('GET_STYLE_LOAD_INDICATOR_POSITION');\nconst getProcessIndicatorAlignment = root => root.query('GET_STYLE_PROGRESS_INDICATOR_POSITION');\nconst getRemoveIndicatorAligment = root => root.query('GET_STYLE_BUTTON_REMOVE_ITEM_POSITION');\n\nconst DefaultStyle = {\n buttonAbortItemLoad: { opacity: 0 },\n buttonRetryItemLoad: { opacity: 0 },\n buttonRemoveItem: { opacity: 0 },\n buttonProcessItem: { opacity: 0 },\n buttonAbortItemProcessing: { opacity: 0 },\n buttonRetryItemProcessing: { opacity: 0 },\n buttonRevertItemProcessing: { opacity: 0 },\n loadProgressIndicator: { opacity: 0, align: getLoadIndicatorAlignment },\n processProgressIndicator: { opacity: 0, align: getProcessIndicatorAlignment },\n processingCompleteIndicator: { opacity: 0, scaleX: 0.75, scaleY: 0.75 },\n info: { translateX: 0, translateY: 0, opacity: 0 },\n status: { translateX: 0, translateY: 0, opacity: 0 },\n};\n\nconst IdleStyle = {\n buttonRemoveItem: { opacity: 1 },\n buttonProcessItem: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n status: { translateX: calculateFileInfoOffset },\n};\n\nconst ProcessingStyle = {\n buttonAbortItemProcessing: { opacity: 1 },\n processProgressIndicator: { opacity: 1 },\n status: { opacity: 1 },\n};\n\nconst StyleMap = {\n DID_THROW_ITEM_INVALID: {\n buttonRemoveItem: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n status: { translateX: calculateFileInfoOffset, opacity: 1 },\n },\n DID_START_ITEM_LOAD: {\n buttonAbortItemLoad: { opacity: 1 },\n loadProgressIndicator: { opacity: 1 },\n status: { opacity: 1 },\n },\n DID_THROW_ITEM_LOAD_ERROR: {\n buttonRetryItemLoad: { opacity: 1 },\n buttonRemoveItem: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n status: { opacity: 1 },\n },\n DID_START_ITEM_REMOVE: {\n processProgressIndicator: { opacity: 1, align: getRemoveIndicatorAligment },\n info: { translateX: calculateFileInfoOffset },\n status: { opacity: 0 },\n },\n DID_THROW_ITEM_REMOVE_ERROR: {\n processProgressIndicator: { opacity: 0, align: getRemoveIndicatorAligment },\n buttonRemoveItem: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n status: { opacity: 1, translateX: calculateFileInfoOffset },\n },\n DID_LOAD_ITEM: IdleStyle,\n DID_LOAD_LOCAL_ITEM: {\n buttonRemoveItem: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n status: { translateX: calculateFileInfoOffset },\n },\n DID_START_ITEM_PROCESSING: ProcessingStyle,\n DID_REQUEST_ITEM_PROCESSING: ProcessingStyle,\n DID_UPDATE_ITEM_PROCESS_PROGRESS: ProcessingStyle,\n DID_COMPLETE_ITEM_PROCESSING: {\n buttonRevertItemProcessing: { opacity: 1 },\n info: { opacity: 1 },\n status: { opacity: 1 },\n },\n DID_THROW_ITEM_PROCESSING_ERROR: {\n buttonRemoveItem: { opacity: 1 },\n buttonRetryItemProcessing: { opacity: 1 },\n status: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n },\n DID_THROW_ITEM_PROCESSING_REVERT_ERROR: {\n buttonRevertItemProcessing: { opacity: 1 },\n status: { opacity: 1 },\n info: { opacity: 1 },\n },\n DID_ABORT_ITEM_PROCESSING: {\n buttonRemoveItem: { opacity: 1 },\n buttonProcessItem: { opacity: 1 },\n info: { translateX: calculateFileInfoOffset },\n status: { opacity: 1 },\n },\n DID_REVERT_ITEM_PROCESSING: IdleStyle,\n};\n\n// complete indicator view\nconst processingCompleteIndicatorView = createView({\n create: ({ root }) => {\n root.element.innerHTML = root.query('GET_ICON_DONE');\n },\n name: 'processing-complete-indicator',\n ignoreRect: true,\n mixins: {\n styles: ['scaleX', 'scaleY', 'opacity'],\n animations: {\n scaleX: 'spring',\n scaleY: 'spring',\n opacity: { type: 'tween', duration: 250 },\n },\n },\n});\n\n/**\n * Creates the file view\n */\nconst create$4 = ({ root, props }) => {\n // copy Buttons object\n const LocalButtons = Object.keys(Buttons).reduce((prev, curr) => {\n prev[curr] = { ...Buttons[curr] };\n return prev;\n }, {});\n\n const { id } = props;\n\n // allow reverting upload\n const allowRevert = root.query('GET_ALLOW_REVERT');\n\n // allow remove file\n const allowRemove = root.query('GET_ALLOW_REMOVE');\n\n // allow processing upload\n const allowProcess = root.query('GET_ALLOW_PROCESS');\n\n // is instant uploading, need this to determine the icon of the undo button\n const instantUpload = root.query('GET_INSTANT_UPLOAD');\n\n // is async set up\n const isAsync = root.query('IS_ASYNC');\n\n // should align remove item buttons\n const alignRemoveItemButton = root.query('GET_STYLE_BUTTON_REMOVE_ITEM_ALIGN');\n\n // enabled buttons array\n let buttonFilter;\n if (isAsync) {\n if (allowProcess && !allowRevert) {\n // only remove revert button\n buttonFilter = key => !/RevertItemProcessing/.test(key);\n } else if (!allowProcess && allowRevert) {\n // only remove process button\n buttonFilter = key => !/ProcessItem|RetryItemProcessing|AbortItemProcessing/.test(key);\n } else if (!allowProcess && !allowRevert) {\n // remove all process buttons\n buttonFilter = key => !/Process/.test(key);\n }\n } else {\n // no process controls available\n buttonFilter = key => !/Process/.test(key);\n }\n\n const enabledButtons = buttonFilter ? ButtonKeys.filter(buttonFilter) : ButtonKeys.concat();\n\n // update icon and label for revert button when instant uploading\n if (instantUpload && allowRevert) {\n LocalButtons['RevertItemProcessing'].label = 'GET_LABEL_BUTTON_REMOVE_ITEM';\n LocalButtons['RevertItemProcessing'].icon = 'GET_ICON_REMOVE';\n }\n\n // remove last button (revert) if not allowed\n if (isAsync && !allowRevert) {\n const map = StyleMap['DID_COMPLETE_ITEM_PROCESSING'];\n map.info.translateX = calculateFileHorizontalCenterOffset;\n map.info.translateY = calculateFileVerticalCenterOffset;\n map.status.translateY = calculateFileVerticalCenterOffset;\n map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };\n }\n\n // should align center\n if (isAsync && !allowProcess) {\n [\n 'DID_START_ITEM_PROCESSING',\n 'DID_REQUEST_ITEM_PROCESSING',\n 'DID_UPDATE_ITEM_PROCESS_PROGRESS',\n 'DID_THROW_ITEM_PROCESSING_ERROR',\n ].forEach(key => {\n StyleMap[key].status.translateY = calculateFileVerticalCenterOffset;\n });\n StyleMap['DID_THROW_ITEM_PROCESSING_ERROR'].status.translateX = calculateButtonWidth;\n }\n\n // move remove button to right\n if (alignRemoveItemButton && allowRevert) {\n LocalButtons['RevertItemProcessing'].align = 'BUTTON_REMOVE_ITEM_POSITION';\n const map = StyleMap['DID_COMPLETE_ITEM_PROCESSING'];\n map.info.translateX = calculateFileInfoOffset;\n map.status.translateY = calculateFileVerticalCenterOffset;\n map.processingCompleteIndicator = { opacity: 1, scaleX: 1, scaleY: 1 };\n }\n\n // show/hide RemoveItem button\n if (!allowRemove) {\n LocalButtons['RemoveItem'].disabled = true;\n }\n\n // create the button views\n forin(LocalButtons, (key, definition) => {\n // create button\n const buttonView = root.createChildView(fileActionButton, {\n label: root.query(definition.label),\n icon: root.query(definition.icon),\n opacity: 0,\n });\n\n // should be appended?\n if (enabledButtons.includes(key)) {\n root.appendChildView(buttonView);\n }\n\n // toggle\n if (definition.disabled) {\n buttonView.element.setAttribute('disabled', 'disabled');\n buttonView.element.setAttribute('hidden', 'hidden');\n }\n\n // add position attribute\n buttonView.element.dataset.align = root.query(`GET_STYLE_${definition.align}`);\n\n // add class\n buttonView.element.classList.add(definition.className);\n\n // handle interactions\n buttonView.on('click', e => {\n e.stopPropagation();\n if (definition.disabled) return;\n root.dispatch(definition.action, { query: id });\n });\n\n // set reference\n root.ref[`button${key}`] = buttonView;\n });\n\n // checkmark\n root.ref.processingCompleteIndicator = root.appendChildView(\n root.createChildView(processingCompleteIndicatorView)\n );\n root.ref.processingCompleteIndicator.element.dataset.align = root.query(\n `GET_STYLE_BUTTON_PROCESS_ITEM_POSITION`\n );\n\n // create file info view\n root.ref.info = root.appendChildView(root.createChildView(fileInfo, { id }));\n\n // create file status view\n root.ref.status = root.appendChildView(root.createChildView(fileStatus, { id }));\n\n // add progress indicators\n const loadIndicatorView = root.appendChildView(\n root.createChildView(progressIndicator, {\n opacity: 0,\n align: root.query(`GET_STYLE_LOAD_INDICATOR_POSITION`),\n })\n );\n loadIndicatorView.element.classList.add('filepond--load-indicator');\n root.ref.loadProgressIndicator = loadIndicatorView;\n\n const progressIndicatorView = root.appendChildView(\n root.createChildView(progressIndicator, {\n opacity: 0,\n align: root.query(`GET_STYLE_PROGRESS_INDICATOR_POSITION`),\n })\n );\n progressIndicatorView.element.classList.add('filepond--process-indicator');\n root.ref.processProgressIndicator = progressIndicatorView;\n\n // current active styles\n root.ref.activeStyles = [];\n};\n\nconst write$2 = ({ root, actions, props }) => {\n // route actions\n route({ root, actions, props });\n\n // select last state change action\n let action = actions\n .concat()\n .filter(action => /^DID_/.test(action.type))\n .reverse()\n .find(action => StyleMap[action.type]);\n\n // a new action happened, let's get the matching styles\n if (action) {\n // define new active styles\n root.ref.activeStyles = [];\n\n const stylesToApply = StyleMap[action.type];\n forin(DefaultStyle, (name, defaultStyles) => {\n // get reference to control\n const control = root.ref[name];\n\n // loop over all styles for this control\n forin(defaultStyles, (key, defaultValue) => {\n const value =\n stylesToApply[name] && typeof stylesToApply[name][key] !== 'undefined'\n ? stylesToApply[name][key]\n : defaultValue;\n root.ref.activeStyles.push({ control, key, value });\n });\n });\n }\n\n // apply active styles to element\n root.ref.activeStyles.forEach(({ control, key, value }) => {\n control[key] = typeof value === 'function' ? value(root) : value;\n });\n};\n\nconst route = createRoute({\n DID_SET_LABEL_BUTTON_ABORT_ITEM_PROCESSING: ({ root, action }) => {\n root.ref.buttonAbortItemProcessing.label = action.value;\n },\n DID_SET_LABEL_BUTTON_ABORT_ITEM_LOAD: ({ root, action }) => {\n root.ref.buttonAbortItemLoad.label = action.value;\n },\n DID_SET_LABEL_BUTTON_ABORT_ITEM_REMOVAL: ({ root, action }) => {\n root.ref.buttonAbortItemRemoval.label = action.value;\n },\n DID_REQUEST_ITEM_PROCESSING: ({ root }) => {\n root.ref.processProgressIndicator.spin = true;\n root.ref.processProgressIndicator.progress = 0;\n },\n DID_START_ITEM_LOAD: ({ root }) => {\n root.ref.loadProgressIndicator.spin = true;\n root.ref.loadProgressIndicator.progress = 0;\n },\n DID_START_ITEM_REMOVE: ({ root }) => {\n root.ref.processProgressIndicator.spin = true;\n root.ref.processProgressIndicator.progress = 0;\n },\n DID_UPDATE_ITEM_LOAD_PROGRESS: ({ root, action }) => {\n root.ref.loadProgressIndicator.spin = false;\n root.ref.loadProgressIndicator.progress = action.progress;\n },\n DID_UPDATE_ITEM_PROCESS_PROGRESS: ({ root, action }) => {\n root.ref.processProgressIndicator.spin = false;\n root.ref.processProgressIndicator.progress = action.progress;\n },\n});\n\nconst file = createView({\n create: create$4,\n write: write$2,\n didCreateView: root => {\n applyFilters('CREATE_VIEW', { ...root, view: root });\n },\n name: 'file',\n});\n\n/**\n * Creates the file view\n */\nconst create$5 = ({ root, props }) => {\n // filename\n root.ref.fileName = createElement$1('legend');\n root.appendChild(root.ref.fileName);\n\n // file appended\n root.ref.file = root.appendChildView(root.createChildView(file, { id: props.id }));\n\n // data has moved to data.js\n root.ref.data = false;\n};\n\n/**\n * Data storage\n */\nconst didLoadItem = ({ root, props }) => {\n // updates the legend of the fieldset so screenreaders can better group buttons\n text(root.ref.fileName, formatFilename(root.query('GET_ITEM_NAME', props.id)));\n};\n\nconst fileWrapper = createView({\n create: create$5,\n ignoreRect: true,\n write: createRoute({\n DID_LOAD_ITEM: didLoadItem,\n }),\n didCreateView: root => {\n applyFilters('CREATE_VIEW', { ...root, view: root });\n },\n tag: 'fieldset',\n name: 'file-wrapper',\n});\n\nconst PANEL_SPRING_PROPS = { type: 'spring', damping: 0.6, mass: 7 };\n\nconst create$6 = ({ root, props }) => {\n [\n {\n name: 'top',\n },\n {\n name: 'center',\n props: {\n translateY: null,\n scaleY: null,\n },\n mixins: {\n animations: {\n scaleY: PANEL_SPRING_PROPS,\n },\n styles: ['translateY', 'scaleY'],\n },\n },\n {\n name: 'bottom',\n props: {\n translateY: null,\n },\n mixins: {\n animations: {\n translateY: PANEL_SPRING_PROPS,\n },\n styles: ['translateY'],\n },\n },\n ].forEach(section => {\n createSection(root, section, props.name);\n });\n\n root.element.classList.add(`filepond--${props.name}`);\n\n root.ref.scalable = null;\n};\n\nconst createSection = (root, section, className) => {\n const viewConstructor = createView({\n name: `panel-${section.name} filepond--${className}`,\n mixins: section.mixins,\n ignoreRectUpdate: true,\n });\n\n const view = root.createChildView(viewConstructor, section.props);\n\n root.ref[section.name] = root.appendChildView(view);\n};\n\nconst write$3 = ({ root, props }) => {\n // update scalable state\n if (root.ref.scalable === null || props.scalable !== root.ref.scalable) {\n root.ref.scalable = isBoolean(props.scalable) ? props.scalable : true;\n root.element.dataset.scalable = root.ref.scalable;\n }\n\n // no height, can't set\n if (!props.height) return;\n\n // get child rects\n const topRect = root.ref.top.rect.element;\n const bottomRect = root.ref.bottom.rect.element;\n\n // make sure height never is smaller than bottom and top seciton heights combined (will probably never happen, but who knows)\n const height = Math.max(topRect.height + bottomRect.height, props.height);\n\n // offset center part\n root.ref.center.translateY = topRect.height;\n\n // scale center part\n // use math ceil to prevent transparent lines because of rounding errors\n root.ref.center.scaleY = (height - topRect.height - bottomRect.height) / 100;\n\n // offset bottom part\n root.ref.bottom.translateY = height - bottomRect.height;\n};\n\nconst panel = createView({\n name: 'panel',\n read: ({ root, props }) => (props.heightCurrent = root.ref.bottom.translateY),\n write: write$3,\n create: create$6,\n ignoreRect: true,\n mixins: {\n apis: ['height', 'heightCurrent', 'scalable'],\n },\n});\n\nconst createDragHelper = items => {\n const itemIds = items.map(item => item.id);\n let prevIndex = undefined;\n return {\n setIndex: index => {\n prevIndex = index;\n },\n getIndex: () => prevIndex,\n getItemIndex: item => itemIds.indexOf(item.id),\n };\n};\n\nconst ITEM_TRANSLATE_SPRING = {\n type: 'spring',\n stiffness: 0.75,\n damping: 0.45,\n mass: 10,\n};\n\nconst ITEM_SCALE_SPRING = 'spring';\n\nconst StateMap = {\n DID_START_ITEM_LOAD: 'busy',\n DID_UPDATE_ITEM_LOAD_PROGRESS: 'loading',\n DID_THROW_ITEM_INVALID: 'load-invalid',\n DID_THROW_ITEM_LOAD_ERROR: 'load-error',\n DID_LOAD_ITEM: 'idle',\n DID_THROW_ITEM_REMOVE_ERROR: 'remove-error',\n DID_START_ITEM_REMOVE: 'busy',\n DID_START_ITEM_PROCESSING: 'busy processing',\n DID_REQUEST_ITEM_PROCESSING: 'busy processing',\n DID_UPDATE_ITEM_PROCESS_PROGRESS: 'processing',\n DID_COMPLETE_ITEM_PROCESSING: 'processing-complete',\n DID_THROW_ITEM_PROCESSING_ERROR: 'processing-error',\n DID_THROW_ITEM_PROCESSING_REVERT_ERROR: 'processing-revert-error',\n DID_ABORT_ITEM_PROCESSING: 'cancelled',\n DID_REVERT_ITEM_PROCESSING: 'idle',\n};\n\n/**\n * Creates the file view\n */\nconst create$7 = ({ root, props }) => {\n // select\n root.ref.handleClick = e => root.dispatch('DID_ACTIVATE_ITEM', { id: props.id });\n\n // set id\n root.element.id = `filepond--item-${props.id}`;\n root.element.addEventListener('click', root.ref.handleClick);\n\n // file view\n root.ref.container = root.appendChildView(root.createChildView(fileWrapper, { id: props.id }));\n\n // file panel\n root.ref.panel = root.appendChildView(root.createChildView(panel, { name: 'item-panel' }));\n\n // default start height\n root.ref.panel.height = null;\n\n // by default not marked for removal\n props.markedForRemoval = false;\n\n // if not allowed to reorder file items, exit here\n if (!root.query('GET_ALLOW_REORDER')) return;\n\n // set to idle so shows grab cursor\n root.element.dataset.dragState = 'idle';\n\n const grab = e => {\n if (!e.isPrimary) return;\n\n let removedActivateListener = false;\n\n const origin = {\n x: e.pageX,\n y: e.pageY,\n };\n\n props.dragOrigin = {\n x: root.translateX,\n y: root.translateY,\n };\n\n props.dragCenter = {\n x: e.offsetX,\n y: e.offsetY,\n };\n\n const dragState = createDragHelper(root.query('GET_ACTIVE_ITEMS'));\n\n root.dispatch('DID_GRAB_ITEM', { id: props.id, dragState });\n\n const drag = e => {\n if (!e.isPrimary) return;\n\n e.stopPropagation();\n e.preventDefault();\n\n props.dragOffset = {\n x: e.pageX - origin.x,\n y: e.pageY - origin.y,\n };\n\n // if dragged stop listening to clicks, will re-add when done dragging\n const dist =\n props.dragOffset.x * props.dragOffset.x + props.dragOffset.y * props.dragOffset.y;\n if (dist > 16 && !removedActivateListener) {\n removedActivateListener = true;\n root.element.removeEventListener('click', root.ref.handleClick);\n }\n\n root.dispatch('DID_DRAG_ITEM', { id: props.id, dragState });\n };\n\n const drop = e => {\n if (!e.isPrimary) return;\n\n document.removeEventListener('pointermove', drag);\n document.removeEventListener('pointerup', drop);\n\n props.dragOffset = {\n x: e.pageX - origin.x,\n y: e.pageY - origin.y,\n };\n\n root.dispatch('DID_DROP_ITEM', { id: props.id, dragState });\n\n // start listening to clicks again\n if (removedActivateListener) {\n setTimeout(() => root.element.addEventListener('click', root.ref.handleClick), 0);\n }\n };\n\n document.addEventListener('pointermove', drag);\n document.addEventListener('pointerup', drop);\n };\n\n root.element.addEventListener('pointerdown', grab);\n};\n\nconst route$1 = createRoute({\n DID_UPDATE_PANEL_HEIGHT: ({ root, action }) => {\n root.height = action.height;\n },\n});\n\nconst write$4 = createRoute(\n {\n DID_GRAB_ITEM: ({ root, props }) => {\n props.dragOrigin = {\n x: root.translateX,\n y: root.translateY,\n };\n },\n DID_DRAG_ITEM: ({ root }) => {\n root.element.dataset.dragState = 'drag';\n },\n DID_DROP_ITEM: ({ root, props }) => {\n props.dragOffset = null;\n props.dragOrigin = null;\n root.element.dataset.dragState = 'drop';\n },\n },\n ({ root, actions, props, shouldOptimize }) => {\n if (root.element.dataset.dragState === 'drop') {\n if (root.scaleX <= 1) {\n root.element.dataset.dragState = 'idle';\n }\n }\n\n // select last state change action\n let action = actions\n .concat()\n .filter(action => /^DID_/.test(action.type))\n .reverse()\n .find(action => StateMap[action.type]);\n\n // no need to set same state twice\n if (action && action.type !== props.currentState) {\n // set current state\n props.currentState = action.type;\n\n // set state\n root.element.dataset.filepondItemState = StateMap[props.currentState] || '';\n }\n\n // route actions\n const aspectRatio =\n root.query('GET_ITEM_PANEL_ASPECT_RATIO') || root.query('GET_PANEL_ASPECT_RATIO');\n if (!aspectRatio) {\n route$1({ root, actions, props });\n if (!root.height && root.ref.container.rect.element.height > 0) {\n root.height = root.ref.container.rect.element.height;\n }\n } else if (!shouldOptimize) {\n root.height = root.rect.element.width * aspectRatio;\n }\n\n // sync panel height with item height\n if (shouldOptimize) {\n root.ref.panel.height = null;\n }\n\n root.ref.panel.height = root.height;\n }\n);\n\nconst item = createView({\n create: create$7,\n write: write$4,\n destroy: ({ root, props }) => {\n root.element.removeEventListener('click', root.ref.handleClick);\n root.dispatch('RELEASE_ITEM', { query: props.id });\n },\n tag: 'li',\n name: 'item',\n mixins: {\n apis: [\n 'id',\n 'interactionMethod',\n 'markedForRemoval',\n 'spawnDate',\n 'dragCenter',\n 'dragOrigin',\n 'dragOffset',\n ],\n styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity', 'height'],\n animations: {\n scaleX: ITEM_SCALE_SPRING,\n scaleY: ITEM_SCALE_SPRING,\n translateX: ITEM_TRANSLATE_SPRING,\n translateY: ITEM_TRANSLATE_SPRING,\n opacity: { type: 'tween', duration: 150 },\n },\n },\n});\n\nvar getItemsPerRow = (horizontalSpace, itemWidth) => {\n // add one pixel leeway, when using percentages for item width total items can be 1.99 per row\n\n return Math.max(1, Math.floor((horizontalSpace + 1) / itemWidth));\n};\n\nconst getItemIndexByPosition = (view, children, positionInView) => {\n if (!positionInView) return;\n\n const horizontalSpace = view.rect.element.width;\n // const children = view.childViews;\n const l = children.length;\n let last = null;\n\n // -1, don't move items to accomodate (either add to top or bottom)\n if (l === 0 || positionInView.top < children[0].rect.element.top) return -1;\n\n // let's get the item width\n const item = children[0];\n const itemRect = item.rect.element;\n const itemHorizontalMargin = itemRect.marginLeft + itemRect.marginRight;\n const itemWidth = itemRect.width + itemHorizontalMargin;\n const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);\n\n // stack\n if (itemsPerRow === 1) {\n for (let index = 0; index < l; index++) {\n const child = children[index];\n const childMid = child.rect.outer.top + child.rect.element.height * 0.5;\n if (positionInView.top < childMid) {\n return index;\n }\n }\n return l;\n }\n\n // grid\n const itemVerticalMargin = itemRect.marginTop + itemRect.marginBottom;\n const itemHeight = itemRect.height + itemVerticalMargin;\n for (let index = 0; index < l; index++) {\n const indexX = index % itemsPerRow;\n const indexY = Math.floor(index / itemsPerRow);\n\n const offsetX = indexX * itemWidth;\n const offsetY = indexY * itemHeight;\n\n const itemTop = offsetY - itemRect.marginTop;\n const itemRight = offsetX + itemWidth;\n const itemBottom = offsetY + itemHeight + itemRect.marginBottom;\n\n if (positionInView.top < itemBottom && positionInView.top > itemTop) {\n if (positionInView.left < itemRight) {\n return index;\n } else if (index !== l - 1) {\n last = index;\n } else {\n last = null;\n }\n }\n }\n\n if (last !== null) {\n return last;\n }\n\n return l;\n};\n\nconst dropAreaDimensions = {\n height: 0,\n width: 0,\n get getHeight() {\n return this.height;\n },\n set setHeight(val) {\n if (this.height === 0 || val === 0) this.height = val;\n },\n get getWidth() {\n return this.width;\n },\n set setWidth(val) {\n if (this.width === 0 || val === 0) this.width = val;\n },\n setDimensions: function(height, width) {\n if (this.height === 0 || height === 0) this.height = height;\n if (this.width === 0 || width === 0) this.width = width;\n },\n};\n\nconst create$8 = ({ root }) => {\n // need to set role to list as otherwise it won't be read as a list by VoiceOver\n attr(root.element, 'role', 'list');\n\n root.ref.lastItemSpanwDate = Date.now();\n};\n\n/**\n * Inserts a new item\n * @param root\n * @param action\n */\nconst addItemView = ({ root, action }) => {\n const { id, index, interactionMethod } = action;\n\n root.ref.addIndex = index;\n\n const now = Date.now();\n let spawnDate = now;\n let opacity = 1;\n\n if (interactionMethod !== InteractionMethod.NONE) {\n opacity = 0;\n const cooldown = root.query('GET_ITEM_INSERT_INTERVAL');\n const dist = now - root.ref.lastItemSpanwDate;\n spawnDate = dist < cooldown ? now + (cooldown - dist) : now;\n }\n\n root.ref.lastItemSpanwDate = spawnDate;\n\n root.appendChildView(\n root.createChildView(\n // view type\n item,\n\n // props\n {\n spawnDate,\n id,\n opacity,\n interactionMethod,\n }\n ),\n index\n );\n};\n\nconst moveItem = (item, x, y, vx = 0, vy = 1) => {\n // set to null to remove animation while dragging\n if (item.dragOffset) {\n item.translateX = null;\n item.translateY = null;\n item.translateX = item.dragOrigin.x + item.dragOffset.x;\n item.translateY = item.dragOrigin.y + item.dragOffset.y;\n item.scaleX = 1.025;\n item.scaleY = 1.025;\n } else {\n item.translateX = x;\n item.translateY = y;\n\n if (Date.now() > item.spawnDate) {\n // reveal element\n if (item.opacity === 0) {\n introItemView(item, x, y, vx, vy);\n }\n\n // make sure is default scale every frame\n item.scaleX = 1;\n item.scaleY = 1;\n item.opacity = 1;\n }\n }\n};\n\nconst introItemView = (item, x, y, vx, vy) => {\n if (item.interactionMethod === InteractionMethod.NONE) {\n item.translateX = null;\n item.translateX = x;\n item.translateY = null;\n item.translateY = y;\n } else if (item.interactionMethod === InteractionMethod.DROP) {\n item.translateX = null;\n item.translateX = x - vx * 20;\n\n item.translateY = null;\n item.translateY = y - vy * 10;\n\n item.scaleX = 0.8;\n item.scaleY = 0.8;\n } else if (item.interactionMethod === InteractionMethod.BROWSE) {\n item.translateY = null;\n item.translateY = y - 30;\n } else if (item.interactionMethod === InteractionMethod.API) {\n item.translateX = null;\n item.translateX = x - 30;\n item.translateY = null;\n }\n};\n\n/**\n * Removes an existing item\n * @param root\n * @param action\n */\nconst removeItemView = ({ root, action }) => {\n const { id } = action;\n\n // get the view matching the given id\n const view = root.childViews.find(child => child.id === id);\n\n // if no view found, exit\n if (!view) {\n return;\n }\n\n // animate view out of view\n view.scaleX = 0.9;\n view.scaleY = 0.9;\n view.opacity = 0;\n\n // mark for removal\n view.markedForRemoval = true;\n};\n\nconst getItemHeight = child =>\n child.rect.element.height +\n child.rect.element.marginBottom * 0.5 +\n child.rect.element.marginTop * 0.5;\nconst getItemWidth = child =>\n child.rect.element.width +\n child.rect.element.marginLeft * 0.5 +\n child.rect.element.marginRight * 0.5;\n\nconst dragItem = ({ root, action }) => {\n const { id, dragState } = action;\n\n // reference to item\n const item = root.query('GET_ITEM', { id });\n\n // get the view matching the given id\n const view = root.childViews.find(child => child.id === id);\n\n const numItems = root.childViews.length;\n const oldIndex = dragState.getItemIndex(item);\n\n // if no view found, exit\n if (!view) return;\n\n const dragPosition = {\n x: view.dragOrigin.x + view.dragOffset.x + view.dragCenter.x,\n y: view.dragOrigin.y + view.dragOffset.y + view.dragCenter.y,\n };\n\n // get drag area dimensions\n const dragHeight = getItemHeight(view);\n const dragWidth = getItemWidth(view);\n\n // get rows and columns (There will always be at least one row and one column if a file is present)\n let cols = Math.floor(root.rect.outer.width / dragWidth);\n if (cols > numItems) cols = numItems;\n\n // rows are used to find when we have left the preview area bounding box\n const rows = Math.floor(numItems / cols + 1);\n\n dropAreaDimensions.setHeight = dragHeight * rows;\n dropAreaDimensions.setWidth = dragWidth * cols;\n\n // get new index of dragged item\n var location = {\n y: Math.floor(dragPosition.y / dragHeight),\n x: Math.floor(dragPosition.x / dragWidth),\n getGridIndex: function getGridIndex() {\n if (\n dragPosition.y > dropAreaDimensions.getHeight ||\n dragPosition.y < 0 ||\n dragPosition.x > dropAreaDimensions.getWidth ||\n dragPosition.x < 0\n )\n return oldIndex;\n return this.y * cols + this.x;\n },\n getColIndex: function getColIndex() {\n const items = root.query('GET_ACTIVE_ITEMS');\n const visibleChildren = root.childViews.filter(child => child.rect.element.height);\n const children = items.map(item =>\n visibleChildren.find(childView => childView.id === item.id)\n );\n const currentIndex = children.findIndex(child => child === view);\n const dragHeight = getItemHeight(view);\n const l = children.length;\n let idx = l;\n let childHeight = 0;\n let childBottom = 0;\n let childTop = 0;\n for (let i = 0; i < l; i++) {\n childHeight = getItemHeight(children[i]);\n childTop = childBottom;\n childBottom = childTop + childHeight;\n if (dragPosition.y < childBottom) {\n if (currentIndex > i) {\n if (dragPosition.y < childTop + dragHeight) {\n idx = i;\n break;\n }\n continue;\n }\n idx = i;\n break;\n }\n }\n return idx;\n },\n };\n\n // get new index\n const index = cols > 1 ? location.getGridIndex() : location.getColIndex();\n root.dispatch('MOVE_ITEM', { query: view, index });\n\n // if the index of the item changed, dispatch reorder action\n const currentIndex = dragState.getIndex();\n\n if (currentIndex === undefined || currentIndex !== index) {\n dragState.setIndex(index);\n\n if (currentIndex === undefined) return;\n\n root.dispatch('DID_REORDER_ITEMS', {\n items: root.query('GET_ACTIVE_ITEMS'),\n origin: oldIndex,\n target: index,\n });\n }\n};\n\n/**\n * Setup action routes\n */\nconst route$2 = createRoute({\n DID_ADD_ITEM: addItemView,\n DID_REMOVE_ITEM: removeItemView,\n DID_DRAG_ITEM: dragItem,\n});\n\n/**\n * Write to view\n * @param root\n * @param actions\n * @param props\n */\nconst write$5 = ({ root, props, actions, shouldOptimize }) => {\n // route actions\n route$2({ root, props, actions });\n\n const { dragCoordinates } = props;\n\n // available space on horizontal axis\n const horizontalSpace = root.rect.element.width;\n\n // only draw children that have dimensions\n const visibleChildren = root.childViews.filter(child => child.rect.element.height);\n\n // sort based on current active items\n const children = root\n .query('GET_ACTIVE_ITEMS')\n .map(item => visibleChildren.find(child => child.id === item.id))\n .filter(item => item);\n\n // get index\n const dragIndex = dragCoordinates\n ? getItemIndexByPosition(root, children, dragCoordinates)\n : null;\n\n // add index is used to reserve the dropped/added item index till the actual item is rendered\n const addIndex = root.ref.addIndex || null;\n\n // add index no longer needed till possibly next draw\n root.ref.addIndex = null;\n\n let dragIndexOffset = 0;\n let removeIndexOffset = 0;\n let addIndexOffset = 0;\n\n if (children.length === 0) return;\n\n const childRect = children[0].rect.element;\n const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;\n const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;\n const itemWidth = childRect.width + itemHorizontalMargin;\n const itemHeight = childRect.height + itemVerticalMargin;\n const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);\n\n // stack\n if (itemsPerRow === 1) {\n let offsetY = 0;\n let dragOffset = 0;\n\n children.forEach((child, index) => {\n if (dragIndex) {\n let dist = index - dragIndex;\n if (dist === -2) {\n dragOffset = -itemVerticalMargin * 0.25;\n } else if (dist === -1) {\n dragOffset = -itemVerticalMargin * 0.75;\n } else if (dist === 0) {\n dragOffset = itemVerticalMargin * 0.75;\n } else if (dist === 1) {\n dragOffset = itemVerticalMargin * 0.25;\n } else {\n dragOffset = 0;\n }\n }\n\n if (shouldOptimize) {\n child.translateX = null;\n child.translateY = null;\n }\n\n if (!child.markedForRemoval) {\n moveItem(child, 0, offsetY + dragOffset);\n }\n\n let itemHeight = child.rect.element.height + itemVerticalMargin;\n\n let visualHeight = itemHeight * (child.markedForRemoval ? child.opacity : 1);\n\n offsetY += visualHeight;\n });\n }\n // grid\n else {\n let prevX = 0;\n let prevY = 0;\n\n children.forEach((child, index) => {\n if (index === dragIndex) {\n dragIndexOffset = 1;\n }\n\n if (index === addIndex) {\n addIndexOffset += 1;\n }\n\n if (child.markedForRemoval && child.opacity < 0.5) {\n removeIndexOffset -= 1;\n }\n\n const visualIndex = index + addIndexOffset + dragIndexOffset + removeIndexOffset;\n\n const indexX = visualIndex % itemsPerRow;\n const indexY = Math.floor(visualIndex / itemsPerRow);\n\n const offsetX = indexX * itemWidth;\n const offsetY = indexY * itemHeight;\n\n const vectorX = Math.sign(offsetX - prevX);\n const vectorY = Math.sign(offsetY - prevY);\n\n prevX = offsetX;\n prevY = offsetY;\n\n if (child.markedForRemoval) return;\n\n if (shouldOptimize) {\n child.translateX = null;\n child.translateY = null;\n }\n\n moveItem(child, offsetX, offsetY, vectorX, vectorY);\n });\n }\n};\n\n/**\n * Filters actions that are meant specifically for a certain child of the list\n * @param child\n * @param actions\n */\nconst filterSetItemActions = (child, actions) =>\n actions.filter(action => {\n // if action has an id, filter out actions that don't have this child id\n if (action.data && action.data.id) {\n return child.id === action.data.id;\n }\n\n // allow all other actions\n return true;\n });\n\nconst list = createView({\n create: create$8,\n write: write$5,\n tag: 'ul',\n name: 'list',\n didWriteView: ({ root }) => {\n root.childViews\n .filter(view => view.markedForRemoval && view.opacity === 0 && view.resting)\n .forEach(view => {\n view._destroy();\n root.removeChildView(view);\n });\n },\n filterFrameActionsForChild: filterSetItemActions,\n mixins: {\n apis: ['dragCoordinates'],\n },\n});\n\nconst create$9 = ({ root, props }) => {\n root.ref.list = root.appendChildView(root.createChildView(list));\n props.dragCoordinates = null;\n props.overflowing = false;\n};\n\nconst storeDragCoordinates = ({ root, props, action }) => {\n if (!root.query('GET_ITEM_INSERT_LOCATION_FREEDOM')) return;\n props.dragCoordinates = {\n left: action.position.scopeLeft - root.ref.list.rect.element.left,\n top:\n action.position.scopeTop -\n (root.rect.outer.top + root.rect.element.marginTop + root.rect.element.scrollTop),\n };\n};\n\nconst clearDragCoordinates = ({ props }) => {\n props.dragCoordinates = null;\n};\n\nconst route$3 = createRoute({\n DID_DRAG: storeDragCoordinates,\n DID_END_DRAG: clearDragCoordinates,\n});\n\nconst write$6 = ({ root, props, actions }) => {\n // route actions\n route$3({ root, props, actions });\n\n // current drag position\n root.ref.list.dragCoordinates = props.dragCoordinates;\n\n // if currently overflowing but no longer received overflow\n if (props.overflowing && !props.overflow) {\n props.overflowing = false;\n\n // reset overflow state\n root.element.dataset.state = '';\n root.height = null;\n }\n\n // if is not overflowing currently but does receive overflow value\n if (props.overflow) {\n const newHeight = Math.round(props.overflow);\n if (newHeight !== root.height) {\n props.overflowing = true;\n root.element.dataset.state = 'overflow';\n root.height = newHeight;\n }\n }\n};\n\nconst listScroller = createView({\n create: create$9,\n write: write$6,\n name: 'list-scroller',\n mixins: {\n apis: ['overflow', 'dragCoordinates'],\n styles: ['height', 'translateY'],\n animations: {\n translateY: 'spring',\n },\n },\n});\n\nconst attrToggle = (element, name, state, enabledValue = '') => {\n if (state) {\n attr(element, name, enabledValue);\n } else {\n element.removeAttribute(name);\n }\n};\n\nconst resetFileInput = input => {\n // no value, no need to reset\n if (!input || input.value === '') {\n return;\n }\n\n try {\n // for modern browsers\n input.value = '';\n } catch (err) {}\n\n // for IE10\n if (input.value) {\n // quickly append input to temp form and reset form\n const form = createElement$1('form');\n const parentNode = input.parentNode;\n const ref = input.nextSibling;\n form.appendChild(input);\n form.reset();\n\n // re-inject input where it originally was\n if (ref) {\n parentNode.insertBefore(input, ref);\n } else {\n parentNode.appendChild(input);\n }\n }\n};\n\nconst create$a = ({ root, props }) => {\n // set id so can be referenced from outside labels\n root.element.id = `filepond--browser-${props.id}`;\n\n // set name of element (is removed when a value is set)\n attr(root.element, 'name', root.query('GET_NAME'));\n\n // we have to link this element to the status element\n attr(root.element, 'aria-controls', `filepond--assistant-${props.id}`);\n\n // set label, we use labelled by as otherwise the screenreader does not read the \"browse\" text in the label (as it has tabindex: 0)\n attr(root.element, 'aria-labelledby', `filepond--drop-label-${props.id}`);\n\n // set configurable props\n setAcceptedFileTypes({ root, action: { value: root.query('GET_ACCEPTED_FILE_TYPES') } });\n toggleAllowMultiple({ root, action: { value: root.query('GET_ALLOW_MULTIPLE') } });\n toggleDirectoryFilter({ root, action: { value: root.query('GET_ALLOW_DIRECTORIES_ONLY') } });\n toggleDisabled({ root });\n toggleRequired({ root, action: { value: root.query('GET_REQUIRED') } });\n setCaptureMethod({ root, action: { value: root.query('GET_CAPTURE_METHOD') } });\n\n // handle changes to the input field\n root.ref.handleChange = e => {\n if (!root.element.value) {\n return;\n }\n\n // extract files and move value of webkitRelativePath path to _relativePath\n const files = Array.from(root.element.files).map(file => {\n file._relativePath = file.webkitRelativePath;\n return file;\n });\n\n // we add a little delay so the OS file select window can move out of the way before we add our file\n setTimeout(() => {\n // load files\n props.onload(files);\n\n // reset input, it's just for exposing a method to drop files, should not retain any state\n resetFileInput(root.element);\n }, 250);\n };\n\n root.element.addEventListener('change', root.ref.handleChange);\n};\n\nconst setAcceptedFileTypes = ({ root, action }) => {\n if (!root.query('GET_ALLOW_SYNC_ACCEPT_ATTRIBUTE')) return;\n attrToggle(root.element, 'accept', !!action.value, action.value ? action.value.join(',') : '');\n};\n\nconst toggleAllowMultiple = ({ root, action }) => {\n attrToggle(root.element, 'multiple', action.value);\n};\n\nconst toggleDirectoryFilter = ({ root, action }) => {\n attrToggle(root.element, 'webkitdirectory', action.value);\n};\n\nconst toggleDisabled = ({ root }) => {\n const isDisabled = root.query('GET_DISABLED');\n const doesAllowBrowse = root.query('GET_ALLOW_BROWSE');\n const disableField = isDisabled || !doesAllowBrowse;\n attrToggle(root.element, 'disabled', disableField);\n};\n\nconst toggleRequired = ({ root, action }) => {\n // want to remove required, always possible\n if (!action.value) {\n attrToggle(root.element, 'required', false);\n }\n // if want to make required, only possible when zero items\n else if (root.query('GET_TOTAL_ITEMS') === 0) {\n attrToggle(root.element, 'required', true);\n }\n};\n\nconst setCaptureMethod = ({ root, action }) => {\n attrToggle(root.element, 'capture', !!action.value, action.value === true ? '' : action.value);\n};\n\nconst updateRequiredStatus = ({ root }) => {\n const { element } = root;\n // always remove the required attribute when more than zero items\n if (root.query('GET_TOTAL_ITEMS') > 0) {\n attrToggle(element, 'required', false);\n attrToggle(element, 'name', false);\n } else {\n // add name attribute\n attrToggle(element, 'name', true, root.query('GET_NAME'));\n\n // remove any validation messages\n const shouldCheckValidity = root.query('GET_CHECK_VALIDITY');\n if (shouldCheckValidity) {\n element.setCustomValidity('');\n }\n\n // we only add required if the field has been deemed required\n if (root.query('GET_REQUIRED')) {\n attrToggle(element, 'required', true);\n }\n }\n};\n\nconst updateFieldValidityStatus = ({ root }) => {\n const shouldCheckValidity = root.query('GET_CHECK_VALIDITY');\n if (!shouldCheckValidity) return;\n root.element.setCustomValidity(root.query('GET_LABEL_INVALID_FIELD'));\n};\n\nconst browser = createView({\n tag: 'input',\n name: 'browser',\n ignoreRect: true,\n ignoreRectUpdate: true,\n attributes: {\n type: 'file',\n },\n create: create$a,\n destroy: ({ root }) => {\n root.element.removeEventListener('change', root.ref.handleChange);\n },\n write: createRoute({\n DID_LOAD_ITEM: updateRequiredStatus,\n DID_REMOVE_ITEM: updateRequiredStatus,\n DID_THROW_ITEM_INVALID: updateFieldValidityStatus,\n\n DID_SET_DISABLED: toggleDisabled,\n DID_SET_ALLOW_BROWSE: toggleDisabled,\n DID_SET_ALLOW_DIRECTORIES_ONLY: toggleDirectoryFilter,\n DID_SET_ALLOW_MULTIPLE: toggleAllowMultiple,\n DID_SET_ACCEPTED_FILE_TYPES: setAcceptedFileTypes,\n DID_SET_CAPTURE_METHOD: setCaptureMethod,\n DID_SET_REQUIRED: toggleRequired,\n }),\n});\n\nconst Key = {\n ENTER: 13,\n SPACE: 32,\n};\n\nconst create$b = ({ root, props }) => {\n // create the label and link it to the file browser\n const label = createElement$1('label');\n attr(label, 'for', `filepond--browser-${props.id}`);\n\n // use for labeling file input (aria-labelledby on file input)\n attr(label, 'id', `filepond--drop-label-${props.id}`);\n\n // hide the label for screenreaders, the input element will read the contents of the label when it's focussed. If we don't set aria-hidden the screenreader will also navigate the contents of the label separately from the input.\n attr(label, 'aria-hidden', 'true');\n\n // handle keys\n root.ref.handleKeyDown = e => {\n const isActivationKey = e.keyCode === Key.ENTER || e.keyCode === Key.SPACE;\n if (!isActivationKey) return;\n // stops from triggering the element a second time\n e.preventDefault();\n\n // click link (will then in turn activate file input)\n root.ref.label.click();\n };\n\n root.ref.handleClick = e => {\n const isLabelClick = e.target === label || label.contains(e.target);\n\n // don't want to click twice\n if (isLabelClick) return;\n\n // click link (will then in turn activate file input)\n root.ref.label.click();\n };\n\n // attach events\n label.addEventListener('keydown', root.ref.handleKeyDown);\n root.element.addEventListener('click', root.ref.handleClick);\n\n // update\n updateLabelValue(label, props.caption);\n\n // add!\n root.appendChild(label);\n root.ref.label = label;\n};\n\nconst updateLabelValue = (label, value) => {\n label.innerHTML = value;\n const clickable = label.querySelector('.filepond--label-action');\n if (clickable) {\n attr(clickable, 'tabindex', '0');\n }\n return value;\n};\n\nconst dropLabel = createView({\n name: 'drop-label',\n ignoreRect: true,\n create: create$b,\n destroy: ({ root }) => {\n root.ref.label.addEventListener('keydown', root.ref.handleKeyDown);\n root.element.removeEventListener('click', root.ref.handleClick);\n },\n write: createRoute({\n DID_SET_LABEL_IDLE: ({ root, action }) => {\n updateLabelValue(root.ref.label, action.value);\n },\n }),\n mixins: {\n styles: ['opacity', 'translateX', 'translateY'],\n animations: {\n opacity: { type: 'tween', duration: 150 },\n translateX: 'spring',\n translateY: 'spring',\n },\n },\n});\n\nconst blob = createView({\n name: 'drip-blob',\n ignoreRect: true,\n mixins: {\n styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity'],\n animations: {\n scaleX: 'spring',\n scaleY: 'spring',\n translateX: 'spring',\n translateY: 'spring',\n opacity: { type: 'tween', duration: 250 },\n },\n },\n});\n\nconst addBlob = ({ root }) => {\n const centerX = root.rect.element.width * 0.5;\n const centerY = root.rect.element.height * 0.5;\n\n root.ref.blob = root.appendChildView(\n root.createChildView(blob, {\n opacity: 0,\n scaleX: 2.5,\n scaleY: 2.5,\n translateX: centerX,\n translateY: centerY,\n })\n );\n};\n\nconst moveBlob = ({ root, action }) => {\n if (!root.ref.blob) {\n addBlob({ root });\n return;\n }\n\n root.ref.blob.translateX = action.position.scopeLeft;\n root.ref.blob.translateY = action.position.scopeTop;\n root.ref.blob.scaleX = 1;\n root.ref.blob.scaleY = 1;\n root.ref.blob.opacity = 1;\n};\n\nconst hideBlob = ({ root }) => {\n if (!root.ref.blob) {\n return;\n }\n root.ref.blob.opacity = 0;\n};\n\nconst explodeBlob = ({ root }) => {\n if (!root.ref.blob) {\n return;\n }\n root.ref.blob.scaleX = 2.5;\n root.ref.blob.scaleY = 2.5;\n root.ref.blob.opacity = 0;\n};\n\nconst write$7 = ({ root, props, actions }) => {\n route$4({ root, props, actions });\n\n const { blob } = root.ref;\n\n if (actions.length === 0 && blob && blob.opacity === 0) {\n root.removeChildView(blob);\n root.ref.blob = null;\n }\n};\n\nconst route$4 = createRoute({\n DID_DRAG: moveBlob,\n DID_DROP: explodeBlob,\n DID_END_DRAG: hideBlob,\n});\n\nconst drip = createView({\n ignoreRect: true,\n ignoreRectUpdate: true,\n name: 'drip',\n write: write$7,\n});\n\nconst setInputFiles = (element, files) => {\n try {\n // Create a DataTransfer instance and add a newly created file\n const dataTransfer = new DataTransfer();\n files.forEach(file => {\n if (file instanceof File) {\n dataTransfer.items.add(file);\n } else {\n dataTransfer.items.add(\n new File([file], file.name, {\n type: file.type,\n })\n );\n }\n });\n\n // Assign the DataTransfer files list to the file input\n element.files = dataTransfer.files;\n } catch (err) {\n return false;\n }\n return true;\n};\n\nconst create$c = ({ root }) => (root.ref.fields = {});\n\nconst getField = (root, id) => root.ref.fields[id];\n\nconst syncFieldPositionsWithItems = root => {\n root.query('GET_ACTIVE_ITEMS').forEach(item => {\n if (!root.ref.fields[item.id]) return;\n root.element.appendChild(root.ref.fields[item.id]);\n });\n};\n\nconst didReorderItems = ({ root }) => syncFieldPositionsWithItems(root);\n\nconst didAddItem = ({ root, action }) => {\n const fileItem = root.query('GET_ITEM', action.id);\n const isLocalFile = fileItem.origin === FileOrigin.LOCAL;\n const shouldUseFileInput = !isLocalFile && root.query('SHOULD_UPDATE_FILE_INPUT');\n const dataContainer = createElement$1('input');\n dataContainer.type = shouldUseFileInput ? 'file' : 'hidden';\n dataContainer.name = root.query('GET_NAME');\n dataContainer.disabled = root.query('GET_DISABLED');\n root.ref.fields[action.id] = dataContainer;\n syncFieldPositionsWithItems(root);\n};\n\nconst didLoadItem$1 = ({ root, action }) => {\n const field = getField(root, action.id);\n if (!field) return;\n\n // store server ref in hidden input\n if (action.serverFileReference !== null) field.value = action.serverFileReference;\n\n // store file item in file input\n if (!root.query('SHOULD_UPDATE_FILE_INPUT')) return;\n\n const fileItem = root.query('GET_ITEM', action.id);\n setInputFiles(field, [fileItem.file]);\n};\n\nconst didPrepareOutput = ({ root, action }) => {\n // this timeout pushes the handler after 'load'\n if (!root.query('SHOULD_UPDATE_FILE_INPUT')) return;\n setTimeout(() => {\n const field = getField(root, action.id);\n if (!field) return;\n setInputFiles(field, [action.file]);\n }, 0);\n};\n\nconst didSetDisabled = ({ root }) => {\n root.element.disabled = root.query('GET_DISABLED');\n};\n\nconst didRemoveItem = ({ root, action }) => {\n const field = getField(root, action.id);\n if (!field) return;\n if (field.parentNode) field.parentNode.removeChild(field);\n delete root.ref.fields[action.id];\n};\n\n// only runs for server files. will refuse to update the value if the field\n// is a file field\nconst didDefineValue = ({ root, action }) => {\n const field = getField(root, action.id);\n if (!field) return;\n if (action.value === null) {\n // clear field value\n field.removeAttribute('value');\n } else {\n // set field value\n if (field.type != 'file') {\n field.value = action.value;\n }\n }\n syncFieldPositionsWithItems(root);\n};\n\nconst write$8 = createRoute({\n DID_SET_DISABLED: didSetDisabled,\n DID_ADD_ITEM: didAddItem,\n DID_LOAD_ITEM: didLoadItem$1,\n DID_REMOVE_ITEM: didRemoveItem,\n DID_DEFINE_VALUE: didDefineValue,\n DID_PREPARE_OUTPUT: didPrepareOutput,\n DID_REORDER_ITEMS: didReorderItems,\n DID_SORT_ITEMS: didReorderItems,\n});\n\nconst data = createView({\n tag: 'fieldset',\n name: 'data',\n create: create$c,\n write: write$8,\n ignoreRect: true,\n});\n\nconst getRootNode = element => ('getRootNode' in element ? element.getRootNode() : document);\n\nconst images = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff'];\nconst text$1 = ['css', 'csv', 'html', 'txt'];\nconst map = {\n zip: 'zip|compressed',\n epub: 'application/epub+zip',\n};\n\nconst guesstimateMimeType = (extension = '') => {\n extension = extension.toLowerCase();\n if (images.includes(extension)) {\n return (\n 'image/' + (extension === 'jpg' ? 'jpeg' : extension === 'svg' ? 'svg+xml' : extension)\n );\n }\n if (text$1.includes(extension)) {\n return 'text/' + extension;\n }\n\n return map[extension] || '';\n};\n\nconst requestDataTransferItems = dataTransfer =>\n new Promise((resolve, reject) => {\n // try to get links from transfer, if found we'll exit immediately (unless a file is in the dataTransfer as well, this is because Firefox could represent the file as a URL and a file object at the same time)\n const links = getLinks(dataTransfer);\n if (links.length && !hasFiles(dataTransfer)) {\n return resolve(links);\n }\n // try to get files from the transfer\n getFiles(dataTransfer).then(resolve);\n });\n\n/**\n * Test if datatransfer has files\n */\nconst hasFiles = dataTransfer => {\n if (dataTransfer.files) return dataTransfer.files.length > 0;\n return false;\n};\n\n/**\n * Extracts files from a DataTransfer object\n */\nconst getFiles = dataTransfer =>\n new Promise((resolve, reject) => {\n // get the transfer items as promises\n const promisedFiles = (dataTransfer.items ? Array.from(dataTransfer.items) : [])\n\n // only keep file system items (files and directories)\n .filter(item => isFileSystemItem(item))\n\n // map each item to promise\n .map(item => getFilesFromItem(item));\n\n // if is empty, see if we can extract some info from the files property as a fallback\n if (!promisedFiles.length) {\n // TODO: test for directories (should not be allowed)\n // Use FileReader, problem is that the files property gets lost in the process\n resolve(dataTransfer.files ? Array.from(dataTransfer.files) : []);\n return;\n }\n\n // done!\n Promise.all(promisedFiles)\n .then(returnedFileGroups => {\n // flatten groups\n const files = [];\n returnedFileGroups.forEach(group => {\n files.push.apply(files, group);\n });\n\n // done (filter out empty files)!\n resolve(\n files\n .filter(file => file)\n .map(file => {\n if (!file._relativePath) file._relativePath = file.webkitRelativePath;\n return file;\n })\n );\n })\n .catch(console.error);\n });\n\nconst isFileSystemItem = item => {\n if (isEntry(item)) {\n const entry = getAsEntry(item);\n if (entry) {\n return entry.isFile || entry.isDirectory;\n }\n }\n return item.kind === 'file';\n};\n\nconst getFilesFromItem = item =>\n new Promise((resolve, reject) => {\n if (isDirectoryEntry(item)) {\n getFilesInDirectory(getAsEntry(item))\n .then(resolve)\n .catch(reject);\n return;\n }\n\n resolve([item.getAsFile()]);\n });\n\nconst getFilesInDirectory = entry =>\n new Promise((resolve, reject) => {\n const files = [];\n\n // the total entries to read\n let dirCounter = 0;\n let fileCounter = 0;\n\n const resolveIfDone = () => {\n if (fileCounter === 0 && dirCounter === 0) {\n resolve(files);\n }\n };\n\n // the recursive function\n const readEntries = dirEntry => {\n dirCounter++;\n\n const directoryReader = dirEntry.createReader();\n\n // directories are returned in batches, we need to process all batches before we're done\n const readBatch = () => {\n directoryReader.readEntries(entries => {\n if (entries.length === 0) {\n dirCounter--;\n resolveIfDone();\n return;\n }\n\n entries.forEach(entry => {\n // recursively read more directories\n if (entry.isDirectory) {\n readEntries(entry);\n } else {\n // read as file\n fileCounter++;\n\n entry.file(file => {\n const correctedFile = correctMissingFileType(file);\n if (entry.fullPath) correctedFile._relativePath = entry.fullPath;\n files.push(correctedFile);\n fileCounter--;\n resolveIfDone();\n });\n }\n });\n\n // try to get next batch of files\n readBatch();\n }, reject);\n };\n\n // read first batch of files\n readBatch();\n };\n\n // go!\n readEntries(entry);\n });\n\nconst correctMissingFileType = file => {\n if (file.type.length) return file;\n const date = file.lastModifiedDate;\n const name = file.name;\n const type = guesstimateMimeType(getExtensionFromFilename(file.name));\n if (!type.length) return file;\n file = file.slice(0, file.size, type);\n file.name = name;\n file.lastModifiedDate = date;\n return file;\n};\n\nconst isDirectoryEntry = item => isEntry(item) && (getAsEntry(item) || {}).isDirectory;\n\nconst isEntry = item => 'webkitGetAsEntry' in item;\n\nconst getAsEntry = item => item.webkitGetAsEntry();\n\n/**\n * Extracts links from a DataTransfer object\n */\nconst getLinks = dataTransfer => {\n let links = [];\n try {\n // look in meta data property\n links = getLinksFromTransferMetaData(dataTransfer);\n if (links.length) {\n return links;\n }\n links = getLinksFromTransferURLData(dataTransfer);\n } catch (e) {\n // nope nope nope (probably IE trouble)\n }\n return links;\n};\n\nconst getLinksFromTransferURLData = dataTransfer => {\n let data = dataTransfer.getData('url');\n if (typeof data === 'string' && data.length) {\n return [data];\n }\n return [];\n};\n\nconst getLinksFromTransferMetaData = dataTransfer => {\n let data = dataTransfer.getData('text/html');\n if (typeof data === 'string' && data.length) {\n const matches = data.match(/src\\s*=\\s*\"(.+?)\"/);\n if (matches) {\n return [matches[1]];\n }\n }\n return [];\n};\n\nconst dragNDropObservers = [];\n\nconst eventPosition = e => ({\n pageLeft: e.pageX,\n pageTop: e.pageY,\n scopeLeft: e.offsetX || e.layerX,\n scopeTop: e.offsetY || e.layerY,\n});\n\nconst createDragNDropClient = (element, scopeToObserve, filterElement) => {\n const observer = getDragNDropObserver(scopeToObserve);\n\n const client = {\n element,\n filterElement,\n state: null,\n ondrop: () => {},\n onenter: () => {},\n ondrag: () => {},\n onexit: () => {},\n onload: () => {},\n allowdrop: () => {},\n };\n\n client.destroy = observer.addListener(client);\n\n return client;\n};\n\nconst getDragNDropObserver = element => {\n // see if already exists, if so, return\n const observer = dragNDropObservers.find(item => item.element === element);\n if (observer) {\n return observer;\n }\n\n // create new observer, does not yet exist for this element\n const newObserver = createDragNDropObserver(element);\n dragNDropObservers.push(newObserver);\n return newObserver;\n};\n\nconst createDragNDropObserver = element => {\n const clients = [];\n\n const routes = {\n dragenter,\n dragover,\n dragleave,\n drop,\n };\n\n const handlers = {};\n\n forin(routes, (event, createHandler) => {\n handlers[event] = createHandler(element, clients);\n element.addEventListener(event, handlers[event], false);\n });\n\n const observer = {\n element,\n addListener: client => {\n // add as client\n clients.push(client);\n\n // return removeListener function\n return () => {\n // remove client\n clients.splice(clients.indexOf(client), 1);\n\n // if no more clients, clean up observer\n if (clients.length === 0) {\n dragNDropObservers.splice(dragNDropObservers.indexOf(observer), 1);\n\n forin(routes, event => {\n element.removeEventListener(event, handlers[event], false);\n });\n }\n };\n },\n };\n\n return observer;\n};\n\nconst elementFromPoint = (root, point) => {\n if (!('elementFromPoint' in root)) {\n root = document;\n }\n return root.elementFromPoint(point.x, point.y);\n};\n\nconst isEventTarget = (e, target) => {\n // get root\n const root = getRootNode(target);\n\n // get element at position\n // if root is not actual shadow DOM and does not have elementFromPoint method, use the one on document\n const elementAtPosition = elementFromPoint(root, {\n x: e.pageX - window.pageXOffset,\n y: e.pageY - window.pageYOffset,\n });\n\n // test if target is the element or if one of its children is\n return elementAtPosition === target || target.contains(elementAtPosition);\n};\n\nlet initialTarget = null;\n\nconst setDropEffect = (dataTransfer, effect) => {\n // is in try catch as IE11 will throw error if not\n try {\n dataTransfer.dropEffect = effect;\n } catch (e) {}\n};\n\nconst dragenter = (root, clients) => e => {\n e.preventDefault();\n\n initialTarget = e.target;\n\n clients.forEach(client => {\n const { element, onenter } = client;\n\n if (isEventTarget(e, element)) {\n client.state = 'enter';\n\n // fire enter event\n onenter(eventPosition(e));\n }\n });\n};\n\nconst dragover = (root, clients) => e => {\n e.preventDefault();\n\n const dataTransfer = e.dataTransfer;\n\n requestDataTransferItems(dataTransfer).then(items => {\n let overDropTarget = false;\n\n clients.some(client => {\n const { filterElement, element, onenter, onexit, ondrag, allowdrop } = client;\n\n // by default we can drop\n setDropEffect(dataTransfer, 'copy');\n\n // allow transfer of these items\n const allowsTransfer = allowdrop(items);\n\n // only used when can be dropped on page\n if (!allowsTransfer) {\n setDropEffect(dataTransfer, 'none');\n return;\n }\n\n // targetting this client\n if (isEventTarget(e, element)) {\n overDropTarget = true;\n\n // had no previous state, means we are entering this client\n if (client.state === null) {\n client.state = 'enter';\n onenter(eventPosition(e));\n return;\n }\n\n // now over element (no matter if it allows the drop or not)\n client.state = 'over';\n\n // needs to allow transfer\n if (filterElement && !allowsTransfer) {\n setDropEffect(dataTransfer, 'none');\n return;\n }\n\n // dragging\n ondrag(eventPosition(e));\n } else {\n // should be over an element to drop\n if (filterElement && !overDropTarget) {\n setDropEffect(dataTransfer, 'none');\n }\n\n // might have just left this client?\n if (client.state) {\n client.state = null;\n onexit(eventPosition(e));\n }\n }\n });\n });\n};\n\nconst drop = (root, clients) => e => {\n e.preventDefault();\n\n const dataTransfer = e.dataTransfer;\n\n requestDataTransferItems(dataTransfer).then(items => {\n clients.forEach(client => {\n const { filterElement, element, ondrop, onexit, allowdrop } = client;\n\n client.state = null;\n\n // if we're filtering on element we need to be over the element to drop\n if (filterElement && !isEventTarget(e, element)) return;\n\n // no transfer for this client\n if (!allowdrop(items)) return onexit(eventPosition(e));\n\n // we can drop these items on this client\n ondrop(eventPosition(e), items);\n });\n });\n};\n\nconst dragleave = (root, clients) => e => {\n if (initialTarget !== e.target) {\n return;\n }\n\n clients.forEach(client => {\n const { onexit } = client;\n\n client.state = null;\n\n onexit(eventPosition(e));\n });\n};\n\nconst createHopper = (scope, validateItems, options) => {\n // is now hopper scope\n scope.classList.add('filepond--hopper');\n\n // shortcuts\n const { catchesDropsOnPage, requiresDropOnElement, filterItems = items => items } = options;\n\n // create a dnd client\n const client = createDragNDropClient(\n scope,\n catchesDropsOnPage ? document.documentElement : scope,\n requiresDropOnElement\n );\n\n // current client state\n let lastState = '';\n let currentState = '';\n\n // determines if a file may be dropped\n client.allowdrop = items => {\n // TODO: if we can, throw error to indicate the items cannot by dropped\n\n return validateItems(filterItems(items));\n };\n\n client.ondrop = (position, items) => {\n const filteredItems = filterItems(items);\n\n if (!validateItems(filteredItems)) {\n api.ondragend(position);\n return;\n }\n\n currentState = 'drag-drop';\n\n api.onload(filteredItems, position);\n };\n\n client.ondrag = position => {\n api.ondrag(position);\n };\n\n client.onenter = position => {\n currentState = 'drag-over';\n\n api.ondragstart(position);\n };\n\n client.onexit = position => {\n currentState = 'drag-exit';\n\n api.ondragend(position);\n };\n\n const api = {\n updateHopperState: () => {\n if (lastState !== currentState) {\n scope.dataset.hopperState = currentState;\n lastState = currentState;\n }\n },\n onload: () => {},\n ondragstart: () => {},\n ondrag: () => {},\n ondragend: () => {},\n destroy: () => {\n // destroy client\n client.destroy();\n },\n };\n\n return api;\n};\n\nlet listening = false;\nconst listeners$1 = [];\n\nconst handlePaste = e => {\n // if is pasting in input or textarea and the target is outside of a filepond scope, ignore\n const activeEl = document.activeElement;\n if (activeEl && /textarea|input/i.test(activeEl.nodeName)) {\n // test textarea or input is contained in filepond root\n let inScope = false;\n let element = activeEl;\n while (element !== document.body) {\n if (element.classList.contains('filepond--root')) {\n inScope = true;\n break;\n }\n element = element.parentNode;\n }\n\n if (!inScope) return;\n }\n\n requestDataTransferItems(e.clipboardData).then(files => {\n // no files received\n if (!files.length) {\n return;\n }\n\n // notify listeners of received files\n listeners$1.forEach(listener => listener(files));\n });\n};\n\nconst listen = cb => {\n // can't add twice\n if (listeners$1.includes(cb)) {\n return;\n }\n\n // add initial listener\n listeners$1.push(cb);\n\n // setup paste listener for entire page\n if (listening) {\n return;\n }\n\n listening = true;\n document.addEventListener('paste', handlePaste);\n};\n\nconst unlisten = listener => {\n arrayRemove(listeners$1, listeners$1.indexOf(listener));\n\n // clean up\n if (listeners$1.length === 0) {\n document.removeEventListener('paste', handlePaste);\n listening = false;\n }\n};\n\nconst createPaster = () => {\n const cb = files => {\n api.onload(files);\n };\n\n const api = {\n destroy: () => {\n unlisten(cb);\n },\n onload: () => {},\n };\n\n listen(cb);\n\n return api;\n};\n\n/**\n * Creates the file view\n */\nconst create$d = ({ root, props }) => {\n root.element.id = `filepond--assistant-${props.id}`;\n attr(root.element, 'role', 'status');\n attr(root.element, 'aria-live', 'polite');\n attr(root.element, 'aria-relevant', 'additions');\n};\n\nlet addFilesNotificationTimeout = null;\nlet notificationClearTimeout = null;\n\nconst filenames = [];\n\nconst assist = (root, message) => {\n root.element.textContent = message;\n};\n\nconst clear$1 = root => {\n root.element.textContent = '';\n};\n\nconst listModified = (root, filename, label) => {\n const total = root.query('GET_TOTAL_ITEMS');\n assist(\n root,\n `${label} ${filename}, ${total} ${\n total === 1\n ? root.query('GET_LABEL_FILE_COUNT_SINGULAR')\n : root.query('GET_LABEL_FILE_COUNT_PLURAL')\n }`\n );\n\n // clear group after set amount of time so the status is not read twice\n clearTimeout(notificationClearTimeout);\n notificationClearTimeout = setTimeout(() => {\n clear$1(root);\n }, 1500);\n};\n\nconst isUsingFilePond = root => root.element.parentNode.contains(document.activeElement);\n\nconst itemAdded = ({ root, action }) => {\n if (!isUsingFilePond(root)) {\n return;\n }\n\n root.element.textContent = '';\n const item = root.query('GET_ITEM', action.id);\n filenames.push(item.filename);\n\n clearTimeout(addFilesNotificationTimeout);\n addFilesNotificationTimeout = setTimeout(() => {\n listModified(root, filenames.join(', '), root.query('GET_LABEL_FILE_ADDED'));\n filenames.length = 0;\n }, 750);\n};\n\nconst itemRemoved = ({ root, action }) => {\n if (!isUsingFilePond(root)) {\n return;\n }\n\n const item = action.item;\n listModified(root, item.filename, root.query('GET_LABEL_FILE_REMOVED'));\n};\n\nconst itemProcessed = ({ root, action }) => {\n // will also notify the user when FilePond is not being used, as the user might be occupied with other activities while uploading a file\n\n const item = root.query('GET_ITEM', action.id);\n const filename = item.filename;\n const label = root.query('GET_LABEL_FILE_PROCESSING_COMPLETE');\n\n assist(root, `${filename} ${label}`);\n};\n\nconst itemProcessedUndo = ({ root, action }) => {\n const item = root.query('GET_ITEM', action.id);\n const filename = item.filename;\n const label = root.query('GET_LABEL_FILE_PROCESSING_ABORTED');\n\n assist(root, `${filename} ${label}`);\n};\n\nconst itemError = ({ root, action }) => {\n const item = root.query('GET_ITEM', action.id);\n const filename = item.filename;\n\n // will also notify the user when FilePond is not being used, as the user might be occupied with other activities while uploading a file\n\n assist(root, `${action.status.main} ${filename} ${action.status.sub}`);\n};\n\nconst assistant = createView({\n create: create$d,\n ignoreRect: true,\n ignoreRectUpdate: true,\n write: createRoute({\n DID_LOAD_ITEM: itemAdded,\n DID_REMOVE_ITEM: itemRemoved,\n DID_COMPLETE_ITEM_PROCESSING: itemProcessed,\n\n DID_ABORT_ITEM_PROCESSING: itemProcessedUndo,\n DID_REVERT_ITEM_PROCESSING: itemProcessedUndo,\n\n DID_THROW_ITEM_REMOVE_ERROR: itemError,\n DID_THROW_ITEM_LOAD_ERROR: itemError,\n DID_THROW_ITEM_INVALID: itemError,\n DID_THROW_ITEM_PROCESSING_ERROR: itemError,\n }),\n tag: 'span',\n name: 'assistant',\n});\n\nconst toCamels = (string, separator = '-') =>\n string.replace(new RegExp(`${separator}.`, 'g'), sub => sub.charAt(1).toUpperCase());\n\nconst debounce = (func, interval = 16, immidiateOnly = true) => {\n let last = Date.now();\n let timeout = null;\n\n return (...args) => {\n clearTimeout(timeout);\n\n const dist = Date.now() - last;\n\n const fn = () => {\n last = Date.now();\n func(...args);\n };\n\n if (dist < interval) {\n // we need to delay by the difference between interval and dist\n // for example: if distance is 10 ms and interval is 16 ms,\n // we need to wait an additional 6ms before calling the function)\n if (!immidiateOnly) {\n timeout = setTimeout(fn, interval - dist);\n }\n } else {\n // go!\n fn();\n }\n };\n};\n\nconst MAX_FILES_LIMIT = 1000000;\n\nconst prevent = e => e.preventDefault();\n\nconst create$e = ({ root, props }) => {\n // Add id\n const id = root.query('GET_ID');\n if (id) {\n root.element.id = id;\n }\n\n // Add className\n const className = root.query('GET_CLASS_NAME');\n if (className) {\n className\n .split(' ')\n .filter(name => name.length)\n .forEach(name => {\n root.element.classList.add(name);\n });\n }\n\n // Field label\n root.ref.label = root.appendChildView(\n root.createChildView(dropLabel, {\n ...props,\n translateY: null,\n caption: root.query('GET_LABEL_IDLE'),\n })\n );\n\n // List of items\n root.ref.list = root.appendChildView(root.createChildView(listScroller, { translateY: null }));\n\n // Background panel\n root.ref.panel = root.appendChildView(root.createChildView(panel, { name: 'panel-root' }));\n\n // Assistant notifies assistive tech when content changes\n root.ref.assistant = root.appendChildView(root.createChildView(assistant, { ...props }));\n\n // Data\n root.ref.data = root.appendChildView(root.createChildView(data, { ...props }));\n\n // Measure (tests if fixed height was set)\n // DOCTYPE needs to be set for this to work\n root.ref.measure = createElement$1('div');\n root.ref.measure.style.height = '100%';\n root.element.appendChild(root.ref.measure);\n\n // information on the root height or fixed height status\n root.ref.bounds = null;\n\n // apply initial style properties\n root.query('GET_STYLES')\n .filter(style => !isEmpty(style.value))\n .map(({ name, value }) => {\n root.element.dataset[name] = value;\n });\n\n // determine if width changed\n root.ref.widthPrevious = null;\n root.ref.widthUpdated = debounce(() => {\n root.ref.updateHistory = [];\n root.dispatch('DID_RESIZE_ROOT');\n }, 250);\n\n // history of updates\n root.ref.previousAspectRatio = null;\n root.ref.updateHistory = [];\n\n // prevent scrolling and zooming on iOS (only if supports pointer events, for then we can enable reorder)\n const canHover = window.matchMedia('(pointer: fine) and (hover: hover)').matches;\n const hasPointerEvents = 'PointerEvent' in window;\n if (root.query('GET_ALLOW_REORDER') && hasPointerEvents && !canHover) {\n root.element.addEventListener('touchmove', prevent, { passive: false });\n root.element.addEventListener('gesturestart', prevent);\n }\n\n // add credits\n const credits = root.query('GET_CREDITS');\n const hasCredits = credits.length === 2;\n if (hasCredits) {\n const frag = document.createElement('a');\n frag.className = 'filepond--credits';\n frag.setAttribute('aria-hidden', 'true');\n frag.href = credits[0];\n frag.tabindex = -1;\n frag.target = '_blank';\n frag.rel = 'noopener noreferrer';\n frag.textContent = credits[1];\n root.element.appendChild(frag);\n root.ref.credits = frag;\n }\n};\n\nconst write$9 = ({ root, props, actions }) => {\n // route actions\n route$5({ root, props, actions });\n\n // apply style properties\n actions\n .filter(action => /^DID_SET_STYLE_/.test(action.type))\n .filter(action => !isEmpty(action.data.value))\n .map(({ type, data }) => {\n const name = toCamels(type.substring(8).toLowerCase(), '_');\n root.element.dataset[name] = data.value;\n root.invalidateLayout();\n });\n\n if (root.rect.element.hidden) return;\n\n if (root.rect.element.width !== root.ref.widthPrevious) {\n root.ref.widthPrevious = root.rect.element.width;\n root.ref.widthUpdated();\n }\n\n // get box bounds, we do this only once\n let bounds = root.ref.bounds;\n if (!bounds) {\n bounds = root.ref.bounds = calculateRootBoundingBoxHeight(root);\n\n // destroy measure element\n root.element.removeChild(root.ref.measure);\n root.ref.measure = null;\n }\n\n // get quick references to various high level parts of the upload tool\n const { hopper, label, list, panel } = root.ref;\n\n // sets correct state to hopper scope\n if (hopper) {\n hopper.updateHopperState();\n }\n\n // bool to indicate if we're full or not\n const aspectRatio = root.query('GET_PANEL_ASPECT_RATIO');\n const isMultiItem = root.query('GET_ALLOW_MULTIPLE');\n const totalItems = root.query('GET_TOTAL_ITEMS');\n const maxItems = isMultiItem ? root.query('GET_MAX_FILES') || MAX_FILES_LIMIT : 1;\n const atMaxCapacity = totalItems === maxItems;\n\n // action used to add item\n const addAction = actions.find(action => action.type === 'DID_ADD_ITEM');\n\n // if reached max capacity and we've just reached it\n if (atMaxCapacity && addAction) {\n // get interaction type\n const interactionMethod = addAction.data.interactionMethod;\n\n // hide label\n label.opacity = 0;\n\n if (isMultiItem) {\n label.translateY = -40;\n } else {\n if (interactionMethod === InteractionMethod.API) {\n label.translateX = 40;\n } else if (interactionMethod === InteractionMethod.BROWSE) {\n label.translateY = 40;\n } else {\n label.translateY = 30;\n }\n }\n } else if (!atMaxCapacity) {\n label.opacity = 1;\n label.translateX = 0;\n label.translateY = 0;\n }\n\n const listItemMargin = calculateListItemMargin(root);\n\n const listHeight = calculateListHeight(root);\n\n const labelHeight = label.rect.element.height;\n const currentLabelHeight = !isMultiItem || atMaxCapacity ? 0 : labelHeight;\n\n const listMarginTop = atMaxCapacity ? list.rect.element.marginTop : 0;\n const listMarginBottom = totalItems === 0 ? 0 : list.rect.element.marginBottom;\n\n const visualHeight = currentLabelHeight + listMarginTop + listHeight.visual + listMarginBottom;\n const boundsHeight = currentLabelHeight + listMarginTop + listHeight.bounds + listMarginBottom;\n\n // link list to label bottom position\n list.translateY =\n Math.max(0, currentLabelHeight - list.rect.element.marginTop) - listItemMargin.top;\n\n if (aspectRatio) {\n // fixed aspect ratio\n\n // calculate height based on width\n const width = root.rect.element.width;\n const height = width * aspectRatio;\n\n // clear history if aspect ratio has changed\n if (aspectRatio !== root.ref.previousAspectRatio) {\n root.ref.previousAspectRatio = aspectRatio;\n root.ref.updateHistory = [];\n }\n\n // remember this width\n const history = root.ref.updateHistory;\n history.push(width);\n\n const MAX_BOUNCES = 2;\n if (history.length > MAX_BOUNCES * 2) {\n const l = history.length;\n const bottom = l - 10;\n let bounces = 0;\n for (let i = l; i >= bottom; i--) {\n if (history[i] === history[i - 2]) {\n bounces++;\n }\n\n if (bounces >= MAX_BOUNCES) {\n // dont adjust height\n return;\n }\n }\n }\n\n // fix height of panel so it adheres to aspect ratio\n panel.scalable = false;\n panel.height = height;\n\n // available height for list\n const listAvailableHeight =\n // the height of the panel minus the label height\n height -\n currentLabelHeight -\n // the room we leave open between the end of the list and the panel bottom\n (listMarginBottom - listItemMargin.bottom) -\n // if we're full we need to leave some room between the top of the panel and the list\n (atMaxCapacity ? listMarginTop : 0);\n\n if (listHeight.visual > listAvailableHeight) {\n list.overflow = listAvailableHeight;\n } else {\n list.overflow = null;\n }\n\n // set container bounds (so pushes siblings downwards)\n root.height = height;\n } else if (bounds.fixedHeight) {\n // fixed height\n\n // fix height of panel\n panel.scalable = false;\n\n // available height for list\n const listAvailableHeight =\n // the height of the panel minus the label height\n bounds.fixedHeight -\n currentLabelHeight -\n // the room we leave open between the end of the list and the panel bottom\n (listMarginBottom - listItemMargin.bottom) -\n // if we're full we need to leave some room between the top of the panel and the list\n (atMaxCapacity ? listMarginTop : 0);\n\n // set list height\n if (listHeight.visual > listAvailableHeight) {\n list.overflow = listAvailableHeight;\n } else {\n list.overflow = null;\n }\n\n // no need to set container bounds as these are handles by CSS fixed height\n } else if (bounds.cappedHeight) {\n // max-height\n\n // not a fixed height panel\n const isCappedHeight = visualHeight >= bounds.cappedHeight;\n const panelHeight = Math.min(bounds.cappedHeight, visualHeight);\n panel.scalable = true;\n panel.height = isCappedHeight\n ? panelHeight\n : panelHeight - listItemMargin.top - listItemMargin.bottom;\n\n // available height for list\n const listAvailableHeight =\n // the height of the panel minus the label height\n panelHeight -\n currentLabelHeight -\n // the room we leave open between the end of the list and the panel bottom\n (listMarginBottom - listItemMargin.bottom) -\n // if we're full we need to leave some room between the top of the panel and the list\n (atMaxCapacity ? listMarginTop : 0);\n\n // set list height (if is overflowing)\n if (visualHeight > bounds.cappedHeight && listHeight.visual > listAvailableHeight) {\n list.overflow = listAvailableHeight;\n } else {\n list.overflow = null;\n }\n\n // set container bounds (so pushes siblings downwards)\n root.height = Math.min(\n bounds.cappedHeight,\n boundsHeight - listItemMargin.top - listItemMargin.bottom\n );\n } else {\n // flexible height\n\n // not a fixed height panel\n const itemMargin = totalItems > 0 ? listItemMargin.top + listItemMargin.bottom : 0;\n panel.scalable = true;\n panel.height = Math.max(labelHeight, visualHeight - itemMargin);\n\n // set container bounds (so pushes siblings downwards)\n root.height = Math.max(labelHeight, boundsHeight - itemMargin);\n }\n\n // move credits to bottom\n if (root.ref.credits && panel.heightCurrent)\n root.ref.credits.style.transform = `translateY(${panel.heightCurrent}px)`;\n};\n\nconst calculateListItemMargin = root => {\n const item = root.ref.list.childViews[0].childViews[0];\n return item\n ? {\n top: item.rect.element.marginTop,\n bottom: item.rect.element.marginBottom,\n }\n : {\n top: 0,\n bottom: 0,\n };\n};\n\nconst calculateListHeight = root => {\n let visual = 0;\n let bounds = 0;\n\n // get file list reference\n const scrollList = root.ref.list;\n const itemList = scrollList.childViews[0];\n const visibleChildren = itemList.childViews.filter(child => child.rect.element.height);\n const children = root\n .query('GET_ACTIVE_ITEMS')\n .map(item => visibleChildren.find(child => child.id === item.id))\n .filter(item => item);\n\n // no children, done!\n if (children.length === 0) return { visual, bounds };\n\n const horizontalSpace = itemList.rect.element.width;\n const dragIndex = getItemIndexByPosition(itemList, children, scrollList.dragCoordinates);\n\n const childRect = children[0].rect.element;\n\n const itemVerticalMargin = childRect.marginTop + childRect.marginBottom;\n const itemHorizontalMargin = childRect.marginLeft + childRect.marginRight;\n\n const itemWidth = childRect.width + itemHorizontalMargin;\n const itemHeight = childRect.height + itemVerticalMargin;\n\n const newItem = typeof dragIndex !== 'undefined' && dragIndex >= 0 ? 1 : 0;\n const removedItem = children.find(child => child.markedForRemoval && child.opacity < 0.45)\n ? -1\n : 0;\n const verticalItemCount = children.length + newItem + removedItem;\n const itemsPerRow = getItemsPerRow(horizontalSpace, itemWidth);\n\n // stack\n if (itemsPerRow === 1) {\n children.forEach(item => {\n const height = item.rect.element.height + itemVerticalMargin;\n bounds += height;\n visual += height * item.opacity;\n });\n }\n // grid\n else {\n bounds = Math.ceil(verticalItemCount / itemsPerRow) * itemHeight;\n visual = bounds;\n }\n\n return { visual, bounds };\n};\n\nconst calculateRootBoundingBoxHeight = root => {\n const height = root.ref.measureHeight || null;\n const cappedHeight = parseInt(root.style.maxHeight, 10) || null;\n const fixedHeight = height === 0 ? null : height;\n\n return {\n cappedHeight,\n fixedHeight,\n };\n};\n\nconst exceedsMaxFiles = (root, items) => {\n const allowReplace = root.query('GET_ALLOW_REPLACE');\n const allowMultiple = root.query('GET_ALLOW_MULTIPLE');\n const totalItems = root.query('GET_TOTAL_ITEMS');\n let maxItems = root.query('GET_MAX_FILES');\n\n // total amount of items being dragged\n const totalBrowseItems = items.length;\n\n // if does not allow multiple items and dragging more than one item\n if (!allowMultiple && totalBrowseItems > 1) {\n root.dispatch('DID_THROW_MAX_FILES', {\n source: items,\n error: createResponse('warning', 0, 'Max files'),\n });\n return true;\n }\n\n // limit max items to one if not allowed to drop multiple items\n maxItems = allowMultiple ? maxItems : 1;\n\n if (!allowMultiple && allowReplace) {\n // There is only one item, so there is room to replace or add an item\n return false;\n }\n\n // no more room?\n const hasMaxItems = isInt(maxItems);\n if (hasMaxItems && totalItems + totalBrowseItems > maxItems) {\n root.dispatch('DID_THROW_MAX_FILES', {\n source: items,\n error: createResponse('warning', 0, 'Max files'),\n });\n return true;\n }\n\n return false;\n};\n\nconst getDragIndex = (list, children, position) => {\n const itemList = list.childViews[0];\n return getItemIndexByPosition(itemList, children, {\n left: position.scopeLeft - itemList.rect.element.left,\n top:\n position.scopeTop -\n (list.rect.outer.top + list.rect.element.marginTop + list.rect.element.scrollTop),\n });\n};\n\n/**\n * Enable or disable file drop functionality\n */\nconst toggleDrop = root => {\n const isAllowed = root.query('GET_ALLOW_DROP');\n const isDisabled = root.query('GET_DISABLED');\n const enabled = isAllowed && !isDisabled;\n if (enabled && !root.ref.hopper) {\n const hopper = createHopper(\n root.element,\n items => {\n // allow quick validation of dropped items\n const beforeDropFile = root.query('GET_BEFORE_DROP_FILE') || (() => true);\n\n // all items should be validated by all filters as valid\n const dropValidation = root.query('GET_DROP_VALIDATION');\n return dropValidation\n ? items.every(\n item =>\n applyFilters('ALLOW_HOPPER_ITEM', item, {\n query: root.query,\n }).every(result => result === true) && beforeDropFile(item)\n )\n : true;\n },\n {\n filterItems: items => {\n const ignoredFiles = root.query('GET_IGNORED_FILES');\n return items.filter(item => {\n if (isFile(item)) {\n return !ignoredFiles.includes(item.name.toLowerCase());\n }\n return true;\n });\n },\n catchesDropsOnPage: root.query('GET_DROP_ON_PAGE'),\n requiresDropOnElement: root.query('GET_DROP_ON_ELEMENT'),\n }\n );\n\n hopper.onload = (items, position) => {\n // get item children elements and sort based on list sort\n const list = root.ref.list.childViews[0];\n const visibleChildren = list.childViews.filter(child => child.rect.element.height);\n const children = root\n .query('GET_ACTIVE_ITEMS')\n .map(item => visibleChildren.find(child => child.id === item.id))\n .filter(item => item);\n\n applyFilterChain('ADD_ITEMS', items, { dispatch: root.dispatch }).then(queue => {\n // these files don't fit so stop here\n if (exceedsMaxFiles(root, queue)) return false;\n\n // go\n root.dispatch('ADD_ITEMS', {\n items: queue,\n index: getDragIndex(root.ref.list, children, position),\n interactionMethod: InteractionMethod.DROP,\n });\n });\n\n root.dispatch('DID_DROP', { position });\n\n root.dispatch('DID_END_DRAG', { position });\n };\n\n hopper.ondragstart = position => {\n root.dispatch('DID_START_DRAG', { position });\n };\n\n hopper.ondrag = debounce(position => {\n root.dispatch('DID_DRAG', { position });\n });\n\n hopper.ondragend = position => {\n root.dispatch('DID_END_DRAG', { position });\n };\n\n root.ref.hopper = hopper;\n\n root.ref.drip = root.appendChildView(root.createChildView(drip));\n } else if (!enabled && root.ref.hopper) {\n root.ref.hopper.destroy();\n root.ref.hopper = null;\n root.removeChildView(root.ref.drip);\n }\n};\n\n/**\n * Enable or disable browse functionality\n */\nconst toggleBrowse = (root, props) => {\n const isAllowed = root.query('GET_ALLOW_BROWSE');\n const isDisabled = root.query('GET_DISABLED');\n const enabled = isAllowed && !isDisabled;\n if (enabled && !root.ref.browser) {\n root.ref.browser = root.appendChildView(\n root.createChildView(browser, {\n ...props,\n onload: items => {\n applyFilterChain('ADD_ITEMS', items, {\n dispatch: root.dispatch,\n }).then(queue => {\n // these files don't fit so stop here\n if (exceedsMaxFiles(root, queue)) return false;\n\n // add items!\n root.dispatch('ADD_ITEMS', {\n items: queue,\n index: -1,\n interactionMethod: InteractionMethod.BROWSE,\n });\n });\n },\n }),\n 0\n );\n } else if (!enabled && root.ref.browser) {\n root.removeChildView(root.ref.browser);\n root.ref.browser = null;\n }\n};\n\n/**\n * Enable or disable paste functionality\n */\nconst togglePaste = root => {\n const isAllowed = root.query('GET_ALLOW_PASTE');\n const isDisabled = root.query('GET_DISABLED');\n const enabled = isAllowed && !isDisabled;\n if (enabled && !root.ref.paster) {\n root.ref.paster = createPaster();\n root.ref.paster.onload = items => {\n applyFilterChain('ADD_ITEMS', items, { dispatch: root.dispatch }).then(queue => {\n // these files don't fit so stop here\n if (exceedsMaxFiles(root, queue)) return false;\n\n // add items!\n root.dispatch('ADD_ITEMS', {\n items: queue,\n index: -1,\n interactionMethod: InteractionMethod.PASTE,\n });\n });\n };\n } else if (!enabled && root.ref.paster) {\n root.ref.paster.destroy();\n root.ref.paster = null;\n }\n};\n\n/**\n * Route actions\n */\nconst route$5 = createRoute({\n DID_SET_ALLOW_BROWSE: ({ root, props }) => {\n toggleBrowse(root, props);\n },\n DID_SET_ALLOW_DROP: ({ root }) => {\n toggleDrop(root);\n },\n DID_SET_ALLOW_PASTE: ({ root }) => {\n togglePaste(root);\n },\n DID_SET_DISABLED: ({ root, props }) => {\n toggleDrop(root);\n togglePaste(root);\n toggleBrowse(root, props);\n const isDisabled = root.query('GET_DISABLED');\n if (isDisabled) {\n root.element.dataset.disabled = 'disabled';\n } else {\n // delete root.element.dataset.disabled; <= this does not work on iOS 10\n root.element.removeAttribute('data-disabled');\n }\n },\n});\n\nconst root = createView({\n name: 'root',\n read: ({ root }) => {\n if (root.ref.measure) {\n root.ref.measureHeight = root.ref.measure.offsetHeight;\n }\n },\n create: create$e,\n write: write$9,\n destroy: ({ root }) => {\n if (root.ref.paster) {\n root.ref.paster.destroy();\n }\n if (root.ref.hopper) {\n root.ref.hopper.destroy();\n }\n root.element.removeEventListener('touchmove', prevent);\n root.element.removeEventListener('gesturestart', prevent);\n },\n mixins: {\n styles: ['height'],\n },\n});\n\n// creates the app\nconst createApp = (initialOptions = {}) => {\n // let element\n let originalElement = null;\n\n // get default options\n const defaultOptions = getOptions();\n\n // create the data store, this will contain all our app info\n const store = createStore(\n // initial state (should be serializable)\n createInitialState(defaultOptions),\n\n // queries\n [queries, createOptionQueries(defaultOptions)],\n\n // action handlers\n [actions, createOptionActions(defaultOptions)]\n );\n\n // set initial options\n store.dispatch('SET_OPTIONS', { options: initialOptions });\n\n // kick thread if visibility changes\n const visibilityHandler = () => {\n if (document.hidden) return;\n store.dispatch('KICK');\n };\n document.addEventListener('visibilitychange', visibilityHandler);\n\n // re-render on window resize start and finish\n let resizeDoneTimer = null;\n let isResizing = false;\n let isResizingHorizontally = false;\n let initialWindowWidth = null;\n let currentWindowWidth = null;\n const resizeHandler = () => {\n if (!isResizing) {\n isResizing = true;\n }\n clearTimeout(resizeDoneTimer);\n resizeDoneTimer = setTimeout(() => {\n isResizing = false;\n initialWindowWidth = null;\n currentWindowWidth = null;\n if (isResizingHorizontally) {\n isResizingHorizontally = false;\n store.dispatch('DID_STOP_RESIZE');\n }\n }, 500);\n };\n window.addEventListener('resize', resizeHandler);\n\n // render initial view\n const view = root(store, { id: getUniqueId() });\n\n //\n // PRIVATE API -------------------------------------------------------------------------------------\n //\n let isResting = false;\n let isHidden = false;\n\n const readWriteApi = {\n // necessary for update loop\n\n /**\n * Reads from dom (never call manually)\n * @private\n */\n _read: () => {\n // test if we're resizing horizontally\n // TODO: see if we can optimize this by measuring root rect\n if (isResizing) {\n currentWindowWidth = window.innerWidth;\n if (!initialWindowWidth) {\n initialWindowWidth = currentWindowWidth;\n }\n\n if (!isResizingHorizontally && currentWindowWidth !== initialWindowWidth) {\n store.dispatch('DID_START_RESIZE');\n isResizingHorizontally = true;\n }\n }\n\n if (isHidden && isResting) {\n // test if is no longer hidden\n isResting = view.element.offsetParent === null;\n }\n\n // if resting, no need to read as numbers will still all be correct\n if (isResting) return;\n\n // read view data\n view._read();\n\n // if is hidden we need to know so we exit rest mode when revealed\n isHidden = view.rect.element.hidden;\n },\n\n /**\n * Writes to dom (never call manually)\n * @private\n */\n _write: ts => {\n // get all actions from store\n const actions = store\n .processActionQueue()\n\n // filter out set actions (these will automatically trigger DID_SET)\n .filter(action => !/^SET_/.test(action.type));\n\n // if was idling and no actions stop here\n if (isResting && !actions.length) return;\n\n // some actions might trigger events\n routeActionsToEvents(actions);\n\n // update the view\n isResting = view._write(ts, actions, isResizingHorizontally);\n\n // will clean up all archived items\n removeReleasedItems(store.query('GET_ITEMS'));\n\n // now idling\n if (isResting) {\n store.processDispatchQueue();\n }\n },\n };\n\n //\n // EXPOSE EVENTS -------------------------------------------------------------------------------------\n //\n const createEvent = name => data => {\n // create default event\n const event = {\n type: name,\n };\n\n // no data to add\n if (!data) {\n return event;\n }\n\n // copy relevant props\n if (data.hasOwnProperty('error')) {\n event.error = data.error ? { ...data.error } : null;\n }\n\n if (data.status) {\n event.status = { ...data.status };\n }\n\n if (data.file) {\n event.output = data.file;\n }\n\n // only source is available, else add item if possible\n if (data.source) {\n event.file = data.source;\n } else if (data.item || data.id) {\n const item = data.item ? data.item : store.query('GET_ITEM', data.id);\n event.file = item ? createItemAPI(item) : null;\n }\n\n // map all items in a possible items array\n if (data.items) {\n event.items = data.items.map(createItemAPI);\n }\n\n // if this is a progress event add the progress amount\n if (/progress/.test(name)) {\n event.progress = data.progress;\n }\n\n // copy relevant props\n if (data.hasOwnProperty('origin') && data.hasOwnProperty('target')) {\n event.origin = data.origin;\n event.target = data.target;\n }\n\n return event;\n };\n\n const eventRoutes = {\n DID_DESTROY: createEvent('destroy'),\n\n DID_INIT: createEvent('init'),\n\n DID_THROW_MAX_FILES: createEvent('warning'),\n\n DID_INIT_ITEM: createEvent('initfile'),\n DID_START_ITEM_LOAD: createEvent('addfilestart'),\n DID_UPDATE_ITEM_LOAD_PROGRESS: createEvent('addfileprogress'),\n DID_LOAD_ITEM: createEvent('addfile'),\n\n DID_THROW_ITEM_INVALID: [createEvent('error'), createEvent('addfile')],\n\n DID_THROW_ITEM_LOAD_ERROR: [createEvent('error'), createEvent('addfile')],\n\n DID_THROW_ITEM_REMOVE_ERROR: [createEvent('error'), createEvent('removefile')],\n\n DID_PREPARE_OUTPUT: createEvent('preparefile'),\n\n DID_START_ITEM_PROCESSING: createEvent('processfilestart'),\n DID_UPDATE_ITEM_PROCESS_PROGRESS: createEvent('processfileprogress'),\n DID_ABORT_ITEM_PROCESSING: createEvent('processfileabort'),\n DID_COMPLETE_ITEM_PROCESSING: createEvent('processfile'),\n DID_COMPLETE_ITEM_PROCESSING_ALL: createEvent('processfiles'),\n DID_REVERT_ITEM_PROCESSING: createEvent('processfilerevert'),\n\n DID_THROW_ITEM_PROCESSING_ERROR: [createEvent('error'), createEvent('processfile')],\n\n DID_REMOVE_ITEM: createEvent('removefile'),\n\n DID_UPDATE_ITEMS: createEvent('updatefiles'),\n\n DID_ACTIVATE_ITEM: createEvent('activatefile'),\n\n DID_REORDER_ITEMS: createEvent('reorderfiles'),\n };\n\n const exposeEvent = event => {\n // create event object to be dispatched\n const detail = { pond: exports, ...event };\n delete detail.type;\n view.element.dispatchEvent(\n new CustomEvent(`FilePond:${event.type}`, {\n // event info\n detail,\n\n // event behaviour\n bubbles: true,\n cancelable: true,\n composed: true, // triggers listeners outside of shadow root\n })\n );\n\n // event object to params used for `on()` event handlers and callbacks `oninit()`\n const params = [];\n\n // if is possible error event, make it the first param\n if (event.hasOwnProperty('error')) {\n params.push(event.error);\n }\n\n // file is always section\n if (event.hasOwnProperty('file')) {\n params.push(event.file);\n }\n\n // append other props\n const filtered = ['type', 'error', 'file'];\n Object.keys(event)\n .filter(key => !filtered.includes(key))\n .forEach(key => params.push(event[key]));\n\n // on(type, () => { })\n exports.fire(event.type, ...params);\n\n // oninit = () => {}\n const handler = store.query(`GET_ON${event.type.toUpperCase()}`);\n if (handler) {\n handler(...params);\n }\n };\n\n const routeActionsToEvents = actions => {\n if (!actions.length) return;\n actions\n .filter(action => eventRoutes[action.type])\n .forEach(action => {\n const routes = eventRoutes[action.type];\n (Array.isArray(routes) ? routes : [routes]).forEach(route => {\n // this isn't fantastic, but because of the stacking of settimeouts plugins can handle the did_load before the did_init\n if (action.type === 'DID_INIT_ITEM') {\n exposeEvent(route(action.data));\n } else {\n setTimeout(() => {\n exposeEvent(route(action.data));\n }, 0);\n }\n });\n });\n };\n\n //\n // PUBLIC API -------------------------------------------------------------------------------------\n //\n const setOptions = options => store.dispatch('SET_OPTIONS', { options });\n\n const getFile = query => store.query('GET_ACTIVE_ITEM', query);\n\n const prepareFile = query =>\n new Promise((resolve, reject) => {\n store.dispatch('REQUEST_ITEM_PREPARE', {\n query,\n success: item => {\n resolve(item);\n },\n failure: error => {\n reject(error);\n },\n });\n });\n\n const addFile = (source, options = {}) =>\n new Promise((resolve, reject) => {\n addFiles([{ source, options }], { index: options.index })\n .then(items => resolve(items && items[0]))\n .catch(reject);\n });\n\n const isFilePondFile = obj => obj.file && obj.id;\n\n const removeFile = (query, options) => {\n // if only passed options\n if (typeof query === 'object' && !isFilePondFile(query) && !options) {\n options = query;\n query = undefined;\n }\n\n // request item removal\n store.dispatch('REMOVE_ITEM', { ...options, query });\n\n // see if item has been removed\n return store.query('GET_ACTIVE_ITEM', query) === null;\n };\n\n const addFiles = (...args) =>\n new Promise((resolve, reject) => {\n const sources = [];\n const options = {};\n\n // user passed a sources array\n if (isArray(args[0])) {\n sources.push.apply(sources, args[0]);\n Object.assign(options, args[1] || {});\n } else {\n // user passed sources as arguments, last one might be options object\n const lastArgument = args[args.length - 1];\n if (typeof lastArgument === 'object' && !(lastArgument instanceof Blob)) {\n Object.assign(options, args.pop());\n }\n\n // add rest to sources\n sources.push(...args);\n }\n\n store.dispatch('ADD_ITEMS', {\n items: sources,\n index: options.index,\n interactionMethod: InteractionMethod.API,\n success: resolve,\n failure: reject,\n });\n });\n\n const getFiles = () => store.query('GET_ACTIVE_ITEMS');\n\n const processFile = query =>\n new Promise((resolve, reject) => {\n store.dispatch('REQUEST_ITEM_PROCESSING', {\n query,\n success: item => {\n resolve(item);\n },\n failure: error => {\n reject(error);\n },\n });\n });\n\n const prepareFiles = (...args) => {\n const queries = Array.isArray(args[0]) ? args[0] : args;\n const items = queries.length ? queries : getFiles();\n return Promise.all(items.map(prepareFile));\n };\n\n const processFiles = (...args) => {\n const queries = Array.isArray(args[0]) ? args[0] : args;\n if (!queries.length) {\n const files = getFiles().filter(\n item =>\n !(item.status === ItemStatus.IDLE && item.origin === FileOrigin.LOCAL) &&\n item.status !== ItemStatus.PROCESSING &&\n item.status !== ItemStatus.PROCESSING_COMPLETE &&\n item.status !== ItemStatus.PROCESSING_REVERT_ERROR\n );\n return Promise.all(files.map(processFile));\n }\n return Promise.all(queries.map(processFile));\n };\n\n const removeFiles = (...args) => {\n const queries = Array.isArray(args[0]) ? args[0] : args;\n\n let options;\n if (typeof queries[queries.length - 1] === 'object') {\n options = queries.pop();\n } else if (Array.isArray(args[0])) {\n options = args[1];\n }\n\n const files = getFiles();\n\n if (!queries.length) return Promise.all(files.map(file => removeFile(file, options)));\n\n // when removing by index the indexes shift after each file removal so we need to convert indexes to ids\n const mappedQueries = queries\n .map(query => (isNumber(query) ? (files[query] ? files[query].id : null) : query))\n .filter(query => query);\n\n return mappedQueries.map(q => removeFile(q, options));\n };\n\n const exports = {\n // supports events\n ...on(),\n\n // inject private api methods\n ...readWriteApi,\n\n // inject all getters and setters\n ...createOptionAPI(store, defaultOptions),\n\n /**\n * Override options defined in options object\n * @param options\n */\n setOptions,\n\n /**\n * Load the given file\n * @param source - the source of the file (either a File, base64 data uri or url)\n * @param options - object, { index: 0 }\n */\n addFile,\n\n /**\n * Load the given files\n * @param sources - the sources of the files to load\n * @param options - object, { index: 0 }\n */\n addFiles,\n\n /**\n * Returns the file objects matching the given query\n * @param query { string, number, null }\n */\n getFile,\n\n /**\n * Upload file with given name\n * @param query { string, number, null }\n */\n processFile,\n\n /**\n * Request prepare output for file with given name\n * @param query { string, number, null }\n */\n prepareFile,\n\n /**\n * Removes a file by its name\n * @param query { string, number, null }\n */\n removeFile,\n\n /**\n * Moves a file to a new location in the files list\n */\n moveFile: (query, index) => store.dispatch('MOVE_ITEM', { query, index }),\n\n /**\n * Returns all files (wrapped in public api)\n */\n getFiles,\n\n /**\n * Starts uploading all files\n */\n processFiles,\n\n /**\n * Clears all files from the files list\n */\n removeFiles,\n\n /**\n * Starts preparing output of all files\n */\n prepareFiles,\n\n /**\n * Sort list of files\n */\n sort: compare => store.dispatch('SORT', { compare }),\n\n /**\n * Browse the file system for a file\n */\n browse: () => {\n // needs to be trigger directly as user action needs to be traceable (is not traceable in requestAnimationFrame)\n var input = view.element.querySelector('input[type=file]');\n if (input) {\n input.click();\n }\n },\n\n /**\n * Destroys the app\n */\n destroy: () => {\n // request destruction\n exports.fire('destroy', view.element);\n\n // stop active processes (file uploads, fetches, stuff like that)\n // loop over items and depending on states call abort for ongoing processes\n store.dispatch('ABORT_ALL');\n\n // destroy view\n view._destroy();\n\n // stop listening to resize\n window.removeEventListener('resize', resizeHandler);\n\n // stop listening to the visiblitychange event\n document.removeEventListener('visibilitychange', visibilityHandler);\n\n // dispatch destroy\n store.dispatch('DID_DESTROY');\n },\n\n /**\n * Inserts the plugin before the target element\n */\n insertBefore: element => insertBefore(view.element, element),\n\n /**\n * Inserts the plugin after the target element\n */\n insertAfter: element => insertAfter(view.element, element),\n\n /**\n * Appends the plugin to the target element\n */\n appendTo: element => element.appendChild(view.element),\n\n /**\n * Replaces an element with the app\n */\n replaceElement: element => {\n // insert the app before the element\n insertBefore(view.element, element);\n\n // remove the original element\n element.parentNode.removeChild(element);\n\n // remember original element\n originalElement = element;\n },\n\n /**\n * Restores the original element\n */\n restoreElement: () => {\n if (!originalElement) {\n return; // no element to restore\n }\n\n // restore original element\n insertAfter(originalElement, view.element);\n\n // remove our element\n view.element.parentNode.removeChild(view.element);\n\n // remove reference\n originalElement = null;\n },\n\n /**\n * Returns true if the app root is attached to given element\n * @param element\n */\n isAttachedTo: element => view.element === element || originalElement === element,\n\n /**\n * Returns the root element\n */\n element: {\n get: () => view.element,\n },\n\n /**\n * Returns the current pond status\n */\n status: {\n get: () => store.query('GET_STATUS'),\n },\n };\n\n // Done!\n store.dispatch('DID_INIT');\n\n // create actual api object\n return createObject(exports);\n};\n\nconst createAppObject = (customOptions = {}) => {\n // default options\n const defaultOptions = {};\n forin(getOptions(), (key, value) => {\n defaultOptions[key] = value[0];\n });\n\n // set app options\n const app = createApp({\n // default options\n ...defaultOptions,\n\n // custom options\n ...customOptions,\n });\n\n // return the plugin instance\n return app;\n};\n\nconst lowerCaseFirstLetter = string => string.charAt(0).toLowerCase() + string.slice(1);\n\nconst attributeNameToPropertyName = attributeName => toCamels(attributeName.replace(/^data-/, ''));\n\nconst mapObject = (object, propertyMap) => {\n // remove unwanted\n forin(propertyMap, (selector, mapping) => {\n forin(object, (property, value) => {\n // create regexp shortcut\n const selectorRegExp = new RegExp(selector);\n\n // tests if\n const matches = selectorRegExp.test(property);\n\n // no match, skip\n if (!matches) {\n return;\n }\n\n // if there's a mapping, the original property is always removed\n delete object[property];\n\n // should only remove, we done!\n if (mapping === false) {\n return;\n }\n\n // move value to new property\n if (isString(mapping)) {\n object[mapping] = value;\n return;\n }\n\n // move to group\n const group = mapping.group;\n if (isObject(mapping) && !object[group]) {\n object[group] = {};\n }\n\n object[group][lowerCaseFirstLetter(property.replace(selectorRegExp, ''))] = value;\n });\n\n // do submapping\n if (mapping.mapping) {\n mapObject(object[mapping.group], mapping.mapping);\n }\n });\n};\n\nconst getAttributesAsObject = (node, attributeMapping = {}) => {\n // turn attributes into object\n const attributes = [];\n forin(node.attributes, index => {\n attributes.push(node.attributes[index]);\n });\n\n const output = attributes\n .filter(attribute => attribute.name)\n .reduce((obj, attribute) => {\n const value = attr(node, attribute.name);\n\n obj[attributeNameToPropertyName(attribute.name)] =\n value === attribute.name ? true : value;\n return obj;\n }, {});\n\n // do mapping of object properties\n mapObject(output, attributeMapping);\n\n return output;\n};\n\nconst createAppAtElement = (element, options = {}) => {\n // how attributes of the input element are mapped to the options for the plugin\n const attributeMapping = {\n // translate to other name\n '^class$': 'className',\n '^multiple$': 'allowMultiple',\n '^capture$': 'captureMethod',\n '^webkitdirectory$': 'allowDirectoriesOnly',\n\n // group under single property\n '^server': {\n group: 'server',\n mapping: {\n '^process': {\n group: 'process',\n },\n '^revert': {\n group: 'revert',\n },\n '^fetch': {\n group: 'fetch',\n },\n '^restore': {\n group: 'restore',\n },\n '^load': {\n group: 'load',\n },\n },\n },\n\n // don't include in object\n '^type$': false,\n '^files$': false,\n };\n\n // add additional option translators\n applyFilters('SET_ATTRIBUTE_TO_OPTION_MAP', attributeMapping);\n\n // create final options object by setting options object and then overriding options supplied on element\n const mergedOptions = {\n ...options,\n };\n\n const attributeOptions = getAttributesAsObject(\n element.nodeName === 'FIELDSET' ? element.querySelector('input[type=file]') : element,\n attributeMapping\n );\n\n // merge with options object\n Object.keys(attributeOptions).forEach(key => {\n if (isObject(attributeOptions[key])) {\n if (!isObject(mergedOptions[key])) {\n mergedOptions[key] = {};\n }\n Object.assign(mergedOptions[key], attributeOptions[key]);\n } else {\n mergedOptions[key] = attributeOptions[key];\n }\n });\n\n // if parent is a fieldset, get files from parent by selecting all input fields that are not file upload fields\n // these will then be automatically set to the initial files\n mergedOptions.files = (options.files || []).concat(\n Array.from(element.querySelectorAll('input:not([type=file])')).map(input => ({\n source: input.value,\n options: {\n type: input.dataset.type,\n },\n }))\n );\n\n // build plugin\n const app = createAppObject(mergedOptions);\n\n // add already selected files\n if (element.files) {\n Array.from(element.files).forEach(file => {\n app.addFile(file);\n });\n }\n\n // replace the target element\n app.replaceElement(element);\n\n // expose\n return app;\n};\n\n// if an element is passed, we create the instance at that element, if not, we just create an up object\nconst createApp$1 = (...args) =>\n isNode(args[0]) ? createAppAtElement(...args) : createAppObject(...args);\n\nconst PRIVATE_METHODS = ['fire', '_read', '_write'];\n\nconst createAppAPI = app => {\n const api = {};\n\n copyObjectPropertiesToObject(app, api, PRIVATE_METHODS);\n\n return api;\n};\n\n/**\n * Replaces placeholders in given string with replacements\n * @param string - \"Foo {bar}\"\"\n * @param replacements - { \"bar\": 10 }\n */\nconst replaceInString = (string, replacements) =>\n string.replace(/(?:{([a-zA-Z]+)})/g, (match, group) => replacements[group]);\n\nconst createWorker = fn => {\n const workerBlob = new Blob(['(', fn.toString(), ')()'], {\n type: 'application/javascript',\n });\n const workerURL = URL.createObjectURL(workerBlob);\n const worker = new Worker(workerURL);\n\n return {\n transfer: (message, cb) => {},\n post: (message, cb, transferList) => {\n const id = getUniqueId();\n\n worker.onmessage = e => {\n if (e.data.id === id) {\n cb(e.data.message);\n }\n };\n\n worker.postMessage(\n {\n id,\n message,\n },\n transferList\n );\n },\n terminate: () => {\n worker.terminate();\n URL.revokeObjectURL(workerURL);\n },\n };\n};\n\nconst loadImage = url =>\n new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n resolve(img);\n };\n img.onerror = e => {\n reject(e);\n };\n img.src = url;\n });\n\nconst renameFile = (file, name) => {\n const renamedFile = file.slice(0, file.size, file.type);\n renamedFile.lastModifiedDate = file.lastModifiedDate;\n renamedFile.name = name;\n return renamedFile;\n};\n\nconst copyFile = file => renameFile(file, file.name);\n\n// already registered plugins (can't register twice)\nconst registeredPlugins = [];\n\n// pass utils to plugin\nconst createAppPlugin = plugin => {\n // already registered\n if (registeredPlugins.includes(plugin)) {\n return;\n }\n\n // remember this plugin\n registeredPlugins.push(plugin);\n\n // setup!\n const pluginOutline = plugin({\n addFilter,\n utils: {\n Type,\n forin,\n isString,\n isFile,\n toNaturalFileSize,\n replaceInString,\n getExtensionFromFilename,\n getFilenameWithoutExtension,\n guesstimateMimeType,\n getFileFromBlob,\n getFilenameFromURL,\n createRoute,\n createWorker,\n createView,\n createItemAPI,\n loadImage,\n copyFile,\n renameFile,\n createBlob,\n applyFilterChain,\n text,\n getNumericAspectRatioFromString,\n },\n views: {\n fileActionButton,\n },\n });\n\n // add plugin options to default options\n extendDefaultOptions(pluginOutline.options);\n};\n\n// feature detection used by supported() method\nconst isOperaMini = () => Object.prototype.toString.call(window.operamini) === '[object OperaMini]';\nconst hasPromises = () => 'Promise' in window;\nconst hasBlobSlice = () => 'slice' in Blob.prototype;\nconst hasCreateObjectURL = () => 'URL' in window && 'createObjectURL' in window.URL;\nconst hasVisibility = () => 'visibilityState' in document;\nconst hasTiming = () => 'performance' in window; // iOS 8.x\nconst hasCSSSupports = () => 'supports' in (window.CSS || {}); // use to detect Safari 9+\nconst isIE11 = () => /MSIE|Trident/.test(window.navigator.userAgent);\n\nconst supported = (() => {\n // Runs immediately and then remembers result for subsequent calls\n const isSupported =\n // Has to be a browser\n isBrowser() &&\n // Can't run on Opera Mini due to lack of everything\n !isOperaMini() &&\n // Require these APIs to feature detect a modern browser\n hasVisibility() &&\n hasPromises() &&\n hasBlobSlice() &&\n hasCreateObjectURL() &&\n hasTiming() &&\n // doesn't need CSSSupports but is a good way to detect Safari 9+ (we do want to support IE11 though)\n (hasCSSSupports() || isIE11());\n\n return () => isSupported;\n})();\n\n/**\n * Plugin internal state (over all instances)\n */\nconst state = {\n // active app instances, used to redraw the apps and to find the later\n apps: [],\n};\n\n// plugin name\nconst name = 'filepond';\n\n/**\n * Public Plugin methods\n */\nconst fn = () => {};\nlet Status$1 = {};\nlet FileStatus = {};\nlet FileOrigin$1 = {};\nlet OptionTypes = {};\nlet create$f = fn;\nlet destroy = fn;\nlet parse = fn;\nlet find = fn;\nlet registerPlugin = fn;\nlet getOptions$1 = fn;\nlet setOptions$1 = fn;\n\n// if not supported, no API\nif (supported()) {\n // start painter and fire load event\n createPainter(\n () => {\n state.apps.forEach(app => app._read());\n },\n ts => {\n state.apps.forEach(app => app._write(ts));\n }\n );\n\n // fire loaded event so we know when FilePond is available\n const dispatch = () => {\n // let others know we have area ready\n document.dispatchEvent(\n new CustomEvent('FilePond:loaded', {\n detail: {\n supported,\n create: create$f,\n destroy,\n parse,\n find,\n registerPlugin,\n setOptions: setOptions$1,\n },\n })\n );\n\n // clean up event\n document.removeEventListener('DOMContentLoaded', dispatch);\n };\n\n if (document.readyState !== 'loading') {\n // move to back of execution queue, FilePond should have been exported by then\n setTimeout(() => dispatch(), 0);\n } else {\n document.addEventListener('DOMContentLoaded', dispatch);\n }\n\n // updates the OptionTypes object based on the current options\n const updateOptionTypes = () =>\n forin(getOptions(), (key, value) => {\n OptionTypes[key] = value[1];\n });\n\n Status$1 = { ...Status };\n FileOrigin$1 = { ...FileOrigin };\n FileStatus = { ...ItemStatus };\n\n OptionTypes = {};\n updateOptionTypes();\n\n // create method, creates apps and adds them to the app array\n create$f = (...args) => {\n const app = createApp$1(...args);\n app.on('destroy', destroy);\n state.apps.push(app);\n return createAppAPI(app);\n };\n\n // destroys apps and removes them from the app array\n destroy = hook => {\n // returns true if the app was destroyed successfully\n const indexToRemove = state.apps.findIndex(app => app.isAttachedTo(hook));\n if (indexToRemove >= 0) {\n // remove from apps\n const app = state.apps.splice(indexToRemove, 1)[0];\n\n // restore original dom element\n app.restoreElement();\n\n return true;\n }\n\n return false;\n };\n\n // parses the given context for plugins (does not include the context element itself)\n parse = context => {\n // get all possible hooks\n const matchedHooks = Array.from(context.querySelectorAll(`.${name}`));\n\n // filter out already active hooks\n const newHooks = matchedHooks.filter(\n newHook => !state.apps.find(app => app.isAttachedTo(newHook))\n );\n\n // create new instance for each hook\n return newHooks.map(hook => create$f(hook));\n };\n\n // returns an app based on the given element hook\n find = hook => {\n const app = state.apps.find(app => app.isAttachedTo(hook));\n if (!app) {\n return null;\n }\n return createAppAPI(app);\n };\n\n // adds a plugin extension\n registerPlugin = (...plugins) => {\n // register plugins\n plugins.forEach(createAppPlugin);\n\n // update OptionTypes, each plugin might have extended the default options\n updateOptionTypes();\n };\n\n getOptions$1 = () => {\n const opts = {};\n forin(getOptions(), (key, value) => {\n opts[key] = value[0];\n });\n return opts;\n };\n\n setOptions$1 = opts => {\n if (isObject(opts)) {\n // update existing plugins\n state.apps.forEach(app => {\n app.setOptions(opts);\n });\n\n // override defaults\n setOptions(opts);\n }\n\n // return new options\n return getOptions$1();\n };\n}\n\nexport {\n FileOrigin$1 as FileOrigin,\n FileStatus,\n OptionTypes,\n Status$1 as Status,\n create$f as create,\n destroy,\n find,\n getOptions$1 as getOptions,\n parse,\n registerPlugin,\n setOptions$1 as setOptions,\n supported,\n};\n","/*!\n * FilePondPluginFileValidateSize 2.2.8\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */\n\n/* eslint-disable */\n\nconst plugin = ({ addFilter, utils }) => {\n // get quick reference to Type utils\n const { Type, replaceInString, toNaturalFileSize } = utils;\n\n // filtering if an item is allowed in hopper\n addFilter('ALLOW_HOPPER_ITEM', (file, { query }) => {\n if (!query('GET_ALLOW_FILE_SIZE_VALIDATION')) {\n return true;\n }\n\n const sizeMax = query('GET_MAX_FILE_SIZE');\n if (sizeMax !== null && file.size > sizeMax) {\n return false;\n }\n\n const sizeMin = query('GET_MIN_FILE_SIZE');\n if (sizeMin !== null && file.size < sizeMin) {\n return false;\n }\n\n return true;\n });\n\n // called for each file that is loaded\n // right before it is set to the item state\n // should return a promise\n addFilter(\n 'LOAD_FILE',\n (file, { query }) =>\n new Promise((resolve, reject) => {\n // if not allowed, all fine, exit\n if (!query('GET_ALLOW_FILE_SIZE_VALIDATION')) {\n return resolve(file);\n }\n\n // check if file should be filtered\n const fileFilter = query('GET_FILE_VALIDATE_SIZE_FILTER');\n if (fileFilter && !fileFilter(file)) {\n return resolve(file);\n }\n\n // reject or resolve based on file size\n const sizeMax = query('GET_MAX_FILE_SIZE');\n if (sizeMax !== null && file.size > sizeMax) {\n reject({\n status: {\n main: query('GET_LABEL_MAX_FILE_SIZE_EXCEEDED'),\n sub: replaceInString(query('GET_LABEL_MAX_FILE_SIZE'), {\n filesize: toNaturalFileSize(\n sizeMax,\n '.',\n query('GET_FILE_SIZE_BASE'),\n query('GET_FILE_SIZE_LABELS', query)\n ),\n }),\n },\n });\n return;\n }\n\n // reject or resolve based on file size\n const sizeMin = query('GET_MIN_FILE_SIZE');\n if (sizeMin !== null && file.size < sizeMin) {\n reject({\n status: {\n main: query('GET_LABEL_MIN_FILE_SIZE_EXCEEDED'),\n sub: replaceInString(query('GET_LABEL_MIN_FILE_SIZE'), {\n filesize: toNaturalFileSize(\n sizeMin,\n '.',\n query('GET_FILE_SIZE_BASE'),\n query('GET_FILE_SIZE_LABELS', query)\n ),\n }),\n },\n });\n return;\n }\n\n // returns the current option value\n const totalSizeMax = query('GET_MAX_TOTAL_FILE_SIZE');\n if (totalSizeMax !== null) {\n // get the current total file size\n const currentTotalSize = query('GET_ACTIVE_ITEMS').reduce((total, item) => {\n return total + item.fileSize;\n }, 0);\n\n // get the size of the new file\n if (currentTotalSize > totalSizeMax) {\n reject({\n status: {\n main: query('GET_LABEL_MAX_TOTAL_FILE_SIZE_EXCEEDED'),\n sub: replaceInString(query('GET_LABEL_MAX_TOTAL_FILE_SIZE'), {\n filesize: toNaturalFileSize(\n totalSizeMax,\n '.',\n query('GET_FILE_SIZE_BASE'),\n query('GET_FILE_SIZE_LABELS', query)\n ),\n }),\n },\n });\n return;\n }\n }\n\n // file is fine, let's pass it back\n resolve(file);\n })\n );\n\n return {\n options: {\n // Enable or disable file type validation\n allowFileSizeValidation: [true, Type.BOOLEAN],\n\n // Max individual file size in bytes\n maxFileSize: [null, Type.INT],\n\n // Min individual file size in bytes\n minFileSize: [null, Type.INT],\n\n // Max total file size in bytes\n maxTotalFileSize: [null, Type.INT],\n\n // Filter the files that need to be validated for size\n fileValidateSizeFilter: [null, Type.FUNCTION],\n\n // error labels\n labelMinFileSizeExceeded: ['File is too small', Type.STRING],\n labelMinFileSize: ['Minimum file size is {filesize}', Type.STRING],\n\n labelMaxFileSizeExceeded: ['File is too large', Type.STRING],\n labelMaxFileSize: ['Maximum file size is {filesize}', Type.STRING],\n\n labelMaxTotalFileSizeExceeded: ['Maximum total size exceeded', Type.STRING],\n labelMaxTotalFileSize: ['Maximum total file size is {filesize}', Type.STRING],\n },\n };\n};\n\n// fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags\nconst isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';\nif (isBrowser) {\n document.dispatchEvent(new CustomEvent('FilePond:pluginloaded', { detail: plugin }));\n}\n\nexport default plugin;\n","/*!\n * FilePondPluginImagePreview 4.6.12\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */\n\n/* eslint-disable */\n\n// test if file is of type image and can be viewed in canvas\nconst isPreviewableImage = file => /^image/.test(file.type);\n\nconst vectorMultiply = (v, amount) => createVector(v.x * amount, v.y * amount);\n\nconst vectorAdd = (a, b) => createVector(a.x + b.x, a.y + b.y);\n\nconst vectorNormalize = v => {\n const l = Math.sqrt(v.x * v.x + v.y * v.y);\n if (l === 0) {\n return {\n x: 0,\n y: 0\n };\n }\n return createVector(v.x / l, v.y / l);\n};\n\nconst vectorRotate = (v, radians, origin) => {\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n const t = createVector(v.x - origin.x, v.y - origin.y);\n return createVector(\n origin.x + cos * t.x - sin * t.y,\n origin.y + sin * t.x + cos * t.y\n );\n};\n\nconst createVector = (x = 0, y = 0) => ({ x, y });\n\nconst getMarkupValue = (value, size, scalar = 1, axis) => {\n if (typeof value === 'string') {\n return parseFloat(value) * scalar;\n }\n if (typeof value === 'number') {\n return value * (axis ? size[axis] : Math.min(size.width, size.height));\n }\n return;\n};\n\nconst getMarkupStyles = (markup, size, scale) => {\n const lineStyle = markup.borderStyle || markup.lineStyle || 'solid';\n const fill = markup.backgroundColor || markup.fontColor || 'transparent';\n const stroke = markup.borderColor || markup.lineColor || 'transparent';\n const strokeWidth = getMarkupValue(\n markup.borderWidth || markup.lineWidth,\n size,\n scale\n );\n const lineCap = markup.lineCap || 'round';\n const lineJoin = markup.lineJoin || 'round';\n const dashes =\n typeof lineStyle === 'string'\n ? ''\n : lineStyle.map(v => getMarkupValue(v, size, scale)).join(',');\n const opacity = markup.opacity || 1;\n return {\n 'stroke-linecap': lineCap,\n 'stroke-linejoin': lineJoin,\n 'stroke-width': strokeWidth || 0,\n 'stroke-dasharray': dashes,\n stroke,\n fill,\n opacity\n };\n};\n\nconst isDefined = value => value != null;\n\nconst getMarkupRect = (rect, size, scalar = 1) => {\n let left =\n getMarkupValue(rect.x, size, scalar, 'width') ||\n getMarkupValue(rect.left, size, scalar, 'width');\n let top =\n getMarkupValue(rect.y, size, scalar, 'height') ||\n getMarkupValue(rect.top, size, scalar, 'height');\n let width = getMarkupValue(rect.width, size, scalar, 'width');\n let height = getMarkupValue(rect.height, size, scalar, 'height');\n let right = getMarkupValue(rect.right, size, scalar, 'width');\n let bottom = getMarkupValue(rect.bottom, size, scalar, 'height');\n\n if (!isDefined(top)) {\n if (isDefined(height) && isDefined(bottom)) {\n top = size.height - height - bottom;\n } else {\n top = bottom;\n }\n }\n\n if (!isDefined(left)) {\n if (isDefined(width) && isDefined(right)) {\n left = size.width - width - right;\n } else {\n left = right;\n }\n }\n\n if (!isDefined(width)) {\n if (isDefined(left) && isDefined(right)) {\n width = size.width - left - right;\n } else {\n width = 0;\n }\n }\n\n if (!isDefined(height)) {\n if (isDefined(top) && isDefined(bottom)) {\n height = size.height - top - bottom;\n } else {\n height = 0;\n }\n }\n\n return {\n x: left || 0,\n y: top || 0,\n width: width || 0,\n height: height || 0\n };\n};\n\nconst pointsToPathShape = points =>\n points\n .map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`)\n .join(' ');\n\nconst setAttributes = (element, attr) =>\n Object.keys(attr).forEach(key => element.setAttribute(key, attr[key]));\n\nconst ns = 'http://www.w3.org/2000/svg';\nconst svg = (tag, attr) => {\n const element = document.createElementNS(ns, tag);\n if (attr) {\n setAttributes(element, attr);\n }\n return element;\n};\n\nconst updateRect = element =>\n setAttributes(element, {\n ...element.rect,\n ...element.styles\n });\n\nconst updateEllipse = element => {\n const cx = element.rect.x + element.rect.width * 0.5;\n const cy = element.rect.y + element.rect.height * 0.5;\n const rx = element.rect.width * 0.5;\n const ry = element.rect.height * 0.5;\n return setAttributes(element, {\n cx,\n cy,\n rx,\n ry,\n ...element.styles\n });\n};\n\nconst IMAGE_FIT_STYLE = {\n contain: 'xMidYMid meet',\n cover: 'xMidYMid slice'\n};\n\nconst updateImage = (element, markup) => {\n setAttributes(element, {\n ...element.rect,\n ...element.styles,\n preserveAspectRatio: IMAGE_FIT_STYLE[markup.fit] || 'none'\n });\n};\n\nconst TEXT_ANCHOR = {\n left: 'start',\n center: 'middle',\n right: 'end'\n};\n\nconst updateText = (element, markup, size, scale) => {\n const fontSize = getMarkupValue(markup.fontSize, size, scale);\n const fontFamily = markup.fontFamily || 'sans-serif';\n const fontWeight = markup.fontWeight || 'normal';\n const textAlign = TEXT_ANCHOR[markup.textAlign] || 'start';\n\n setAttributes(element, {\n ...element.rect,\n ...element.styles,\n 'stroke-width': 0,\n 'font-weight': fontWeight,\n 'font-size': fontSize,\n 'font-family': fontFamily,\n 'text-anchor': textAlign\n });\n\n // update text\n if (element.text !== markup.text) {\n element.text = markup.text;\n element.textContent = markup.text.length ? markup.text : ' ';\n }\n};\n\nconst updateLine = (element, markup, size, scale) => {\n setAttributes(element, {\n ...element.rect,\n ...element.styles,\n fill: 'none'\n });\n\n const line = element.childNodes[0];\n const begin = element.childNodes[1];\n const end = element.childNodes[2];\n\n const origin = element.rect;\n\n const target = {\n x: element.rect.x + element.rect.width,\n y: element.rect.y + element.rect.height\n };\n\n setAttributes(line, {\n x1: origin.x,\n y1: origin.y,\n x2: target.x,\n y2: target.y\n });\n\n if (!markup.lineDecoration) return;\n\n begin.style.display = 'none';\n end.style.display = 'none';\n\n const v = vectorNormalize({\n x: target.x - origin.x,\n y: target.y - origin.y\n });\n\n const l = getMarkupValue(0.05, size, scale);\n\n if (markup.lineDecoration.indexOf('arrow-begin') !== -1) {\n const arrowBeginRotationPoint = vectorMultiply(v, l);\n const arrowBeginCenter = vectorAdd(origin, arrowBeginRotationPoint);\n const arrowBeginA = vectorRotate(origin, 2, arrowBeginCenter);\n const arrowBeginB = vectorRotate(origin, -2, arrowBeginCenter);\n\n setAttributes(begin, {\n style: 'display:block;',\n d: `M${arrowBeginA.x},${arrowBeginA.y} L${origin.x},${origin.y} L${\n arrowBeginB.x\n },${arrowBeginB.y}`\n });\n }\n\n if (markup.lineDecoration.indexOf('arrow-end') !== -1) {\n const arrowEndRotationPoint = vectorMultiply(v, -l);\n const arrowEndCenter = vectorAdd(target, arrowEndRotationPoint);\n const arrowEndA = vectorRotate(target, 2, arrowEndCenter);\n const arrowEndB = vectorRotate(target, -2, arrowEndCenter);\n\n setAttributes(end, {\n style: 'display:block;',\n d: `M${arrowEndA.x},${arrowEndA.y} L${target.x},${target.y} L${\n arrowEndB.x\n },${arrowEndB.y}`\n });\n }\n};\n\nconst updatePath = (element, markup, size, scale) => {\n setAttributes(element, {\n ...element.styles,\n fill: 'none',\n d: pointsToPathShape(\n markup.points.map(point => ({\n x: getMarkupValue(point.x, size, scale, 'width'),\n y: getMarkupValue(point.y, size, scale, 'height')\n }))\n )\n });\n};\n\nconst createShape = node => markup => svg(node, { id: markup.id });\n\nconst createImage = markup => {\n const shape = svg('image', {\n id: markup.id,\n 'stroke-linecap': 'round',\n 'stroke-linejoin': 'round',\n opacity: '0'\n });\n shape.onload = () => {\n shape.setAttribute('opacity', markup.opacity || 1);\n };\n shape.setAttributeNS(\n 'http://www.w3.org/1999/xlink',\n 'xlink:href',\n markup.src\n );\n return shape;\n};\n\nconst createLine = markup => {\n const shape = svg('g', {\n id: markup.id,\n 'stroke-linecap': 'round',\n 'stroke-linejoin': 'round'\n });\n\n const line = svg('line');\n shape.appendChild(line);\n\n const begin = svg('path');\n shape.appendChild(begin);\n\n const end = svg('path');\n shape.appendChild(end);\n\n return shape;\n};\n\nconst CREATE_TYPE_ROUTES = {\n image: createImage,\n rect: createShape('rect'),\n ellipse: createShape('ellipse'),\n text: createShape('text'),\n path: createShape('path'),\n line: createLine\n};\n\nconst UPDATE_TYPE_ROUTES = {\n rect: updateRect,\n ellipse: updateEllipse,\n image: updateImage,\n text: updateText,\n path: updatePath,\n line: updateLine\n};\n\nconst createMarkupByType = (type, markup) => CREATE_TYPE_ROUTES[type](markup);\n\nconst updateMarkupByType = (element, type, markup, size, scale) => {\n if (type !== 'path') {\n element.rect = getMarkupRect(markup, size, scale);\n }\n element.styles = getMarkupStyles(markup, size, scale);\n UPDATE_TYPE_ROUTES[type](element, markup, size, scale);\n};\n\nconst MARKUP_RECT = [\n 'x',\n 'y',\n 'left',\n 'top',\n 'right',\n 'bottom',\n 'width',\n 'height'\n];\n\nconst toOptionalFraction = value =>\n typeof value === 'string' && /%/.test(value)\n ? parseFloat(value) / 100\n : value;\n\n// adds default markup properties, clones markup\nconst prepareMarkup = markup => {\n const [type, props] = markup;\n\n const rect = props.points\n ? {}\n : MARKUP_RECT.reduce((prev, curr) => {\n prev[curr] = toOptionalFraction(props[curr]);\n return prev;\n }, {});\n\n return [\n type,\n {\n zIndex: 0,\n ...props,\n ...rect\n }\n ];\n};\n\nconst sortMarkupByZIndex = (a, b) => {\n if (a[1].zIndex > b[1].zIndex) {\n return 1;\n }\n if (a[1].zIndex < b[1].zIndex) {\n return -1;\n }\n return 0;\n};\n\nconst createMarkupView = _ =>\n _.utils.createView({\n name: 'image-preview-markup',\n tag: 'svg',\n ignoreRect: true,\n mixins: {\n apis: ['width', 'height', 'crop', 'markup', 'resize', 'dirty']\n },\n write: ({ root, props }) => {\n if (!props.dirty) return;\n\n const { crop, resize, markup } = props;\n\n const viewWidth = props.width;\n const viewHeight = props.height;\n\n let cropWidth = crop.width;\n let cropHeight = crop.height;\n\n if (resize) {\n const { size } = resize;\n\n let outputWidth = size && size.width;\n let outputHeight = size && size.height;\n const outputFit = resize.mode;\n const outputUpscale = resize.upscale;\n\n if (outputWidth && !outputHeight) outputHeight = outputWidth;\n if (outputHeight && !outputWidth) outputWidth = outputHeight;\n\n const shouldUpscale =\n cropWidth < outputWidth && cropHeight < outputHeight;\n\n if (!shouldUpscale || (shouldUpscale && outputUpscale)) {\n let scalarWidth = outputWidth / cropWidth;\n let scalarHeight = outputHeight / cropHeight;\n\n if (outputFit === 'force') {\n cropWidth = outputWidth;\n cropHeight = outputHeight;\n } else {\n let scalar;\n if (outputFit === 'cover') {\n scalar = Math.max(scalarWidth, scalarHeight);\n } else if (outputFit === 'contain') {\n scalar = Math.min(scalarWidth, scalarHeight);\n }\n cropWidth = cropWidth * scalar;\n cropHeight = cropHeight * scalar;\n }\n }\n }\n\n const size = {\n width: viewWidth,\n height: viewHeight\n };\n\n root.element.setAttribute('width', size.width);\n root.element.setAttribute('height', size.height);\n\n const scale = Math.min(viewWidth / cropWidth, viewHeight / cropHeight);\n\n // clear\n root.element.innerHTML = '';\n\n // get filter\n const markupFilter = root.query('GET_IMAGE_PREVIEW_MARKUP_FILTER');\n\n // draw new\n markup\n .filter(markupFilter)\n .map(prepareMarkup)\n .sort(sortMarkupByZIndex)\n .forEach(markup => {\n const [type, settings] = markup;\n\n // create\n const element = createMarkupByType(type, settings);\n\n // update\n updateMarkupByType(element, type, settings, size, scale);\n\n // add\n root.element.appendChild(element);\n });\n }\n });\n\nconst createVector$1 = (x, y) => ({ x, y });\n\nconst vectorDot = (a, b) => a.x * b.x + a.y * b.y;\n\nconst vectorSubtract = (a, b) => createVector$1(a.x - b.x, a.y - b.y);\n\nconst vectorDistanceSquared = (a, b) =>\n vectorDot(vectorSubtract(a, b), vectorSubtract(a, b));\n\nconst vectorDistance = (a, b) => Math.sqrt(vectorDistanceSquared(a, b));\n\nconst getOffsetPointOnEdge = (length, rotation) => {\n const a = length;\n\n const A = 1.5707963267948966;\n const B = rotation;\n const C = 1.5707963267948966 - rotation;\n\n const sinA = Math.sin(A);\n const sinB = Math.sin(B);\n const sinC = Math.sin(C);\n const cosC = Math.cos(C);\n const ratio = a / sinA;\n const b = ratio * sinB;\n const c = ratio * sinC;\n\n return createVector$1(cosC * b, cosC * c);\n};\n\nconst getRotatedRectSize = (rect, rotation) => {\n const w = rect.width;\n const h = rect.height;\n\n const hor = getOffsetPointOnEdge(w, rotation);\n const ver = getOffsetPointOnEdge(h, rotation);\n\n const tl = createVector$1(rect.x + Math.abs(hor.x), rect.y - Math.abs(hor.y));\n\n const tr = createVector$1(\n rect.x + rect.width + Math.abs(ver.y),\n rect.y + Math.abs(ver.x)\n );\n\n const bl = createVector$1(\n rect.x - Math.abs(ver.y),\n rect.y + rect.height - Math.abs(ver.x)\n );\n\n return {\n width: vectorDistance(tl, tr),\n height: vectorDistance(tl, bl)\n };\n};\n\nconst calculateCanvasSize = (image, canvasAspectRatio, zoom = 1) => {\n const imageAspectRatio = image.height / image.width;\n\n // determine actual pixels on x and y axis\n let canvasWidth = 1;\n let canvasHeight = canvasAspectRatio;\n let imgWidth = 1;\n let imgHeight = imageAspectRatio;\n if (imgHeight > canvasHeight) {\n imgHeight = canvasHeight;\n imgWidth = imgHeight / imageAspectRatio;\n }\n\n const scalar = Math.max(canvasWidth / imgWidth, canvasHeight / imgHeight);\n const width = image.width / (zoom * scalar * imgWidth);\n const height = width * canvasAspectRatio;\n\n return {\n width: width,\n height: height\n };\n};\n\nconst getImageRectZoomFactor = (imageRect, cropRect, rotation, center) => {\n // calculate available space round image center position\n const cx = center.x > 0.5 ? 1 - center.x : center.x;\n const cy = center.y > 0.5 ? 1 - center.y : center.y;\n const imageWidth = cx * 2 * imageRect.width;\n const imageHeight = cy * 2 * imageRect.height;\n\n // calculate rotated crop rectangle size\n const rotatedCropSize = getRotatedRectSize(cropRect, rotation);\n\n // calculate scalar required to fit image\n return Math.max(\n rotatedCropSize.width / imageWidth,\n rotatedCropSize.height / imageHeight\n );\n};\n\nconst getCenteredCropRect = (container, aspectRatio) => {\n let width = container.width;\n let height = width * aspectRatio;\n if (height > container.height) {\n height = container.height;\n width = height / aspectRatio;\n }\n const x = (container.width - width) * 0.5;\n const y = (container.height - height) * 0.5;\n\n return {\n x,\n y,\n width,\n height\n };\n};\n\nconst getCurrentCropSize = (imageSize, crop = {}) => {\n let { zoom, rotation, center, aspectRatio } = crop;\n\n if (!aspectRatio) aspectRatio = imageSize.height / imageSize.width;\n\n const canvasSize = calculateCanvasSize(imageSize, aspectRatio, zoom);\n\n const canvasCenter = {\n x: canvasSize.width * 0.5,\n y: canvasSize.height * 0.5\n };\n\n const stage = {\n x: 0,\n y: 0,\n width: canvasSize.width,\n height: canvasSize.height,\n center: canvasCenter\n };\n\n const shouldLimit = typeof crop.scaleToFit === 'undefined' || crop.scaleToFit;\n\n const stageZoomFactor = getImageRectZoomFactor(\n imageSize,\n getCenteredCropRect(stage, aspectRatio),\n rotation,\n shouldLimit ? center : { x: 0.5, y: 0.5 }\n );\n\n const scale = zoom * stageZoomFactor;\n\n // start drawing\n return {\n widthFloat: canvasSize.width / scale,\n heightFloat: canvasSize.height / scale,\n width: Math.round(canvasSize.width / scale),\n height: Math.round(canvasSize.height / scale)\n };\n};\n\nconst IMAGE_SCALE_SPRING_PROPS = {\n type: 'spring',\n stiffness: 0.5,\n damping: 0.45,\n mass: 10\n};\n\n// does horizontal and vertical flipping\nconst createBitmapView = _ =>\n _.utils.createView({\n name: 'image-bitmap',\n ignoreRect: true,\n mixins: { styles: ['scaleX', 'scaleY'] },\n create: ({ root, props }) => {\n root.appendChild(props.image);\n }\n });\n\n// shifts and rotates image\nconst createImageCanvasWrapper = _ =>\n _.utils.createView({\n name: 'image-canvas-wrapper',\n tag: 'div',\n ignoreRect: true,\n mixins: {\n apis: ['crop', 'width', 'height'],\n styles: [\n 'originX',\n 'originY',\n 'translateX',\n 'translateY',\n 'scaleX',\n 'scaleY',\n 'rotateZ'\n ],\n animations: {\n originX: IMAGE_SCALE_SPRING_PROPS,\n originY: IMAGE_SCALE_SPRING_PROPS,\n scaleX: IMAGE_SCALE_SPRING_PROPS,\n scaleY: IMAGE_SCALE_SPRING_PROPS,\n translateX: IMAGE_SCALE_SPRING_PROPS,\n translateY: IMAGE_SCALE_SPRING_PROPS,\n rotateZ: IMAGE_SCALE_SPRING_PROPS\n }\n },\n create: ({ root, props }) => {\n props.width = props.image.width;\n props.height = props.image.height;\n root.ref.bitmap = root.appendChildView(\n root.createChildView(createBitmapView(_), { image: props.image })\n );\n },\n write: ({ root, props }) => {\n const { flip } = props.crop;\n const { bitmap } = root.ref;\n bitmap.scaleX = flip.horizontal ? -1 : 1;\n bitmap.scaleY = flip.vertical ? -1 : 1;\n }\n });\n\n// clips canvas to correct aspect ratio\nconst createClipView = _ =>\n _.utils.createView({\n name: 'image-clip',\n tag: 'div',\n ignoreRect: true,\n mixins: {\n apis: [\n 'crop',\n 'markup',\n 'resize',\n 'width',\n 'height',\n 'dirty',\n 'background'\n ],\n styles: ['width', 'height', 'opacity'],\n animations: {\n opacity: { type: 'tween', duration: 250 }\n }\n },\n didWriteView: function({ root, props }) {\n if (!props.background) return;\n root.element.style.backgroundColor = props.background;\n },\n create: ({ root, props }) => {\n root.ref.image = root.appendChildView(\n root.createChildView(\n createImageCanvasWrapper(_),\n Object.assign({}, props)\n )\n );\n\n root.ref.createMarkup = () => {\n if (root.ref.markup) return;\n root.ref.markup = root.appendChildView(\n root.createChildView(createMarkupView(_), Object.assign({}, props))\n );\n };\n\n root.ref.destroyMarkup = () => {\n if (!root.ref.markup) return;\n root.removeChildView(root.ref.markup);\n root.ref.markup = null;\n };\n\n // set up transparency grid\n const transparencyIndicator = root.query(\n 'GET_IMAGE_PREVIEW_TRANSPARENCY_INDICATOR'\n );\n if (transparencyIndicator === null) return;\n\n // grid pattern\n if (transparencyIndicator === 'grid') {\n root.element.dataset.transparencyIndicator = transparencyIndicator;\n }\n // basic color\n else {\n root.element.dataset.transparencyIndicator = 'color';\n }\n },\n write: ({ root, props, shouldOptimize }) => {\n const { crop, markup, resize, dirty, width, height } = props;\n\n root.ref.image.crop = crop;\n\n const stage = {\n x: 0,\n y: 0,\n width,\n height,\n center: {\n x: width * 0.5,\n y: height * 0.5\n }\n };\n\n const image = {\n width: root.ref.image.width,\n height: root.ref.image.height\n };\n\n const origin = {\n x: crop.center.x * image.width,\n y: crop.center.y * image.height\n };\n\n const translation = {\n x: stage.center.x - image.width * crop.center.x,\n y: stage.center.y - image.height * crop.center.y\n };\n\n const rotation = Math.PI * 2 + (crop.rotation % (Math.PI * 2));\n\n const cropAspectRatio = crop.aspectRatio || image.height / image.width;\n\n const shouldLimit =\n typeof crop.scaleToFit === 'undefined' || crop.scaleToFit;\n\n const stageZoomFactor = getImageRectZoomFactor(\n image,\n getCenteredCropRect(stage, cropAspectRatio),\n rotation,\n shouldLimit ? crop.center : { x: 0.5, y: 0.5 }\n );\n\n const scale = crop.zoom * stageZoomFactor;\n\n // update markup view\n if (markup && markup.length) {\n root.ref.createMarkup();\n root.ref.markup.width = width;\n root.ref.markup.height = height;\n root.ref.markup.resize = resize;\n root.ref.markup.dirty = dirty;\n root.ref.markup.markup = markup;\n root.ref.markup.crop = getCurrentCropSize(image, crop);\n } else if (root.ref.markup) {\n root.ref.destroyMarkup();\n }\n\n // update image view\n const imageView = root.ref.image;\n\n // don't update clip layout\n if (shouldOptimize) {\n imageView.originX = null;\n imageView.originY = null;\n imageView.translateX = null;\n imageView.translateY = null;\n imageView.rotateZ = null;\n imageView.scaleX = null;\n imageView.scaleY = null;\n return;\n }\n\n imageView.originX = origin.x;\n imageView.originY = origin.y;\n imageView.translateX = translation.x;\n imageView.translateY = translation.y;\n imageView.rotateZ = rotation;\n imageView.scaleX = scale;\n imageView.scaleY = scale;\n }\n });\n\nconst createImageView = _ =>\n _.utils.createView({\n name: 'image-preview',\n tag: 'div',\n ignoreRect: true,\n mixins: {\n apis: ['image', 'crop', 'markup', 'resize', 'dirty', 'background'],\n styles: ['translateY', 'scaleX', 'scaleY', 'opacity'],\n animations: {\n scaleX: IMAGE_SCALE_SPRING_PROPS,\n scaleY: IMAGE_SCALE_SPRING_PROPS,\n translateY: IMAGE_SCALE_SPRING_PROPS,\n opacity: { type: 'tween', duration: 400 }\n }\n },\n create: ({ root, props }) => {\n root.ref.clip = root.appendChildView(\n root.createChildView(createClipView(_), {\n id: props.id,\n image: props.image,\n crop: props.crop,\n markup: props.markup,\n resize: props.resize,\n dirty: props.dirty,\n background: props.background\n })\n );\n },\n write: ({ root, props, shouldOptimize }) => {\n const { clip } = root.ref;\n\n const { image, crop, markup, resize, dirty } = props;\n\n clip.crop = crop;\n clip.markup = markup;\n clip.resize = resize;\n clip.dirty = dirty;\n\n // don't update clip layout\n clip.opacity = shouldOptimize ? 0 : 1;\n\n // don't re-render if optimizing or hidden (width will be zero resulting in weird animations)\n if (shouldOptimize || root.rect.element.hidden) return;\n\n // calculate scaled preview image size\n const imageAspectRatio = image.height / image.width;\n let aspectRatio = crop.aspectRatio || imageAspectRatio;\n\n // calculate container size\n const containerWidth = root.rect.inner.width;\n const containerHeight = root.rect.inner.height;\n\n let fixedPreviewHeight = root.query('GET_IMAGE_PREVIEW_HEIGHT');\n const minPreviewHeight = root.query('GET_IMAGE_PREVIEW_MIN_HEIGHT');\n const maxPreviewHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');\n\n const panelAspectRatio = root.query('GET_PANEL_ASPECT_RATIO');\n const allowMultiple = root.query('GET_ALLOW_MULTIPLE');\n\n if (panelAspectRatio && !allowMultiple) {\n fixedPreviewHeight = containerWidth * panelAspectRatio;\n aspectRatio = panelAspectRatio;\n }\n\n // determine clip width and height\n let clipHeight =\n fixedPreviewHeight !== null\n ? fixedPreviewHeight\n : Math.max(\n minPreviewHeight,\n Math.min(containerWidth * aspectRatio, maxPreviewHeight)\n );\n\n let clipWidth = clipHeight / aspectRatio;\n if (clipWidth > containerWidth) {\n clipWidth = containerWidth;\n clipHeight = clipWidth * aspectRatio;\n }\n\n if (clipHeight > containerHeight) {\n clipHeight = containerHeight;\n clipWidth = containerHeight / aspectRatio;\n }\n\n clip.width = clipWidth;\n clip.height = clipHeight;\n }\n });\n\nlet SVG_MASK = ``;\n\nlet SVGMaskUniqueId = 0;\n\nconst createImageOverlayView = fpAPI =>\n fpAPI.utils.createView({\n name: 'image-preview-overlay',\n tag: 'div',\n ignoreRect: true,\n create: ({ root, props }) => {\n let mask = SVG_MASK;\n if (document.querySelector('base')) {\n const url = new URL(\n window.location.href.replace(window.location.hash, '')\n ).href;\n mask = mask.replace(/url\\(\\#/g, 'url(' + url + '#');\n }\n\n SVGMaskUniqueId++;\n root.element.classList.add(\n `filepond--image-preview-overlay-${props.status}`\n );\n root.element.innerHTML = mask.replace(/__UID__/g, SVGMaskUniqueId);\n },\n mixins: {\n styles: ['opacity'],\n animations: {\n opacity: { type: 'spring', mass: 25 }\n }\n }\n });\n\n/**\n * Bitmap Worker\n */\nconst BitmapWorker = function() {\n self.onmessage = e => {\n createImageBitmap(e.data.message.file).then(bitmap => {\n self.postMessage({ id: e.data.id, message: bitmap }, [bitmap]);\n });\n };\n};\n\n/**\n * ColorMatrix Worker\n */\nconst ColorMatrixWorker = function() {\n self.onmessage = e => {\n const imageData = e.data.message.imageData;\n const matrix = e.data.message.colorMatrix;\n\n const data = imageData.data;\n const l = data.length;\n\n const m11 = matrix[0];\n const m12 = matrix[1];\n const m13 = matrix[2];\n const m14 = matrix[3];\n const m15 = matrix[4];\n\n const m21 = matrix[5];\n const m22 = matrix[6];\n const m23 = matrix[7];\n const m24 = matrix[8];\n const m25 = matrix[9];\n\n const m31 = matrix[10];\n const m32 = matrix[11];\n const m33 = matrix[12];\n const m34 = matrix[13];\n const m35 = matrix[14];\n\n const m41 = matrix[15];\n const m42 = matrix[16];\n const m43 = matrix[17];\n const m44 = matrix[18];\n const m45 = matrix[19];\n\n let index = 0,\n r = 0.0,\n g = 0.0,\n b = 0.0,\n a = 0.0;\n\n for (; index < l; index += 4) {\n r = data[index] / 255;\n g = data[index + 1] / 255;\n b = data[index + 2] / 255;\n a = data[index + 3] / 255;\n data[index] = Math.max(\n 0,\n Math.min((r * m11 + g * m12 + b * m13 + a * m14 + m15) * 255, 255)\n );\n data[index + 1] = Math.max(\n 0,\n Math.min((r * m21 + g * m22 + b * m23 + a * m24 + m25) * 255, 255)\n );\n data[index + 2] = Math.max(\n 0,\n Math.min((r * m31 + g * m32 + b * m33 + a * m34 + m35) * 255, 255)\n );\n data[index + 3] = Math.max(\n 0,\n Math.min((r * m41 + g * m42 + b * m43 + a * m44 + m45) * 255, 255)\n );\n }\n\n self.postMessage({ id: e.data.id, message: imageData }, [\n imageData.data.buffer\n ]);\n };\n};\n\nconst getImageSize = (url, cb) => {\n let image = new Image();\n image.onload = () => {\n const width = image.naturalWidth;\n const height = image.naturalHeight;\n image = null;\n cb(width, height);\n };\n image.src = url;\n};\n\nconst transforms = {\n 1: () => [1, 0, 0, 1, 0, 0],\n 2: width => [-1, 0, 0, 1, width, 0],\n 3: (width, height) => [-1, 0, 0, -1, width, height],\n 4: (width, height) => [1, 0, 0, -1, 0, height],\n 5: () => [0, 1, 1, 0, 0, 0],\n 6: (width, height) => [0, 1, -1, 0, height, 0],\n 7: (width, height) => [0, -1, -1, 0, height, width],\n 8: width => [0, -1, 1, 0, 0, width]\n};\n\nconst fixImageOrientation = (ctx, width, height, orientation) => {\n // no orientation supplied\n if (orientation === -1) {\n return;\n }\n\n ctx.transform.apply(ctx, transforms[orientation](width, height));\n};\n\n// draws the preview image to canvas\nconst createPreviewImage = (data, width, height, orientation) => {\n // can't draw on half pixels\n width = Math.round(width);\n height = Math.round(height);\n\n // draw image\n const canvas = document.createElement('canvas');\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n\n // if is rotated incorrectly swap width and height\n if (orientation >= 5 && orientation <= 8) {\n [width, height] = [height, width];\n }\n\n // correct image orientation\n fixImageOrientation(ctx, width, height, orientation);\n\n // draw the image\n ctx.drawImage(data, 0, 0, width, height);\n\n return canvas;\n};\n\nconst isBitmap = file => /^image/.test(file.type) && !/svg/.test(file.type);\n\nconst MAX_WIDTH = 10;\nconst MAX_HEIGHT = 10;\n\nconst calculateAverageColor = image => {\n const scalar = Math.min(MAX_WIDTH / image.width, MAX_HEIGHT / image.height);\n\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const width = (canvas.width = Math.ceil(image.width * scalar));\n const height = (canvas.height = Math.ceil(image.height * scalar));\n ctx.drawImage(image, 0, 0, width, height);\n let data = null;\n try {\n data = ctx.getImageData(0, 0, width, height).data;\n } catch (e) {\n return null;\n }\n const l = data.length;\n\n let r = 0;\n let g = 0;\n let b = 0;\n let i = 0;\n\n for (; i < l; i += 4) {\n r += data[i] * data[i];\n g += data[i + 1] * data[i + 1];\n b += data[i + 2] * data[i + 2];\n }\n\n r = averageColor(r, l);\n g = averageColor(g, l);\n b = averageColor(b, l);\n\n return { r, g, b };\n};\n\nconst averageColor = (c, l) => Math.floor(Math.sqrt(c / (l / 4)));\n\nconst cloneCanvas = (origin, target) => {\n target = target || document.createElement('canvas');\n target.width = origin.width;\n target.height = origin.height;\n const ctx = target.getContext('2d');\n ctx.drawImage(origin, 0, 0);\n return target;\n};\n\nconst cloneImageData = imageData => {\n let id;\n try {\n id = new ImageData(imageData.width, imageData.height);\n } catch (e) {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n id = ctx.createImageData(imageData.width, imageData.height);\n }\n id.data.set(new Uint8ClampedArray(imageData.data));\n return id;\n};\n\nconst loadImage = url =>\n new Promise((resolve, reject) => {\n const img = new Image();\n img.crossOrigin = 'Anonymous';\n img.onload = () => {\n resolve(img);\n };\n img.onerror = e => {\n reject(e);\n };\n img.src = url;\n });\n\nconst createImageWrapperView = _ => {\n // create overlay view\n const OverlayView = createImageOverlayView(_);\n\n const ImageView = createImageView(_);\n\n const { createWorker } = _.utils;\n\n const applyFilter = (root, filter, target) =>\n new Promise(resolve => {\n // will store image data for future filter updates\n if (!root.ref.imageData) {\n root.ref.imageData = target\n .getContext('2d')\n .getImageData(0, 0, target.width, target.height);\n }\n\n // get image data reference\n const imageData = cloneImageData(root.ref.imageData);\n\n if (!filter || filter.length !== 20) {\n target.getContext('2d').putImageData(imageData, 0, 0);\n return resolve();\n }\n\n const worker = createWorker(ColorMatrixWorker);\n worker.post(\n {\n imageData,\n colorMatrix: filter\n },\n response => {\n // apply filtered colors\n target.getContext('2d').putImageData(response, 0, 0);\n\n // stop worker\n worker.terminate();\n\n // done!\n resolve();\n },\n [imageData.data.buffer]\n );\n });\n\n const removeImageView = (root, imageView) => {\n root.removeChildView(imageView);\n imageView.image.width = 1;\n imageView.image.height = 1;\n imageView._destroy();\n };\n\n // remove an image\n const shiftImage = ({ root }) => {\n const imageView = root.ref.images.shift();\n imageView.opacity = 0;\n imageView.translateY = -15;\n root.ref.imageViewBin.push(imageView);\n return imageView;\n };\n\n // add new image\n const pushImage = ({ root, props, image }) => {\n const id = props.id;\n const item = root.query('GET_ITEM', { id });\n if (!item) return;\n\n const crop = item.getMetadata('crop') || {\n center: {\n x: 0.5,\n y: 0.5\n },\n flip: {\n horizontal: false,\n vertical: false\n },\n zoom: 1,\n rotation: 0,\n aspectRatio: null\n };\n\n const background = root.query(\n 'GET_IMAGE_TRANSFORM_CANVAS_BACKGROUND_COLOR'\n );\n\n let markup;\n let resize;\n let dirty = false;\n if (root.query('GET_IMAGE_PREVIEW_MARKUP_SHOW')) {\n markup = item.getMetadata('markup') || [];\n resize = item.getMetadata('resize');\n dirty = true;\n }\n\n // append image presenter\n const imageView = root.appendChildView(\n root.createChildView(ImageView, {\n id,\n image,\n crop,\n resize,\n markup,\n dirty,\n background,\n opacity: 0,\n scaleX: 1.15,\n scaleY: 1.15,\n translateY: 15\n }),\n root.childViews.length\n );\n root.ref.images.push(imageView);\n\n // reveal the preview image\n imageView.opacity = 1;\n imageView.scaleX = 1;\n imageView.scaleY = 1;\n imageView.translateY = 0;\n\n // the preview is now ready to be drawn\n setTimeout(() => {\n root.dispatch('DID_IMAGE_PREVIEW_SHOW', { id });\n }, 250);\n };\n\n const updateImage = ({ root, props }) => {\n const item = root.query('GET_ITEM', { id: props.id });\n if (!item) return;\n const imageView = root.ref.images[root.ref.images.length - 1];\n imageView.crop = item.getMetadata('crop');\n imageView.background = root.query(\n 'GET_IMAGE_TRANSFORM_CANVAS_BACKGROUND_COLOR'\n );\n if (root.query('GET_IMAGE_PREVIEW_MARKUP_SHOW')) {\n imageView.dirty = true;\n imageView.resize = item.getMetadata('resize');\n imageView.markup = item.getMetadata('markup');\n }\n };\n\n // replace image preview\n const didUpdateItemMetadata = ({ root, props, action }) => {\n // only filter and crop trigger redraw\n if (!/crop|filter|markup|resize/.test(action.change.key)) return;\n\n // no images to update, exit\n if (!root.ref.images.length) return;\n\n // no item found, exit\n const item = root.query('GET_ITEM', { id: props.id });\n if (!item) return;\n\n // for now, update existing image when filtering\n if (/filter/.test(action.change.key)) {\n const imageView = root.ref.images[root.ref.images.length - 1];\n applyFilter(root, action.change.value, imageView.image);\n return;\n }\n\n if (/crop|markup|resize/.test(action.change.key)) {\n const crop = item.getMetadata('crop');\n const image = root.ref.images[root.ref.images.length - 1];\n\n // if aspect ratio has changed, we need to create a new image\n if (\n crop &&\n crop.aspectRatio &&\n image.crop &&\n image.crop.aspectRatio &&\n Math.abs(crop.aspectRatio - image.crop.aspectRatio) > 0.00001\n ) {\n const imageView = shiftImage({ root });\n pushImage({ root, props, image: cloneCanvas(imageView.image) });\n }\n // if not, we can update the current image\n else {\n updateImage({ root, props });\n }\n }\n };\n\n const canCreateImageBitmap = file => {\n // Firefox versions before 58 will freeze when running createImageBitmap\n // in a Web Worker so we detect those versions and return false for support\n const userAgent = window.navigator.userAgent;\n const isFirefox = userAgent.match(/Firefox\\/([0-9]+)\\./);\n const firefoxVersion = isFirefox ? parseInt(isFirefox[1]) : null;\n if (firefoxVersion !== null && firefoxVersion <= 58) return false;\n\n return 'createImageBitmap' in window && isBitmap(file);\n };\n\n /**\n * Write handler for when preview container has been created\n */\n const didCreatePreviewContainer = ({ root, props }) => {\n const { id } = props;\n\n // we need to get the file data to determine the eventual image size\n const item = root.query('GET_ITEM', id);\n if (!item) return;\n\n // get url to file (we'll revoke it later on when done)\n const fileURL = URL.createObjectURL(item.file);\n\n // determine image size of this item\n getImageSize(fileURL, (width, height) => {\n // we can now scale the panel to the final size\n root.dispatch('DID_IMAGE_PREVIEW_CALCULATE_SIZE', {\n id,\n width,\n height\n });\n });\n };\n\n const drawPreview = ({ root, props }) => {\n const { id } = props;\n\n // we need to get the file data to determine the eventual image size\n const item = root.query('GET_ITEM', id);\n if (!item) return;\n\n // get url to file (we'll revoke it later on when done)\n const fileURL = URL.createObjectURL(item.file);\n\n // fallback\n const loadPreviewFallback = () => {\n // let's scale the image in the main thread :(\n loadImage(fileURL).then(previewImageLoaded);\n };\n\n // image is now ready\n const previewImageLoaded = imageData => {\n // the file url is no longer needed\n URL.revokeObjectURL(fileURL);\n\n // draw the scaled down version here and use that as source so bitmapdata can be closed\n // orientation info\n const exif = item.getMetadata('exif') || {};\n const orientation = exif.orientation || -1;\n\n // get width and height from action, and swap if orientation is incorrect\n let { width, height } = imageData;\n\n // if no width or height, just return early.\n if (!width || !height) return;\n\n if (orientation >= 5 && orientation <= 8) {\n [width, height] = [height, width];\n }\n\n // scale canvas based on pixel density\n // we multiply by .75 as that creates smaller but still clear images on screens with high res displays\n const pixelDensityFactor = Math.max(1, window.devicePixelRatio * 0.75);\n\n // we want as much pixels to work with as possible,\n // this multiplies the minimum image resolution,\n // so when zooming in it doesn't get too blurry\n const zoomFactor = root.query('GET_IMAGE_PREVIEW_ZOOM_FACTOR');\n\n // imaeg scale factor\n const scaleFactor = zoomFactor * pixelDensityFactor;\n\n // calculate scaled preview image size\n const previewImageRatio = height / width;\n\n // calculate image preview height and width\n const previewContainerWidth = root.rect.element.width;\n const previewContainerHeight = root.rect.element.height;\n\n let imageWidth = previewContainerWidth;\n let imageHeight = imageWidth * previewImageRatio;\n\n if (previewImageRatio > 1) {\n imageWidth = Math.min(width, previewContainerWidth * scaleFactor);\n imageHeight = imageWidth * previewImageRatio;\n } else {\n imageHeight = Math.min(height, previewContainerHeight * scaleFactor);\n imageWidth = imageHeight / previewImageRatio;\n }\n\n // transfer to image tag so no canvas memory wasted on iOS\n const previewImage = createPreviewImage(\n imageData,\n imageWidth,\n imageHeight,\n orientation\n );\n\n // done\n const done = () => {\n // calculate average image color, disabled for now\n const averageColor = root.query(\n 'GET_IMAGE_PREVIEW_CALCULATE_AVERAGE_IMAGE_COLOR'\n )\n ? calculateAverageColor(data)\n : null;\n item.setMetadata('color', averageColor, true);\n\n // data has been transferred to canvas ( if was ImageBitmap )\n if ('close' in imageData) {\n imageData.close();\n }\n\n // show the overlay\n root.ref.overlayShadow.opacity = 1;\n\n // create the first image\n pushImage({ root, props, image: previewImage });\n };\n\n // apply filter\n const filter = item.getMetadata('filter');\n if (filter) {\n applyFilter(root, filter, previewImage).then(done);\n } else {\n done();\n }\n };\n\n // if we support scaling using createImageBitmap we use a worker\n if (canCreateImageBitmap(item.file)) {\n // let's scale the image in a worker\n const worker = createWorker(BitmapWorker);\n\n worker.post(\n {\n file: item.file\n },\n imageBitmap => {\n // destroy worker\n worker.terminate();\n\n // no bitmap returned, must be something wrong,\n // try the oldschool way\n if (!imageBitmap) {\n loadPreviewFallback();\n return;\n }\n\n // yay we got our bitmap, let's continue showing the preview\n previewImageLoaded(imageBitmap);\n }\n );\n } else {\n // create fallback preview\n loadPreviewFallback();\n }\n };\n\n /**\n * Write handler for when the preview image is ready to be animated\n */\n const didDrawPreview = ({ root }) => {\n // get last added image\n const image = root.ref.images[root.ref.images.length - 1];\n image.translateY = 0;\n image.scaleX = 1.0;\n image.scaleY = 1.0;\n image.opacity = 1;\n };\n\n /**\n * Write handler for when the preview has been loaded\n */\n const restoreOverlay = ({ root }) => {\n root.ref.overlayShadow.opacity = 1;\n root.ref.overlayError.opacity = 0;\n root.ref.overlaySuccess.opacity = 0;\n };\n\n const didThrowError = ({ root }) => {\n root.ref.overlayShadow.opacity = 0.25;\n root.ref.overlayError.opacity = 1;\n };\n\n const didCompleteProcessing = ({ root }) => {\n root.ref.overlayShadow.opacity = 0.25;\n root.ref.overlaySuccess.opacity = 1;\n };\n\n /**\n * Constructor\n */\n const create = ({ root }) => {\n // image view\n root.ref.images = [];\n\n // the preview image data (we need this to filter the image)\n root.ref.imageData = null;\n\n // image bin\n root.ref.imageViewBin = [];\n\n // image overlays\n root.ref.overlayShadow = root.appendChildView(\n root.createChildView(OverlayView, {\n opacity: 0,\n status: 'idle'\n })\n );\n\n root.ref.overlaySuccess = root.appendChildView(\n root.createChildView(OverlayView, {\n opacity: 0,\n status: 'success'\n })\n );\n\n root.ref.overlayError = root.appendChildView(\n root.createChildView(OverlayView, {\n opacity: 0,\n status: 'failure'\n })\n );\n };\n\n return _.utils.createView({\n name: 'image-preview-wrapper',\n create,\n styles: ['height'],\n apis: ['height'],\n destroy: ({ root }) => {\n // we resize the image so memory on iOS 12 is released more quickly (it seems)\n root.ref.images.forEach(imageView => {\n imageView.image.width = 1;\n imageView.image.height = 1;\n });\n },\n didWriteView: ({ root }) => {\n root.ref.images.forEach(imageView => {\n imageView.dirty = false;\n });\n },\n write: _.utils.createRoute(\n {\n // image preview stated\n DID_IMAGE_PREVIEW_DRAW: didDrawPreview,\n DID_IMAGE_PREVIEW_CONTAINER_CREATE: didCreatePreviewContainer,\n DID_FINISH_CALCULATE_PREVIEWSIZE: drawPreview,\n DID_UPDATE_ITEM_METADATA: didUpdateItemMetadata,\n\n // file states\n DID_THROW_ITEM_LOAD_ERROR: didThrowError,\n DID_THROW_ITEM_PROCESSING_ERROR: didThrowError,\n DID_THROW_ITEM_INVALID: didThrowError,\n DID_COMPLETE_ITEM_PROCESSING: didCompleteProcessing,\n DID_START_ITEM_PROCESSING: restoreOverlay,\n DID_REVERT_ITEM_PROCESSING: restoreOverlay\n },\n ({ root }) => {\n // views on death row\n const viewsToRemove = root.ref.imageViewBin.filter(\n imageView => imageView.opacity === 0\n );\n\n // views to retain\n root.ref.imageViewBin = root.ref.imageViewBin.filter(\n imageView => imageView.opacity > 0\n );\n\n // remove these views\n viewsToRemove.forEach(imageView => removeImageView(root, imageView));\n viewsToRemove.length = 0;\n }\n )\n });\n};\n\n/**\n * Image Preview Plugin\n */\nconst plugin = fpAPI => {\n const { addFilter, utils } = fpAPI;\n const { Type, createRoute, isFile } = utils;\n\n // imagePreviewView\n const imagePreviewView = createImageWrapperView(fpAPI);\n\n // called for each view that is created right after the 'create' method\n addFilter('CREATE_VIEW', viewAPI => {\n // get reference to created view\n const { is, view, query } = viewAPI;\n\n // only hook up to item view and only if is enabled for this cropper\n if (!is('file') || !query('GET_ALLOW_IMAGE_PREVIEW')) return;\n\n // create the image preview plugin, but only do so if the item is an image\n const didLoadItem = ({ root, props }) => {\n const { id } = props;\n const item = query('GET_ITEM', id);\n\n // item could theoretically have been removed in the mean time\n if (!item || !isFile(item.file) || item.archived) return;\n\n // get the file object\n const file = item.file;\n\n // exit if this is not an image\n if (!isPreviewableImage(file)) return;\n\n // test if is filtered\n if (!query('GET_IMAGE_PREVIEW_FILTER_ITEM')(item)) return;\n\n // exit if image size is too high and no createImageBitmap support\n // this would simply bring the browser to its knees and that is not what we want\n const supportsCreateImageBitmap = 'createImageBitmap' in (window || {});\n const maxPreviewFileSize = query('GET_IMAGE_PREVIEW_MAX_FILE_SIZE');\n if (\n !supportsCreateImageBitmap &&\n (maxPreviewFileSize && file.size > maxPreviewFileSize)\n )\n return;\n\n // set preview view\n root.ref.imagePreview = view.appendChildView(\n view.createChildView(imagePreviewView, { id })\n );\n\n // update height if is fixed\n const fixedPreviewHeight = root.query('GET_IMAGE_PREVIEW_HEIGHT');\n if (fixedPreviewHeight) {\n root.dispatch('DID_UPDATE_PANEL_HEIGHT', {\n id: item.id,\n height: fixedPreviewHeight\n });\n }\n\n // now ready\n const queue =\n !supportsCreateImageBitmap &&\n file.size > query('GET_IMAGE_PREVIEW_MAX_INSTANT_PREVIEW_FILE_SIZE');\n root.dispatch('DID_IMAGE_PREVIEW_CONTAINER_CREATE', { id }, queue);\n };\n\n const rescaleItem = (root, props) => {\n if (!root.ref.imagePreview) return;\n\n let { id } = props;\n\n // get item\n const item = root.query('GET_ITEM', { id });\n if (!item) return;\n\n // if is fixed height or panel has aspect ratio, exit here, height has already been defined\n const panelAspectRatio = root.query('GET_PANEL_ASPECT_RATIO');\n const itemPanelAspectRatio = root.query('GET_ITEM_PANEL_ASPECT_RATIO');\n const fixedHeight = root.query('GET_IMAGE_PREVIEW_HEIGHT');\n if (panelAspectRatio || itemPanelAspectRatio || fixedHeight) return;\n\n // no data!\n let { imageWidth, imageHeight } = root.ref;\n if (!imageWidth || !imageHeight) return;\n\n // get height min and max\n const minPreviewHeight = root.query('GET_IMAGE_PREVIEW_MIN_HEIGHT');\n const maxPreviewHeight = root.query('GET_IMAGE_PREVIEW_MAX_HEIGHT');\n\n // orientation info\n const exif = item.getMetadata('exif') || {};\n const orientation = exif.orientation || -1;\n\n // get width and height from action, and swap of orientation is incorrect\n if (orientation >= 5 && orientation <= 8)\n [imageWidth, imageHeight] = [imageHeight, imageWidth];\n\n // scale up width and height when we're dealing with an SVG\n if (!isBitmap(item.file) || root.query('GET_IMAGE_PREVIEW_UPSCALE')) {\n const scalar = 2048 / imageWidth;\n imageWidth *= scalar;\n imageHeight *= scalar;\n }\n\n // image aspect ratio\n const imageAspectRatio = imageHeight / imageWidth;\n\n // we need the item to get to the crop size\n const previewAspectRatio =\n (item.getMetadata('crop') || {}).aspectRatio || imageAspectRatio;\n\n // preview height range\n let previewHeightMax = Math.max(\n minPreviewHeight,\n Math.min(imageHeight, maxPreviewHeight)\n );\n const itemWidth = root.rect.element.width;\n const previewHeight = Math.min(\n itemWidth * previewAspectRatio,\n previewHeightMax\n );\n\n // request update to panel height\n root.dispatch('DID_UPDATE_PANEL_HEIGHT', {\n id: item.id,\n height: previewHeight\n });\n };\n\n const didResizeView = ({ root }) => {\n // actions in next write operation\n root.ref.shouldRescale = true;\n };\n\n const didUpdateItemMetadata = ({ root, action }) => {\n if (action.change.key !== 'crop') return;\n\n // actions in next write operation\n root.ref.shouldRescale = true;\n };\n\n const didCalculatePreviewSize = ({ root, action }) => {\n // remember dimensions\n root.ref.imageWidth = action.width;\n root.ref.imageHeight = action.height;\n\n // actions in next write operation\n root.ref.shouldRescale = true;\n root.ref.shouldDrawPreview = true;\n\n // as image load could take a while and fire when draw loop is resting we need to give it a kick\n root.dispatch('KICK');\n };\n\n // start writing\n view.registerWriter(\n createRoute(\n {\n DID_RESIZE_ROOT: didResizeView,\n DID_STOP_RESIZE: didResizeView,\n DID_LOAD_ITEM: didLoadItem,\n DID_IMAGE_PREVIEW_CALCULATE_SIZE: didCalculatePreviewSize,\n DID_UPDATE_ITEM_METADATA: didUpdateItemMetadata\n },\n ({ root, props }) => {\n // no preview view attached\n if (!root.ref.imagePreview) return;\n\n // don't do anything while hidden\n if (root.rect.element.hidden) return;\n\n // resize the item panel\n if (root.ref.shouldRescale) {\n rescaleItem(root, props);\n root.ref.shouldRescale = false;\n }\n\n if (root.ref.shouldDrawPreview) {\n // queue till next frame so we're sure the height has been applied this forces the draw image call inside the wrapper view to use the correct height\n requestAnimationFrame(() => {\n // this requestAnimationFrame nesting is horrible but it fixes an issue with 100hz displays on Chrome\n // https://github.com/pqina/filepond-plugin-image-preview/issues/57\n requestAnimationFrame(() => {\n root.dispatch('DID_FINISH_CALCULATE_PREVIEWSIZE', {\n id: props.id\n });\n });\n });\n\n root.ref.shouldDrawPreview = false;\n }\n }\n )\n );\n });\n\n // expose plugin\n return {\n options: {\n // Enable or disable image preview\n allowImagePreview: [true, Type.BOOLEAN],\n\n // filters file items to determine which are shown as preview\n imagePreviewFilterItem: [() => true, Type.FUNCTION],\n\n // Fixed preview height\n imagePreviewHeight: [null, Type.INT],\n\n // Min image height\n imagePreviewMinHeight: [44, Type.INT],\n\n // Max image height\n imagePreviewMaxHeight: [256, Type.INT],\n\n // Max size of preview file for when createImageBitmap is not supported\n imagePreviewMaxFileSize: [null, Type.INT],\n\n // The amount of extra pixels added to the image preview to allow comfortable zooming\n imagePreviewZoomFactor: [2, Type.INT],\n\n // Should we upscale small images to fit the max bounding box of the preview area\n imagePreviewUpscale: [false, Type.BOOLEAN],\n\n // Max size of preview file that we allow to try to instant preview if createImageBitmap is not supported, else image is queued for loading\n imagePreviewMaxInstantPreviewFileSize: [1000000, Type.INT],\n\n // Style of the transparancy indicator used behind images\n imagePreviewTransparencyIndicator: [null, Type.STRING],\n\n // Enables or disables reading average image color\n imagePreviewCalculateAverageImageColor: [false, Type.BOOLEAN],\n\n // Enables or disables the previewing of markup\n imagePreviewMarkupShow: [true, Type.BOOLEAN],\n\n // Allows filtering of markup to only show certain shapes\n imagePreviewMarkupFilter: [() => true, Type.FUNCTION]\n }\n };\n};\n\n// fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags\nconst isBrowser =\n typeof window !== 'undefined' && typeof window.document !== 'undefined';\nif (isBrowser) {\n document.dispatchEvent(\n new CustomEvent('FilePond:pluginloaded', { detail: plugin })\n );\n}\n\nexport default plugin;\n","import { Controller } from \"@hotwired/stimulus\"\nimport * as FilePond from 'filepond';\nimport FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';\nimport FilePondPluginImagePreview from 'filepond-plugin-image-preview';\n\nimport 'filepond/dist/filepond.min.css';\nimport 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';\nFilePond.registerPlugin(FilePondPluginImagePreview);\nFilePond.registerPlugin(FilePondPluginFileValidateSize);\n\nconst photoIcon = (classes = \"\") => {\n return `\n \n `\n}\n\nconst arrowUpIcon = (classes = \"\") => {\n return `\n \n `\n}\n\nconst label = (image) => `\n\n ${image.length > 0 ? `
` : photoIcon(\"w-24 h-24\")}\n
\n`\n\nexport default class extends Controller {\n static values = {\n maxFileSize: { default: \"25MB\", type: String },\n replaceImage: { default: \"\", type: String },\n allowImagePreview: { default: false, type: Boolean },\n driversLicense: { default: false, type: Boolean },\n proofOfSelfInsurance: { default: false, type: Boolean }\n };\n\n connect() {\n const form = this.element.closest(\"form\")\n FilePond.create(this.element, {\n maxFileSize: this.maxFileSizeValue,\n allowImagePreview: this.allowImagePreviewValue,\n labelIdle: label(this.replaceImageValue),\n credits: false,\n server: {\n url: \"/filepond\",\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content\n },\n process: {\n ondata: (formData) => {\n document.querySelector(\".upload-label\").innerText = \"Upload more files\"\n for (let pair of formData.entries()) {\n if (typeof pair[1].name == 'string') {\n const newData = new FormData()\n newData.append(\"file\", pair[1])\n if (this.driversLicenseValue) {\n const contentType = document.createElement(\"input\")\n contentType.type = \"hidden\"\n contentType.name = \"content_type\"\n contentType.value = pair[1].type\n form.appendChild(contentType)\n newData.append(\"drivers_license\", true)\n }\n if (this.proofOfSelfInsuranceValue) {\n newData.append(\"proof_of_self_insurance\", true)\n }\n\n return newData\n }\n }\n\n return formData;\n }\n }\n }\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\n \"card\",\n \"ach\",\n \"cardContainer\",\n \"achContainer\",\n \"cardButton\",\n \"achButton\",\n \"name\",\n \"token\",\n \"select\",\n \"address\",\n \"city\",\n \"state\",\n \"zip\",\n \"cardError\"\n ]\n static values = {\n url: String,\n src: String,\n publicKey: String,\n }\n\n connect() {\n this.init().then(this.loadFrame)\n this.selectedType = \"card\"\n }\n\n sanitizeName = (e) => {\n e.currentTarget.value = e.currentTarget.value.replace(/[^a-z -]/ig, \"\")\n }\n\n showCard = (e) => {\n this.selectedType = \"card\"\n this.cardContainerTarget.classList.remove(\"hidden\")\n this.cardButtonTarget.classList.remove(\"bg-white\", \"cursor-pointer\", \"hover:bg-gray-100\")\n this.cardButtonTarget.classList.add(\"bg-black\", \"text-white\", \"cursor-default\")\n\n this.achContainerTarget.classList.add(\"hidden\")\n this.achButtonTarget.classList.add(\"bg-white\", \"cursor-pointer\")\n this.achButtonTarget.classList.remove(\"text-white\", \"cursor-default\")\n\n this.addressTarget.parentElement.parentElement.classList.add(\"hidden\")\n this.addressTarget.required = false\n\n this.cityTarget.parentElement.parentElement.classList.add(\"hidden\")\n this.cityTarget.required = false\n\n this.stateTarget.parentElement.parentElement.classList.add(\"hidden\")\n this.stateTarget.required = false\n }\n\n showAch = (e) => {\n this.selectedType = \"ach\"\n this.achContainerTarget.classList.remove(\"hidden\")\n this.achButtonTarget.classList.remove(\"bg-white\", \"cursor-pointer\", \"hover:bg-gray-100\")\n this.achButtonTarget.classList.add(\"bg-black\", \"text-white\", \"cursor-default\")\n\n this.cardContainerTarget.classList.add(\"hidden\")\n this.cardButtonTarget.classList.add(\"bg-white\", \"cursor-pointer\")\n this.cardButtonTarget.classList.remove(\"text-white\", \"cursor-default\")\n\n this.addressTarget.parentElement.parentElement.classList.remove(\"hidden\")\n this.addressTarget.required = true\n\n this.cityTarget.parentElement.parentElement.classList.remove(\"hidden\")\n this.cityTarget.required = true\n\n this.stateTarget.parentElement.parentElement.classList.remove(\"hidden\")\n this.stateTarget.required = true\n }\n\n init() {\n return new Promise((resolve, reject) => {\n if (window.Tokenizer) { return resolve() }\n\n const script = document.createElement('script')\n script.src = this.srcValue\n script.onerror = reject\n script.onload = () => {\n resolve()\n }\n document.head.appendChild(script)\n })\n }\n\n tokenSubmission = (resp) => {\n setTimeout(() => {\n this.element.querySelectorAll(\"button\").forEach(b => b.disabled = false)\n }, 4000)\n\n switch (resp.status) {\n case 'success':\n this.tokenTarget.value = resp.token\n this.cardTarget.innertText = \"Card added\"\n this.achTarget.innertText = \"Bank account added\"\n\n if (this.element.dataset.submitOnToken) {\n this.tokenTarget.closest(\"form\").requestSubmit()\n }\n if (this.element.dataset.selfSignUp) {\n this.dispatch(\"success\", { prefix: \"tokenized-status\" })\n }\n break;\n case 'error':\n console.log(\"Card Error\", { resp })\n break;\n case 'validation':\n if (resp.invalid.includes(\"cc\")) {\n this.cardErrorTarget.classList.remove(\"hidden\")\n } else {\n this.cardErrorTarget.classList.add(\"hidden\")\n }\n break;\n default:\n console.log(\"Error\", { resp })\n }\n }\n\n loadFrame = () => {\n this.styles = this.computeStyles()\n this.ach = this.newToken(\"ach\", this.achTarget)\n this.card = this.newToken(\"card\", this.cardTarget)\n }\n\n computeStyles = () => {\n const style = getComputedStyle(this.nameTarget)\n const inputStyles = {\n color: style.getPropertyValue(\"color\"),\n 'border-radius': style.getPropertyValue(\"border-radius\"),\n 'font-size': style.getPropertyValue(\"font-size\"),\n 'font-weight': style.getPropertyValue(\"font-weight\"),\n 'font-family': style.getPropertyValue(\"font-family\"),\n 'background-color': style.getPropertyValue(\"background-color\"),\n border: style.getPropertyValue(\"border\"),\n padding: style.getPropertyValue(\"padding\"),\n margin: style.getPropertyValue(\"margin\"),\n \"line-height\": style.getPropertyValue(\"line-height\"),\n \"margin-bottom\": \"8px\",\n height: style.getPropertyValue(\"height\"),\n }\n\n const selectStyle = getComputedStyle(this.selectTarget)\n const selectStyles = {\n ...inputStyles,\n \"-webkit-appearance\": \"none\",\n \"-moz-appearance\": \"none\",\n \"appearance\": \"none\",\n padding: \"8px\",\n \"padding-right\": \"16px\",\n \"background-image\": selectStyle.getPropertyValue(\"background-image\"),\n\n \"background-position-x\": \"calc(100% - 8px)\",\n \"background-position-y\": \"50%\",\n \"background-repeat\": selectStyle.getPropertyValue(\"background-repeat\"),\n \"background-size\": selectStyle.getPropertyValue(\"background-size\"),\n }\n const styles = {\n \".user .group .fieldset, .card .fieldset\": {\n 'padding-left': '16px',\n 'padding-right': '16px',\n },\n \".fieldset.last_name\": {\n 'padding-bottom': '0px !important',\n 'margin-bottom': '0px !important',\n },\n \".card,.ach\": {\n 'padding-left': '16px',\n 'padding-right': '16px',\n },\n \".ach\": {\n 'padding-top': '6px',\n },\n \".first_name label, .last_name label\": {\n \"display\": \"none\"\n },\n \".card\": {\n \"padding-top\": \"8px !important\",\n \"column-gap\": \"8px\"\n },\n \".card .fieldset\": {\n 'padding-left': '16px',\n 'padding-right': '16px',\n },\n \".fieldset.first_name\": {\n \"padding-top\": \"8px !important\"\n },\n \".fieldset.cc\": {\n },\n \".fieldset.exp\": {\n \"padding-left\": \"0px !important\",\n \"padding-right\": \"0px !important\"\n },\n \".fieldset.cvv\": {\n \"padding-left\": \"0px !important\",\n \"padding-right\": \"8px !important\"\n },\n \"input:focus,select:focus\": {\n outline: 'rgba(0, 0, 0, 0) solid 2px',\n \"outline-offset\": '2px',\n \"box-shadow\": 'rgb(255, 255, 255) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px',\n \"border-color\": \"#000000 !important\",\n },\n \".user\": {\n \"margin-bottom\": \"0px\",\n \"padding-bottom\": \"0px\",\n 'padding-left': '16px !important',\n 'padding-right': '16px !important',\n },\n \".user .group.inline>div.fieldset.last_name\": {\n \"padding-left\": \"8px\",\n \"padding-top\": \"8px\"\n },\n \".billing\": {\n 'padding-left': '16px !important',\n 'padding-right': '16px !important',\n 'padding-bottom': '0px !important',\n },\n \".billing label\": {\n display: \"none\"\n },\n \".billing > div:last-child\": {\n display: \"none\"\n },\n \".cc-icon\": {\n left: \"10px !important\",\n top: \"-4px !important\",\n },\n '.card .cc input, input': inputStyles,\n \".fieldset.cc input.cc-input\": {\n 'padding-left': '35px !important',\n },\n \".card .exp\": {\n display: \"contents\"\n },\n \".card .exp input\": {\n width: \"67.5% !important\"\n },\n \".card .cvv\": {\n display: \"contents\"\n },\n \".card .cvv input\": {\n width: \"30% !important\"\n },\n 'select': selectStyles,\n }\n\n return styles\n }\n\n newToken = (type, container) => {\n return new Tokenizer({\n url: this.urlValue,\n apikey: this.publicKeyValue,\n container,\n submission: this.tokenSubmission,\n settings: {\n styles: this.styles,\n payment: {\n types: [type],\n ach: {\n showSecCode: false,\n sec_code: \"ppd\",\n secCodeList: [\"ppd\"]\n },\n card: {\n requireCVV: true,\n },\n }\n }\n })\n }\n\n submit = (e) => {\n if (this.tokenTarget.value.length > 5) {\n this.element.closest(\"form\").requestSubmit()\n return\n }\n\n e.currentTarget.disabled = true\n if (this.selectedType === \"ach\") {\n this.ach.submit()\n }\n if (this.selectedType === \"card\") {\n this.card.submit()\n }\n }\n\n submitAch = (e) => {\n this.submit(e)\n }\n submitCard = (e) => {\n this.submit(e)\n }\n\n ensureToken = (e) => {\n if (this.tokenTarget.value.length < 5) {\n e.preventDefault()\n window.confirmMethod(\"Account invalid\", e.currentTarget, `Please enter your ${this.selectedType === \"ach\" ? \"bank account\" : \"card\"} information`)\n }\n }\n}\n","\nimport { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n format(e) {\n if (this.element.dataset.numeric) {\n let cleaned = \"\" + e.currentTarget.value\n const max = Number(this.element.dataset.max)\n cleaned = cleaned.replace(/\\D/g, '');\n if (cleaned.length > max) {\n cleaned = cleaned.substring(0, max)\n }\n\n e.currentTarget.value = cleaned\n return\n }\n }\n\n connect() {\n this.format({ currentTarget: this.element })\n this.element.dataset.action += \" input->formatter#format\"\n }\n}","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n sentMessage(text) {\n const div = this.element.querySelector(\".justify-end\").cloneNode(true)\n div.querySelector(\"span\").innerText = text\n this.element.querySelector(\"div\").appendChild(div)\n div.scrollIntoView()\n }\n\n fromMessage(text) {\n const div = this.element.querySelector(\".justify-start\").cloneNode(true)\n div.querySelector(\"span\").innerText = text\n this.element.querySelector(\"div\").appendChild(div)\n div.scrollIntoView()\n }\n\n newMessage(e) {\n console.log(e.keyCode)\n if (e.key === \"Enter\") {\n console.log(\"ENTERRR\")\n const val = e.currentTarget.value.trim()\n e.currentTarget.value = \"\"\n if (val.length > 0) {\n this.sentMessage(val)\n\n setTimeout(() => {\n this.fromMessage(\"I'm a bot, I don't understand anything\")\n }, 3000)\n }\n }\n }\n\n connect() {\n const div = this.element.querySelector(\".justify-end\")\n div.scrollIntoView()\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"label\"]\n\n change(e) {\n const button = e.currentTarget\n document.querySelector(\"#start_date\").value = button.dataset.start\n document.querySelector(\"#end_date\").value = button.dataset.end\n document.querySelector(\"#start_date\").closest(\"form\").requestSubmit()\n document.body.click()\n this.labelTarget.innerText = button.innerText\n }\n\n connect() {\n const start = document.querySelector(\"#start_date\").value\n const end = document.querySelector(\"#end_date\").value\n const button = document.querySelector(`[data-start='${start}'][data-end='${end}']`)\n if (button) {\n this.labelTarget.innerText = button.innerText.trim()\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n formatLocationCode = (e) => {\n const value = e.target.value\n const formattedValue = value.replace(/[^a-zA-Z0-9-]/g, \"_\")\n e.target.value = formattedValue\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static values = {\n timeout: Number,\n };\n\n toggle = () => {\n const children = Array.from(this.element.children)\n children.forEach((child) => {\n child.classList.toggle(\"hidden\")\n })\n }\n\n showLoading = () => {\n this.toggle()\n setTimeout(this.toggle, this.timeoutValue)\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nfunction loadScript(url, type = \"text/javascript\") {\n\tif (!url) return;\n\n\tconst existingScript = document.querySelector(\"script[src*='\" + url + \"']\");\n\tconst head = document.querySelector(\"head\");\n\tif (!existingScript && head) {\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.setAttribute(\"src\", url);\n\t\tscript.setAttribute(\"type\", type);\n\t\tscript.setAttribute(\"data-turbo-temporary\", \"true\");\n\t\thead.appendChild(script);\n\t}\n}\n\nasync function initMapKit() {\n\treturn new Promise((resolve) => {\n\t\tif (window.mapkit) {\n\t\t\tresolve();\n\t\t} else {\n\t\t\tloadScript(\"https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js\");\n\t\t\tlet i = setInterval(() => {\n\t\t\t\tif (window.mapkit) {\n\t\t\t\t\tclearInterval(i);\n\t\t\t\t\tresolve();\n\t\t\t\t}\n\t\t\t}, 100);\n\t\t}\n\t});\n}\n\n// interface AnnotationType {\n// \tlatitude: number;\n// \tlongitude: number;\n// \tcolor?: string;\n// \ttitle?: string;\n// \tsubtitle?: string;\n// \tselected?: boolean;\n// \tglyphText?: string;\n// }\n\nexport default class extends Controller {\n\tstatic values = {\n\t\tjwt: String,\n\t\taddress: String,\n\t\tname: String,\n\t\tannotations: Array,\n\t};\n\n\t// declare jwtValue: string;\n\t// declare annotationsValue: AnnotationType[];\n\t// map: mapkit.Map | undefined = undefined;\n\tmap = undefined;\n\n\tlookupAddress = () => {\n\t\tthis.map = new mapkit.Map(this.element);\n\t\tconst geocoder = new mapkit.Geocoder({});\n\t\tgeocoder.lookup(this.addressValue, (r, b) => {\n\t\t\tif (b && b.results && b.results.length > 0) {\n\t\t\t\tconst location = b.results[0]\n\t\t\t\tconst MarkerAnnotation = mapkit.MarkerAnnotation;\n\t\t\t\tconst coordinate = new mapkit.Coordinate(location.coordinate.latitude, location.coordinate.longitude);\n\t\t\t\tconst annotation = new MarkerAnnotation(coordinate, {\n\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\ttitle: this.nameValue,\n\t\t\t\t\tsubtitle: \"\",\n\t\t\t\t\tselected: true,\n\t\t\t\t\tglyphText: \"📦\",\n\t\t\t\t});\n\t\t\t\tconst items = [annotation];\n\t\t\t\tthis.map.showItems(items);\n\t\t\t}\n\t\t});\n\t}\n\n\tloadMap = () => {\n\t\tconst jwt = this.jwtValue;\n\t\tconst mapkit = window.mapkit;\n\t\tif (!mapkit) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (window.mapkitInitialized) {\n\t\t\tthis.lookupAddress()\n\t\t} else {\n\n\t\t\tmapkit.init({\n\t\t\t\tauthorizationCallback: (done) => {\n\t\t\t\t\twindow.mapkitInitialized = true;\n\t\t\t\t\tdone(jwt);\n\t\t\t\t\tthis.lookupAddress()\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\t\t// this.map = new mapkit.Map(this.element);\n\t\t// const items = this.annotationsValue.map((a) => {\n\t\t// \tconst {\n\t\t// \t\tlatitude,\n\t\t// \t\tlongitude,\n\t\t// \t\tcolor = \"#000000\",\n\t\t// \t\ttitle = \"\",\n\t\t// \t\tsubtitle = \"\",\n\t\t// \t\tselected = false,\n\t\t// \t\tglyphText = \"\",\n\t\t// \t} = a;\n\n\t\t// \tconst MarkerAnnotation = mapkit.MarkerAnnotation;\n\t\t// \tconst coordinate = new mapkit.Coordinate(latitude, longitude);\n\t\t// \tconst annotation = new MarkerAnnotation(coordinate, {\n\t\t// \t\tcolor,\n\t\t// \t\ttitle,\n\t\t// \t\tsubtitle,\n\t\t// \t\tselected,\n\t\t// \t\tglyphText,\n\t\t// \t});\n\t\t// \treturn annotation;\n\t\t// });\n\n\t\t// this.map.showItems(items);\n\t};\n\n\tdisconnect() {\n\t\tthis.map.destroy();\n\t\twindow.mapkit = undefined\n\t}\n\n\tconnect() {\n\t\tinitMapKit().then(this.loadMap);\n\t}\n}\n","import { Controller } from '@hotwired/stimulus'\n\nexport default class extends Controller {\n static classes = [\"activeTab\", \"inactiveTab\"]\n static targets = ['tab', 'panel', 'select']\n static values = {\n index: 0,\n updateAnchor: Boolean,\n scrollToAnchor: Boolean,\n scrollActiveTabIntoView: Boolean\n }\n\n initialize() {\n if (this.anchor) this.indexValue = this.tabTargets.findIndex((tab) => tab.id === this.anchor)\n }\n\n connect() {\n this.showTab()\n }\n\n // Changes to the clicked tab\n change(event) {\n if (event.currentTarget.tagName === \"SELECT\") {\n this.indexValue = event.currentTarget.selectedIndex\n\n // If target specifies an index, use that\n } else if (event.currentTarget.dataset.index) {\n this.indexValue = event.currentTarget.dataset.index\n\n // If target specifies an id, use that\n } else if (event.currentTarget.dataset.id) {\n this.indexValue = this.tabTargets.findIndex((tab) => tab.id == event.currentTarget.dataset.id)\n\n // Otherwise, use the index of the current target\n } else {\n this.indexValue = this.tabTargets.indexOf(event.currentTarget)\n }\n\n }\n\n nextTab() {\n this.indexValue = Math.min(this.indexValue + 1, this.tabsCount - 1)\n }\n\n previousTab() {\n this.indexValue = Math.max(this.indexValue - 1, 0)\n }\n\n firstTab() {\n this.indexValue = 0\n }\n\n lastTab() {\n this.indexValue = this.tabsCount - 1\n }\n\n indexValueChanged() {\n this.showTab()\n this.dispatch(\"tab-change\", {\n target: this.tabTargets[this.indexValue],\n detail: {\n activeIndex: this.indexValue\n }\n })\n // Update URL with the tab ID if it has one\n // This will be automatically selected on page load\n if (this.updateAnchorValue) {\n const new_tab_id = this.tabTargets[this.indexValue].id // Grab the id from the newly activated tab\n if (this.scrollToAnchorValue) {\n location.hash = new_tab_id // Use location.hash to change the URL with scrolling\n } else {\n const currentUrl = window.location.href // Get the current URL\n const newUrl = currentUrl.split('#')[0] + '#' + new_tab_id // Create a new URL with the updated ID\n if (typeof Turbo !== 'undefined') {\n Turbo.navigator.history.replace(new URL(newUrl))\n } else {\n history.replaceState({}, document.title, newUrl) // Use history.replaceState to change the URL without scrolling\n }\n }\n }\n }\n\n showTab() {\n this.panelTargets.forEach((panel, index) => {\n const tab = this.tabTargets[index]\n\n if (index === this.indexValue) {\n panel.classList.remove('hidden')\n tab.ariaSelected = 'true'\n tab.dataset.active = true\n if (this.hasInactiveTabClass) tab?.classList?.remove(...this.inactiveTabClasses)\n if (this.hasActiveTabClass) tab?.classList?.add(...this.activeTabClasses)\n } else {\n panel.classList.add('hidden')\n tab.ariaSelected = null\n delete tab.dataset.active\n if (this.hasActiveTabClass) tab?.classList?.remove(...this.activeTabClasses)\n if (this.hasInactiveTabClass) tab?.classList?.add(...this.inactiveTabClasses)\n }\n })\n\n if (this.hasSelectTarget) {\n this.selectTarget.selectedIndex = this.indexValue\n }\n\n if (this.scrollActiveTabIntoViewValue) this.scrollToActiveTab()\n }\n\n // If tabs have horizontal scrolling, the active tab may be out of sight.\n // Make sure the active tab is visible by scrolling it into the view.\n scrollToActiveTab() {\n const activeTab = this.element.querySelector('[aria-selected]')\n if (activeTab) activeTab.scrollIntoView({ inline: 'center', })\n }\n\n get tabsCount() {\n return this.tabTargets.length\n }\n\n get anchor() {\n return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"searchForm\", \"searchInput\", \"searchResults\"]\n\n searchInputChange(e) {\n let formData = new FormData(this.searchFormTarget)\n\n const searchPath = this.data.get(\"search-path\")\n fetch(searchPath, {\n method: \"POST\",\n headers: {\n \"X-CSRF-Token\": document.querySelector('meta[name=\"csrf-token\"]').content\n },\n credentials: 'same-origin',\n body: formData\n }).then((response) => {\n if(response.ok) {\n return response.text()\n }\n }).then((responseText) => {\n this.searchResultsTarget.outerHTML = responseText\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"searchForm\", \"searchInput\", \"searchResults\"]\n\n searchFormChange(e) {\n let formData = new FormData(this.searchFormTarget)\n\n const searchPath = this.data.get(\"search-path\")\n fetch(searchPath, {\n method: \"POST\",\n headers: {\n \"X-CSRF-Token\": document.querySelector('meta[name=\"csrf-token\"]').content\n },\n credentials: 'same-origin',\n body: formData\n }).then((response) => {\n if(response.ok) {\n return response.text()\n }\n }).then((responseText) => {\n this.searchResultsTarget.outerHTML = responseText\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n setHeight(e) {\n this.#setHeight(e.currentTarget) // HTMLTextAreaElement\n }\n\n // #setHeight(textArea: HTMLTextAreaElement) { \n #setHeight(textArea) {\n textArea.setAttribute(\"style\", \"height: 0px\");\n textArea.setAttribute(\"style\", \"height:\" + textArea.scrollHeight + \"px;\");\n }\n\n connect() {\n // this.element as HTMLTextAreaElement\n this.#setHeight(this.element);\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"checkbox\", \"buttonText\"];\n\n toggledOption() {\n const selected = this.checkboxTargets\n .filter(cb => cb.checked)\n .map(cb => this.element.querySelector(`label[for=\"${cb.id}\"]`).innerText)\n\n if (selected.length === 0) {\n this.buttonTextTarget.innerText = \"Choose options\"\n } else if (selected.length === this.checkboxTargets.length) {\n this.buttonTextTarget.innerText = \"All\"\n } else if (selected.length > 2) {\n this.buttonTextTarget.innerText = selected.slice(0, 2).join(\", \") + `, and ${selected.length - 2} more`\n } else {\n this.buttonTextTarget.innerText = selected.join(\", \")\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"pacIdSelect\"]\n\n connect() {\n this.pacIdChange()\n }\n\n pacIdChange() {\n this.element.querySelectorAll(\"[data-pac-id]\").forEach(el => {\n if (el.dataset.pacId == this.pacIdSelectTarget.value) {\n el.classList.remove(\"hidden\")\n } else {\n el.classList.add(\"hidden\")\n }\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"startDate\", \"nextBillDate\"]\n\n validate() {\n const startDate = new Date(this.startDateTarget.value + \" \")\n const nextBillDate = new Date(this.nextBillDateTarget.value + \" \")\n\n if (startDate > nextBillDate && !this.nextBillDateTarget.disabled) {\n this.nextBillDateTarget.value = this.startDateTarget.value\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static values = {\n tokenizationKey: String,\n }\n\n loadScript() {\n return new Promise((res, rej) => {\n if (!document.querySelector(\"#collectjs-styles\")) {\n const styles = document.createElement('style');\n styles.id = \"collectjs-styles\";\n styles.innerText = `.CollectJSInlineIframe, .CollectJSInlineIframe.CollectJSInvalid { height: 38px !important; }`\n document.head.appendChild(styles);\n }\n\n if (!window.CollectJS) {\n const script = document.createElement('script');\n script.src = \"https://retrieveronline.transactiongateway.com/token/Collect.js\";\n script.dataset.tokenizationKey = this.tokenizationKeyValue;\n script.dataset.variant = \"inline\";\n script.dataset.customCss = `{\n \"border\": \"solid 1px #d1d5db\",\n \"border-radius\": \"0.375rem\",\n \"color\": \"#343434\",\n \"display\": \"block\",\n \"height\": \"38px\",\n \"font-size\": \"16px\",\n \"width\": \"100%\",\n \"padding\": \"8px 12px\",\n \"line-height\": \"1.5\",\n \"background-color\": \"rgb(249, 250, 251)\",\n \"box-sizing\": \"border-box\"\n }`\n\n script.onload = res;\n script.onerror = rej;\n document.head.appendChild(script);\n }\n })\n }\n\n connect() {\n this.loadScript().then(() => {\n this.initCollect();\n })\n }\n\n initCollect() {\n CollectJS.configure({\n paymentType: \"cc\",\n invalidCss: {\n \"border\": \"solid 1px red\",\n },\n validationCallback: function (id, valid, message) {\n const errorDiv = document.querySelector(`#${id}-errors`)\n\n if (valid) {\n errorDiv.classList.add(\"hidden\")\n } else {\n errorDiv.classList.remove(\"hidden\")\n errorDiv.querySelector(\"span\").innerText = message\n }\n },\n callback: function (response) {\n const event = new CustomEvent(\"tokenized-payment-method:created\", { detail: response });\n document.dispatchEvent(event);\n }\n })\n }\n}","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n toggle = (e) => {\n e.preventDefault()\n const use = e.currentTarget.querySelector(\"use\")\n const href = use.getAttribute(\"xlink:href\")\n const icon = href.includes(\"#eye-slash\") ? href.replace(\"#eye-slash\", \"#eye\") : href.replace(\"#eye\", \"#eye-slash\")\n use.setAttribute(\"xlink:href\", icon)\n const field = e.currentTarget.previousElementSibling\n field.type = field.type === \"password\" ? \"text\" : \"password\"\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\nimport { numberToCurrency } from \"utils\"\n\nexport default class extends Controller {\n static targets = [\"text\", \"amount\"]\n\n updateButton() {\n this.textTarget.textContent = `Pay ${numberToCurrency(this.amountTarget.value)}`\n if (this.amountTarget.value >= 1) {\n this.textTarget.closest(\"button\").removeAttribute(\"disabled\")\n } else {\n this.textTarget.closest(\"button\").setAttribute(\"disabled\", \"disabled\")\n }\n }\n\n updateAmount(e) {\n const number = Number(e.currentTarget.value)\n this.amountTarget.value = number\n this.updateButton()\n }\n\n connect() {\n this.updateButton()\n }\n}","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"paymentMethodAdded\", \"addButton\"]\n\n requestSubmit = (e) => {\n const ach = document.querySelector(\"input#ach\")\n if (ach && ach.checked) {\n const submitButton = ach.parentElement.querySelector(`[data-tilled-target=\"submit\"]`)\n submitButton.click();\n } else {\n const submitButton = this.element.querySelector(`[data-tilled-target=\"submit\"]`)\n submitButton.click();\n }\n\n const button = e.currentTarget\n const text = button.innerText\n button.disabled = true\n button.innerText = \"Loading...\"\n setTimeout(() => {\n button.disabled = false\n button.innerText = text\n }, 2000)\n };\n\n\n close = () => {\n const dialog = this.element.querySelector(\"dialog\")\n dialog?.close();\n };\n\n open = () => {\n const dialog = this.element.querySelector(\"dialog\")\n document.body.classList.add(\"overflow-hidden\");\n dialog.showModal();\n setTimeout(() => {\n dialog.classList.remove(\"backdrop:opacity-0\", \"opacity-0\")\n dialog.classList.add(\"backdrop:opacity-100\", \"opacity-100\")\n }, 5)\n }\n\n connect() {\n const dialog = this.element.querySelector(\"dialog\")\n const submitButtons = this.element.querySelectorAll(`[data-tilled-target=\"submit\"]`)\n submitButtons.forEach((button) => {\n button.classList.add(\"hidden\")\n })\n\n dialog.addEventListener(\"close\", () => {\n document.body.classList.remove(\"overflow-hidden\");\n dialog.classList.add(\"backdrop:opacity-0\", \"opacity-0\")\n dialog.classList.remove(\"backdrop:opacity-100\", \"opacity-100\")\n });\n\n document.addEventListener(\"tokenized-payment-method:created\", () => {\n this.dispatch(\"success\", { prefix: \"tokenized-status\" })\n })\n }\n}\n","\nimport { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n format(e) {\n let cleaned = ('' + e.currentTarget.value).replace(/\\D/g, '');\n let areaCode = cleaned.substring(0, 3);\n let firstPart = cleaned.substring(3, 6);\n let secondPart = cleaned.substring(6, 10);\n if (areaCode) {\n let formattedPhone = '('\n if (areaCode.length === 0) {\n formattedPhone = ''\n } else if (areaCode.length < 3) {\n formattedPhone += areaCode\n } else if (areaCode.length === 3 && firstPart.length === 0) {\n formattedPhone += areaCode\n } else {\n formattedPhone += areaCode + ') ' + [firstPart, secondPart].filter(i => i).join(\"-\")\n }\n\n e.currentTarget.value = formattedPhone\n };\n }\n\n connect() {\n this.format({ currentTarget: this.element })\n this.element.dataset.action = \"input->phone-formatter#format\"\n }\n}","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"input\"]\n\n onPaste(e) {\n const clipboard = e.clipboardData.getData(\"text\").replace(\"-\", \"\")\n this.element.querySelectorAll(\"input\").forEach((input, index) => {\n input.value = clipboard.charAt(index)\n input.blur()\n })\n\n this.element.closest(\"form\").requestSubmit()\n }\n\n focusNext(e) {\n if (e.currentTarget.value.length < 1) return\n\n if (e.currentTarget.nextElementSibling.tagName === \"DIV\") {\n e.currentTarget.nextElementSibling.nextElementSibling.focus()\n } else {\n e.currentTarget.nextElementSibling.focus()\n }\n }\n\n submit(e) {\n if (e.currentTarget.value.length < 1) return\n\n let submit = true\n this.element.querySelectorAll(\"input\").forEach((input) => {\n if (input.value.length < 1) {\n input.focus()\n submit = false\n return\n }\n })\n\n if (submit) {\n e.currentTarget.blur()\n this.element.closest(\"form\").requestSubmit()\n }\n }\n}","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"checkbox\", \"preview\", \"targetPrice\", \"startDate\", \"billingInterval\"]\n\n calculateCredit() {\n if (this.checkboxTarget.checked && Number(this.targetPriceTarget.value) > 0) {\n const frame = this.previewTarget.querySelector(\"turbo-frame\") || document.createElement(\"turbo-frame\")\n frame.setAttribute(\"id\", \"proration-preview\")\n frame.setAttribute(\"src\", `proration_preview${window.location.search}&date=${this.startDateTarget.value}&billing_interval_id=${this.billingIntervalTarget.value}&target_price=${this.targetPriceTarget.value}`)\n this.previewTarget.appendChild(frame)\n }\n }\n\n showCredit(e) {\n if (e.currentTarget.checked) {\n this.calculateCredit()\n } else {\n this.previewTarget.innerHTML = ''\n document.querySelector(\"#create_lease_next_bill_date\").disabled = false\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"checkbox\"]\n\n updateProgress = (e) => {\n e.currentTarget.nextSibling.innerText = `${e.currentTarget.value}º`\n }\n}","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"range\"]\n\n rotate = (e) => {\n e.preventDefault();\n const val = this.rangeTarget.value;\n let newSnap = 0\n if (val < 90) {\n newSnap = 90\n } else if (val < 180) {\n newSnap = 180\n } else if (val < 270) {\n newSnap = 270\n } else {\n newSnap = 0\n }\n\n this.rangeTarget.value = newSnap\n const ev = document.createEvent('HTMLEvents');\n ev.initEvent(\"input\", false, true);\n this.rangeTarget.dispatchEvent(ev);\n }\n}","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"stopReload\"]\n static values = { interval: Number }\n\n disconnect() {\n clearInterval(this.i)\n }\n\n connect() {\n let interval = this.intervalValue || 3000\n this.i = setInterval(() => {\n if (this.hasStopReloadTarget) {\n clearInterval(this.i)\n return\n }\n\n if (!this.element.checkVisibility()) return\n\n Turbo.visit(window.location, { frame: this.element.id })\n }, interval)\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"remove\"]\n\n clear = () => {\n setTimeout(() => {\n this.removeTarget.innerHTML = \"\"\n }, 300);\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"searchForm\", \"searchResults\"]\n\n searchInputChange(e) {\n let formData = new FormData(this.searchFormTarget)\n\n const searchPath = this.data.get(\"search-path\")\n fetch(searchPath, {\n method: \"POST\",\n headers: {\n \"X-CSRF-Token\": document.querySelector('meta[name=\"csrf-token\"]').content\n },\n credentials: 'same-origin',\n body: formData\n }).then((response) => {\n if(response.ok) {\n return response.text()\n }\n }).then((responseText) => {\n this.searchResultsTarget.outerHTML = responseText\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n clear(event) {\n if (this.element === event.target || this.element.contains(event.target)) return\n this.element.children[0].innerHTML = \"\"\n }\n\n previousFocus(e) {\n let focus = false\n const links = this.element.querySelectorAll(\"a\")\n if (links.length === 0) return\n e.preventDefault()\n\n links.forEach((a, idx) => {\n if (!focus && a === document.activeElement) {\n focus = true\n if (idx === 0) {\n links[links.length - 1]?.focus()\n } else {\n links[idx - 1]?.focus()\n }\n }\n })\n\n if (!focus) {\n links[links.length - 1]?.focus()\n }\n }\n\n nextFocus(e) {\n let focus = false\n const links = this.element.querySelectorAll(\"a\")\n if (links.length === 0) return\n e.preventDefault()\n\n links.forEach((a, idx) => {\n if (!focus && a === document.activeElement) {\n focus = true\n if (idx === links.length - 1) {\n links[0]?.focus()\n } else {\n links[idx + 1]?.focus()\n }\n }\n })\n\n if (!focus) {\n links[0]?.focus()\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n navigate(e) {\n window.Turbo.visit(e.currentTarget.value)\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"template\", \"list\"]\n\n onChange = (e) => {\n const content = this.templateTarget.content\n const list = this.listTarget\n list.innerHTML = \"\"\n\n for (const file of e.currentTarget.files) {\n const row = document.importNode(content, true)\n\n // Set filename\n row.querySelector(\"span\").innerText = file.name\n\n // Set photo preview\n const src = URL.createObjectURL(file);\n row.querySelector(\"img\").src = src\n\n list.appendChild(row)\n }\n }\n}","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n reloadSummary() {\n const url = `${window.location.href.replace(\"/new\", \"/summary.turbo_stream\")}&${this.buildUrlParams()}`\n document.getElementById(\"summary\").src = url\n }\n\n reloadSummaryWithAchPricing() {\n const url = `${window.location.href.replace(\"/new\", \"/summary.turbo_stream\")}&${this.buildUrlParams(\"ach\")}`\n document.getElementById(\"summary\").src = url\n }\n\n reloadSummaryWithCardPricing() {\n const url = `${window.location.href.replace(\"/new\", \"/summary.turbo_stream\")}&${this.buildUrlParams(\"credit\")}`\n document.getElementById(\"summary\").src = url\n }\n\n reloadProtectionPlan() {\n const turbo_frame = document.getElementById(\"protection_plan\")\n if (!turbo_frame) return\n\n const url = `${window.location.href.replace(\"/new\", \"/protection_plan_section.turbo_stream\")}&${this.buildUrlParams()}`\n turbo_frame.src = url\n }\n\n reloadProtectionPlanWithAchPricing() {\n const turbo_frame = document.getElementById(\"protection_plan\")\n if (!turbo_frame) return\n\n const url = `${window.location.href.replace(\"/new\", \"/protection_plan_section.turbo_stream\")}&${this.buildUrlParams(\"ach\")}`\n turbo_frame.src = url\n }\n\n reloadProtectionPlanWithCardPricing() {\n const turbo_frame = document.getElementById(\"protection_plan\")\n if (!turbo_frame) return\n\n const url = `${window.location.href.replace(\"/new\", \"/protection_plan_section.turbo_stream\")}&${this.buildUrlParams(\"credit\")}`\n turbo_frame.src = url\n }\n\n reloadDiscount(e) {\n e.preventDefault()\n\n const turbo_frame = document.getElementById(\"discount\")\n if (!turbo_frame) return\n\n const discount_code_input = document.querySelector(\"input[name='discount_code']\")\n if (!discount_code_input || !discount_code_input.value.trim()) return\n\n const url = `${window.location.href.replace(\"/new\", \"/discount_application.turbo_stream\")}&${this.buildUrlParams()}`\n turbo_frame.src = url\n }\n\n buildUrlParams(pricingType = null) {\n const params = new URLSearchParams()\n\n if (pricingType) {\n params.append(\"payment_method\", pricingType)\n } else if (document.querySelector(\"#cc\") && document.querySelector(\"#cc\").checked) {\n params.append(\"payment_method\", \"credit\")\n } else if (document.querySelector(\"#ach\") && document.querySelector(\"#ach\").checked) {\n params.append(\"payment_method\", \"ach\")\n }\n\n const billing_interval_id = document.querySelector(\"#rental_billing_interval_id\").value\n params.append(\"rental[billing_interval_id]\", billing_interval_id)\n\n const selected_protection_plan_input = document.querySelector(\"input[name='rental[protection_plan_option_id]']:checked\")\n if (selected_protection_plan_input) {\n params.append(\"rental[protection_plan_option_id]\", selected_protection_plan_input.value)\n }\n const property_description_input = document.querySelector(\"#rental_property_description\")\n if (property_description_input) {\n params.append(\"rental[property_description]\", property_description_input.value)\n }\n const insurance_file_input = document.querySelector(\"fieldset > input[name='rental[insurance_file]']\")\n if (insurance_file_input) {\n params.append(\"rental[insurance_file]\", insurance_file_input.value)\n }\n\n const discount_code_input = document.querySelector(\"input[name='discount_code']\")\n if (discount_code_input) {\n params.append(\"discount_code\", discount_code_input.value)\n }\n const discount_id_input = document.querySelector(\"input[name='rental[discount_id]']\")\n if (discount_id_input) {\n params.append(\"rental[discount_id]\", discount_id_input.value)\n }\n\n return params.toString()\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n connect() {\n const dialog = this.element.closest(\"dialog\")\n if (dialog) {\n if (dialog.dataset.controller === \"dialog\") {\n dialog.querySelector(\"[data-action='click->dialog#open']\").click()\n } else {\n dialog.showModal();\n }\n }\n }\n}","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"toggle\"]\n\n showAll(e) {\n e.currentTarget.classList.add(\"hidden\")\n this.toggleTargets.forEach(t => {\n t.classList.remove(\"hidden\")\n })\n }\n}\n","\n\n\n ${arrowUpIcon(\"w-6 h-6\")}\n
\n${image.length > 0 ? \"Replace\" : \"Upload\"} File
\n \n
\n","\n\n\n Sort Units:\n \n
\n - \n {#each storageUnits as storageUnit (storageUnit.id)}\n
\n \n\n \n dispatch(\"reorderstorageunits\", {\n storageUnitRowId: storageUnitRow.id,\n storageUnitIds: e.detail.storageUnitIds,\n })}\n />\n
\n","\n\nUnassigned Units:
\n - \n {#each storageUnits as unit, i (unit.id)}\n \n \n
\n
\n \n {/each}\n \n {[unit.name, storageUnitTypesById.get(unit.typeId)?.name]\n .filter((a) => a)\n .join(\" - \")}\n
\n \n {#if selection[i]}\n \n \n {/if}\n
\n \n {#if storageUnits.length === 0}\n
\n\n","\n\nNo units available
\n {:else}\n \n {selected} selected\n
\n {/if}\n \n \n Add Row\n \n
\n Site map loading...
\n{:else if status == \"ready\"}\n\n \n\n {#if debugStore.enabled}\n \n {#each Object.entries(debugStore) as [key, value]}\n
\n {/if}\n\n {key}: {value}
\n {/each}\n \n
\n \n{:else}\n \n
\n\n \n {\n document\n .querySelector(\"#map-editor\")\n .closest(\"dialog\")\n .querySelector(\".showModal\")\n .click()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-2 w-auto h-10 flex items-center gap-2 justify-center text-sm\"\n >\n \n \n {#if $mapSettings.isSnapToGridEnabled}\n \n \n
\n \n
\n \n {\n e.preventDefault()\n zoomReset()\n }}\n class=\"hover:bg-black/20 cursor-pointer w-10 h-10 flex items-center justify-center text-2xl\"\n title=\"Reset zoom (Ctrl+0)\"\n >\n \n \n \n {\n e.preventDefault()\n zoomIn()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-4 w-10 h-10 flex items-center justify-center text-2xl\"\n title=\"Zoom in (Ctrl++)\"\n >\n +\n \n {\n e.preventDefault()\n zoomOut()\n }}\n class=\"hover:bg-black/20 cursor-pointer p-4 w-10 h-10 flex items-center justify-center text-2xl\"\n title=\"Zoom out (Ctrl+-)\"\n >\n -\n \n
\n Error: {loadError}
\n{/if}\n","import { Controller } from \"@hotwired/stimulus\"\nimport SiteMapEditor from \"../components/site_map/SiteMapEditor.svelte\"\n\nexport default class extends Controller {\n static values = {\n siteMapId: String,\n }\n\n connect() {\n this.siteMapEditor = new SiteMapEditor({\n target: this.element,\n props: {\n siteMapId: this.siteMapIdValue\n }\n })\n }\n\n disconnect() {\n this.siteMapEditor.$destroy()\n }\n}\n","import SiteMapViewer from \"@/components/site_map/SiteMapViewer.svelte\"\nimport { Controller } from \"@hotwired/stimulus\"\nimport { getSiteMap, getSiteMapUnitStatuses } from \"@/api/site_maps\"\n\nexport default class extends Controller {\n static values = {\n siteMapId: String,\n }\n\n connect() {\n this.siteMapViewer = new SiteMapViewer({\n props: {\n getSiteMap,\n getUnitStatuses: getSiteMapUnitStatuses,\n shouldShowCustomerPopover: true,\n siteMapId: this.siteMapIdValue,\n },\n target: this.element,\n })\n }\n\n disconnect() {\n this.siteMapViewer.$destroy()\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n focus(e) {\n const focusedTag = document.activeElement.tagName.toLowerCase()\n if (focusedTag !== \"input\" && focusedTag !== \"textarea\") {\n e.preventDefault()\n this.element.focus()\n }\n }\n}\n","/**!\n * Sortable 1.15.2\n * @author\tRubaXa\n \n p[0]}\n y={(p) => p[1]}\n xDomain={[0, canvasWidth]}\n yDomain={[canvasHeight, 0]}\n xPadding={[16, 16]}\n yPadding={[16, 16]}\n >\n \n \n \n \n
\n\n","\n\n\n","\n\n\n {#if mode === \"editShape\"}\n \n\n \n Cancel\n \n {:else if mode === \"editName\"}\n
\n\n{#if mode === \"view\"}\n \n \n
\n{/if}\n","import { Controller } from \"@hotwired/stimulus\"\nimport Editor from \"../components/storage_unit_type_shape/Editor.svelte\"\n\nexport default class extends Controller {\n static values = {\n storageUnitTypeJson: Object,\n }\n\n connect() {\n this.editor = new Editor({\n target: this.element,\n props: {\n storageUnitType: this.storageUnitTypeJsonValue\n }\n })\n }\n\n disconnect() {\n this.editor.$destroy()\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nfunction debounce(func, timeout = 300) {\n let timer;\n return (...args) => {\n clearTimeout(timer);\n timer = setTimeout(() => { func.apply(this, args); }, timeout);\n };\n}\n\nexport default class extends Controller {\n static values = {\n events: { type: Array, default: [\"change\", \"input\"] }\n }\n\n submit = debounce((e) => {\n if (e.target.classList.contains(\"easepick-wrapper\")) return\n this.element.requestSubmit();\n }, 100)\n\n connect = () => {\n this.element.dataset.action = this.eventsValue.map(e => `${e}->submit-on-change#submit`).join(\" \")\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n connect = () => {\n this.element.requestSubmit()\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n connect = () => {\n this.element.addEventListener(\"change\", () => {\n this.element.closest(\"form\").requestSubmit();\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\nimport { isDebug } from \"utils\";\n\nexport default class extends Controller {\n disabled() {\n return isDebug()\n }\n\n disconnect() {\n document.removeEventListener(\"keydown\", this.escapeKey)\n }\n\n hideWidget() {\n window.supportHeroWidget.hide();\n const container = document.querySelector(\"#supporthero-container\")\n container.style.opacity = 0;\n container.style.display = \"none\";\n container.classList.add(\"opacity-0\")\n container.classList.remove(\"opacity-100\")\n document.removeEventListener(\"keydown\", this.escapeKey)\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n showWidget() {\n const container = document.querySelector(\"#supporthero-container\")\n document.body.classList.add(\"overflow-hidden\");\n container.style.removeProperty(\"opacity\")\n container.style.removeProperty(\"display\")\n container.classList.add(\"opacity-0\", \"transition-all\", \"duration-300\", \"ease-linear\", \"relative\")\n container.addEventListener(\"click\", (e) => {\n if (e.target === container) {\n this.hideWidget()\n }\n })\n\n setTimeout(() => {\n container.classList.add(\"opacity-100\")\n container.classList.remove(\"opacity-0\")\n }, 5)\n\n const frame = document.querySelector(\"#supporthero-container iframe\")\n frame.style.height = \"100%\";\n frame.style.minWidth = \"50%\";\n frame.classList.add(\"transition-all\", \"duration-300\", \"ease-in-out\", \"shadow-2xl\", \"translate-x-full\", \"delay-200\")\n setTimeout(() => {\n frame.classList.remove(\"translate-x-full\")\n frame.classList.add(\"translate-x-0\")\n }, 5)\n\n\n const close = document.querySelector(\"#supporthero-hide\")\n close.style.removeProperty(\"top\")\n close.style.removeProperty(\"opacity\")\n close.style.removeProperty(\"right\")\n close.style.removeProperty(\"display\")\n close.classList.add(\"top-4\", \"right-4\")\n document.addEventListener(\"keydown\", this.escapeKey)\n }\n\n escapeKey = (e) => {\n if (e.key === \"Escape\") {\n console.log(\"clsing\")\n\n this.hideWidget()\n }\n }\n\n faq(e) {\n if (this.disabled()) { return }\n\n e.preventDefault();\n this.showWidget()\n window.supportHeroWidget.show();\n }\n\n connect() {\n if (this.disabled()) { return }\n\n if (!window.supportHeroWidget) {\n const src = \"https://d29l98y0pmei9d.cloudfront.net/js/widget.min.js?k=Y2xpZW50SWQ9NjEzMSZob3N0TmFtZT1jY3N0b3JhZ2Uuc3VwcG9ydGhlcm8uaW8=\"\n const script = document.createElement('script');\n script.async = true;\n script.dataset.cfasync = \"false\";\n script.dataset.turboTemporary = \"true\";\n script.src = src;\n document.head.appendChild(script);\n\n script.onload = () => {\n window.supportHeroWidget.onHide(() => {\n this.hideWidget()\n });\n }\n }\n }\n\n disconnect() {\n window.supportHeroWidget = undefined\n }\n}","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n chooseFile = () => {\n this.element.querySelector(\"input[type=file]\").click();\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"taxRateContainer\", \"template\"]\n\n removeTaxRate = (e) => {\n const node = e.currentTarget\n const container = node.closest(\".rate-row\")\n\n let existing = false\n container.querySelectorAll(\"[type=hidden]\").forEach(n => {\n if (n.name.includes(\"[id]\")) {\n existing = true\n }\n })\n\n if (!existing) {\n container.remove()\n return\n }\n\n const checkbox = container.querySelector(\"input[type='checkbox']\")\n checkbox.checked = true\n container.querySelector(\".to-remove\").classList.remove(\"hidden\")\n }\n\n addTaxRate = () => {\n const row = document.importNode(this.templateTarget.content, true);\n row.querySelectorAll(\"[name]\").forEach(n => {\n const nextNumber = document.querySelectorAll(\".rate-row\").length\n n.name = n.name.replace(/tax_policy\\[tax_policy_rates_attributes\\]\\[\\d\\]/, `tax_policy[tax_policy_rates_attributes][${nextNumber}]`)\n })\n\n this.taxRateContainerTarget.appendChild(row)\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"textarea\"]\n\n // insert text at cursor position\n insert(e) {\n e.preventDefault()\n const text = e.currentTarget.dataset.value.trim()\n const textarea = this.textareaTarget\n textarea.focus()\n const start = textarea.value.slice(0, textarea.selectionStart)\n var end = textarea.value.slice(textarea.selectionEnd)\n textarea.value = start + text + end\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"form\", \"paymentMethod\"]\n\n toggle(e) {\n this.element.querySelectorAll(\"fieldset\").forEach((fieldset) => {\n fieldset.disabled = false;\n });\n\n const fieldset = e.currentTarget.closest(\"fieldset\")\n if (fieldset) {\n fieldset.disabled = !fieldset.disabled\n }\n }\n\n copyAddress(e) {\n const name = document.querySelector(\"#rental_full_name\");\n\n const address = document.querySelector(\"#rental_address\");\n const city = document.querySelector(\"#rental_city\");\n const state = document.querySelector(\"#rental_state\");\n const zip = document.querySelector(\"#rental_postal_code\");\n\n const ccName = document.querySelector(\"#cc_full_name\");\n const ccZip = document.querySelector(\"#cc_zip\");\n\n const bankName = document.querySelector(\"#full_name\");\n const bankZip = document.querySelector(\"#zip\");\n const bankAddress = document.querySelector(\"#street_address\");\n const bankCity = document.querySelector(\"#city\");\n const bankState = document.querySelector(\"#state\");\n\n if (e.currentTarget.checked) {\n ccName.value = name.value;\n bankName.value = name.value;\n ccZip.value = zip.value;\n bankZip.value = zip.value;\n\n bankAddress.value = address.value;\n bankCity.value = city.value;\n bankState.selectedIndex = state.selectedIndex;\n } else {\n ccName.value = \"\";\n bankName.value = \"\";\n ccZip.value = \"\";\n bankZip.value = \"\";\n\n bankAddress.value = \"\";\n bankCity.value = \"\";\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"paymentMethodPresent\", \"paymentMethodForm\"]\n\n success() {\n this.element.querySelector(\"dialog\")?.close()\n this.paymentMethodPresentTarget.classList.remove(\"hidden\")\n this.paymentMethodFormTarget.classList.add(\"hidden\")\n }\n}","import { Controller } from \"@hotwired/stimulus\"\n\nfunction debounce(func, timeout = 300) {\n let timer;\n return (...args) => {\n clearTimeout(timer);\n timer = setTimeout(() => { func.apply(this, args); }, timeout);\n };\n}\n\nexport default class extends Controller {\n static targets = [\"cashPrice\"]\n\n connect() {\n this.lastCashPrice = Number(this.cashPriceTarget.value)\n }\n\n calculateBilling = debounce(() => {\n const cashPrice = Number(this.cashPriceTarget.value)\n if (cashPrice !== this.lastCashPrice) {\n this.lastCashPrice = cashPrice\n\n const turboFrame = document.getElementById(\"billing_preview\")\n const searchParams = new URLSearchParams(window.location.search)\n searchParams.set('cash_price', cashPrice)\n const url = `${window.location.href.split('?')[0]}?${searchParams.toString()}`\n turboFrame.src = url\n }\n }, 100)\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n connect() {\n this.element.addEventListener(\"trix-initialize\", () => {\n const toolbarId = this.element.getAttribute(\"toolbar\")\n const toolbar = document.querySelector(`#${toolbarId}`)\n toolbar.querySelector(\".trix-button-group--file-tools\").remove()\n })\n\n // remove file upload handling\n this.element.addEventListener(\"trix-file-accept\", (event) => {\n event.preventDefault()\n })\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nconst MB_15 = 15720000;\nconst MB_1 = 1050000;\n\n// function bytesToSize(bytes: number) {\nfunction bytesToSize(bytes) {\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n if (bytes === 0) return \"n/a\";\n const i = Number(Math.floor(Math.log(bytes) / Math.log(1024)));\n if (i === 0) return `${bytes} ${sizes[i]})`;\n return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;\n}\n\nexport default class extends Controller {\n static targets = [\"fileInput\", \"removeContent\"];\n\n // declare fileInputTarget: HTMLInputElement;\n // declare removeContentTarget: HTMLInputElement;\n\n // imagePreview(e: Event) {\n imagePreview(e) {\n const target = e.target //as HTMLInputElement;\n const max = target.dataset.limit || MB_15;\n const files = target.files || [];\n if (files.length > 0) {\n const file = files[0];\n // if (file.size > Number(max)) {\n // const text = `File size too large. Maximum size is ${bytesToSize(\n // Number(max)\n // )}, while your file is ${bytesToSize(file.size)}.`;\n // // window.toast({ text, type: \"error\" });\n // target.value = \"\";\n // e.preventDefault();\n // return;\n // }\n const src = URL.createObjectURL(file);\n const div = this.element.querySelector(\".preview-container\")\n div?.classList?.remove(\"hidden\");\n const preview = div.querySelector(\"img\") //as HTMLImageElement;\n div.nextSibling?.classList?.add(\"hidden\");\n div.nextSibling?.nextSibling?.classList?.add(\"hidden\");\n div.nextElementSibling?.nextElementSibling?.classList?.add(\"hidden\");\n\n if (preview) {\n preview.src = src;\n }\n }\n }\n\n // removeLogo(e: Event) {\n removeLogo(e) {\n e.preventDefault();\n window\n .confirmMethod(\"Remove Logo?\", e.currentTarget)\n .then((yes) => {\n if (yes) {\n this.removeContentTarget.checked = true;\n this.fileInputTarget.value = \"\";\n this.fileInputTarget.files = null;\n this.fileInputTarget.closest(\"form\")?.requestSubmit();\n }\n });\n }\n\n // fileAttached({ target }: { target: HTMLInputElement }) {\n fileAttached({ target }) {\n const files = target.files || [];\n if (files.length > 0) {\n this.removeContentTarget.checked = false;\n }\n }\n}\n\n","import { Controller } from \"@hotwired/stimulus\";\n\nfunction showUploadWindow(title) {\n\tif (document.querySelectorAll(\"#upload-progress-modal\").length > 0) {\n\t\treturn;\n\t}\n\n\tconst template = document.querySelector(\n\t\t\"template#upload-progress-template\"\n\t);\n\tif (template) {\n\t\tconst content = template.content;\n\t\tconst alt = document.importNode(content, true);\n\t\tconst button = alt?.querySelector(\"button\");\n\t\tif (button) {\n\t\t\tbutton.addEventListener(\"click\", () => {\n\t\t\t\thideUploadWindow();\n\t\t\t});\n\t\t}\n\n\n\t\tconst openDialog = document.querySelector(\"dialog[open]\")\n\t\tif (openDialog) {\n\t\t\topenDialog.appendChild(alt);\n\t\t} else {\n\t\t\tdocument.body.appendChild(alt);\n\t\t}\n\t\tupdateUploadTitle(title);\n\t\tdocument.body.classList.add(\"overflow-hidden\");\n\t}\n}\n\nfunction hideUploadWindow() {\n\tdocument.body.classList.remove(\"overflow-hidden\");\n\tconst modal = document.querySelector(\"#upload-progress-modal\");\n\tif (modal) {\n\t\tmodal.parentElement?.removeChild(modal);\n\t}\n}\n\nfunction updateUploadTitle(title) {\n\tconst alertTitle = document.querySelector(\"#alert-title\");\n\tif (alertTitle && title) {\n\t\talertTitle.innerText = title;\n\t}\n}\n\nfunction updateUploadProgress(progress = 0) {\n\tconst progressMeter = document.querySelector(\"#progress-meter\");\n\tprogressMeter?.setAttribute(\"style\", `width: ${progress}%`);\n\n\tconst progressText = document.querySelector(\"#progress-text\");\n\tif (progressText) {\n\t\tprogressText.innerText = `${progress.toFixed()}% Complete`;\n\t}\n}\n\n// window.test = () => {\n// \tshowUploadWindow(\"Uploading...\");\n// \tlet progress = 0;\n// \tlet i = setInterval(() => {\n// \t\tprogress = progress + 1\n// \t\tupdateUploadProgress(progress);\n// \t\tif (progress >= 100) {\n// \t\t\tclearInterval(i);\n// \t\t\tsetTimeout(() => {\n// \t\t\t\tupdateUploadTitle(\"Upload complete\");\n// \t\t\t\tsetTimeout(hideUploadWindow, 1000);\n// \t\t\t}, 1000);\n// \t\t}\n// \t}, 10)\n// }\n\nexport default class extends Controller {\n\tconnect() {\n\t\tdocument.addEventListener(\"direct-uploads:start\", function (e) {\n\t\t\tshowUploadWindow(\"Uploading...\");\n\t\t});\n\t\tdocument.addEventListener(\"direct-upload:progress\", function (e) {\n\t\t\tconst progress = e.detail.progress;\n\t\t\tupdateUploadProgress(progress);\n\t\t});\n\t\tdocument.addEventListener(\"direct-uploads:end\", function (e) {\n\t\t\tupdateUploadTitle(\"Upload complete\");\n\n\t\t\tsetTimeout(hideUploadWindow, 100);\n\t\t});\n\t\tdocument.addEventListener(\"direct-upload:error\", function (e) {\n\t\t\tupdateUploadTitle(\"Error uploading file\");\n\t\t});\n\t\tdocument.addEventListener(\"direct-upload:title\", function (e) {\n\t\t\t// @ts-ignore\n\t\t\tupdateUploadTitle(e.detail.title);\n\t\t});\n\t}\n}\n","// src/webauthn-json/base64url.ts\nfunction base64urlToBuffer(baseurl64String) {\n const padding = \"==\".slice(0, (4 - baseurl64String.length % 4) % 4);\n const base64String = baseurl64String.replace(/-/g, \"+\").replace(/_/g, \"/\") + padding;\n const str = atob(base64String);\n const buffer = new ArrayBuffer(str.length);\n const byteView = new Uint8Array(buffer);\n for (let i = 0; i < str.length; i++) {\n byteView[i] = str.charCodeAt(i);\n }\n return buffer;\n}\nfunction bufferToBase64url(buffer) {\n const byteView = new Uint8Array(buffer);\n let str = \"\";\n for (const charCode of byteView) {\n str += String.fromCharCode(charCode);\n }\n const base64String = btoa(str);\n const base64urlString = base64String.replace(/\\+/g, \"-\").replace(\n /\\//g,\n \"_\"\n ).replace(/=/g, \"\");\n return base64urlString;\n}\n\n// src/webauthn-json/convert.ts\nvar copyValue = \"copy\";\nvar convertValue = \"convert\";\nfunction convert(conversionFn, schema, input) {\n if (schema === copyValue) {\n return input;\n }\n if (schema === convertValue) {\n return conversionFn(input);\n }\n if (schema instanceof Array) {\n return input.map((v) => convert(conversionFn, schema[0], v));\n }\n if (schema instanceof Object) {\n const output = {};\n for (const [key, schemaField] of Object.entries(schema)) {\n if (schemaField.derive) {\n const v = schemaField.derive(input);\n if (v !== void 0) {\n input[key] = v;\n }\n }\n if (!(key in input)) {\n if (schemaField.required) {\n throw new Error(`Missing key: ${key}`);\n }\n continue;\n }\n if (input[key] == null) {\n output[key] = null;\n continue;\n }\n output[key] = convert(\n conversionFn,\n schemaField.schema,\n input[key]\n );\n }\n return output;\n }\n}\nfunction derived(schema, derive) {\n return {\n required: true,\n schema,\n derive\n };\n}\nfunction required(schema) {\n return {\n required: true,\n schema\n };\n}\nfunction optional(schema) {\n return {\n required: false,\n schema\n };\n}\n\n// src/webauthn-json/basic/schema.ts\nvar publicKeyCredentialDescriptorSchema = {\n type: required(copyValue),\n id: required(convertValue),\n transports: optional(copyValue)\n};\nvar simplifiedExtensionsSchema = {\n appid: optional(copyValue),\n appidExclude: optional(copyValue),\n credProps: optional(copyValue)\n};\nvar simplifiedClientExtensionResultsSchema = {\n appid: optional(copyValue),\n appidExclude: optional(copyValue),\n credProps: optional(copyValue)\n};\nvar credentialCreationOptions = {\n publicKey: required({\n rp: required(copyValue),\n user: required({\n id: required(convertValue),\n name: required(copyValue),\n displayName: required(copyValue)\n }),\n challenge: required(convertValue),\n pubKeyCredParams: required(copyValue),\n timeout: optional(copyValue),\n excludeCredentials: optional([publicKeyCredentialDescriptorSchema]),\n authenticatorSelection: optional(copyValue),\n attestation: optional(copyValue),\n extensions: optional(simplifiedExtensionsSchema)\n }),\n signal: optional(copyValue)\n};\nvar publicKeyCredentialWithAttestation = {\n type: required(copyValue),\n id: required(copyValue),\n rawId: required(convertValue),\n authenticatorAttachment: optional(copyValue),\n response: required({\n clientDataJSON: required(convertValue),\n attestationObject: required(convertValue),\n transports: derived(\n copyValue,\n (response) => {\n var _a;\n return ((_a = response.getTransports) == null ? void 0 : _a.call(response)) || [];\n }\n )\n }),\n clientExtensionResults: derived(\n simplifiedClientExtensionResultsSchema,\n (pkc) => pkc.getClientExtensionResults()\n )\n};\nvar credentialRequestOptions = {\n mediation: optional(copyValue),\n publicKey: required({\n challenge: required(convertValue),\n timeout: optional(copyValue),\n rpId: optional(copyValue),\n allowCredentials: optional([publicKeyCredentialDescriptorSchema]),\n userVerification: optional(copyValue),\n extensions: optional(simplifiedExtensionsSchema)\n }),\n signal: optional(copyValue)\n};\nvar publicKeyCredentialWithAssertion = {\n type: required(copyValue),\n id: required(copyValue),\n rawId: required(convertValue),\n authenticatorAttachment: optional(copyValue),\n response: required({\n clientDataJSON: required(convertValue),\n authenticatorData: required(convertValue),\n signature: required(convertValue),\n userHandle: required(convertValue)\n }),\n clientExtensionResults: derived(\n simplifiedClientExtensionResultsSchema,\n (pkc) => pkc.getClientExtensionResults()\n )\n};\n\n// src/webauthn-json/basic/api.ts\nfunction createRequestFromJSON(requestJSON) {\n return convert(base64urlToBuffer, credentialCreationOptions, requestJSON);\n}\nfunction createResponseToJSON(credential) {\n return convert(\n bufferToBase64url,\n publicKeyCredentialWithAttestation,\n credential\n );\n}\nfunction getRequestFromJSON(requestJSON) {\n return convert(base64urlToBuffer, credentialRequestOptions, requestJSON);\n}\nfunction getResponseToJSON(credential) {\n return convert(\n bufferToBase64url,\n publicKeyCredentialWithAssertion,\n credential\n );\n}\n\n// src/webauthn-json/basic/supported.ts\nfunction supported() {\n return !!(navigator.credentials && navigator.credentials.create && navigator.credentials.get && window.PublicKeyCredential);\n}\n\n// src/webauthn-json/browser-ponyfill.ts\nasync function create(options) {\n const response = await navigator.credentials.create(\n options\n );\n response.toJSON = () => createResponseToJSON(response);\n return response;\n}\nasync function get(options) {\n const response = await navigator.credentials.get(\n options\n );\n response.toJSON = () => getResponseToJSON(response);\n return response;\n}\nexport {\n create,\n get,\n createRequestFromJSON as parseCreationOptionsFromJSON,\n getRequestFromJSON as parseRequestOptionsFromJSON,\n supported\n};\n//# sourceMappingURL=webauthn-json.browser-ponyfill.js.map\n","import { Controller } from \"@hotwired/stimulus\"\nimport {\n create,\n get,\n parseCreationOptionsFromJSON,\n parseRequestOptionsFromJSON\n} from \"@github/webauthn-json/browser-ponyfill\";\n\nexport default class extends Controller {\n static targets = [\"publicKeyCredential\"]\n static values = { options: Object };\n\n #callback = (event, fn, parser) => {\n if (this.publicKeyCredentialTarget.value.length > 0 || !window.navigator.credentials) { return }\n\n event.preventDefault()\n const options = parser({ publicKey: this.optionsValue })\n fn(options).then(pk => {\n this.publicKeyCredentialTarget.value = JSON.stringify(pk)\n this.element.requestSubmit();\n }).catch(e => { alert(e.message) })\n }\n\n create = (e) => {\n this.#callback(e, create, parseCreationOptionsFromJSON)\n }\n\n verify = (e) => {\n this.#callback(e, get, parseRequestOptionsFromJSON)\n }\n}\n","/*!\nTurbo 8.0.4\nCopyright © 2024 37signals LLC\n */\n/**\n * The MIT License (MIT)\n *\n * Copyright (c) 2019 Javan Makhmali\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n(function (prototype) {\n if (typeof prototype.requestSubmit == \"function\") return\n\n prototype.requestSubmit = function (submitter) {\n if (submitter) {\n validateSubmitter(submitter, this);\n submitter.click();\n } else {\n submitter = document.createElement(\"input\");\n submitter.type = \"submit\";\n submitter.hidden = true;\n this.appendChild(submitter);\n submitter.click();\n this.removeChild(submitter);\n }\n };\n\n function validateSubmitter(submitter, form) {\n submitter instanceof HTMLElement || raise(TypeError, \"parameter 1 is not of type 'HTMLElement'\");\n submitter.type == \"submit\" || raise(TypeError, \"The specified element is not a submit button\");\n submitter.form == form ||\n raise(DOMException, \"The specified element is not owned by this form element\", \"NotFoundError\");\n }\n\n function raise(errorConstructor, message, name) {\n throw new errorConstructor(\"Failed to execute 'requestSubmit' on 'HTMLFormElement': \" + message + \".\", name)\n }\n})(HTMLFormElement.prototype);\n\nconst submittersByForm = new WeakMap();\n\nfunction findSubmitterFromClickTarget(target) {\n const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;\n const candidate = element ? element.closest(\"input, button\") : null;\n return candidate?.type == \"submit\" ? candidate : null\n}\n\nfunction clickCaptured(event) {\n const submitter = findSubmitterFromClickTarget(event.target);\n\n if (submitter && submitter.form) {\n submittersByForm.set(submitter.form, submitter);\n }\n}\n\n(function () {\n if (\"submitter\" in Event.prototype) return\n\n let prototype = window.Event.prototype;\n // Certain versions of Safari 15 have a bug where they won't\n // populate the submitter. This hurts TurboDrive's enable/disable detection.\n // See https://bugs.webkit.org/show_bug.cgi?id=229660\n if (\"SubmitEvent\" in window) {\n const prototypeOfSubmitEvent = window.SubmitEvent.prototype;\n\n if (/Apple Computer/.test(navigator.vendor) && !(\"submitter\" in prototypeOfSubmitEvent)) {\n prototype = prototypeOfSubmitEvent;\n } else {\n return // polyfill not needed\n }\n }\n\n addEventListener(\"click\", clickCaptured, true);\n\n Object.defineProperty(prototype, \"submitter\", {\n get() {\n if (this.type == \"submit\" && this.target instanceof HTMLFormElement) {\n return submittersByForm.get(this.target)\n }\n }\n });\n})();\n\nconst FrameLoadingStyle = {\n eager: \"eager\",\n lazy: \"lazy\"\n};\n\n/**\n * Contains a fragment of HTML which is updated based on navigation within\n * it (e.g. via links or form submissions).\n *\n * @customElement turbo-frame\n * @example\n *