{"version":3,"file":"js/page__shared_select-eb7b24644678f04634a2.chunk.js","mappings":"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","sources":["webpack://nodalview/./app/javascript/src/shared/select/select.js","webpack://nodalview/./app/javascript/src/shared/select/index.js"],"sourcesContent":["import Chevron from '../../../images/icons/chevron_left.svg'\n\n/**\n *\n * @param HTMLSelectElement select\n *\n * @constructor\n */\nexport class Select {\n  constructor({ select }) {\n    this.select = select;\n    this.options = Array.from(select.querySelectorAll('option'));\n    this.multi = ['', 'true'].includes(select.getAttribute('multiple'));\n  }\n\n  boot() {\n    this.buildSelect();\n    this.render();\n  }\n\n  handleClickOutside({ target }) {\n    const hasClickedOutside = !this.container.contains(target);\n\n    if (hasClickedOutside) {\n      this.closeList();\n    }\n  }\n\n  handleListToggle(event) {\n    event.preventDefault();\n\n    if (!this.isListOpen()) {\n      this.openList();\n    } else {\n      this.closeList();\n    }\n  }\n\n  handleListItemClick(event) {\n    event.preventDefault();\n    const option = event.target;\n    this.selectOption(option, true);\n    this.setSelectedText();\n\n    if(!this.multi) this.closeList();\n  }\n\n  handleSelectChange(event) {\n    const { value } = event.target\n    const option = this.options.find((opt) => opt.getAttribute('value') === value);\n\n    if (option) {\n      this.selectOption(option, false);\n    }\n  }\n\n  isListOpen () {\n    return this.container.classList.contains('open')\n  }\n\n  openList() {\n    if (!this.isListOpen()) {\n      this.container.classList.add('open');\n      setTimeout(() => document.addEventListener('click', this.handleClickOutside.bind(this)), 0);\n    }\n  }\n\n  closeList() {\n    this.container.classList.remove('open');\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  selectOption(listItem, withEventDispatcher = false) {\n    const selected = listItem.getAttribute('data-selected') !== null ?? false;\n    const index = this.listItems.indexOf(listItem);\n\n    if (index === -1) {\n      return;\n    }\n\n    const selectedOption = this.options[index];\n\n    if (this.multi) {\n      if (selected) {\n        selectedOption.removeAttribute('selected');\n      } else {\n        selectedOption.setAttribute('selected', 'selected');\n      }\n      listItem.toggleAttribute('data-selected', !selected);\n    }\n    else {\n      this.listItems.forEach(item => item.removeAttribute('data-selected'));\n      this.options.forEach(opt => opt.removeAttribute('selected'));\n      selectedOption.setAttribute('selected', 'selected');\n      listItem.setAttribute('data-selected', true);\n    }\n\n    withEventDispatcher && this.dispatchChangeEvent()\n  }\n\n  dispatchChangeEvent() {\n    if (document.createEventObject){\n      const event = document.createEventObject();\n      this.select.fireEvent('onchange', event)\n    }\n    else{\n      const event = document.createEvent(\"HTMLEvents\");\n      event.initEvent('change', true, true );\n      this.select.dispatchEvent(event);\n    }\n  }\n\n  setSelectedText() {\n    const count = this.options.filter(({ selected }) => selected).length;\n\n    if (!this.multi) {\n      this.selectedValue.innerText = this.options.find((option) => option.selected)?.innerText;\n    } else {\n      this.selectedValue.innerText = `${count} items`;\n    }\n  }\n\n  buildSelect() {\n    const containerElement = this.createElement('div', CLASSNAMES.container);\n    const [selectedElement, selectedValueElement] = this.buildSelected();\n    const [dropDownElement, dropDownItemElements] = this.buildDropdown();\n\n    containerElement.append(selectedElement, dropDownElement);\n    containerElement.classList.toggle(`${CLASSNAMES.container}--multiple`, this.multi)\n\n    this.container = containerElement\n    this.selectedTextElement = selectedElement\n    this.selectedValue = selectedValueElement\n    this.list = dropDownElement\n    this.listItems = dropDownItemElements\n  }\n\n  buildSelected() {\n    const element = this.createElement('div', CLASSNAMES.selected);\n    const icon = this.createElement('img', CLASSNAMES.chevron);\n    const value = this.createElement('span');\n\n    icon.src = Chevron\n    element.append(value, icon);\n\n    return [element, value];\n  }\n\n  buildOptions() {\n    const optionElements = this.options.map((option) => {\n      const element = this.createElement('li', CLASSNAMES.dropdownItem);\n      element.innerHTML = option.innerHTML;\n\n      if (option.selected) {\n        element.setAttribute('data-selected', true);\n      }\n      if(option.getAttribute('disabled')) {\n        element.setAttribute('disabled', true);\n      }\n\n      return element;\n    });\n\n    return optionElements;\n  }\n\n  buildDropdown() {\n    const element = this.createElement('ul', CLASSNAMES.dropdown);\n    const optionElements = this.buildOptions();\n    element.append(...optionElements);\n\n    return [element, optionElements];\n  }\n\n  createElement(tag, className) {\n    const element = document.createElement(tag);\n    if (className) {\n      element.classList.add(className);\n    }\n    return element;\n  }\n\n  render() {\n    this.select.style.display = 'none';\n    this.select.parentNode?.append(this.container);\n\n    this.setSelectedText();\n\n    this.select.addEventListener('change', this.handleSelectChange.bind(this))\n    this.selectedTextElement.addEventListener('click', this.handleListToggle.bind(this));\n    this.listItems.forEach((option) => option.addEventListener('click', this.handleListItemClick.bind(this)));\n  }\n}\n\nconst CLASSNAMES = {\n  container: 'c-select',\n  selected: 'c-select__selected',\n  chevron: 'c-select__selected__icon',\n  dropdown: 'c-select__dropdown',\n  dropdownItem: 'c-select__dropdown__item',\n};","import { Select } from './select';\n\n/**\n *\n * @param String selector\n */\nexport default class SelectList {\n  constructor({ selector }) {\n    this.selectCollection = Array.from(document.querySelectorAll(selector))\n      .filter(select => !select.classList.contains('applied'));\n  }\n\n  boot() {\n    this.selectCollection.forEach(this.initSelect.bind(this));\n  }\n\n  initSelect(select) {\n    const instance = new Select({ select })\n    instance.boot();\n    select.classList.add('applied')\n  }\n}"],"names":["Select","constructor","select","this","options","Array","from","querySelectorAll","multi","includes","getAttribute","boot","buildSelect","render","handleClickOutside","target","container","contains","closeList","handleListToggle","event","preventDefault","isListOpen","openList","handleListItemClick","option","selectOption","setSelectedText","handleSelectChange","value","find","opt","classList","add","setTimeout","document","addEventListener","bind","remove","removeEventListener","listItem","withEventDispatcher","selected","index","listItems","indexOf","selectedOption","removeAttribute","setAttribute","toggleAttribute","forEach","item","dispatchChangeEvent","createEventObject","fireEvent","createEvent","initEvent","dispatchEvent","count","filter","length","selectedValue","innerText","containerElement","createElement","CLASSNAMES","selectedElement","selectedValueElement","buildSelected","dropDownElement","dropDownItemElements","buildDropdown","append","toggle","selectedTextElement","list","element","icon","chevron","src","buildOptions","map","dropdownItem","innerHTML","dropdown","optionElements","tag","className","style","display","parentNode","SelectList","selector","selectCollection","initSelect"],"sourceRoot":""}