${error}
`);\n }\n });\n });\n});\n","import AutoCompleteJS from \"@tarekraafat/autocomplete.js\";\n\nexport default class AutoComplete {\n constructor(el, options = {}) {\n this.element = el;\n this.stickySelectedSpan = null;\n this.clearStickySelectionSpan = null;\n this.stickyHiddenInput = null;\n this.promptDiv = null;\n const thresholdTemp = options.threshold || 2;\n this.options = Object.assign({\n // Defines name of the hidden input (e.g. assembly_member[user_id])\n name: null,\n // Placeholder of the visible input field\n placeholder: \"\",\n // Defines what happens after user has selected value from suggestions\n // sticky - Allows selecting a single value and not editing the value after selected (e.g. as the admin autocomplete fields)\n // single - Allows selecting a single value and editing the selected text after the selection (e.g. geocoding field)\n // multi - Allows selecting multiple values\n // null (default) - Disable selection event handling in this class\n mode: null,\n // Defines if we show input help (e.g. \"Type at least three characters to search\") or not.\n searchPrompt: false,\n // Defines search prompt message, only shown if showPrompt is enabled!\n searchPromptText: `Type at least ${thresholdTemp} characters to search`,\n // Defines items that are selected already when page is loaded before user selects them. (e.g. when form submit fails)\n selected: null,\n // Defines how many characters input has to have before we start searching\n threshold: thresholdTemp,\n // Defines how many results to show in the autocomplete selection list\n // by maximum.\n maxResults: 10,\n // Defines the data keys against which to match the user input when\n // searching through the results. For example, when the following\n // data is returned by the API:\n // { id: 123, name: \"John\", nickname: \"john\", __typename: \"User\" }\n //\n // You can define the data keys array as [\"name\", \"nickname\"] in\n // which case the results shown to user would be only those that\n // have matching text in these defined fields.\n dataMatchKeys: null,\n // The data source is a method that gets the callback parameter as\n // its first argument which should be called with the results array\n // once they are returned by the API.\n // For example:\n // (query, callback) => {\n // (async () => {\n // const results = await callAjax(`/api/url?query=${query}`);\n // callback(results);\n // })();\n // }\n //\n // Signature: (callback: Function)\n dataSource: () => [],\n // Filters the data list returned by the data source before it is shown\n // to the user. Can be used e.g. to hide already selected values from\n // the list.\n dataFilter: null,\n // Delay in milliseconds how long to wait after user action before\n // doing a backend request.\n delay: 200,\n // Allows modifying the suggested items before they are displayed in the list\n // Signature: (element: HTMLElement, value: Object)\n modifyResult: null\n }, options);\n\n this.autocomplete = new AutoCompleteJS({\n selector: () => this.element,\n placeHolder: options.placeholder,\n // Delay (milliseconds) before autocomplete engine starts. It's preventing many queries when user is typing fast.\n debounce: 200,\n threshold: this.options.threshold,\n data: {\n keys: this.options.dataMatchKeys,\n src: async (query) => {\n const fetchResults = () => {\n return new Promise((resolve) => {\n this.options.dataSource(query, resolve);\n });\n }\n\n try {\n return await fetchResults();\n } catch (error) {\n return error;\n }\n },\n filter: (list) => {\n if (this.options.dataFilter) {\n return this.options.dataFilter(list);\n }\n\n return list;\n }\n },\n resultsList: {\n maxResults: this.options.maxResults\n },\n resultItem: {\n element: (item, data) => {\n if (!this.options.modifyResult) {\n return;\n }\n\n this.options.modifyResult(item, data.value);\n }\n },\n events: {\n input: {\n blur: () => {\n this.promptDiv.style.display = \"none\";\n }\n }\n }\n });\n\n this.acWrapper = this.element.closest(\".autoComplete_wrapper\");\n this.element.ac = this.autocomplete;\n\n // Stop input field from bubbling open and close events to parent elements,\n // because foundation closes modal from these events.\n const stopPropagation = (event) => {\n event.stopPropagation();\n }\n this.element.addEventListener(\"close\", stopPropagation);\n this.element.addEventListener(\"open\", stopPropagation);\n\n this.createPromptDiv();\n\n switch (this.options.mode) {\n case \"sticky\":\n this.createStickySelect(this.options.name);\n break;\n case \"multi\":\n this.createMultiSelect(this.options.name);\n break;\n default:\n }\n }\n\n setInput(value) {\n this.autocomplete.input.value = value;\n }\n\n handleEvent(event) {\n switch (this.options.mode) {\n case \"single\":\n this.setInput(event.detail.selection.value[event.detail.selection.key]);\n break;\n case \"sticky\":\n this.handleStickyEvents(event);\n break;\n case \"multi\":\n this.handleMultiEvents(event);\n break;\n default:\n }\n }\n\n handleMultiEvents(event) {\n switch (event.type) {\n case \"selection\":\n this.addMultiSelectItem(event.detail.selection);\n break;\n default:\n }\n }\n\n handleStickyEvents(event) {\n switch (event.type) {\n case \"selection\":\n this.addStickySelectItem(event.detail.selection);\n break;\n case \"click\":\n if (event.target === this.clearStickySelectionSpan) {\n this.removeStickySelection();\n }\n break;\n case \"keyup\":\n if (this.stickyHiddenInput.value !== \"\" && event.target === this.element && ([\"Escape\", \"Backspace\", \"Delete\"].includes(event.key) || (/^[a-z0-9]$/i).test(event.key))) {\n this.removeStickySelection();\n } else if (this.options.searchPrompt) {\n if (this.stickyHiddenInput.value === \"\" && this.element.value.length < this.options.threshold) {\n this.promptDiv.style.display = \"block\";\n } else {\n this.promptDiv.style.display = \"none\";\n }\n }\n break;\n default:\n }\n }\n\n createHiddenInput(value) {\n const hiddenInput = document.createElement(\"input\");\n hiddenInput.name = this.options.name;\n hiddenInput.type = \"hidden\";\n if (value) {\n hiddenInput.value = value;\n }\n this.acWrapper.prepend(hiddenInput);\n return hiddenInput;\n }\n\n removeStickySelection() {\n this.stickyHiddenInput.value = \"\";\n this.element.placeholder = this.options.placeholder;\n this.clearStickySelectionSpan.style.display = \"none\";\n this.stickySelectedSpan.style.display = \"none\";\n }\n\n addStickySelectItem(selection) {\n this.stickyHiddenInput.value = selection.value.value;\n this.element.placeholder = \"\";\n this.stickySelectedSpan.innerHTML = selection.value[selection.key];\n this.stickySelectedSpan.style.display = \"block\";\n this.clearStickySelectionSpan.style.display = \"block\";\n this.setInput(\"\");\n }\n\n addMultiSelectItem(selection) {\n this.setInput(\"\");\n const chosen = document.createElement(\"span\");\n chosen.classList.add(\"label\", \"primary\", \"autocomplete__selected-item\", \"multi\");\n chosen.innerHTML = selection.value[selection.key];\n const clearSelection = document.createElement(\"span\");\n clearSelection.classList.add(\"clear-multi-selection\");\n clearSelection.innerHTML = \"×\";\n clearSelection.setAttribute(\"data-remove\", selection.value.value);\n clearSelection.addEventListener(\"click\", (evt) => {\n const hiddenInput = this.acWrapper.querySelector(`input[type='hidden'][value='${selection.value.value}']`);\n if (hiddenInput) {\n hiddenInput.remove();\n evt.target.parentElement.remove();\n }\n });\n chosen.appendChild(clearSelection);\n\n const multiSelectWrapper = this.acWrapper.querySelector(\".multiselect\");\n const inputContainer = multiSelectWrapper.querySelector(\"span.input-container\");\n multiSelectWrapper.insertBefore(chosen, inputContainer);\n this.createHiddenInput(selection.value.value);\n }\n\n createStickySelect() {\n this.stickySelectedSpan = document.createElement(\"span\");\n this.stickySelectedSpan.classList.add(\"autocomplete__selected-item\", \"sticky\");\n this.stickySelectedSpan.style.display = \"none\";\n this.stickySelectedSpan.addEventListener(\"click\", () => this.element.focus());\n this.stickyHiddenInput = this.createHiddenInput();\n\n this.clearStickySelectionSpan = document.createElement(\"span\");\n this.clearStickySelectionSpan.className = \"clear-sticky-selection\";\n this.clearStickySelectionSpan.innerHTML = \"×\";\n this.clearStickySelectionSpan.style.display = \"none\";\n this.clearStickySelectionSpan.addEventListener(\"click\", this);\n\n this.element.addEventListener(\"selection\", this);\n this.element.addEventListener(\"keyup\", this);\n\n this.acWrapper.insertBefore(this.clearStickySelectionSpan, this.element);\n this.acWrapper.insertBefore(this.stickySelectedSpan, this.element);\n if (this.options.selected) {\n this.addStickySelectItem(this.options.selected);\n }\n }\n\n createMultiSelect() {\n const multiSelectWrapper = document.createElement(\"div\");\n multiSelectWrapper.classList.add(\"multiselect\");\n\n const inputContainer = document.createElement(\"span\");\n inputContainer.classList.add(\"input-container\");\n\n multiSelectWrapper.appendChild(inputContainer);\n this.acWrapper.prepend(multiSelectWrapper);\n inputContainer.appendChild(this.element);\n\n this.element.addEventListener(\"selection\", this);\n multiSelectWrapper.addEventListener(\"click\", () => {\n this.element.focus();\n })\n\n if (this.options.selected) {\n this.options.selected.forEach((selection) => {\n this.addMultiSelectItem(selection);\n })\n }\n }\n\n createPromptDiv() {\n this.promptDiv = document.createElement(\"div\");\n this.promptDiv.classList.add(\"search-prompt\");\n this.promptDiv.style.display = \"none\";\n this.promptDiv.innerHTML = this.options.searchPromptText;\n this.acWrapper.appendChild(this.promptDiv);\n }\n}\n","export default class DataPicker {\n constructor(pickers) {\n this.modal = this._createModalContainer();\n this.modal.appendTo($(\"body\"));\n this.current = null;\n\n pickers.each((_index, picker) => {\n this.activate(picker);\n });\n }\n\n activate(picker) {\n let $picker = $(picker);\n\n this._setCurrentPicker($picker, null);\n\n let input = \"hidden\",\n name = this.current.name,\n values = this.current.values;\n\n if (this.current.multiple) {\n name += \"[]\";\n }\n\n $(\"div\", values).each((_index2, div) => {\n let value = $(\"a\", div).data(\"picker-value\");\n $(div).prepend($(``));\n });\n\n $picker.on(\"click\", \"a\", (event) => {\n event.preventDefault();\n if ($picker.hasClass(\"disabled\")) {\n return;\n }\n const isMultiPicker = $picker.hasClass(\"picker-multiple\");\n\n if ($(this._targetFromEvent(event)).hasClass(\"picker-prompt\") || !isMultiPicker) {\n this._openPicker($picker, this._targetFromEvent(event));\n } else if (this._targetFromEvent(event).tagName === \"A\") {\n this._removeValue($picker, this._targetFromEvent(event).parentNode);\n } else {\n this._removeValue($picker, this._targetFromEvent(event));\n }\n });\n\n $picker.on(\"click\", \"input\", (event) => {\n this._removeValue($picker, this._targetFromEvent(event));\n });\n\n if (this.current.autosort) {\n this._sort();\n }\n }\n\n enabled(picker, value) {\n $(picker).toggleClass(\"disabled\", !value);\n $(\"input\", picker).attr(\"disabled\", !value);\n }\n\n clear(picker) {\n $(\".picker-values\", picker).html(\"\");\n }\n\n save(picker) {\n return $(\".picker-values div:has(input:checked)\", picker).map((_index, div) => {\n let $link = $(\"a\", div);\n return {\n value: $(\"input\", div).val(),\n text: $link.text(),\n url: $link.attr(\"href\")\n };\n }).get();\n }\n\n load(picker, savedData) {\n this._setCurrentPicker($(picker), null);\n $.each(savedData, (_index, data) => {\n this._choose(data, { interactive: false, modify: false });\n });\n if (this.current.autosort) {\n this._sort();\n }\n }\n\n _createModalContainer() {\n // Add a header because we are referencing the title element with\n // `aria-labelledby`. If the title doesn't exist, the \"labelled by\"\n // reference is incorrect.\n const headerHtml = '