{"version":3,"sources":["jsdelivr-header.js","/npm/@wizardhealth/stimulus-multiselect@1.0.0/src/multiselect.js"],"names":[],"mappings":"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","file":"/npm/@wizardhealth/stimulus-multiselect@1.0.0/src/multiselect.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/@wizardhealth/stimulus-multiselect@1.0.0/src/multiselect.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","const activeSelector = \"[aria-selected='true']\"\r\n\r\nimport { Controller } from \"@hotwired/stimulus\"\r\n\r\nexport default class Multiselect extends Controller {\r\n  static targets = [\"hidden\", \"list\", \"search\", \"preview\", \"dropdown\", \"item\", \"addable\", \"inputContainer\"]\r\n\r\n  static values = {\r\n    items: Array,\r\n    selected: Array,\r\n    searchUrl: String,\r\n    searchRemote: { type: Boolean, default: false },\r\n    preloadUrl: String,\r\n    addableUrl: String,\r\n    disabled: { type: Boolean, default: false }\r\n  }\r\n\r\n  connect() {\r\n    this.hiddenTarget.insertAdjacentHTML(\"afterend\", this.template)\r\n    if (this.selectedValue.length) this.selectedValueChanged()\r\n    this.search = debounce(this.search.bind(this), 300)\r\n    this.enhanceHiddenSelect()\r\n    if (this.preloadUrlValue) this.preload()\r\n  }\r\n\r\n  // Allows selecting the hidden select field from html and extracting selected id values:\r\n  // document.getElementById(\"selectId\").values - [2, 4, 23]\r\n  enhanceHiddenSelect() {\r\n    Object.defineProperty(this.hiddenTarget, \"values\", {\r\n      get: () => {\r\n        if (this.selectedValue.length <= 0) return []\r\n\r\n        return this.selectedValue.map(item => item.value)\r\n      }\r\n    })\r\n  }\r\n\r\n  search() {\r\n    if (this.searchRemoteValue) return this.searchRemote()\r\n\r\n    this.searchLocal()\r\n  }\r\n\r\n  async searchRemote() {\r\n    if (this.searchTarget.value === \"\") return\r\n\r\n    const response = await fetch(this.searchUrlValue + \"?\" + new URLSearchParams({\r\n      q: this.searchTarget.value,\r\n      preselects: this.selectedValue.map(x => x.value).join(\",\")\r\n    }))\r\n\r\n    const searchedItems = await response.json()\r\n\r\n    this.itemsValue = searchedItems\r\n    this.dropdownTarget.classList.add(\"multiselect__dropdown--open\")\r\n  }\r\n\r\n  searchLocal() {\r\n    this.dropdownTarget.classList.add(\"multiselect__dropdown--open\")\r\n    if (this.searchTarget.value === \"\") {\r\n      let theRestOfTheItems = this.itemsValue.filter(x => !this.selectedValue.map(y => y.value).includes(x.value))\r\n      this.listTarget.innerHTML = this.selectedItems\r\n      this.listTarget.insertAdjacentHTML(\"beforeend\", this.items(theRestOfTheItems))\r\n    }\r\n\r\n    let searched = this.itemsValue.filter(item => {\r\n      return item.text.toLowerCase().includes(this.searchTarget.value.toLowerCase())\r\n    })\r\n\r\n    let selectedSearched = this.selectedValue.filter(item => {\r\n      return item.text.toLowerCase().includes(this.searchTarget.value.toLowerCase())\r\n    })\r\n\r\n    searched = searched.filter(x => !selectedSearched.map(y => y.value).includes(x.value))\r\n\r\n    if (searched.length === 0 && this.addableUrlValue) {\r\n      return this.listTarget.innerHTML = this.noResultsTemplate\r\n    }\r\n\r\n    if (searched.length === 0) this.dropdownTarget.classList.remove(\"multiselect__dropdown--open\")\r\n    this.listTarget.innerHTML = this.items(selectedSearched, true)\r\n    this.listTarget.insertAdjacentHTML(\"beforeend\", this.items(searched))\r\n  }\r\n\r\n  async preload() {\r\n    const response = await fetch(this.preloadUrlValue)\r\n\r\n    const items = await response.json()\r\n    this.itemsValue = items\r\n  }\r\n\r\n  toggleDropdown() {\r\n    if (this.dropdownTarget.classList.contains(\"multiselect__dropdown--open\")) {\r\n      this.dropdownTarget.classList.remove(\"multiselect__dropdown--open\")\r\n      if (this.selectedValue.length > 0) this.inputContainerTarget.style.display = \"none\"\r\n      this.searchTarget.blur()\r\n    } else {\r\n      if (this.itemsValue.length) this.dropdownTarget.classList.add(\"multiselect__dropdown--open\")\r\n      this.searchTarget.focus()\r\n    }\r\n  }\r\n\r\n  closeOnClickOutside({ target }) {\r\n    if (this.element.contains(target)) return\r\n\r\n    this.dropdownTarget.classList.remove(\"multiselect__dropdown--open\")\r\n    if (this.selectedValue.length > 0) this.inputContainerTarget.style.display = \"none\"\r\n    this.searchTarget.value = \"\"\r\n    if (!this.searchRemoteValue) {\r\n      this.listTarget.innerHTML = this.allItems\r\n      this.selectedValue.forEach(selected => {\r\n        this.checkItem(selected.value)\r\n      })\r\n    }\r\n  }\r\n\r\n  searchUrlValueChanged() {\r\n    if (this.searchUrlValue) this.searchRemoteValue = true\r\n  }\r\n\r\n  itemsValueChanged() {\r\n    if (!this.hasListTarget) return\r\n\r\n    if (this.itemsValue.length) {\r\n      this.listTarget.innerHTML = this.items(this.itemsValue)\r\n    } else {\r\n      this.listTarget.innerHTML = this.noResultsTemplate\r\n    }\r\n  }\r\n\r\n  selectedValueChanged() {\r\n    if (!this.hasPreviewTarget) return\r\n\r\n    while (this.hiddenTarget.options.length) this.hiddenTarget.remove(0)\r\n\r\n    if (this.selectedValue.length > 0) {\r\n      this.previewTarget.innerHTML = this.pills\r\n      this.searchTarget.style.paddingTop = \"0.5rem\"\r\n\r\n      this.selectedValue.forEach(selected => {\r\n        const option = document.createElement(\"option\")\r\n        option.text = selected.text\r\n        option.value = selected.value\r\n        option.setAttribute(\"selected\", true)\r\n        this.hiddenTarget.add(option)\r\n      })\r\n\r\n      if (!this.searchRemoteValue) {\r\n        this.selectedValue.forEach(selected => {\r\n          this.checkItem(selected.value)\r\n        })\r\n      }\r\n    } else {\r\n      this.searchTarget.style.paddingTop = \"0\"\r\n      this.inputContainerTarget.style.display = \"\"\r\n      this.previewTarget.innerHTML = \"\"\r\n    }\r\n\r\n    this.element.dispatchEvent(new Event(\"multiselect-change\"))\r\n  }\r\n\r\n  removeItem(e) {\r\n    e.stopPropagation()\r\n\r\n    const itemToRemove = e.currentTarget.parentNode\r\n\r\n    this.selectedValue = this.selectedValue.filter(x => x.value.toString() !== itemToRemove.dataset.value)\r\n    this.uncheckItem(itemToRemove.dataset.value)\r\n    this.element.dispatchEvent(new CustomEvent(\"multiselect-removed\", { detail: { id: itemToRemove.dataset.value } }))\r\n  }\r\n\r\n  uncheckItem(value) {\r\n    const itemToUncheck = this.listTarget.querySelector(`input[data-value=\"${value}\"]`)\r\n\r\n    if (itemToUncheck) itemToUncheck.checked = false\r\n  }\r\n\r\n  checkItem(value) {\r\n    const itemToCheck = this.listTarget.querySelector(`input[data-value=\"${value}\"]`)\r\n\r\n    if (itemToCheck) itemToCheck.checked = true\r\n  }\r\n\r\n  toggleItem(input) {\r\n    const item = {\r\n      text: input.dataset.text,\r\n      value: input.dataset.value\r\n    }\r\n    let newSelectedArray = this.selectedValue\r\n\r\n    if (input.checked) {\r\n      newSelectedArray.push(item)\r\n\r\n      if (this.focusedItem) {\r\n        this.focusedItem.closest(\"li\").classList.remove(\"multiselect__focused\")\r\n        this.focusedItem.removeAttribute(\"aria-selected\")\r\n      }\r\n\r\n      input.setAttribute(\"aria-selected\", \"true\")\r\n      input.closest(\"li\").classList.add(\"multiselect__focused\")\r\n      this.element.dispatchEvent(new CustomEvent(\"multiselect-added\", { detail: { item: item } }))\r\n    } else {\r\n      newSelectedArray = newSelectedArray.filter(selected => selected.value.toString() !== item.value)\r\n      this.element.dispatchEvent(new CustomEvent(\"multiselect-removed\", { detail: { id: item.value } }))\r\n    }\r\n\r\n    this.selectedValue = newSelectedArray\r\n  }\r\n\r\n  onKeyDown(e) {\r\n    const handler = this[`on${e.key}Keydown`]\r\n    if (handler) handler(e)\r\n  }\r\n\r\n  onArrowDownKeydown = (event) => {\r\n    const item = this.sibling(true)\r\n    if (item) this.navigate(item)\r\n    event.preventDefault()\r\n  }\r\n\r\n  onArrowUpKeydown = (event) => {\r\n    const item = this.sibling(false)\r\n    if (item) this.navigate(item)\r\n    event.preventDefault()\r\n  }\r\n\r\n  onBackspaceKeydown = () => {\r\n    if (this.searchTarget.value !== \"\") return\r\n    if (!this.selectedValue.length) return\r\n\r\n    const selected = this.selectedValue\r\n    const value = selected.pop().value\r\n\r\n    this.uncheckItem(value)\r\n    this.selectedValue = selected\r\n    this.element.dispatchEvent(new CustomEvent(\"multiselect-removed\", { detail: { id: value } }))\r\n  }\r\n\r\n  onEnterKeydown = (e) => {\r\n    if (this.focusedItem) this.focusedItem.click()\r\n  }\r\n\r\n  onEscapeKeydown = () => {\r\n    if (this.searchTarget.value !== \"\") {\r\n      this.searchTarget.value = \"\"\r\n      return this.search()\r\n    }\r\n\r\n    this.toggleDropdown()\r\n  }\r\n\r\n  sibling(next) {\r\n    const options = this.itemTargets\r\n    const selected = this.focusedItem\r\n    const index = options.indexOf(selected)\r\n    const sibling = next ? options[index + 1] : options[index - 1]\r\n    const def = next ? options[0] : options[options.length - 1]\r\n    return sibling || def\r\n  }\r\n\r\n  async addable(e) {\r\n    e.preventDefault()\r\n    const query = this.searchTarget.value\r\n\r\n    if (query === \"\" || this.itemsValue.some(item => item.text === query)) return\r\n\r\n    const response = await fetch(this.addableUrlValue, {\r\n      method: \"POST\",\r\n      body: JSON.stringify({ addable: query })\r\n    })\r\n    if (response.ok) {\r\n      const addedItem = await response.json()\r\n\r\n      this.addAddableItem(addedItem)\r\n    }\r\n  }\r\n\r\n  addAddableItem(addedItem) {\r\n    this.itemsValue = this.itemsValue.concat(addedItem)\r\n    this.selectedValue = this.selectedValue.concat(addedItem)\r\n    this.searchTarget.value = \"\"\r\n    this.element.dispatchEvent(new CustomEvent(\"multiselect-added\", { detail: { item: addedItem } }))\r\n  }\r\n\r\n  navigate(target) {\r\n    const previouslySelected = this.focusedItem\r\n    if (previouslySelected) {\r\n      previouslySelected.removeAttribute(\"aria-selected\")\r\n      previouslySelected.closest(\"li\").classList.remove(\"multiselect__focused\")\r\n    }\r\n\r\n    target.setAttribute(\"aria-selected\", \"true\")\r\n    target.closest(\"li\").classList.add(\"multiselect__focused\")\r\n    target.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" })\r\n  }\r\n\r\n  get focusedItem() {\r\n    return this.listTarget.querySelector(activeSelector)\r\n  }\r\n\r\n  focusSearch() {\r\n    this.inputContainerTarget.style.display = \"\"\r\n    this.searchTarget.focus()\r\n  }\r\n\r\n  addableEvent() {\r\n    document.dispatchEvent(new CustomEvent(\"multiselect-addable\"))\r\n  }\r\n\r\n  get template() {\r\n    return `\r\n      <div class=\"multiselect__container\" data-multiselect-target=\"container\" data-action=\"click->multiselect#toggleDropdown focus->multiselect#focusSearch\" tabindex=\"0\" data-turbo-cache=\"false\">\r\n        <div class=\"multiselect__preview\" data-multiselect-target=\"preview\">\r\n        </div>\r\n        <div class=\"multiselect__input-container\" data-multiselect-target=\"inputContainer\">${this.inputTemplate}</div>\r\n      </div>\r\n      <div style=\"position: relative;\" data-action=\"click@window->multiselect#closeOnClickOutside\">\r\n        <div class=\"multiselect__dropdown\" data-multiselect-target=\"dropdown\">\r\n          <ul class=\"multiselect__list\" data-multiselect-target=\"list\">\r\n            ${this.allItems}\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    `\r\n  }\r\n\r\n  get noResultsTemplate() {\r\n    if (!this.addableUrlValue) return `<div class=\"multiselect__no-result\">${this.element.dataset.noResultsMessage}</div>`\r\n    return `\r\n      <div class=\"multiselect__no-result\">\r\n        <span class=\"multiselect__addable-button\" data-action=\"click->multiselect#addableEvent\">\r\n          ${this.element.dataset.addablePlaceholder}\r\n        </span>\r\n      </div>\r\n    `\r\n  }\r\n\r\n  get inputTemplate() {\r\n      return `\r\n        <input type=\"text\" class=\"multiselect__search\" placeholder=\"${this.element.dataset.placeholder}\"\r\n               data-multiselect-target=\"search\" ${this.disabledValue === true ? 'disabled' : ''}\r\n               data-action=\"multiselect#search keydown->multiselect#onKeyDown\">\r\n      `\r\n  }\r\n\r\n  items(items, selected = false) {\r\n    const checked = selected ? \"checked\" : \"\"\r\n    let itemsTemplate = \"\"\r\n\r\n    items.forEach(item => itemsTemplate += this.itemTemplate(item, checked))\r\n\r\n    return itemsTemplate\r\n  }\r\n\r\n  get pills() {\r\n    let itemsTemplate = \"\"\r\n\r\n    this.selectedValue.forEach(item => itemsTemplate += this.pillTemplate(item))\r\n\r\n    return itemsTemplate\r\n  }\r\n\r\n  get selectedItems() {\r\n    return this.items(this.selectedValue, true)\r\n  }\r\n\r\n  get allItems() {\r\n    return this.items(this.itemsValue)\r\n  }\r\n\r\n  itemTemplate(item, selected = \"\") {\r\n    return `\r\n      <li>\r\n        <label>\r\n          <input type=\"checkbox\" ${ selected } data-value=\"${item.value}\" data-text=\"${item.text}\"\r\n          data-action=\"multiselect#checkBoxChange\" data-multiselect-target=\"item\" tabindex=\"-1\">\r\n          <span>${item.text}</span>\r\n        </label>\r\n      </li>\r\n    `\r\n  }\r\n\r\n  checkBoxChange(event) {\r\n    event.preventDefault()\r\n    this.searchTarget.focus()\r\n    this.toggleItem(event.currentTarget)\r\n  }\r\n\r\n  pillTemplate(item) {\r\n    if (this.disabledValue) {\r\n      return `<div class=\"multiselect__pill\" data-value=\"${item.value}\" title=\"${item.text}\">\r\n        <span class=\"multiselect__pill-text\">${item.text}</span>\r\n      </div>`\r\n    } else {\r\n      return `<div class=\"multiselect__pill\" data-value=\"${item.value}\" title=\"${item.text}\">\r\n        <span class=\"multiselect__pill-text\">${item.text}</span>\r\n        <span class=\"multiselect__pill-delete\" data-action=\"click->multiselect#removeItem\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" width=\"12px\" height=\"12px\">\r\n            <path d=\"M25.707,6.293c-0.195-0.195-1.805-1.805-2-2c-0.391-0.391-1.024-0.391-1.414,0c-0.195,0.195-17.805,17.805-18,18c-0.391,0.391-0.391,1.024,0,1.414c0.279,0.279,1.721,1.721,2,2c0.391,0.391,1.024,0.391,1.414,0c0.195-0.195,17.805-17.805,18-18C26.098,7.317,26.098,6.683,25.707,6.293z\"/>\r\n            <path d=\"M23.707,25.707c0.195-0.195,1.805-1.805,2-2c0.391-0.391,0.391-1.024,0-1.414c-0.195-0.195-17.805-17.805-18-18c-0.391-0.391-1.024-0.391-1.414,0c-0.279,0.279-1.721,1.721-2,2c-0.391,0.391-0.391,1.024,0,1.414c0.195,0.195,17.805,17.805,18,18C22.683,26.098,23.317,26.098,23.707,25.707z\"/>\r\n          </svg>\r\n        </span>\r\n      </div>`\r\n    }\r\n  }\r\n}\r\n\r\nfunction debounce(fn, delay) {\r\n  let timeoutId = null\r\n\r\n  return (...args) => {\r\n    const callback = () => fn.apply(this, args)\r\n    clearTimeout(timeoutId)\r\n    timeoutId = setTimeout(callback, delay)\r\n  }\r\n}\r\n\r\nexport { Multiselect }"]}