solid-ui 3.1.3-9 → 5.0.0-0

package/dist/widgets/multiSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiSelect.cjs.js","names":["style"],"sources":["../../src/widgets/multiSelect.js"],"sourcesContent":["/*\n * IconicMultiSelect v0.7.0\n * Licence:  MIT\n * (c) 2021 Sidney Wimart.\n * repo & configuration: https://github.com/sidneywm/iconic-multiselect\n */\n\n/**\n * @version IconicMultiSelect v0.7.0\n * @licence  MIT\n */\nimport { style } from '../lib/style_multiSelect'\n\nexport class IconicMultiSelect {\n  _data\n  _domElements\n  _event = () => {}\n  _itemTemplate\n  _multiselect\n  _noData\n  _noResults\n  _options = []\n  _placeholder\n  _select\n  _selectContainer\n  _selectedOptions = []\n  _tagTemplate\n  _textField\n  _valueField\n  _cross = `\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    `\n\n  /**\n   * Iconic Multiselect constructor.\n   * @param { Object[] } data - Array of objects.\n   * @param { string } noData - Defines the message when there is no data input.\n   * @param { string } noResults - Defines the message when there is no result if options are filtered.\n   * @param { string } placeholder -  Defines the placeholder's text.\n   * @param { string } select - DOM element to be selected. It must be a HTML Select tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n   * @param { string } textField - Field to select in the object for the text.\n   * @param { string } valueField - Field to select in the object for the value.\n   */\n  constructor ({ data, itemTemplate, noData, noResults, placeholder, select, container, tagTemplate, textField, valueField }) {\n    this._data = data ?? []\n    this._itemTemplate = itemTemplate ?? null\n    this._noData = noData ?? 'No data found.'\n    this._noResults = noResults ?? 'No results found.'\n    this._placeholder = placeholder ?? 'Select...'\n    this._select = select\n    // Timea added a container here\n    this._selectContainer = container\n    this._tagTemplate = tagTemplate ?? null\n    this._textField = textField ?? null\n    this._valueField = valueField ?? null\n  }\n\n  /**\n   * Initialize the Iconic Multiselect component.\n   * @public\n   */\n  init () {\n    // Timea change to use this._select instead of this._selectContainer\n    if (this._select && this._select.nodeName === 'SELECT') {\n      if (this._itemTemplate && this._data.length === 0) { throw new Error('itemTemplate must be initialized with data from the component settings') }\n      if (this._tagTemplate && this._data.length === 0) { throw new Error('tagTemplate must be initialized with data from the component settings') }\n\n      this._options = this._data.length > 0 ? this._getDataFromSettings() : this._getDataFromSelectTag()\n\n      this._renderMultiselect()\n      this._renderOptionsList()\n\n      this._domElements = {\n        clear: this._multiselect.querySelector('.multiselect__clear-btn'),\n        input: this._multiselect.querySelector('.multiselect__input'),\n        optionsContainer: this._multiselect.querySelector('.multiselect__options'),\n        optionsContainerList: this._multiselect.querySelector('.multiselect__options > ul'),\n        options: {\n          list: this._multiselect.querySelectorAll('.multiselect__options > ul > li'),\n          find: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node)) return node\n            }\n            return undefined\n          },\n          some: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node, i)) return true\n            }\n            return false\n          }\n        }\n      }\n\n      this._enableEventListenners()\n      this._initSelectedList()\n    } else {\n      throw new Error(`The selector '${this._select}' did not select any valid select tag.`)\n    }\n  }\n\n  /**\n   * Subscribes to the emitted events.\n   * @param { Function } callback - Callback function which emits a custom event object.\n   * @public\n   */\n  subscribe (callback) {\n    if (typeof callback === 'function') {\n      this._event = callback\n    } else {\n      throw new Error('parameter in the subscribe method is not a function')\n    }\n  }\n\n  /**\n   * Add an option to the selection list.\n   * @param { Object: { text: string; value: string; }} option\n   * @private\n   */\n  _addOptionToList (option, index) {\n    const html = `<span class=\"multiselect__selected\" style=\"${style.multiselect__selected}\" data-value=\"${option.value}\">${\n      this._tagTemplate ? this._processTemplate(this._tagTemplate, index) : option.text\n    }<span class=\"multiselect__remove-btn\" style=\"${style.multiselect__remove_btn}\">${this._cross}</span></span>`\n\n    this._domElements.input.insertAdjacentHTML('beforebegin', html)\n\n    const { lastElementChild: removeBtn } = this._multiselect.querySelector(`span[data-value=\"${option.value}\"]`)\n    removeBtn.addEventListener('click', () => {\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      this._handleOption(target)\n    })\n  }\n\n  /**\n   * Clears all selected options.\n   * @private\n   */\n  _clearSelection () {\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const option = this._selectedOptions[i]\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      target.classList.remove('multiselect__options--selected')\n      target.setAttribute('style', style.multiselect__options)\n      this._removeOptionFromList(target.dataset.value)\n    }\n    this._selectedOptions = []\n    this._handleClearSelectionBtn()\n    this._handlePlaceholder()\n    this._dispatchEvent({\n      action: 'CLEAR_ALL_OPTIONS',\n      selection: this._selectedOptions\n    })\n  }\n\n  /**\n   * Close the options container.\n   * @private\n   */\n  _closeList () {\n    this._domElements.input.value = ''\n    this._domElements.optionsContainer.classList.remove('visible')\n    this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n    this._filterOptions('')\n    this._removeAllArrowSelected()\n  }\n\n  /**\n   * Dispatches new events.\n   * @param { object : { action: string; selection: { option: string; text: string; }[]; value?: string; } } event\n   * @private\n   */\n  _dispatchEvent (event) {\n    this._event(event)\n  }\n\n  /**\n   * Enables all main event listenners.\n   * @private\n   */\n  _enableEventListenners () {\n    document.addEventListener('mouseup', ({ target }) => {\n      if (!this._multiselect.contains(target)) {\n        this._filterOptions('')\n        this._closeList()\n        this._handlePlaceholder()\n      }\n    })\n\n    this._domElements.clear.addEventListener('click', () => {\n      this._clearSelection()\n    })\n\n    for (let i = 0; i < this._domElements.options.list.length; i++) {\n      const option = this._domElements.options.list[i]\n      option.addEventListener('click', ({ target }) => {\n        this._handleOption(target)\n        this._closeList()\n      })\n    }\n\n    this._domElements.input.addEventListener('focus', () => {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    })\n\n    this._domElements.input.addEventListener('input', ({ target: { value } }) => {\n      if (this._domElements.options.list.length > 0) {\n        this._filterOptions(value)\n      }\n    })\n\n    this._domElements.input.addEventListener('keydown', (e) => {\n      this._handleArrows(e)\n      this._handleBackspace(e)\n      this._handleEnter(e)\n    })\n  }\n\n  /**\n   * Filters user input.\n   * @param { string } value\n   * @private\n   */\n  _filterOptions (value) {\n    const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n    const valueLowerCase = value.toLowerCase()\n\n    if (!isOpen && value.length > 0) {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    }\n\n    if (this._domElements.options.list.length > 0) {\n      for (let i = 0; i < this._domElements.options.list.length; i++) {\n        const el = this._domElements.options.list[i]\n        const text = this._itemTemplate ? this._data[i][this._textField] : el.textContent\n\n        if (text.toLowerCase().substring(0, valueLowerCase.length) === valueLowerCase) {\n          this._domElements.optionsContainerList.appendChild(el)\n        } else {\n          el.parentNode && el.parentNode.removeChild(el)\n        }\n      }\n\n      const hasResults = this._domElements.options.some(\n        (el, index) =>\n          (this._itemTemplate ? this._data[index][this._textField] : el.textContent)\n            .toLowerCase()\n            .substring(0, valueLowerCase.length) === valueLowerCase\n      )\n      this._showNoResults(!hasResults)\n    }\n  }\n\n  _generateId (length) {\n    let result = ''\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'\n    const charactersLength = characters.length\n    for (let i = 0; i < length; i++) {\n      result += characters.charAt(Math.floor(Math.random() * charactersLength))\n    }\n    return result\n  }\n\n  /**\n   * Gets data from select tag.\n   * @private\n   */\n  _getDataFromSelectTag () {\n    const arr = []\n    const { options } = this._select\n    for (let i = 0; i < options.length; i++) {\n      const item = options[i]\n      arr.push({\n        text: item.text,\n        value: item.value,\n        selected: item.hasAttribute('selected')\n      })\n    }\n    return arr\n  }\n\n  /**\n   * Gets data from settings.\n   * @private\n   */\n  _getDataFromSettings () {\n    if (this._data.length > 0 && this._valueField && this._textField) {\n      const isValueFieldValid = typeof this._valueField === 'string'\n      const isTextFieldValid = typeof this._textField === 'string'\n      const arr = []\n\n      if (!isValueFieldValid || !isTextFieldValid) {\n        throw new Error('textField and valueField must be of type string')\n      }\n\n      for (let i = 0; i < this._data.length; i++) {\n        const item = this._data[i]\n        arr.push({\n          value: item[this._valueField],\n          text: item[this._textField],\n          selected: typeof item.selected === 'boolean' ? item.selected : false\n        })\n      }\n      return arr\n    } else {\n      return null\n    }\n  }\n\n  /**\n   * Handles Arrow up & Down. Selection of an option is also possible with these keys.\n   * @param { Event } event\n   * @private\n   */\n  _handleArrows (event) {\n    if (event.keyCode === 40 || event.keyCode === 38) {\n      event.preventDefault()\n      const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n      // An updated view of the container is needed because of the filtering option\n      const optionsContainerList = this._multiselect.querySelector('.multiselect__options > ul')\n\n      if (!isOpen) {\n        this._domElements.optionsContainer.classList.add('visible')\n        this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n        optionsContainerList.firstElementChild.classList.add('arrow-selected')\n        optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        optionsContainerList.firstElementChild.scrollIntoView(false)\n      } else {\n        let selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n        const action = {\n          ArrowUp: 'previous',\n          Up: 'previous',\n          ArrowDown: 'next',\n          Down: 'next'\n        }\n\n        if (!selected) {\n          optionsContainerList.firstElementChild.classList.add('arrow-selected')\n          optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          optionsContainerList.firstElementChild.scrollIntoView(false)\n          return\n        }\n\n        selected.classList.remove('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li)\n\n        selected = selected[action[event.key] + 'ElementSibling']\n\n        // Go to start or end of the popup list\n        if (!selected) {\n          selected =\n          optionsContainerList.children[action[event.key] === 'next' ? 0 : optionsContainerList.children.length - 1]\n          selected.classList.add('arrow-selected')\n          selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          this._scrollIntoView(optionsContainerList, selected)\n          return\n        }\n\n        selected.classList.add('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        this._scrollIntoView(optionsContainerList, selected)\n      }\n    }\n  }\n\n  /**\n   * Handles the backspace key event - Deletes the preceding option in the selection list.\n   * @param { Event } e\n   * @private\n   */\n  _handleBackspace (e) {\n    if (e.keyCode === 8 && e.target.value === '') {\n      const lastSelectedOption =\n        this._selectedOptions.length > 0 ? this._selectedOptions[this._selectedOptions.length - 1] : null\n\n      if (lastSelectedOption) {\n        const targetLastSelectedOption = this._multiselect.querySelector(\n          `li[data-value=\"${lastSelectedOption.value}\"]`\n        )\n        this._handleOption(targetLastSelectedOption)\n\n        if (this._selectedOptions.length === 0) {\n          this._domElements.optionsContainer.classList.remove('visible')\n          this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n        }\n      }\n    }\n  }\n\n  /**\n   * Shows clear selection button if some options are selected.\n   * @private\n   */\n  _handleClearSelectionBtn () {\n    if (this._selectedOptions.length > 0) {\n      this._domElements.clear.style.display = 'flex'\n    } else {\n      this._domElements.clear.style.display = 'none'\n    }\n  }\n\n  /**\n   * Handles the enter key event.\n   * @param { Event } event\n   * @private\n   */\n  _handleEnter (event) {\n    if (event.keyCode === 13) {\n      const selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n      if (selected) {\n        this._handleOption(selected)\n        this._closeList()\n      }\n    }\n  }\n\n  _handleOption (target, dispatchEvent = true) {\n    // Remove\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const el = this._selectedOptions[i]\n      if (el.value === target.dataset.value) {\n        target.classList.remove('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options)\n        this._selectedOptions.splice(i, 1)\n        this._removeOptionFromList(target.dataset.value)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'REMOVE_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n\n    // Add\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.value === target.dataset.value) {\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'ADD_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n  }\n\n  /**\n   * Shows the placeholder if no options are selected.\n   * @private\n   */\n  _handlePlaceholder () {\n    this._domElements.input.placeholder = this._placeholder\n  }\n\n  _initSelectedList () {\n    let hasItemsSelected = false\n\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.selected) {\n        hasItemsSelected = true\n        const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n      }\n    }\n\n    if (hasItemsSelected) { this._handleClearSelectionBtn() }\n    this._handlePlaceholder()\n  }\n\n  /**\n   * Process the custom template.\n   * @param { string } template\n   * @private\n   */\n  _processTemplate (template, index) {\n    let processedTemplate = template\n    const objAttr = template.match(/\\$\\{(\\w+)\\}/g).map((e) => e.replace(/\\$\\{|\\}/g, ''))\n\n    for (let i = 0; i < objAttr.length; i++) {\n      const attr = objAttr[i]\n      // eslint-disable-next-line no-useless-escape\n      processedTemplate = processedTemplate.replace(`\\$\\{${attr}\\}`, this._data[index][attr] ?? '')\n    }\n\n    return processedTemplate\n  }\n\n  _removeAllArrowSelected () {\n    const className = 'arrow-selected'\n    const target = this._domElements.options.find((el) => el.classList.contains(className))\n    target && target.classList.remove(className) && target.setAttribute('style', style.multiselect__options_ul_li)\n  }\n\n  /**\n   * Removes an option from the list.\n   * @param { string } value\n   * @private\n   */\n  _removeOptionFromList (value) {\n    const optionDom = this._multiselect.querySelector(`span[data-value=\"${value}\"]`)\n    optionDom && optionDom.parentNode && optionDom.parentNode.removeChild(optionDom)\n  }\n\n  /**\n   * Renders the multiselect options list view.\n   * @private\n   */\n  _renderOptionsList () {\n    const html = `\n        <div class=\"multiselect__options\" style=\"${style.multiselect__options}\">\n          <ul style=\"${style.multiselect__options_ul}\">\n          ${\n            this._options.length > 0 && !this._itemTemplate\n              ? this._options\n                  .map((option) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${option.text}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n\n          ${\n            this._options.length > 0 && this._itemTemplate\n              ? this._options\n                  .map((option, index) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${this._processTemplate(this._itemTemplate, index)}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n          ${this._showNoData(this._options.length === 0)}\n          </ul>\n        </div>\n      `\n\n    this._multiselect.insertAdjacentHTML('beforeend', html)\n  }\n\n  /**\n   * Renders the multiselect view.\n   * @private\n   */\n  _renderMultiselect () {\n    this._select.style.display = 'none'\n    const id = 'iconic-' + this._generateId(20)\n    // Timea created dedicated div element because previous code was not rendering\n    this._multiselect = document.createElement('div')\n    this._multiselect.setAttribute('id', id)\n    this._multiselect.setAttribute('class', 'multiselect__container')\n    this._multiselect.setAttribute('style', style.multiselect__container)\n    const html = `\n        <div class=\"multiselect__wrapper\" style=\"${style.multiselect__wrapper}\">\n          <input class=\"multiselect__input\" style=\"${style.multiselect__input}\" placeholder=\"${this._placeholder}\" />\n        </div>\n        <span style=\"display: none;\" class=\"multiselect__clear-btn\" style=\"${style.multiselect__clear_btn}\">${this._cross}</span>\n    `\n    this._multiselect.innerHTML = html\n    this._selectContainer.appendChild(this._multiselect)\n  }\n\n  /**\n   * ScrollIntoView - This small utility reproduces the behavior of .scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n   * This is for IE compatibility without a need of a polyfill\n   * @private\n   */\n  _scrollIntoView (parent, child) {\n    const rectParent = parent.getBoundingClientRect()\n    const rectChild = child.getBoundingClientRect()\n\n    // Detect if not visible at top and then scroll to the top\n    if (!(rectParent.top < rectChild.bottom - child.offsetHeight)) {\n      parent.scrollTop = child.clientHeight + (child.offsetTop - child.offsetHeight)\n    }\n\n    // Detect if not visible at bottom and then scroll to the bottom\n    if (!(rectParent.bottom > rectChild.top + child.offsetHeight)) {\n      parent.scrollTop =\n        child.clientHeight +\n        (child.offsetTop - child.offsetHeight) -\n        (parent.offsetHeight - (child.offsetHeight + (child.offsetHeight - child.clientHeight)))\n    }\n  }\n\n  /**\n   * Shows a no data message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoData (condition) {\n    return condition ? `<p class=\"multiselect__options--no-data\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_data}\">${this._noData}</p>` : ''\n  }\n\n  /**\n   * Shows a no results message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoResults (condition) {\n    const dom = this._multiselect.querySelector('.multiselect__options--no-results')\n    if (condition) {\n      const html = `<p class=\"multiselect__options--no-results\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_results}\">${this._noResults}</p>`\n      !dom && this._domElements.optionsContainerList.insertAdjacentHTML('beforeend', html)\n    } else {\n      dom && dom.parentNode && dom.parentNode.removeChild(dom)\n    }\n  }\n}\n"],"mappings":"mDAaA,IAAa,EAAb,KAA+B,CAC7B,MACA,aACA,WAAe,CAAC,EAChB,cACA,aACA,QACA,WACA,SAAW,CAAC,EACZ,aACA,QACA,iBACA,iBAAmB,CAAC,EACpB,aACA,WACA,YACA,OAAS;;;;;;;;;;;;;MAyBT,YAAa,CAAE,OAAM,eAAc,SAAQ,YAAW,cAAa,SAAQ,YAAW,cAAa,YAAW,cAAc,CAC1H,KAAK,MAAQ,GAAQ,CAAC,EACtB,KAAK,cAAgB,GAAgB,KACrC,KAAK,QAAU,GAAU,iBACzB,KAAK,WAAa,GAAa,oBAC/B,KAAK,aAAe,GAAe,YACnC,KAAK,QAAU,EAEf,KAAK,iBAAmB,EACxB,KAAK,aAAe,GAAe,KACnC,KAAK,WAAa,GAAa,KAC/B,KAAK,YAAc,GAAc,IACnC,CAMA,MAAQ,CAEN,GAAI,KAAK,SAAW,KAAK,QAAQ,WAAa,SAAU,CACtD,GAAI,KAAK,eAAiB,KAAK,MAAM,SAAW,EAAK,MAAU,MAAM,wEAAwE,EAC7I,GAAI,KAAK,cAAgB,KAAK,MAAM,SAAW,EAAK,MAAU,MAAM,uEAAuE,EAE3I,KAAK,SAAW,KAAK,MAAM,OAAS,EAAI,KAAK,qBAAqB,EAAI,KAAK,sBAAsB,EAEjG,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EAExB,KAAK,aAAe,CAClB,MAAO,KAAK,aAAa,cAAc,yBAAyB,EAChE,MAAO,KAAK,aAAa,cAAc,qBAAqB,EAC5D,iBAAkB,KAAK,aAAa,cAAc,uBAAuB,EACzE,qBAAsB,KAAK,aAAa,cAAc,4BAA4B,EAClF,QAAS,CACP,KAAM,KAAK,aAAa,iBAAiB,iCAAiC,EAC1E,KAAM,SAAU,EAAY,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,KAAK,OAAQ,IAAK,CACzC,IAAM,EAAO,KAAK,KAAK,GACvB,GAAI,EAAW,CAAI,EAAG,OAAO,CAC/B,CAEF,EACA,KAAM,SAAU,EAAY,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,KAAK,OAAQ,IAAK,CACzC,IAAM,EAAO,KAAK,KAAK,GACvB,GAAI,EAAW,EAAM,CAAC,EAAG,MAAO,EAClC,CACA,MAAO,EACT,CACF,CACF,EAEA,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,CACzB,MACE,MAAU,MAAM,iBAAiB,KAAK,QAAQ,uCAAuC,CAEzF,CAOA,UAAW,EAAU,CACnB,GAAI,OAAO,GAAa,WACtB,KAAK,OAAS,OAEd,MAAU,MAAM,qDAAqD,CAEzE,CAOA,iBAAkB,EAAQ,EAAO,CAC/B,IAAM,EAAO,8CAA8CA,EAAAA,MAAM,sBAAsB,gBAAgB,EAAO,MAAM,IAClH,KAAK,aAAe,KAAK,iBAAiB,KAAK,aAAc,CAAK,EAAI,EAAO,KAC9E,+CAA+CA,EAAAA,MAAM,wBAAwB,IAAI,KAAK,OAAO,gBAE9F,KAAK,aAAa,MAAM,mBAAmB,cAAe,CAAI,EAE9D,GAAM,CAAE,iBAAkB,GAAc,KAAK,aAAa,cAAc,oBAAoB,EAAO,MAAM,GAAG,EAC5G,EAAU,iBAAiB,YAAe,CACxC,IAAM,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,QAAQ,QAAU,EAAO,KAAK,EACvF,KAAK,cAAc,CAAM,CAC3B,CAAC,CACH,CAMA,iBAAmB,CACjB,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,iBAAiB,OAAQ,IAAK,CACrD,IAAM,EAAS,KAAK,iBAAiB,GAC/B,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,QAAQ,QAAU,EAAO,KAAK,EACvF,EAAO,UAAU,OAAO,gCAAgC,EACxD,EAAO,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EACvD,KAAK,sBAAsB,EAAO,QAAQ,KAAK,CACjD,CACA,KAAK,iBAAmB,CAAC,EACzB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,eAAe,CAClB,OAAQ,oBACR,UAAW,KAAK,gBAClB,CAAC,CACH,CAMA,YAAc,CACZ,KAAK,aAAa,MAAM,MAAQ,GAChC,KAAK,aAAa,iBAAiB,UAAU,OAAO,SAAS,EAC7D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EACnF,KAAK,eAAe,EAAE,EACtB,KAAK,wBAAwB,CAC/B,CAOA,eAAgB,EAAO,CACrB,KAAK,OAAO,CAAK,CACnB,CAMA,wBAA0B,CACxB,SAAS,iBAAiB,WAAY,CAAE,YAAa,CAC9C,KAAK,aAAa,SAAS,CAAM,IACpC,KAAK,eAAe,EAAE,EACtB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EAE5B,CAAC,EAED,KAAK,aAAa,MAAM,iBAAiB,YAAe,CACtD,KAAK,gBAAgB,CACvB,CAAC,EAED,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,aAAa,QAAQ,KAAK,OAAQ,IAEzD,KADoB,aAAa,QAAQ,KAAK,EACxC,CAAC,iBAAiB,SAAU,CAAE,YAAa,CAC/C,KAAK,cAAc,CAAM,EACzB,KAAK,WAAW,CAClB,CAAC,EAGH,KAAK,aAAa,MAAM,iBAAiB,YAAe,CACtD,KAAK,aAAa,iBAAiB,UAAU,IAAI,SAAS,EAC1D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,4BAA4B,CAC7F,CAAC,EAED,KAAK,aAAa,MAAM,iBAAiB,SAAU,CAAE,OAAQ,CAAE,YAAc,CACvE,KAAK,aAAa,QAAQ,KAAK,OAAS,GAC1C,KAAK,eAAe,CAAK,CAE7B,CAAC,EAED,KAAK,aAAa,MAAM,iBAAiB,UAAY,GAAM,CACzD,KAAK,cAAc,CAAC,EACpB,KAAK,iBAAiB,CAAC,EACvB,KAAK,aAAa,CAAC,CACrB,CAAC,CACH,CAOA,eAAgB,EAAO,CACrB,IAAM,EAAS,KAAK,aAAa,iBAAiB,UAAU,SAAS,SAAS,EACxE,EAAiB,EAAM,YAAY,EAOzC,GALI,CAAC,GAAU,EAAM,OAAS,IAC5B,KAAK,aAAa,iBAAiB,UAAU,IAAI,SAAS,EAC1D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,4BAA4B,GAGzF,KAAK,aAAa,QAAQ,KAAK,OAAS,EAAG,CAC7C,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,aAAa,QAAQ,KAAK,OAAQ,IAAK,CAC9D,IAAM,EAAK,KAAK,aAAa,QAAQ,KAAK,IAC7B,KAAK,cAAgB,KAAK,MAAM,EAAE,CAAC,KAAK,YAAc,EAAG,YAAA,CAE7D,YAAY,CAAC,CAAC,UAAU,EAAG,EAAe,MAAM,IAAM,EAC7D,KAAK,aAAa,qBAAqB,YAAY,CAAE,EAErD,EAAG,YAAc,EAAG,WAAW,YAAY,CAAE,CAEjD,CAEA,IAAM,EAAa,KAAK,aAAa,QAAQ,MAC1C,EAAI,KACF,KAAK,cAAgB,KAAK,MAAM,EAAM,CAAC,KAAK,YAAc,EAAG,YAAA,CAC3D,YAAY,CAAC,CACb,UAAU,EAAG,EAAe,MAAM,IAAM,CAC/C,EACA,KAAK,eAAe,CAAC,CAAU,CACjC,CACF,CAEA,YAAa,EAAQ,CACnB,IAAI,EAAS,GAGb,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,IAC1B,GAAU,iEAAW,OAAO,KAAK,MAAM,KAAK,OAAO,EAAI,EAAgB,CAAC,EAE1E,OAAO,CACT,CAMA,uBAAyB,CACvB,IAAM,EAAM,CAAC,EACP,CAAE,WAAY,KAAK,QACzB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,OAAQ,IAAK,CACvC,IAAM,EAAO,EAAQ,GACrB,EAAI,KAAK,CACP,KAAM,EAAK,KACX,MAAO,EAAK,MACZ,SAAU,EAAK,aAAa,UAAU,CACxC,CAAC,CACH,CACA,OAAO,CACT,CAMA,sBAAwB,CACtB,GAAI,KAAK,MAAM,OAAS,GAAK,KAAK,aAAe,KAAK,WAAY,CAChE,IAAM,EAAoB,OAAO,KAAK,aAAgB,SAChD,EAAmB,OAAO,KAAK,YAAe,SAC9C,EAAM,CAAC,EAEb,GAAI,CAAC,GAAqB,CAAC,EACzB,MAAU,MAAM,iDAAiD,EAGnE,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,MAAM,OAAQ,IAAK,CAC1C,IAAM,EAAO,KAAK,MAAM,GACxB,EAAI,KAAK,CACP,MAAO,EAAK,KAAK,aACjB,KAAM,EAAK,KAAK,YAChB,SAAU,OAAO,EAAK,UAAa,UAAY,EAAK,SAAW,EACjE,CAAC,CACH,CACA,OAAO,CACT,MACE,OAAO,IAEX,CAOA,cAAe,EAAO,CACpB,GAAI,EAAM,UAAY,IAAM,EAAM,UAAY,GAAI,CAChD,EAAM,eAAe,EACrB,IAAM,EAAS,KAAK,aAAa,iBAAiB,UAAU,SAAS,SAAS,EAExE,EAAuB,KAAK,aAAa,cAAc,4BAA4B,EAEzF,GAAI,CAAC,EACH,KAAK,aAAa,iBAAiB,UAAU,IAAI,SAAS,EAC1D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,4BAA4B,EAC3F,EAAqB,kBAAkB,UAAU,IAAI,gBAAgB,EACrE,EAAqB,kBAAkB,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC5G,EAAqB,kBAAkB,eAAe,EAAK,MACtD,CACL,IAAI,EAAW,KAAK,aAAa,cAAc,4CAA4C,EACrF,EAAS,CACb,QAAS,WACT,GAAI,WACJ,UAAW,OACX,KAAM,MACR,EAEA,GAAI,CAAC,EAAU,CACb,EAAqB,kBAAkB,UAAU,IAAI,gBAAgB,EACrE,EAAqB,kBAAkB,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC5G,EAAqB,kBAAkB,eAAe,EAAK,EAC3D,MACF,CAQA,GANA,EAAS,UAAU,OAAO,gBAAgB,EAC1C,EAAS,aAAa,QAASA,EAAAA,MAAM,0BAA0B,EAE/D,EAAW,EAAS,EAAO,EAAM,KAAO,kBAGpC,CAAC,EAAU,CACb,EACA,EAAqB,SAAS,EAAO,EAAM,OAAS,OAAS,EAAI,EAAqB,SAAS,OAAS,GACxG,EAAS,UAAU,IAAI,gBAAgB,EACvC,EAAS,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC9E,KAAK,gBAAgB,EAAsB,CAAQ,EACnD,MACF,CAEA,EAAS,UAAU,IAAI,gBAAgB,EACvC,EAAS,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC9E,KAAK,gBAAgB,EAAsB,CAAQ,CACrD,CACF,CACF,CAOA,iBAAkB,EAAG,CACnB,GAAI,EAAE,UAAY,GAAK,EAAE,OAAO,QAAU,GAAI,CAC5C,IAAM,EACJ,KAAK,iBAAiB,OAAS,EAAI,KAAK,iBAAiB,KAAK,iBAAiB,OAAS,GAAK,KAE/F,GAAI,EAAoB,CACtB,IAAM,EAA2B,KAAK,aAAa,cACjD,kBAAkB,EAAmB,MAAM,GAC7C,EACA,KAAK,cAAc,CAAwB,EAEvC,KAAK,iBAAiB,SAAW,IACnC,KAAK,aAAa,iBAAiB,UAAU,OAAO,SAAS,EAC7D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EAEvF,CACF,CACF,CAMA,0BAA4B,CACtB,KAAK,iBAAiB,OAAS,EACjC,KAAK,aAAa,MAAM,MAAM,QAAU,OAExC,KAAK,aAAa,MAAM,MAAM,QAAU,MAE5C,CAOA,aAAc,EAAO,CACnB,GAAI,EAAM,UAAY,GAAI,CACxB,IAAM,EAAW,KAAK,aAAa,cAAc,4CAA4C,EACzF,IACF,KAAK,cAAc,CAAQ,EAC3B,KAAK,WAAW,EAEpB,CACF,CAEA,cAAe,EAAQ,EAAgB,GAAM,CAE3C,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,iBAAiB,OAAQ,IAEhD,GADW,KAAK,iBAAiB,EAC3B,CAAC,QAAU,EAAO,QAAQ,MAQ9B,OAPA,EAAO,UAAU,OAAO,gCAAgC,EACxD,EAAO,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EACvD,KAAK,iBAAiB,OAAO,EAAG,CAAC,EACjC,KAAK,sBAAsB,EAAO,QAAQ,KAAK,EAC/C,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EAGtB,GACA,KAAK,eAAe,CAClB,OAAQ,gBACR,MAAO,EAAO,QAAQ,MACtB,UAAW,KAAK,gBAClB,CAAC,EAMP,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,SAAS,OAAQ,IAAK,CAC7C,IAAM,EAAS,KAAK,SAAS,GAC7B,GAAI,EAAO,QAAU,EAAO,QAAQ,MAQlC,OAPA,EAAO,UAAU,IAAI,gCAAgC,EACrD,EAAO,aAAa,QAASA,EAAAA,MAAM,6BAA6B,EAChE,KAAK,iBAAmB,CAAC,GAAG,KAAK,iBAAkB,CAAM,EACzD,KAAK,iBAAiB,EAAQ,CAAC,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EAGtB,GACA,KAAK,eAAe,CAClB,OAAQ,aACR,MAAO,EAAO,QAAQ,MACtB,UAAW,KAAK,gBAClB,CAAC,CAGP,CACF,CAMA,oBAAsB,CACpB,KAAK,aAAa,MAAM,YAAc,KAAK,YAC7C,CAEA,mBAAqB,CACnB,IAAI,EAAmB,GAEvB,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,SAAS,OAAQ,IAAK,CAC7C,IAAM,EAAS,KAAK,SAAS,GAC7B,GAAI,EAAO,SAAU,CACnB,EAAmB,GACnB,IAAM,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,QAAQ,QAAU,EAAO,KAAK,EACvF,EAAO,UAAU,IAAI,gCAAgC,EACrD,EAAO,aAAa,QAASA,EAAAA,MAAM,6BAA6B,EAChE,KAAK,iBAAmB,CAAC,GAAG,KAAK,iBAAkB,CAAM,EACzD,KAAK,iBAAiB,EAAQ,CAAC,CACjC,CACF,CAEI,GAAoB,KAAK,yBAAyB,EACtD,KAAK,mBAAmB,CAC1B,CAOA,iBAAkB,EAAU,EAAO,CACjC,IAAI,EAAoB,EAClB,EAAU,EAAS,MAAM,cAAc,CAAC,CAAC,IAAK,GAAM,EAAE,QAAQ,WAAY,EAAE,CAAC,EAEnF,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,OAAQ,IAAK,CACvC,IAAM,EAAO,EAAQ,GAErB,EAAoB,EAAkB,QAAQ,OAAO,EAAK,IAAK,KAAK,MAAM,EAAM,CAAC,IAAS,EAAE,CAC9F,CAEA,OAAO,CACT,CAEA,yBAA2B,CACzB,IAAM,EAAY,iBACZ,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,UAAU,SAAS,CAAS,CAAC,EACtF,GAAU,EAAO,UAAU,OAAO,CAAS,GAAK,EAAO,aAAa,QAASA,EAAAA,MAAM,0BAA0B,CAC/G,CAOA,sBAAuB,EAAO,CAC5B,IAAM,EAAY,KAAK,aAAa,cAAc,oBAAoB,EAAM,GAAG,EAC/E,GAAa,EAAU,YAAc,EAAU,WAAW,YAAY,CAAS,CACjF,CAMA,oBAAsB,CACpB,IAAM,EAAO;mDACkCA,EAAAA,MAAM,qBAAqB;uBACvDA,EAAAA,MAAM,wBAAwB;YAEzC,KAAK,SAAS,OAAS,GAAK,CAAC,KAAK,cAC9B,KAAK,SACF,IAAK,GACG;gCACK,EAAO,MAAM,WAAWA,EAAAA,MAAM,2BAA2B,IAAI,EAAO,KAAK;aAEtF,CAAC,CACD,KAAK,EAAE,EACV,GACL;;YAGC,KAAK,SAAS,OAAS,GAAK,KAAK,cAC7B,KAAK,SACF,KAAK,EAAQ,IACL;gCACK,EAAO,MAAM,WAAWA,EAAAA,MAAM,2BAA2B,IAAI,KAAK,iBAAiB,KAAK,cAAe,CAAK,EAAE;aAE3H,CAAC,CACD,KAAK,EAAE,EACV,GACL;YACC,KAAK,YAAY,KAAK,SAAS,SAAW,CAAC,EAAE;;;QAKrD,KAAK,aAAa,mBAAmB,YAAa,CAAI,CACxD,CAMA,oBAAsB,CACpB,KAAK,QAAQ,MAAM,QAAU,OAC7B,IAAM,EAAK,UAAY,KAAK,YAAY,EAAE,EAE1C,KAAK,aAAe,SAAS,cAAc,KAAK,EAChD,KAAK,aAAa,aAAa,KAAM,CAAE,EACvC,KAAK,aAAa,aAAa,QAAS,wBAAwB,EAChE,KAAK,aAAa,aAAa,QAASA,EAAAA,MAAM,sBAAsB,EACpE,IAAM,EAAO;mDACkCA,EAAAA,MAAM,qBAAqB;qDACzBA,EAAAA,MAAM,mBAAmB,iBAAiB,KAAK,aAAa;;6EAEpCA,EAAAA,MAAM,uBAAuB,IAAI,KAAK,OAAO;MAEtH,KAAK,aAAa,UAAY,EAC9B,KAAK,iBAAiB,YAAY,KAAK,YAAY,CACrD,CAOA,gBAAiB,EAAQ,EAAO,CAC9B,IAAM,EAAa,EAAO,sBAAsB,EAC1C,EAAY,EAAM,sBAAsB,EAGxC,EAAW,IAAM,EAAU,OAAS,EAAM,eAC9C,EAAO,UAAY,EAAM,cAAgB,EAAM,UAAY,EAAM,eAI7D,EAAW,OAAS,EAAU,IAAM,EAAM,eAC9C,EAAO,UACL,EAAM,cACL,EAAM,UAAY,EAAM,eACxB,EAAO,cAAgB,EAAM,cAAgB,EAAM,aAAe,EAAM,gBAE/E,CAOA,YAAa,EAAW,CACtB,OAAO,EAAY,mDAAmDA,EAAAA,MAAM,uDAAuD,IAAI,KAAK,QAAQ,MAAQ,EAC9J,CAOA,eAAgB,EAAW,CACzB,IAAM,EAAM,KAAK,aAAa,cAAc,mCAAmC,EAC/E,GAAI,EAAW,CACb,IAAM,EAAO,sDAAsDA,EAAAA,MAAM,0DAA0D,IAAI,KAAK,WAAW,MACvJ,CAAC,GAAO,KAAK,aAAa,qBAAqB,mBAAmB,YAAa,CAAI,CACrF,MACE,GAAO,EAAI,YAAc,EAAI,WAAW,YAAY,CAAG,CAE3D,CACF"}
+{"version":3,"file":"multiSelect.cjs.js","names":["style"],"sources":["../../src/widgets/multiSelect.js"],"sourcesContent":["/*\n * IconicMultiSelect v0.7.0\n * Licence:  MIT\n * (c) 2021 Sidney Wimart.\n * repo & configuration: https://github.com/sidneywm/iconic-multiselect\n */\n\n/**\n * @version IconicMultiSelect v0.7.0\n * @licence  MIT\n */\nimport { style } from '../lib/style_multiSelect'\n\nexport class IconicMultiSelect {\n  _data\n  _domElements\n  _event = () => {}\n  _itemTemplate\n  _multiselect\n  _noData\n  _noResults\n  _options = []\n  _placeholder\n  _select\n  _selectContainer\n  _selectedOptions = []\n  _tagTemplate\n  _textField\n  _valueField\n  _cross = `\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    `\n\n  /**\n   * Iconic Multiselect constructor.\n   * @param { Object[] } data - Array of objects.\n   * @param { string } noData - Defines the message when there is no data input.\n   * @param { string } noResults - Defines the message when there is no result if options are filtered.\n   * @param { string } placeholder -  Defines the placeholder's text.\n   * @param { string } select - DOM element to be selected. It must be a HTML Select tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n   * @param { string } textField - Field to select in the object for the text.\n   * @param { string } valueField - Field to select in the object for the value.\n   */\n  constructor ({ data, itemTemplate, noData, noResults, placeholder, select, container, tagTemplate, textField, valueField }) {\n    this._data = data ?? []\n    this._itemTemplate = itemTemplate ?? null\n    this._noData = noData ?? 'No data found.'\n    this._noResults = noResults ?? 'No results found.'\n    this._placeholder = placeholder ?? 'Select...'\n    this._select = select\n    // Timea added a container here\n    this._selectContainer = container\n    this._tagTemplate = tagTemplate ?? null\n    this._textField = textField ?? null\n    this._valueField = valueField ?? null\n  }\n\n  /**\n   * Initialize the Iconic Multiselect component.\n   * @public\n   */\n  init () {\n    // Timea change to use this._select instead of this._selectContainer\n    if (this._select && this._select.nodeName === 'SELECT') {\n      if (this._itemTemplate && this._data.length === 0) { throw new Error('itemTemplate must be initialized with data from the component settings') }\n      if (this._tagTemplate && this._data.length === 0) { throw new Error('tagTemplate must be initialized with data from the component settings') }\n\n      this._options = this._data.length > 0 ? this._getDataFromSettings() : this._getDataFromSelectTag()\n\n      this._renderMultiselect()\n      this._renderOptionsList()\n\n      this._domElements = {\n        clear: this._multiselect.querySelector('.multiselect__clear-btn'),\n        input: this._multiselect.querySelector('.multiselect__input'),\n        optionsContainer: this._multiselect.querySelector('.multiselect__options'),\n        optionsContainerList: this._multiselect.querySelector('.multiselect__options > ul'),\n        options: {\n          list: this._multiselect.querySelectorAll('.multiselect__options > ul > li'),\n          find: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node)) return node\n            }\n            return undefined\n          },\n          some: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node, i)) return true\n            }\n            return false\n          }\n        }\n      }\n\n      this._enableEventListenners()\n      this._initSelectedList()\n    } else {\n      throw new Error(`The selector '${this._select}' did not select any valid select tag.`)\n    }\n  }\n\n  /**\n   * Subscribes to the emitted events.\n   * @param { Function } callback - Callback function which emits a custom event object.\n   * @public\n   */\n  subscribe (callback) {\n    if (typeof callback === 'function') {\n      this._event = callback\n    } else {\n      throw new Error('parameter in the subscribe method is not a function')\n    }\n  }\n\n  /**\n   * Add an option to the selection list.\n   * @param { Object: { text: string; value: string; }} option\n   * @private\n   */\n  _addOptionToList (option, index) {\n    const html = `<span class=\"multiselect__selected\" style=\"${style.multiselect__selected}\" data-value=\"${option.value}\">${\n      this._tagTemplate ? this._processTemplate(this._tagTemplate, index) : option.text\n    }<span class=\"multiselect__remove-btn\" style=\"${style.multiselect__remove_btn}\">${this._cross}</span></span>`\n\n    this._domElements.input.insertAdjacentHTML('beforebegin', html)\n\n    const { lastElementChild: removeBtn } = this._multiselect.querySelector(`span[data-value=\"${option.value}\"]`)\n    removeBtn.addEventListener('click', () => {\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      this._handleOption(target)\n    })\n  }\n\n  /**\n   * Clears all selected options.\n   * @private\n   */\n  _clearSelection () {\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const option = this._selectedOptions[i]\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      target.classList.remove('multiselect__options--selected')\n      target.setAttribute('style', style.multiselect__options)\n      this._removeOptionFromList(target.dataset.value)\n    }\n    this._selectedOptions = []\n    this._handleClearSelectionBtn()\n    this._handlePlaceholder()\n    this._dispatchEvent({\n      action: 'CLEAR_ALL_OPTIONS',\n      selection: this._selectedOptions\n    })\n  }\n\n  /**\n   * Close the options container.\n   * @private\n   */\n  _closeList () {\n    this._domElements.input.value = ''\n    this._domElements.optionsContainer.classList.remove('visible')\n    this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n    this._filterOptions('')\n    this._removeAllArrowSelected()\n  }\n\n  /**\n   * Dispatches new events.\n   * @param { object : { action: string; selection: { option: string; text: string; }[]; value?: string; } } event\n   * @private\n   */\n  _dispatchEvent (event) {\n    this._event(event)\n  }\n\n  /**\n   * Enables all main event listenners.\n   * @private\n   */\n  _enableEventListenners () {\n    document.addEventListener('mouseup', ({ target }) => {\n      if (!this._multiselect.contains(target)) {\n        this._filterOptions('')\n        this._closeList()\n        this._handlePlaceholder()\n      }\n    })\n\n    this._domElements.clear.addEventListener('click', () => {\n      this._clearSelection()\n    })\n\n    for (let i = 0; i < this._domElements.options.list.length; i++) {\n      const option = this._domElements.options.list[i]\n      option.addEventListener('click', ({ target }) => {\n        this._handleOption(target)\n        this._closeList()\n      })\n    }\n\n    this._domElements.input.addEventListener('focus', () => {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    })\n\n    this._domElements.input.addEventListener('input', ({ target: { value } }) => {\n      if (this._domElements.options.list.length > 0) {\n        this._filterOptions(value)\n      }\n    })\n\n    this._domElements.input.addEventListener('keydown', (e) => {\n      this._handleArrows(e)\n      this._handleBackspace(e)\n      this._handleEnter(e)\n    })\n  }\n\n  /**\n   * Filters user input.\n   * @param { string } value\n   * @private\n   */\n  _filterOptions (value) {\n    const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n    const valueLowerCase = value.toLowerCase()\n\n    if (!isOpen && value.length > 0) {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    }\n\n    if (this._domElements.options.list.length > 0) {\n      for (let i = 0; i < this._domElements.options.list.length; i++) {\n        const el = this._domElements.options.list[i]\n        const text = this._itemTemplate ? this._data[i][this._textField] : el.textContent\n\n        if (text.toLowerCase().substring(0, valueLowerCase.length) === valueLowerCase) {\n          this._domElements.optionsContainerList.appendChild(el)\n        } else {\n          el.parentNode && el.parentNode.removeChild(el)\n        }\n      }\n\n      const hasResults = this._domElements.options.some(\n        (el, index) =>\n          (this._itemTemplate ? this._data[index][this._textField] : el.textContent)\n            .toLowerCase()\n            .substring(0, valueLowerCase.length) === valueLowerCase\n      )\n      this._showNoResults(!hasResults)\n    }\n  }\n\n  _generateId (length) {\n    let result = ''\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'\n    const charactersLength = characters.length\n    for (let i = 0; i < length; i++) {\n      result += characters.charAt(Math.floor(Math.random() * charactersLength))\n    }\n    return result\n  }\n\n  /**\n   * Gets data from select tag.\n   * @private\n   */\n  _getDataFromSelectTag () {\n    const arr = []\n    const { options } = this._select\n    for (let i = 0; i < options.length; i++) {\n      const item = options[i]\n      arr.push({\n        text: item.text,\n        value: item.value,\n        selected: item.hasAttribute('selected')\n      })\n    }\n    return arr\n  }\n\n  /**\n   * Gets data from settings.\n   * @private\n   */\n  _getDataFromSettings () {\n    if (this._data.length > 0 && this._valueField && this._textField) {\n      const isValueFieldValid = typeof this._valueField === 'string'\n      const isTextFieldValid = typeof this._textField === 'string'\n      const arr = []\n\n      if (!isValueFieldValid || !isTextFieldValid) {\n        throw new Error('textField and valueField must be of type string')\n      }\n\n      for (let i = 0; i < this._data.length; i++) {\n        const item = this._data[i]\n        arr.push({\n          value: item[this._valueField],\n          text: item[this._textField],\n          selected: typeof item.selected === 'boolean' ? item.selected : false\n        })\n      }\n      return arr\n    } else {\n      return null\n    }\n  }\n\n  /**\n   * Handles Arrow up & Down. Selection of an option is also possible with these keys.\n   * @param { Event } event\n   * @private\n   */\n  _handleArrows (event) {\n    if (event.keyCode === 40 || event.keyCode === 38) {\n      event.preventDefault()\n      const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n      // An updated view of the container is needed because of the filtering option\n      const optionsContainerList = this._multiselect.querySelector('.multiselect__options > ul')\n\n      if (!isOpen) {\n        this._domElements.optionsContainer.classList.add('visible')\n        this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n        optionsContainerList.firstElementChild.classList.add('arrow-selected')\n        optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        optionsContainerList.firstElementChild.scrollIntoView(false)\n      } else {\n        let selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n        const action = {\n          ArrowUp: 'previous',\n          Up: 'previous',\n          ArrowDown: 'next',\n          Down: 'next'\n        }\n\n        if (!selected) {\n          optionsContainerList.firstElementChild.classList.add('arrow-selected')\n          optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          optionsContainerList.firstElementChild.scrollIntoView(false)\n          return\n        }\n\n        selected.classList.remove('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li)\n\n        selected = selected[action[event.key] + 'ElementSibling']\n\n        // Go to start or end of the popup list\n        if (!selected) {\n          selected =\n          optionsContainerList.children[action[event.key] === 'next' ? 0 : optionsContainerList.children.length - 1]\n          selected.classList.add('arrow-selected')\n          selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          this._scrollIntoView(optionsContainerList, selected)\n          return\n        }\n\n        selected.classList.add('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        this._scrollIntoView(optionsContainerList, selected)\n      }\n    }\n  }\n\n  /**\n   * Handles the backspace key event - Deletes the preceding option in the selection list.\n   * @param { Event } e\n   * @private\n   */\n  _handleBackspace (e) {\n    if (e.keyCode === 8 && e.target.value === '') {\n      const lastSelectedOption =\n        this._selectedOptions.length > 0 ? this._selectedOptions[this._selectedOptions.length - 1] : null\n\n      if (lastSelectedOption) {\n        const targetLastSelectedOption = this._multiselect.querySelector(\n          `li[data-value=\"${lastSelectedOption.value}\"]`\n        )\n        this._handleOption(targetLastSelectedOption)\n\n        if (this._selectedOptions.length === 0) {\n          this._domElements.optionsContainer.classList.remove('visible')\n          this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n        }\n      }\n    }\n  }\n\n  /**\n   * Shows clear selection button if some options are selected.\n   * @private\n   */\n  _handleClearSelectionBtn () {\n    if (this._selectedOptions.length > 0) {\n      this._domElements.clear.style.display = 'flex'\n    } else {\n      this._domElements.clear.style.display = 'none'\n    }\n  }\n\n  /**\n   * Handles the enter key event.\n   * @param { Event } event\n   * @private\n   */\n  _handleEnter (event) {\n    if (event.keyCode === 13) {\n      const selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n      if (selected) {\n        this._handleOption(selected)\n        this._closeList()\n      }\n    }\n  }\n\n  _handleOption (target, dispatchEvent = true) {\n    // Remove\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const el = this._selectedOptions[i]\n      if (el.value === target.dataset.value) {\n        target.classList.remove('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options)\n        this._selectedOptions.splice(i, 1)\n        this._removeOptionFromList(target.dataset.value)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'REMOVE_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n\n    // Add\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.value === target.dataset.value) {\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'ADD_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n  }\n\n  /**\n   * Shows the placeholder if no options are selected.\n   * @private\n   */\n  _handlePlaceholder () {\n    this._domElements.input.placeholder = this._placeholder\n  }\n\n  _initSelectedList () {\n    let hasItemsSelected = false\n\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.selected) {\n        hasItemsSelected = true\n        const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n      }\n    }\n\n    if (hasItemsSelected) { this._handleClearSelectionBtn() }\n    this._handlePlaceholder()\n  }\n\n  /**\n   * Process the custom template.\n   * @param { string } template\n   * @private\n   */\n  _processTemplate (template, index) {\n    let processedTemplate = template\n    const objAttr = template.match(/\\$\\{(\\w+)\\}/g).map((e) => e.replace(/\\$\\{|\\}/g, ''))\n\n    for (let i = 0; i < objAttr.length; i++) {\n      const attr = objAttr[i]\n      // eslint-disable-next-line no-useless-escape\n      processedTemplate = processedTemplate.replace(`\\$\\{${attr}\\}`, this._data[index][attr] ?? '')\n    }\n\n    return processedTemplate\n  }\n\n  _removeAllArrowSelected () {\n    const className = 'arrow-selected'\n    const target = this._domElements.options.find((el) => el.classList.contains(className))\n    target && target.classList.remove(className) && target.setAttribute('style', style.multiselect__options_ul_li)\n  }\n\n  /**\n   * Removes an option from the list.\n   * @param { string } value\n   * @private\n   */\n  _removeOptionFromList (value) {\n    const optionDom = this._multiselect.querySelector(`span[data-value=\"${value}\"]`)\n    optionDom && optionDom.parentNode && optionDom.parentNode.removeChild(optionDom)\n  }\n\n  /**\n   * Renders the multiselect options list view.\n   * @private\n   */\n  _renderOptionsList () {\n    const html = `\n        <div class=\"multiselect__options\" style=\"${style.multiselect__options}\">\n          <ul style=\"${style.multiselect__options_ul}\">\n          ${\n            this._options.length > 0 && !this._itemTemplate\n              ? this._options\n                  .map((option) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${option.text}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n\n          ${\n            this._options.length > 0 && this._itemTemplate\n              ? this._options\n                  .map((option, index) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${this._processTemplate(this._itemTemplate, index)}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n          ${this._showNoData(this._options.length === 0)}\n          </ul>\n        </div>\n      `\n\n    this._multiselect.insertAdjacentHTML('beforeend', html)\n  }\n\n  /**\n   * Renders the multiselect view.\n   * @private\n   */\n  _renderMultiselect () {\n    this._select.style.display = 'none'\n    const id = 'iconic-' + this._generateId(20)\n    // Timea created dedicated div element because previous code was not rendering\n    this._multiselect = document.createElement('div')\n    this._multiselect.setAttribute('id', id)\n    this._multiselect.setAttribute('class', 'multiselect__container')\n    this._multiselect.setAttribute('style', style.multiselect__container)\n    const html = `\n        <div class=\"multiselect__wrapper\" style=\"${style.multiselect__wrapper}\">\n          <input class=\"multiselect__input\" style=\"${style.multiselect__input}\" placeholder=\"${this._placeholder}\" />\n        </div>\n        <span style=\"display: none;\" class=\"multiselect__clear-btn\" style=\"${style.multiselect__clear_btn}\">${this._cross}</span>\n    `\n    this._multiselect.innerHTML = html\n    this._selectContainer.appendChild(this._multiselect)\n  }\n\n  /**\n   * ScrollIntoView - This small utility reproduces the behavior of .scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n   * This is for IE compatibility without a need of a polyfill\n   * @private\n   */\n  _scrollIntoView (parent, child) {\n    const rectParent = parent.getBoundingClientRect()\n    const rectChild = child.getBoundingClientRect()\n\n    // Detect if not visible at top and then scroll to the top\n    if (!(rectParent.top < rectChild.bottom - child.offsetHeight)) {\n      parent.scrollTop = child.clientHeight + (child.offsetTop - child.offsetHeight)\n    }\n\n    // Detect if not visible at bottom and then scroll to the bottom\n    if (!(rectParent.bottom > rectChild.top + child.offsetHeight)) {\n      parent.scrollTop =\n        child.clientHeight +\n        (child.offsetTop - child.offsetHeight) -\n        (parent.offsetHeight - (child.offsetHeight + (child.offsetHeight - child.clientHeight)))\n    }\n  }\n\n  /**\n   * Shows a no data message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoData (condition) {\n    return condition ? `<p class=\"multiselect__options--no-data\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_data}\">${this._noData}</p>` : ''\n  }\n\n  /**\n   * Shows a no results message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoResults (condition) {\n    const dom = this._multiselect.querySelector('.multiselect__options--no-results')\n    if (condition) {\n      const html = `<p class=\"multiselect__options--no-results\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_results}\">${this._noResults}</p>`\n      !dom && this._domElements.optionsContainerList.insertAdjacentHTML('beforeend', html)\n    } else {\n      dom && dom.parentNode && dom.parentNode.removeChild(dom)\n    }\n  }\n}\n"],"mappings":"mDAaA,IAAa,EAAb,KAA+B,CAC7B,MACA,aACA,WAAe,CAAC,EAChB,cACA,aACA,QACA,WACA,SAAW,CAAC,EACZ,aACA,QACA,iBACA,iBAAmB,CAAC,EACpB,aACA,WACA,YACA,OAAS;;;;;;;;;;;;;MAyBT,YAAa,CAAE,OAAM,eAAc,SAAQ,YAAW,cAAa,SAAQ,YAAW,cAAa,YAAW,cAAc,CAC1H,KAAK,MAAQ,GAAQ,CAAC,EACtB,KAAK,cAAgB,GAAgB,KACrC,KAAK,QAAU,GAAU,iBACzB,KAAK,WAAa,GAAa,oBAC/B,KAAK,aAAe,GAAe,YACnC,KAAK,QAAU,EAEf,KAAK,iBAAmB,EACxB,KAAK,aAAe,GAAe,KACnC,KAAK,WAAa,GAAa,KAC/B,KAAK,YAAc,GAAc,IACnC,CAMA,MAAQ,CAEN,GAAI,KAAK,SAAW,KAAK,QAAQ,WAAa,SAAU,CACtD,GAAI,KAAK,eAAiB,KAAK,MAAM,SAAW,EAAK,MAAU,MAAM,wEAAwE,EAC7I,GAAI,KAAK,cAAgB,KAAK,MAAM,SAAW,EAAK,MAAU,MAAM,uEAAuE,EAE3I,KAAK,SAAW,KAAK,MAAM,OAAS,EAAI,KAAK,qBAAqB,EAAI,KAAK,sBAAsB,EAEjG,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EAExB,KAAK,aAAe,CAClB,MAAO,KAAK,aAAa,cAAc,yBAAyB,EAChE,MAAO,KAAK,aAAa,cAAc,qBAAqB,EAC5D,iBAAkB,KAAK,aAAa,cAAc,uBAAuB,EACzE,qBAAsB,KAAK,aAAa,cAAc,4BAA4B,EAClF,QAAS,CACP,KAAM,KAAK,aAAa,iBAAiB,iCAAiC,EAC1E,KAAM,SAAU,EAAY,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,KAAK,OAAQ,IAAK,CACzC,IAAM,EAAO,KAAK,KAAK,GACvB,GAAI,EAAW,CAAI,EAAG,OAAO,CAC/B,CAEF,EACA,KAAM,SAAU,EAAY,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,KAAK,OAAQ,IAAK,CACzC,IAAM,EAAO,KAAK,KAAK,GACvB,GAAI,EAAW,EAAM,CAAC,EAAG,MAAO,EAClC,CACA,MAAO,EACT,CACF,CACF,EAEA,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,CACzB,MACE,MAAU,MAAM,iBAAiB,KAAK,QAAQ,uCAAuC,CAEzF,CAOA,UAAW,EAAU,CACnB,GAAI,OAAO,GAAa,WACtB,KAAK,OAAS,OAEd,MAAU,MAAM,qDAAqD,CAEzE,CAOA,iBAAkB,EAAQ,EAAO,CAC/B,IAAM,EAAO,8CAA8CA,EAAAA,MAAM,sBAAsB,gBAAgB,EAAO,MAAM,IAClH,KAAK,aAAe,KAAK,iBAAiB,KAAK,aAAc,CAAK,EAAI,EAAO,KAC9E,+CAA+CA,EAAAA,MAAM,wBAAwB,IAAI,KAAK,OAAO,gBAE9F,KAAK,aAAa,MAAM,mBAAmB,cAAe,CAAI,EAE9D,GAAM,CAAE,iBAAkB,GAAc,KAAK,aAAa,cAAc,oBAAoB,EAAO,MAAM,GAAG,EAC5G,EAAU,iBAAiB,YAAe,CACxC,IAAM,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,QAAQ,QAAU,EAAO,KAAK,EACvF,KAAK,cAAc,CAAM,CAC3B,CAAC,CACH,CAMA,iBAAmB,CACjB,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,iBAAiB,OAAQ,IAAK,CACrD,IAAM,EAAS,KAAK,iBAAiB,GAC/B,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,QAAQ,QAAU,EAAO,KAAK,EACvF,EAAO,UAAU,OAAO,gCAAgC,EACxD,EAAO,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EACvD,KAAK,sBAAsB,EAAO,QAAQ,KAAK,CACjD,CACA,KAAK,iBAAmB,CAAC,EACzB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,eAAe,CAClB,OAAQ,oBACR,UAAW,KAAK,gBAClB,CAAC,CACH,CAMA,YAAc,CACZ,KAAK,aAAa,MAAM,MAAQ,GAChC,KAAK,aAAa,iBAAiB,UAAU,OAAO,SAAS,EAC7D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EACnF,KAAK,eAAe,EAAE,EACtB,KAAK,wBAAwB,CAC/B,CAOA,eAAgB,EAAO,CACrB,KAAK,OAAO,CAAK,CACnB,CAMA,wBAA0B,CACxB,SAAS,iBAAiB,WAAY,CAAE,YAAa,CAC9C,KAAK,aAAa,SAAS,CAAM,IACpC,KAAK,eAAe,EAAE,EACtB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EAE5B,CAAC,EAED,KAAK,aAAa,MAAM,iBAAiB,YAAe,CACtD,KAAK,gBAAgB,CACvB,CAAC,EAED,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,aAAa,QAAQ,KAAK,OAAQ,IAEzD,KADoB,aAAa,QAAQ,KAAK,EACxC,CAAC,iBAAiB,SAAU,CAAE,YAAa,CAC/C,KAAK,cAAc,CAAM,EACzB,KAAK,WAAW,CAClB,CAAC,EAGH,KAAK,aAAa,MAAM,iBAAiB,YAAe,CACtD,KAAK,aAAa,iBAAiB,UAAU,IAAI,SAAS,EAC1D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,4BAA4B,CAC7F,CAAC,EAED,KAAK,aAAa,MAAM,iBAAiB,SAAU,CAAE,OAAQ,CAAE,YAAc,CACvE,KAAK,aAAa,QAAQ,KAAK,OAAS,GAC1C,KAAK,eAAe,CAAK,CAE7B,CAAC,EAED,KAAK,aAAa,MAAM,iBAAiB,UAAY,GAAM,CACzD,KAAK,cAAc,CAAC,EACpB,KAAK,iBAAiB,CAAC,EACvB,KAAK,aAAa,CAAC,CACrB,CAAC,CACH,CAOA,eAAgB,EAAO,CACrB,IAAM,EAAS,KAAK,aAAa,iBAAiB,UAAU,SAAS,SAAS,EACxE,EAAiB,EAAM,YAAY,EAOzC,GALI,CAAC,GAAU,EAAM,OAAS,IAC5B,KAAK,aAAa,iBAAiB,UAAU,IAAI,SAAS,EAC1D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,4BAA4B,GAGzF,KAAK,aAAa,QAAQ,KAAK,OAAS,EAAG,CAC7C,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,aAAa,QAAQ,KAAK,OAAQ,IAAK,CAC9D,IAAM,EAAK,KAAK,aAAa,QAAQ,KAAK,IAC7B,KAAK,cAAgB,KAAK,MAAM,EAAE,CAAC,KAAK,YAAc,EAAG,YAAA,CAE7D,YAAY,CAAC,CAAC,UAAU,EAAG,EAAe,MAAM,IAAM,EAC7D,KAAK,aAAa,qBAAqB,YAAY,CAAE,EAErD,EAAG,YAAc,EAAG,WAAW,YAAY,CAAE,CAEjD,CAEA,IAAM,EAAa,KAAK,aAAa,QAAQ,MAC1C,EAAI,KACF,KAAK,cAAgB,KAAK,MAAM,EAAM,CAAC,KAAK,YAAc,EAAG,YAAA,CAC3D,YAAY,CAAC,CACb,UAAU,EAAG,EAAe,MAAM,IAAM,CAC/C,EACA,KAAK,eAAe,CAAC,CAAU,CACjC,CACF,CAEA,YAAa,EAAQ,CACnB,IAAI,EAAS,GAGb,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,IAC1B,GAAU,iEAAW,OAAO,KAAK,MAAM,KAAK,OAAO,EAAI,EAAgB,CAAC,EAE1E,OAAO,CACT,CAMA,uBAAyB,CACvB,IAAM,EAAM,CAAC,EACP,CAAE,WAAY,KAAK,QACzB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,OAAQ,IAAK,CACvC,IAAM,EAAO,EAAQ,GACrB,EAAI,KAAK,CACP,KAAM,EAAK,KACX,MAAO,EAAK,MACZ,SAAU,EAAK,aAAa,UAAU,CACxC,CAAC,CACH,CACA,OAAO,CACT,CAMA,sBAAwB,CACtB,GAAI,KAAK,MAAM,OAAS,GAAK,KAAK,aAAe,KAAK,WAAY,CAChE,IAAM,EAAoB,OAAO,KAAK,aAAgB,SAChD,EAAmB,OAAO,KAAK,YAAe,SAC9C,EAAM,CAAC,EAEb,GAAI,CAAC,GAAqB,CAAC,EACzB,MAAU,MAAM,iDAAiD,EAGnE,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,MAAM,OAAQ,IAAK,CAC1C,IAAM,EAAO,KAAK,MAAM,GACxB,EAAI,KAAK,CACP,MAAO,EAAK,KAAK,aACjB,KAAM,EAAK,KAAK,YAChB,SAAU,OAAO,EAAK,UAAa,WAAY,EAAK,QACtD,CAAC,CACH,CACA,OAAO,CACT,CACE,OAAO,IAEX,CAOA,cAAe,EAAO,CACpB,GAAI,EAAM,UAAY,IAAM,EAAM,UAAY,GAAI,CAChD,EAAM,eAAe,EACrB,IAAM,EAAS,KAAK,aAAa,iBAAiB,UAAU,SAAS,SAAS,EAExE,EAAuB,KAAK,aAAa,cAAc,4BAA4B,EAEzF,GAAI,CAAC,EACH,KAAK,aAAa,iBAAiB,UAAU,IAAI,SAAS,EAC1D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,4BAA4B,EAC3F,EAAqB,kBAAkB,UAAU,IAAI,gBAAgB,EACrE,EAAqB,kBAAkB,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC5G,EAAqB,kBAAkB,eAAe,EAAK,MACtD,CACL,IAAI,EAAW,KAAK,aAAa,cAAc,4CAA4C,EACrF,EAAS,CACb,QAAS,WACT,GAAI,WACJ,UAAW,OACX,KAAM,MACR,EAEA,GAAI,CAAC,EAAU,CACb,EAAqB,kBAAkB,UAAU,IAAI,gBAAgB,EACrE,EAAqB,kBAAkB,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC5G,EAAqB,kBAAkB,eAAe,EAAK,EAC3D,MACF,CAQA,GANA,EAAS,UAAU,OAAO,gBAAgB,EAC1C,EAAS,aAAa,QAASA,EAAAA,MAAM,0BAA0B,EAE/D,EAAW,EAAS,EAAO,EAAM,KAAO,kBAGpC,CAAC,EAAU,CACb,EACA,EAAqB,SAAS,EAAO,EAAM,OAAS,OAAS,EAAI,EAAqB,SAAS,OAAS,GACxG,EAAS,UAAU,IAAI,gBAAgB,EACvC,EAAS,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC9E,KAAK,gBAAgB,EAAsB,CAAQ,EACnD,MACF,CAEA,EAAS,UAAU,IAAI,gBAAgB,EACvC,EAAS,aAAa,QAASA,EAAAA,MAAM,yCAAyC,EAC9E,KAAK,gBAAgB,EAAsB,CAAQ,CACrD,CACF,CACF,CAOA,iBAAkB,EAAG,CACnB,GAAI,EAAE,UAAY,GAAK,EAAE,OAAO,QAAU,GAAI,CAC5C,IAAM,EACJ,KAAK,iBAAiB,OAAS,EAAI,KAAK,iBAAiB,KAAK,iBAAiB,OAAS,GAAK,KAE/F,GAAI,EAAoB,CACtB,IAAM,EAA2B,KAAK,aAAa,cACjD,kBAAkB,EAAmB,MAAM,GAC7C,EACA,KAAK,cAAc,CAAwB,EAEvC,KAAK,iBAAiB,SAAW,IACnC,KAAK,aAAa,iBAAiB,UAAU,OAAO,SAAS,EAC7D,KAAK,aAAa,iBAAiB,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EAEvF,CACF,CACF,CAMA,0BAA4B,CACtB,KAAK,iBAAiB,OAAS,EACjC,KAAK,aAAa,MAAM,MAAM,QAAU,OAExC,KAAK,aAAa,MAAM,MAAM,QAAU,MAE5C,CAOA,aAAc,EAAO,CACnB,GAAI,EAAM,UAAY,GAAI,CACxB,IAAM,EAAW,KAAK,aAAa,cAAc,4CAA4C,EACzF,IACF,KAAK,cAAc,CAAQ,EAC3B,KAAK,WAAW,EAEpB,CACF,CAEA,cAAe,EAAQ,EAAgB,GAAM,CAE3C,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,iBAAiB,OAAQ,IAEhD,GADW,KAAK,iBAAiB,EAC3B,CAAC,QAAU,EAAO,QAAQ,MAQ9B,OAPA,EAAO,UAAU,OAAO,gCAAgC,EACxD,EAAO,aAAa,QAASA,EAAAA,MAAM,oBAAoB,EACvD,KAAK,iBAAiB,OAAO,EAAG,CAAC,EACjC,KAAK,sBAAsB,EAAO,QAAQ,KAAK,EAC/C,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EAGtB,GACA,KAAK,eAAe,CAClB,OAAQ,gBACR,MAAO,EAAO,QAAQ,MACtB,UAAW,KAAK,gBAClB,CAAC,EAMP,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,SAAS,OAAQ,IAAK,CAC7C,IAAM,EAAS,KAAK,SAAS,GAC7B,GAAI,EAAO,QAAU,EAAO,QAAQ,MAQlC,OAPA,EAAO,UAAU,IAAI,gCAAgC,EACrD,EAAO,aAAa,QAASA,EAAAA,MAAM,6BAA6B,EAChE,KAAK,iBAAmB,CAAC,GAAG,KAAK,iBAAkB,CAAM,EACzD,KAAK,iBAAiB,EAAQ,CAAC,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EAGtB,GACA,KAAK,eAAe,CAClB,OAAQ,aACR,MAAO,EAAO,QAAQ,MACtB,UAAW,KAAK,gBAClB,CAAC,CAGP,CACF,CAMA,oBAAsB,CACpB,KAAK,aAAa,MAAM,YAAc,KAAK,YAC7C,CAEA,mBAAqB,CACnB,IAAI,EAAmB,GAEvB,IAAK,IAAI,EAAI,EAAG,EAAI,KAAK,SAAS,OAAQ,IAAK,CAC7C,IAAM,EAAS,KAAK,SAAS,GAC7B,GAAI,EAAO,SAAU,CACnB,EAAmB,GACnB,IAAM,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,QAAQ,QAAU,EAAO,KAAK,EACvF,EAAO,UAAU,IAAI,gCAAgC,EACrD,EAAO,aAAa,QAASA,EAAAA,MAAM,6BAA6B,EAChE,KAAK,iBAAmB,CAAC,GAAG,KAAK,iBAAkB,CAAM,EACzD,KAAK,iBAAiB,EAAQ,CAAC,CACjC,CACF,CAEI,GAAoB,KAAK,yBAAyB,EACtD,KAAK,mBAAmB,CAC1B,CAOA,iBAAkB,EAAU,EAAO,CACjC,IAAI,EAAoB,EAClB,EAAU,EAAS,MAAM,cAAc,CAAC,CAAC,IAAK,GAAM,EAAE,QAAQ,WAAY,EAAE,CAAC,EAEnF,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,OAAQ,IAAK,CACvC,IAAM,EAAO,EAAQ,GAErB,EAAoB,EAAkB,QAAQ,OAAO,EAAK,IAAK,KAAK,MAAM,EAAM,CAAC,IAAS,EAAE,CAC9F,CAEA,OAAO,CACT,CAEA,yBAA2B,CACzB,IAAM,EAAY,iBACZ,EAAS,KAAK,aAAa,QAAQ,KAAM,GAAO,EAAG,UAAU,SAAS,CAAS,CAAC,EACtF,GAAU,EAAO,UAAU,OAAO,CAAS,GAAK,EAAO,aAAa,QAASA,EAAAA,MAAM,0BAA0B,CAC/G,CAOA,sBAAuB,EAAO,CAC5B,IAAM,EAAY,KAAK,aAAa,cAAc,oBAAoB,EAAM,GAAG,EAC/E,GAAa,EAAU,YAAc,EAAU,WAAW,YAAY,CAAS,CACjF,CAMA,oBAAsB,CACpB,IAAM,EAAO;mDACkCA,EAAAA,MAAM,qBAAqB;uBACvDA,EAAAA,MAAM,wBAAwB;YAEzC,KAAK,SAAS,OAAS,GAAK,CAAC,KAAK,cAC9B,KAAK,SACF,IAAK,GACG;gCACK,EAAO,MAAM,WAAWA,EAAAA,MAAM,2BAA2B,IAAI,EAAO,KAAK;aAEtF,CAAC,CACD,KAAK,EAAE,EACV,GACL;;YAGC,KAAK,SAAS,OAAS,GAAK,KAAK,cAC7B,KAAK,SACF,KAAK,EAAQ,IACL;gCACK,EAAO,MAAM,WAAWA,EAAAA,MAAM,2BAA2B,IAAI,KAAK,iBAAiB,KAAK,cAAe,CAAK,EAAE;aAE3H,CAAC,CACD,KAAK,EAAE,EACV,GACL;YACC,KAAK,YAAY,KAAK,SAAS,SAAW,CAAC,EAAE;;;QAKrD,KAAK,aAAa,mBAAmB,YAAa,CAAI,CACxD,CAMA,oBAAsB,CACpB,KAAK,QAAQ,MAAM,QAAU,OAC7B,IAAM,EAAK,UAAY,KAAK,YAAY,EAAE,EAE1C,KAAK,aAAe,SAAS,cAAc,KAAK,EAChD,KAAK,aAAa,aAAa,KAAM,CAAE,EACvC,KAAK,aAAa,aAAa,QAAS,wBAAwB,EAChE,KAAK,aAAa,aAAa,QAASA,EAAAA,MAAM,sBAAsB,EACpE,IAAM,EAAO;mDACkCA,EAAAA,MAAM,qBAAqB;qDACzBA,EAAAA,MAAM,mBAAmB,iBAAiB,KAAK,aAAa;;6EAEpCA,EAAAA,MAAM,uBAAuB,IAAI,KAAK,OAAO;MAEtH,KAAK,aAAa,UAAY,EAC9B,KAAK,iBAAiB,YAAY,KAAK,YAAY,CACrD,CAOA,gBAAiB,EAAQ,EAAO,CAC9B,IAAM,EAAa,EAAO,sBAAsB,EAC1C,EAAY,EAAM,sBAAsB,EAGxC,EAAW,IAAM,EAAU,OAAS,EAAM,eAC9C,EAAO,UAAY,EAAM,cAAgB,EAAM,UAAY,EAAM,eAI7D,EAAW,OAAS,EAAU,IAAM,EAAM,eAC9C,EAAO,UACL,EAAM,cACL,EAAM,UAAY,EAAM,eACxB,EAAO,cAAgB,EAAM,cAAgB,EAAM,aAAe,EAAM,gBAE/E,CAOA,YAAa,EAAW,CACtB,OAAO,EAAY,mDAAmDA,EAAAA,MAAM,uDAAuD,IAAI,KAAK,QAAQ,MAAQ,EAC9J,CAOA,eAAgB,EAAW,CACzB,IAAM,EAAM,KAAK,aAAa,cAAc,mCAAmC,EAC/E,GAAI,EAAW,CACb,IAAM,EAAO,sDAAsDA,EAAAA,MAAM,0DAA0D,IAAI,KAAK,WAAW,MACvJ,CAAC,GAAO,KAAK,aAAa,qBAAqB,mBAAmB,YAAa,CAAI,CACrF,MACE,GAAO,EAAI,YAAc,EAAI,WAAW,YAAY,CAAG,CAE3D,CACF"}

package/dist/widgets/multiSelect.esm.js

@@ -131,11 +131,12 @@ var t = class {
 				n.push({
 					value: t[this._valueField],
 					text: t[this._textField],
-					selected: typeof t.selected == "boolean" ? t.selected : !1
+					selected: typeof t.selected == "boolean" && t.selected
 				});
 			}
 			return n;
-		} else return null;
+		}
+		return null;
 	}
 	_handleArrows(t) {
 		if (t.keyCode === 40 || t.keyCode === 38) {

package/dist/widgets/multiSelect.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiSelect.esm.js","names":[],"sources":["../../src/widgets/multiSelect.js"],"sourcesContent":["/*\n * IconicMultiSelect v0.7.0\n * Licence:  MIT\n * (c) 2021 Sidney Wimart.\n * repo & configuration: https://github.com/sidneywm/iconic-multiselect\n */\n\n/**\n * @version IconicMultiSelect v0.7.0\n * @licence  MIT\n */\nimport { style } from '../lib/style_multiSelect'\n\nexport class IconicMultiSelect {\n  _data\n  _domElements\n  _event = () => {}\n  _itemTemplate\n  _multiselect\n  _noData\n  _noResults\n  _options = []\n  _placeholder\n  _select\n  _selectContainer\n  _selectedOptions = []\n  _tagTemplate\n  _textField\n  _valueField\n  _cross = `\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    `\n\n  /**\n   * Iconic Multiselect constructor.\n   * @param { Object[] } data - Array of objects.\n   * @param { string } noData - Defines the message when there is no data input.\n   * @param { string } noResults - Defines the message when there is no result if options are filtered.\n   * @param { string } placeholder -  Defines the placeholder's text.\n   * @param { string } select - DOM element to be selected. It must be a HTML Select tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n   * @param { string } textField - Field to select in the object for the text.\n   * @param { string } valueField - Field to select in the object for the value.\n   */\n  constructor ({ data, itemTemplate, noData, noResults, placeholder, select, container, tagTemplate, textField, valueField }) {\n    this._data = data ?? []\n    this._itemTemplate = itemTemplate ?? null\n    this._noData = noData ?? 'No data found.'\n    this._noResults = noResults ?? 'No results found.'\n    this._placeholder = placeholder ?? 'Select...'\n    this._select = select\n    // Timea added a container here\n    this._selectContainer = container\n    this._tagTemplate = tagTemplate ?? null\n    this._textField = textField ?? null\n    this._valueField = valueField ?? null\n  }\n\n  /**\n   * Initialize the Iconic Multiselect component.\n   * @public\n   */\n  init () {\n    // Timea change to use this._select instead of this._selectContainer\n    if (this._select && this._select.nodeName === 'SELECT') {\n      if (this._itemTemplate && this._data.length === 0) { throw new Error('itemTemplate must be initialized with data from the component settings') }\n      if (this._tagTemplate && this._data.length === 0) { throw new Error('tagTemplate must be initialized with data from the component settings') }\n\n      this._options = this._data.length > 0 ? this._getDataFromSettings() : this._getDataFromSelectTag()\n\n      this._renderMultiselect()\n      this._renderOptionsList()\n\n      this._domElements = {\n        clear: this._multiselect.querySelector('.multiselect__clear-btn'),\n        input: this._multiselect.querySelector('.multiselect__input'),\n        optionsContainer: this._multiselect.querySelector('.multiselect__options'),\n        optionsContainerList: this._multiselect.querySelector('.multiselect__options > ul'),\n        options: {\n          list: this._multiselect.querySelectorAll('.multiselect__options > ul > li'),\n          find: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node)) return node\n            }\n            return undefined\n          },\n          some: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node, i)) return true\n            }\n            return false\n          }\n        }\n      }\n\n      this._enableEventListenners()\n      this._initSelectedList()\n    } else {\n      throw new Error(`The selector '${this._select}' did not select any valid select tag.`)\n    }\n  }\n\n  /**\n   * Subscribes to the emitted events.\n   * @param { Function } callback - Callback function which emits a custom event object.\n   * @public\n   */\n  subscribe (callback) {\n    if (typeof callback === 'function') {\n      this._event = callback\n    } else {\n      throw new Error('parameter in the subscribe method is not a function')\n    }\n  }\n\n  /**\n   * Add an option to the selection list.\n   * @param { Object: { text: string; value: string; }} option\n   * @private\n   */\n  _addOptionToList (option, index) {\n    const html = `<span class=\"multiselect__selected\" style=\"${style.multiselect__selected}\" data-value=\"${option.value}\">${\n      this._tagTemplate ? this._processTemplate(this._tagTemplate, index) : option.text\n    }<span class=\"multiselect__remove-btn\" style=\"${style.multiselect__remove_btn}\">${this._cross}</span></span>`\n\n    this._domElements.input.insertAdjacentHTML('beforebegin', html)\n\n    const { lastElementChild: removeBtn } = this._multiselect.querySelector(`span[data-value=\"${option.value}\"]`)\n    removeBtn.addEventListener('click', () => {\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      this._handleOption(target)\n    })\n  }\n\n  /**\n   * Clears all selected options.\n   * @private\n   */\n  _clearSelection () {\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const option = this._selectedOptions[i]\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      target.classList.remove('multiselect__options--selected')\n      target.setAttribute('style', style.multiselect__options)\n      this._removeOptionFromList(target.dataset.value)\n    }\n    this._selectedOptions = []\n    this._handleClearSelectionBtn()\n    this._handlePlaceholder()\n    this._dispatchEvent({\n      action: 'CLEAR_ALL_OPTIONS',\n      selection: this._selectedOptions\n    })\n  }\n\n  /**\n   * Close the options container.\n   * @private\n   */\n  _closeList () {\n    this._domElements.input.value = ''\n    this._domElements.optionsContainer.classList.remove('visible')\n    this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n    this._filterOptions('')\n    this._removeAllArrowSelected()\n  }\n\n  /**\n   * Dispatches new events.\n   * @param { object : { action: string; selection: { option: string; text: string; }[]; value?: string; } } event\n   * @private\n   */\n  _dispatchEvent (event) {\n    this._event(event)\n  }\n\n  /**\n   * Enables all main event listenners.\n   * @private\n   */\n  _enableEventListenners () {\n    document.addEventListener('mouseup', ({ target }) => {\n      if (!this._multiselect.contains(target)) {\n        this._filterOptions('')\n        this._closeList()\n        this._handlePlaceholder()\n      }\n    })\n\n    this._domElements.clear.addEventListener('click', () => {\n      this._clearSelection()\n    })\n\n    for (let i = 0; i < this._domElements.options.list.length; i++) {\n      const option = this._domElements.options.list[i]\n      option.addEventListener('click', ({ target }) => {\n        this._handleOption(target)\n        this._closeList()\n      })\n    }\n\n    this._domElements.input.addEventListener('focus', () => {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    })\n\n    this._domElements.input.addEventListener('input', ({ target: { value } }) => {\n      if (this._domElements.options.list.length > 0) {\n        this._filterOptions(value)\n      }\n    })\n\n    this._domElements.input.addEventListener('keydown', (e) => {\n      this._handleArrows(e)\n      this._handleBackspace(e)\n      this._handleEnter(e)\n    })\n  }\n\n  /**\n   * Filters user input.\n   * @param { string } value\n   * @private\n   */\n  _filterOptions (value) {\n    const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n    const valueLowerCase = value.toLowerCase()\n\n    if (!isOpen && value.length > 0) {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    }\n\n    if (this._domElements.options.list.length > 0) {\n      for (let i = 0; i < this._domElements.options.list.length; i++) {\n        const el = this._domElements.options.list[i]\n        const text = this._itemTemplate ? this._data[i][this._textField] : el.textContent\n\n        if (text.toLowerCase().substring(0, valueLowerCase.length) === valueLowerCase) {\n          this._domElements.optionsContainerList.appendChild(el)\n        } else {\n          el.parentNode && el.parentNode.removeChild(el)\n        }\n      }\n\n      const hasResults = this._domElements.options.some(\n        (el, index) =>\n          (this._itemTemplate ? this._data[index][this._textField] : el.textContent)\n            .toLowerCase()\n            .substring(0, valueLowerCase.length) === valueLowerCase\n      )\n      this._showNoResults(!hasResults)\n    }\n  }\n\n  _generateId (length) {\n    let result = ''\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'\n    const charactersLength = characters.length\n    for (let i = 0; i < length; i++) {\n      result += characters.charAt(Math.floor(Math.random() * charactersLength))\n    }\n    return result\n  }\n\n  /**\n   * Gets data from select tag.\n   * @private\n   */\n  _getDataFromSelectTag () {\n    const arr = []\n    const { options } = this._select\n    for (let i = 0; i < options.length; i++) {\n      const item = options[i]\n      arr.push({\n        text: item.text,\n        value: item.value,\n        selected: item.hasAttribute('selected')\n      })\n    }\n    return arr\n  }\n\n  /**\n   * Gets data from settings.\n   * @private\n   */\n  _getDataFromSettings () {\n    if (this._data.length > 0 && this._valueField && this._textField) {\n      const isValueFieldValid = typeof this._valueField === 'string'\n      const isTextFieldValid = typeof this._textField === 'string'\n      const arr = []\n\n      if (!isValueFieldValid || !isTextFieldValid) {\n        throw new Error('textField and valueField must be of type string')\n      }\n\n      for (let i = 0; i < this._data.length; i++) {\n        const item = this._data[i]\n        arr.push({\n          value: item[this._valueField],\n          text: item[this._textField],\n          selected: typeof item.selected === 'boolean' ? item.selected : false\n        })\n      }\n      return arr\n    } else {\n      return null\n    }\n  }\n\n  /**\n   * Handles Arrow up & Down. Selection of an option is also possible with these keys.\n   * @param { Event } event\n   * @private\n   */\n  _handleArrows (event) {\n    if (event.keyCode === 40 || event.keyCode === 38) {\n      event.preventDefault()\n      const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n      // An updated view of the container is needed because of the filtering option\n      const optionsContainerList = this._multiselect.querySelector('.multiselect__options > ul')\n\n      if (!isOpen) {\n        this._domElements.optionsContainer.classList.add('visible')\n        this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n        optionsContainerList.firstElementChild.classList.add('arrow-selected')\n        optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        optionsContainerList.firstElementChild.scrollIntoView(false)\n      } else {\n        let selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n        const action = {\n          ArrowUp: 'previous',\n          Up: 'previous',\n          ArrowDown: 'next',\n          Down: 'next'\n        }\n\n        if (!selected) {\n          optionsContainerList.firstElementChild.classList.add('arrow-selected')\n          optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          optionsContainerList.firstElementChild.scrollIntoView(false)\n          return\n        }\n\n        selected.classList.remove('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li)\n\n        selected = selected[action[event.key] + 'ElementSibling']\n\n        // Go to start or end of the popup list\n        if (!selected) {\n          selected =\n          optionsContainerList.children[action[event.key] === 'next' ? 0 : optionsContainerList.children.length - 1]\n          selected.classList.add('arrow-selected')\n          selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          this._scrollIntoView(optionsContainerList, selected)\n          return\n        }\n\n        selected.classList.add('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        this._scrollIntoView(optionsContainerList, selected)\n      }\n    }\n  }\n\n  /**\n   * Handles the backspace key event - Deletes the preceding option in the selection list.\n   * @param { Event } e\n   * @private\n   */\n  _handleBackspace (e) {\n    if (e.keyCode === 8 && e.target.value === '') {\n      const lastSelectedOption =\n        this._selectedOptions.length > 0 ? this._selectedOptions[this._selectedOptions.length - 1] : null\n\n      if (lastSelectedOption) {\n        const targetLastSelectedOption = this._multiselect.querySelector(\n          `li[data-value=\"${lastSelectedOption.value}\"]`\n        )\n        this._handleOption(targetLastSelectedOption)\n\n        if (this._selectedOptions.length === 0) {\n          this._domElements.optionsContainer.classList.remove('visible')\n          this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n        }\n      }\n    }\n  }\n\n  /**\n   * Shows clear selection button if some options are selected.\n   * @private\n   */\n  _handleClearSelectionBtn () {\n    if (this._selectedOptions.length > 0) {\n      this._domElements.clear.style.display = 'flex'\n    } else {\n      this._domElements.clear.style.display = 'none'\n    }\n  }\n\n  /**\n   * Handles the enter key event.\n   * @param { Event } event\n   * @private\n   */\n  _handleEnter (event) {\n    if (event.keyCode === 13) {\n      const selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n      if (selected) {\n        this._handleOption(selected)\n        this._closeList()\n      }\n    }\n  }\n\n  _handleOption (target, dispatchEvent = true) {\n    // Remove\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const el = this._selectedOptions[i]\n      if (el.value === target.dataset.value) {\n        target.classList.remove('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options)\n        this._selectedOptions.splice(i, 1)\n        this._removeOptionFromList(target.dataset.value)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'REMOVE_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n\n    // Add\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.value === target.dataset.value) {\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'ADD_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n  }\n\n  /**\n   * Shows the placeholder if no options are selected.\n   * @private\n   */\n  _handlePlaceholder () {\n    this._domElements.input.placeholder = this._placeholder\n  }\n\n  _initSelectedList () {\n    let hasItemsSelected = false\n\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.selected) {\n        hasItemsSelected = true\n        const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n      }\n    }\n\n    if (hasItemsSelected) { this._handleClearSelectionBtn() }\n    this._handlePlaceholder()\n  }\n\n  /**\n   * Process the custom template.\n   * @param { string } template\n   * @private\n   */\n  _processTemplate (template, index) {\n    let processedTemplate = template\n    const objAttr = template.match(/\\$\\{(\\w+)\\}/g).map((e) => e.replace(/\\$\\{|\\}/g, ''))\n\n    for (let i = 0; i < objAttr.length; i++) {\n      const attr = objAttr[i]\n      // eslint-disable-next-line no-useless-escape\n      processedTemplate = processedTemplate.replace(`\\$\\{${attr}\\}`, this._data[index][attr] ?? '')\n    }\n\n    return processedTemplate\n  }\n\n  _removeAllArrowSelected () {\n    const className = 'arrow-selected'\n    const target = this._domElements.options.find((el) => el.classList.contains(className))\n    target && target.classList.remove(className) && target.setAttribute('style', style.multiselect__options_ul_li)\n  }\n\n  /**\n   * Removes an option from the list.\n   * @param { string } value\n   * @private\n   */\n  _removeOptionFromList (value) {\n    const optionDom = this._multiselect.querySelector(`span[data-value=\"${value}\"]`)\n    optionDom && optionDom.parentNode && optionDom.parentNode.removeChild(optionDom)\n  }\n\n  /**\n   * Renders the multiselect options list view.\n   * @private\n   */\n  _renderOptionsList () {\n    const html = `\n        <div class=\"multiselect__options\" style=\"${style.multiselect__options}\">\n          <ul style=\"${style.multiselect__options_ul}\">\n          ${\n            this._options.length > 0 && !this._itemTemplate\n              ? this._options\n                  .map((option) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${option.text}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n\n          ${\n            this._options.length > 0 && this._itemTemplate\n              ? this._options\n                  .map((option, index) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${this._processTemplate(this._itemTemplate, index)}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n          ${this._showNoData(this._options.length === 0)}\n          </ul>\n        </div>\n      `\n\n    this._multiselect.insertAdjacentHTML('beforeend', html)\n  }\n\n  /**\n   * Renders the multiselect view.\n   * @private\n   */\n  _renderMultiselect () {\n    this._select.style.display = 'none'\n    const id = 'iconic-' + this._generateId(20)\n    // Timea created dedicated div element because previous code was not rendering\n    this._multiselect = document.createElement('div')\n    this._multiselect.setAttribute('id', id)\n    this._multiselect.setAttribute('class', 'multiselect__container')\n    this._multiselect.setAttribute('style', style.multiselect__container)\n    const html = `\n        <div class=\"multiselect__wrapper\" style=\"${style.multiselect__wrapper}\">\n          <input class=\"multiselect__input\" style=\"${style.multiselect__input}\" placeholder=\"${this._placeholder}\" />\n        </div>\n        <span style=\"display: none;\" class=\"multiselect__clear-btn\" style=\"${style.multiselect__clear_btn}\">${this._cross}</span>\n    `\n    this._multiselect.innerHTML = html\n    this._selectContainer.appendChild(this._multiselect)\n  }\n\n  /**\n   * ScrollIntoView - This small utility reproduces the behavior of .scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n   * This is for IE compatibility without a need of a polyfill\n   * @private\n   */\n  _scrollIntoView (parent, child) {\n    const rectParent = parent.getBoundingClientRect()\n    const rectChild = child.getBoundingClientRect()\n\n    // Detect if not visible at top and then scroll to the top\n    if (!(rectParent.top < rectChild.bottom - child.offsetHeight)) {\n      parent.scrollTop = child.clientHeight + (child.offsetTop - child.offsetHeight)\n    }\n\n    // Detect if not visible at bottom and then scroll to the bottom\n    if (!(rectParent.bottom > rectChild.top + child.offsetHeight)) {\n      parent.scrollTop =\n        child.clientHeight +\n        (child.offsetTop - child.offsetHeight) -\n        (parent.offsetHeight - (child.offsetHeight + (child.offsetHeight - child.clientHeight)))\n    }\n  }\n\n  /**\n   * Shows a no data message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoData (condition) {\n    return condition ? `<p class=\"multiselect__options--no-data\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_data}\">${this._noData}</p>` : ''\n  }\n\n  /**\n   * Shows a no results message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoResults (condition) {\n    const dom = this._multiselect.querySelector('.multiselect__options--no-results')\n    if (condition) {\n      const html = `<p class=\"multiselect__options--no-results\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_results}\">${this._noResults}</p>`\n      !dom && this._domElements.optionsContainerList.insertAdjacentHTML('beforeend', html)\n    } else {\n      dom && dom.parentNode && dom.parentNode.removeChild(dom)\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"multiSelect.esm.js","names":[],"sources":["../../src/widgets/multiSelect.js"],"sourcesContent":["/*\n * IconicMultiSelect v0.7.0\n * Licence:  MIT\n * (c) 2021 Sidney Wimart.\n * repo & configuration: https://github.com/sidneywm/iconic-multiselect\n */\n\n/**\n * @version IconicMultiSelect v0.7.0\n * @licence  MIT\n */\nimport { style } from '../lib/style_multiSelect'\n\nexport class IconicMultiSelect {\n  _data\n  _domElements\n  _event = () => {}\n  _itemTemplate\n  _multiselect\n  _noData\n  _noResults\n  _options = []\n  _placeholder\n  _select\n  _selectContainer\n  _selectedOptions = []\n  _tagTemplate\n  _textField\n  _valueField\n  _cross = `\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    `\n\n  /**\n   * Iconic Multiselect constructor.\n   * @param { Object[] } data - Array of objects.\n   * @param { string } noData - Defines the message when there is no data input.\n   * @param { string } noResults - Defines the message when there is no result if options are filtered.\n   * @param { string } placeholder -  Defines the placeholder's text.\n   * @param { string } select - DOM element to be selected. It must be a HTML Select tag - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n   * @param { string } textField - Field to select in the object for the text.\n   * @param { string } valueField - Field to select in the object for the value.\n   */\n  constructor ({ data, itemTemplate, noData, noResults, placeholder, select, container, tagTemplate, textField, valueField }) {\n    this._data = data ?? []\n    this._itemTemplate = itemTemplate ?? null\n    this._noData = noData ?? 'No data found.'\n    this._noResults = noResults ?? 'No results found.'\n    this._placeholder = placeholder ?? 'Select...'\n    this._select = select\n    // Timea added a container here\n    this._selectContainer = container\n    this._tagTemplate = tagTemplate ?? null\n    this._textField = textField ?? null\n    this._valueField = valueField ?? null\n  }\n\n  /**\n   * Initialize the Iconic Multiselect component.\n   * @public\n   */\n  init () {\n    // Timea change to use this._select instead of this._selectContainer\n    if (this._select && this._select.nodeName === 'SELECT') {\n      if (this._itemTemplate && this._data.length === 0) { throw new Error('itemTemplate must be initialized with data from the component settings') }\n      if (this._tagTemplate && this._data.length === 0) { throw new Error('tagTemplate must be initialized with data from the component settings') }\n\n      this._options = this._data.length > 0 ? this._getDataFromSettings() : this._getDataFromSelectTag()\n\n      this._renderMultiselect()\n      this._renderOptionsList()\n\n      this._domElements = {\n        clear: this._multiselect.querySelector('.multiselect__clear-btn'),\n        input: this._multiselect.querySelector('.multiselect__input'),\n        optionsContainer: this._multiselect.querySelector('.multiselect__options'),\n        optionsContainerList: this._multiselect.querySelector('.multiselect__options > ul'),\n        options: {\n          list: this._multiselect.querySelectorAll('.multiselect__options > ul > li'),\n          find: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node)) return node\n            }\n            return undefined\n          },\n          some: function (callbackFn) {\n            for (let i = 0; i < this.list.length; i++) {\n              const node = this.list[i]\n              if (callbackFn(node, i)) return true\n            }\n            return false\n          }\n        }\n      }\n\n      this._enableEventListenners()\n      this._initSelectedList()\n    } else {\n      throw new Error(`The selector '${this._select}' did not select any valid select tag.`)\n    }\n  }\n\n  /**\n   * Subscribes to the emitted events.\n   * @param { Function } callback - Callback function which emits a custom event object.\n   * @public\n   */\n  subscribe (callback) {\n    if (typeof callback === 'function') {\n      this._event = callback\n    } else {\n      throw new Error('parameter in the subscribe method is not a function')\n    }\n  }\n\n  /**\n   * Add an option to the selection list.\n   * @param { Object: { text: string; value: string; }} option\n   * @private\n   */\n  _addOptionToList (option, index) {\n    const html = `<span class=\"multiselect__selected\" style=\"${style.multiselect__selected}\" data-value=\"${option.value}\">${\n      this._tagTemplate ? this._processTemplate(this._tagTemplate, index) : option.text\n    }<span class=\"multiselect__remove-btn\" style=\"${style.multiselect__remove_btn}\">${this._cross}</span></span>`\n\n    this._domElements.input.insertAdjacentHTML('beforebegin', html)\n\n    const { lastElementChild: removeBtn } = this._multiselect.querySelector(`span[data-value=\"${option.value}\"]`)\n    removeBtn.addEventListener('click', () => {\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      this._handleOption(target)\n    })\n  }\n\n  /**\n   * Clears all selected options.\n   * @private\n   */\n  _clearSelection () {\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const option = this._selectedOptions[i]\n      const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n      target.classList.remove('multiselect__options--selected')\n      target.setAttribute('style', style.multiselect__options)\n      this._removeOptionFromList(target.dataset.value)\n    }\n    this._selectedOptions = []\n    this._handleClearSelectionBtn()\n    this._handlePlaceholder()\n    this._dispatchEvent({\n      action: 'CLEAR_ALL_OPTIONS',\n      selection: this._selectedOptions\n    })\n  }\n\n  /**\n   * Close the options container.\n   * @private\n   */\n  _closeList () {\n    this._domElements.input.value = ''\n    this._domElements.optionsContainer.classList.remove('visible')\n    this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n    this._filterOptions('')\n    this._removeAllArrowSelected()\n  }\n\n  /**\n   * Dispatches new events.\n   * @param { object : { action: string; selection: { option: string; text: string; }[]; value?: string; } } event\n   * @private\n   */\n  _dispatchEvent (event) {\n    this._event(event)\n  }\n\n  /**\n   * Enables all main event listenners.\n   * @private\n   */\n  _enableEventListenners () {\n    document.addEventListener('mouseup', ({ target }) => {\n      if (!this._multiselect.contains(target)) {\n        this._filterOptions('')\n        this._closeList()\n        this._handlePlaceholder()\n      }\n    })\n\n    this._domElements.clear.addEventListener('click', () => {\n      this._clearSelection()\n    })\n\n    for (let i = 0; i < this._domElements.options.list.length; i++) {\n      const option = this._domElements.options.list[i]\n      option.addEventListener('click', ({ target }) => {\n        this._handleOption(target)\n        this._closeList()\n      })\n    }\n\n    this._domElements.input.addEventListener('focus', () => {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    })\n\n    this._domElements.input.addEventListener('input', ({ target: { value } }) => {\n      if (this._domElements.options.list.length > 0) {\n        this._filterOptions(value)\n      }\n    })\n\n    this._domElements.input.addEventListener('keydown', (e) => {\n      this._handleArrows(e)\n      this._handleBackspace(e)\n      this._handleEnter(e)\n    })\n  }\n\n  /**\n   * Filters user input.\n   * @param { string } value\n   * @private\n   */\n  _filterOptions (value) {\n    const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n    const valueLowerCase = value.toLowerCase()\n\n    if (!isOpen && value.length > 0) {\n      this._domElements.optionsContainer.classList.add('visible')\n      this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n    }\n\n    if (this._domElements.options.list.length > 0) {\n      for (let i = 0; i < this._domElements.options.list.length; i++) {\n        const el = this._domElements.options.list[i]\n        const text = this._itemTemplate ? this._data[i][this._textField] : el.textContent\n\n        if (text.toLowerCase().substring(0, valueLowerCase.length) === valueLowerCase) {\n          this._domElements.optionsContainerList.appendChild(el)\n        } else {\n          el.parentNode && el.parentNode.removeChild(el)\n        }\n      }\n\n      const hasResults = this._domElements.options.some(\n        (el, index) =>\n          (this._itemTemplate ? this._data[index][this._textField] : el.textContent)\n            .toLowerCase()\n            .substring(0, valueLowerCase.length) === valueLowerCase\n      )\n      this._showNoResults(!hasResults)\n    }\n  }\n\n  _generateId (length) {\n    let result = ''\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'\n    const charactersLength = characters.length\n    for (let i = 0; i < length; i++) {\n      result += characters.charAt(Math.floor(Math.random() * charactersLength))\n    }\n    return result\n  }\n\n  /**\n   * Gets data from select tag.\n   * @private\n   */\n  _getDataFromSelectTag () {\n    const arr = []\n    const { options } = this._select\n    for (let i = 0; i < options.length; i++) {\n      const item = options[i]\n      arr.push({\n        text: item.text,\n        value: item.value,\n        selected: item.hasAttribute('selected')\n      })\n    }\n    return arr\n  }\n\n  /**\n   * Gets data from settings.\n   * @private\n   */\n  _getDataFromSettings () {\n    if (this._data.length > 0 && this._valueField && this._textField) {\n      const isValueFieldValid = typeof this._valueField === 'string'\n      const isTextFieldValid = typeof this._textField === 'string'\n      const arr = []\n\n      if (!isValueFieldValid || !isTextFieldValid) {\n        throw new Error('textField and valueField must be of type string')\n      }\n\n      for (let i = 0; i < this._data.length; i++) {\n        const item = this._data[i]\n        arr.push({\n          value: item[this._valueField],\n          text: item[this._textField],\n          selected: typeof item.selected === 'boolean' ? item.selected : false\n        })\n      }\n      return arr\n    } else {\n      return null\n    }\n  }\n\n  /**\n   * Handles Arrow up & Down. Selection of an option is also possible with these keys.\n   * @param { Event } event\n   * @private\n   */\n  _handleArrows (event) {\n    if (event.keyCode === 40 || event.keyCode === 38) {\n      event.preventDefault()\n      const isOpen = this._domElements.optionsContainer.classList.contains('visible')\n      // An updated view of the container is needed because of the filtering option\n      const optionsContainerList = this._multiselect.querySelector('.multiselect__options > ul')\n\n      if (!isOpen) {\n        this._domElements.optionsContainer.classList.add('visible')\n        this._domElements.optionsContainer.setAttribute('style', style.multiselect__options_visible)\n        optionsContainerList.firstElementChild.classList.add('arrow-selected')\n        optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        optionsContainerList.firstElementChild.scrollIntoView(false)\n      } else {\n        let selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n        const action = {\n          ArrowUp: 'previous',\n          Up: 'previous',\n          ArrowDown: 'next',\n          Down: 'next'\n        }\n\n        if (!selected) {\n          optionsContainerList.firstElementChild.classList.add('arrow-selected')\n          optionsContainerList.firstElementChild.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          optionsContainerList.firstElementChild.scrollIntoView(false)\n          return\n        }\n\n        selected.classList.remove('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li)\n\n        selected = selected[action[event.key] + 'ElementSibling']\n\n        // Go to start or end of the popup list\n        if (!selected) {\n          selected =\n          optionsContainerList.children[action[event.key] === 'next' ? 0 : optionsContainerList.children.length - 1]\n          selected.classList.add('arrow-selected')\n          selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n          this._scrollIntoView(optionsContainerList, selected)\n          return\n        }\n\n        selected.classList.add('arrow-selected')\n        selected.setAttribute('style', style.multiselect__options_ul_li_arrow_selected)\n        this._scrollIntoView(optionsContainerList, selected)\n      }\n    }\n  }\n\n  /**\n   * Handles the backspace key event - Deletes the preceding option in the selection list.\n   * @param { Event } e\n   * @private\n   */\n  _handleBackspace (e) {\n    if (e.keyCode === 8 && e.target.value === '') {\n      const lastSelectedOption =\n        this._selectedOptions.length > 0 ? this._selectedOptions[this._selectedOptions.length - 1] : null\n\n      if (lastSelectedOption) {\n        const targetLastSelectedOption = this._multiselect.querySelector(\n          `li[data-value=\"${lastSelectedOption.value}\"]`\n        )\n        this._handleOption(targetLastSelectedOption)\n\n        if (this._selectedOptions.length === 0) {\n          this._domElements.optionsContainer.classList.remove('visible')\n          this._domElements.optionsContainer.setAttribute('style', style.multiselect__options)\n        }\n      }\n    }\n  }\n\n  /**\n   * Shows clear selection button if some options are selected.\n   * @private\n   */\n  _handleClearSelectionBtn () {\n    if (this._selectedOptions.length > 0) {\n      this._domElements.clear.style.display = 'flex'\n    } else {\n      this._domElements.clear.style.display = 'none'\n    }\n  }\n\n  /**\n   * Handles the enter key event.\n   * @param { Event } event\n   * @private\n   */\n  _handleEnter (event) {\n    if (event.keyCode === 13) {\n      const selected = this._multiselect.querySelector('.multiselect__options ul li.arrow-selected')\n      if (selected) {\n        this._handleOption(selected)\n        this._closeList()\n      }\n    }\n  }\n\n  _handleOption (target, dispatchEvent = true) {\n    // Remove\n    for (let i = 0; i < this._selectedOptions.length; i++) {\n      const el = this._selectedOptions[i]\n      if (el.value === target.dataset.value) {\n        target.classList.remove('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options)\n        this._selectedOptions.splice(i, 1)\n        this._removeOptionFromList(target.dataset.value)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'REMOVE_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n\n    // Add\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.value === target.dataset.value) {\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n        this._handleClearSelectionBtn()\n        this._handlePlaceholder()\n\n        return (\n          dispatchEvent &&\n          this._dispatchEvent({\n            action: 'ADD_OPTION',\n            value: target.dataset.value,\n            selection: this._selectedOptions\n          })\n        )\n      }\n    }\n  }\n\n  /**\n   * Shows the placeholder if no options are selected.\n   * @private\n   */\n  _handlePlaceholder () {\n    this._domElements.input.placeholder = this._placeholder\n  }\n\n  _initSelectedList () {\n    let hasItemsSelected = false\n\n    for (let i = 0; i < this._options.length; i++) {\n      const option = this._options[i]\n      if (option.selected) {\n        hasItemsSelected = true\n        const target = this._domElements.options.find((el) => el.dataset.value === option.value)\n        target.classList.add('multiselect__options--selected')\n        target.setAttribute('style', style.multiselect__options_selected)\n        this._selectedOptions = [...this._selectedOptions, option]\n        this._addOptionToList(option, i)\n      }\n    }\n\n    if (hasItemsSelected) { this._handleClearSelectionBtn() }\n    this._handlePlaceholder()\n  }\n\n  /**\n   * Process the custom template.\n   * @param { string } template\n   * @private\n   */\n  _processTemplate (template, index) {\n    let processedTemplate = template\n    const objAttr = template.match(/\\$\\{(\\w+)\\}/g).map((e) => e.replace(/\\$\\{|\\}/g, ''))\n\n    for (let i = 0; i < objAttr.length; i++) {\n      const attr = objAttr[i]\n      // eslint-disable-next-line no-useless-escape\n      processedTemplate = processedTemplate.replace(`\\$\\{${attr}\\}`, this._data[index][attr] ?? '')\n    }\n\n    return processedTemplate\n  }\n\n  _removeAllArrowSelected () {\n    const className = 'arrow-selected'\n    const target = this._domElements.options.find((el) => el.classList.contains(className))\n    target && target.classList.remove(className) && target.setAttribute('style', style.multiselect__options_ul_li)\n  }\n\n  /**\n   * Removes an option from the list.\n   * @param { string } value\n   * @private\n   */\n  _removeOptionFromList (value) {\n    const optionDom = this._multiselect.querySelector(`span[data-value=\"${value}\"]`)\n    optionDom && optionDom.parentNode && optionDom.parentNode.removeChild(optionDom)\n  }\n\n  /**\n   * Renders the multiselect options list view.\n   * @private\n   */\n  _renderOptionsList () {\n    const html = `\n        <div class=\"multiselect__options\" style=\"${style.multiselect__options}\">\n          <ul style=\"${style.multiselect__options_ul}\">\n          ${\n            this._options.length > 0 && !this._itemTemplate\n              ? this._options\n                  .map((option) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${option.text}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n\n          ${\n            this._options.length > 0 && this._itemTemplate\n              ? this._options\n                  .map((option, index) => {\n                    return `\n              <li data-value=\"${option.value}\" style=\"${style.multiselect__options_ul_li}\">${this._processTemplate(this._itemTemplate, index)}</li>\n            `\n                  })\n                  .join('')\n              : ''\n          }\n          ${this._showNoData(this._options.length === 0)}\n          </ul>\n        </div>\n      `\n\n    this._multiselect.insertAdjacentHTML('beforeend', html)\n  }\n\n  /**\n   * Renders the multiselect view.\n   * @private\n   */\n  _renderMultiselect () {\n    this._select.style.display = 'none'\n    const id = 'iconic-' + this._generateId(20)\n    // Timea created dedicated div element because previous code was not rendering\n    this._multiselect = document.createElement('div')\n    this._multiselect.setAttribute('id', id)\n    this._multiselect.setAttribute('class', 'multiselect__container')\n    this._multiselect.setAttribute('style', style.multiselect__container)\n    const html = `\n        <div class=\"multiselect__wrapper\" style=\"${style.multiselect__wrapper}\">\n          <input class=\"multiselect__input\" style=\"${style.multiselect__input}\" placeholder=\"${this._placeholder}\" />\n        </div>\n        <span style=\"display: none;\" class=\"multiselect__clear-btn\" style=\"${style.multiselect__clear_btn}\">${this._cross}</span>\n    `\n    this._multiselect.innerHTML = html\n    this._selectContainer.appendChild(this._multiselect)\n  }\n\n  /**\n   * ScrollIntoView - This small utility reproduces the behavior of .scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n   * This is for IE compatibility without a need of a polyfill\n   * @private\n   */\n  _scrollIntoView (parent, child) {\n    const rectParent = parent.getBoundingClientRect()\n    const rectChild = child.getBoundingClientRect()\n\n    // Detect if not visible at top and then scroll to the top\n    if (!(rectParent.top < rectChild.bottom - child.offsetHeight)) {\n      parent.scrollTop = child.clientHeight + (child.offsetTop - child.offsetHeight)\n    }\n\n    // Detect if not visible at bottom and then scroll to the bottom\n    if (!(rectParent.bottom > rectChild.top + child.offsetHeight)) {\n      parent.scrollTop =\n        child.clientHeight +\n        (child.offsetTop - child.offsetHeight) -\n        (parent.offsetHeight - (child.offsetHeight + (child.offsetHeight - child.clientHeight)))\n    }\n  }\n\n  /**\n   * Shows a no data message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoData (condition) {\n    return condition ? `<p class=\"multiselect__options--no-data\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_data}\">${this._noData}</p>` : ''\n  }\n\n  /**\n   * Shows a no results message.\n   * @param { boolean } condition\n   * @private\n   */\n  _showNoResults (condition) {\n    const dom = this._multiselect.querySelector('.multiselect__options--no-results')\n    if (condition) {\n      const html = `<p class=\"multiselect__options--no-results\" style=\"${style.multiselect__options_ul_p_multiselect__options_no_results}\">${this._noResults}</p>`\n      !dom && this._domElements.optionsContainerList.insertAdjacentHTML('beforeend', html)\n    } else {\n      dom && dom.parentNode && dom.parentNode.removeChild(dom)\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/widgets/peoplePicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"peoplePicker.cjs.js","names":["solidLogicSingleton","errorMessageBlock","ns","rdf","iconBase"],"sources":["../../src/widgets/peoplePicker.js"],"sourcesContent":["/**\n *\n * People Picker Pane\n *\n * This pane offers a mechanism for selecting a set of individuals, groups, or\n * organizations to take some action on.\n *\n * Assumptions\n *   - Assumes that the user has a type index entry for vcard:AddressBook. @@ bad assuption\n *\n */\nimport escape from 'escape-html'\nimport { v4 as uuidv4 } from 'uuid'\nimport * as rdf from 'rdflib'\nimport * as debug from '../lib/debug'\n\nimport { makeDropTarget } from './dragAndDrop'\nimport { errorMessageBlock } from './error'\nimport { iconBase } from '../lib/iconBase'\nimport ns from '../lib/ns'\nimport { solidLogicSingleton } from 'solid-logic'\n\nconst kb = solidLogicSingleton.store\n\nexport class PeoplePicker {\n  constructor (element, typeIndex, groupPickedCb, options) { // @@ can't expect typeindex to be passed\n    this.options = options || {}\n    this.element = element\n    this.typeIndex = typeIndex\n    this.groupPickedCb = groupPickedCb\n    this.selectedgroup = this.options.selectedgroup // current selected group if any\n    this.onSelectGroup = this.onSelectGroup.bind(this)\n  }\n\n  render () {\n    const container = document.createElement('div')\n    container.style.maxWidth = '350px'\n    container.style.minHeight = '200px'\n    container.style.outline = '1px solid black'\n    container.style.display = 'flex'\n\n    if (this.selectedgroup) {\n      container.style.flexDirection = 'column'\n      const selectedGroup = document.createElement('div')\n      new Group(selectedGroup, this.selectedgroup).render()\n      const changeGroupButton = document.createElement('button')\n      changeGroupButton.textContent = escape('Change group')\n      changeGroupButton.addEventListener('click', _event => {\n        this.selectedgroup = null\n        this.render()\n      })\n      container.appendChild(selectedGroup)\n      container.appendChild(changeGroupButton)\n    } else {\n      this.findAddressBook(this.typeIndex)\n        .then(({ book }) => {\n          const chooseExistingGroupButton = document.createElement('button')\n          chooseExistingGroupButton.textContent = escape(\n            'Pick an existing group'\n          )\n          chooseExistingGroupButton.style.margin = 'auto'\n          chooseExistingGroupButton.addEventListener('click', _event => {\n            new GroupPicker(container, book, this.onSelectGroup).render()\n          })\n\n          const createNewGroupButton = document.createElement('button')\n          createNewGroupButton.textContent = escape('Create a new group')\n          createNewGroupButton.style.margin = 'auto'\n          createNewGroupButton.addEventListener('click', _event => {\n            this.createNewGroup(book, this.options.defaultNewGroupName)\n              .then(({ group }) => {\n                new GroupBuilder(\n                  this.element,\n                  book,\n                  group,\n                  this.onSelectGroup\n                ).render()\n              })\n              .catch(errorBody => {\n                this.element.appendChild(\n                  errorMessageBlock(\n                    document,\n                    escape(`Error creating a new group. (${errorBody})`)\n                  )\n                )\n              })\n          })\n\n          container.appendChild(chooseExistingGroupButton)\n          container.appendChild(createNewGroupButton)\n\n          this.element.innerHTML = ''\n          this.element.appendChild(container)\n        })\n        .catch(err => {\n          this.element.appendChild(\n            errorMessageBlock(\n              document,\n              escape(`Could find your groups. (${err})`)\n            )\n          )\n        })\n    }\n\n    this.element.innerHTML = ''\n    this.element.appendChild(container)\n    return this\n  }\n\n  findAddressBook (typeIndex) {\n    return new Promise((resolve, reject) => {\n      kb.fetcher.nowOrWhenFetched(typeIndex, (ok, err) => {\n        if (!ok) {\n          return reject(err)\n        }\n        const bookRegistration = kb.any(\n          null,\n          ns.solid('forClass'),\n          ns.vcard('AddressBook')\n        )\n        if (!bookRegistration) {\n          return reject(\n            new Error(\n              'no address book registered in the solid type index ' + typeIndex\n            )\n          )\n        }\n        const book = kb.any(bookRegistration, ns.solid('instance'))\n        if (!book) {\n          return reject(new Error('incomplete address book registration'))\n        }\n        kb.fetcher\n          .load(book)\n          .then(function (_xhr) {\n            return resolve({ book })\n          })\n          .catch(function (errr) {\n            return reject(new Error('Could not load address book ' + errr))\n          })\n      })\n    })\n  }\n\n  createNewGroup (book, defaultNewGroupName) {\n    const { groupIndex, groupContainer } = indexes(book)\n    const group = rdf.sym(\n      `${groupContainer.uri}${uuidv4().slice(0, 8)}.ttl#this`\n    )\n    const name = defaultNewGroupName || 'Untitled Group'\n\n    // NOTE that order matters here.  Unfortunately this type of update is\n    // non-atomic in that solid requires us to send two PATCHes, either of which\n    // might fail.\n    const patchPromises = [group.doc(), groupIndex].map(doc => {\n      const typeStatement = rdf.st(group, ns.rdf('type'), ns.vcard('Group'), doc)\n      const nameStatement = rdf.st(group, ns.vcard('fn'), name, group.doc(), doc)\n      const includesGroupStatement = rdf.st(\n        book,\n        ns.vcard('includesGroup'),\n        group,\n        doc\n      )\n      const toIns = doc.equals(groupIndex)\n        ? [typeStatement, nameStatement, includesGroupStatement]\n        : [typeStatement, nameStatement]\n      return patch(doc.uri, { toIns }).then(() => {\n        toIns.forEach(st => {\n          kb.add(st)\n        })\n      })\n    })\n    return Promise.all(patchPromises)\n      .then(() => ({ group }))\n      .catch(err => {\n        debug.log('Could not create new group.  PATCH failed ' + err)\n        throw new Error(\n          `Couldn't create new group.  PATCH failed for (${\n          err.xhr ? err.xhr.responseURL : ''\n          } )`\n        )\n      })\n  }\n\n  onSelectGroup (group) {\n    this.selectedgroup = group\n    this.groupPickedCb(group)\n    this.render()\n  }\n}\n\nexport class GroupPicker {\n  constructor (element, book, onSelectGroup) {\n    this.element = element\n    this.book = book\n    this.onSelectGroup = onSelectGroup\n  }\n\n  render () {\n    this.loadGroups()\n      .then(groups => {\n        // render the groups\n        const container = document.createElement('div')\n        container.style.display = 'flex'\n        container.style.flexDirection = 'column'\n        groups.forEach(group => {\n          const groupButton = document.createElement('button')\n          groupButton.addEventListener('click', this.handleClickGroup(group))\n          new Group(groupButton, group).render()\n          container.appendChild(groupButton)\n        })\n        this.element.innerHTML = ''\n        this.element.appendChild(container)\n      })\n      .catch(err => {\n        this.element.appendChild(\n          errorMessageBlock(\n            document,\n            escape(`There was an error loading your groups. (${err})`)\n          )\n        )\n      })\n    return this\n  }\n\n  loadGroups () {\n    return new Promise((resolve, reject) => {\n      const { groupIndex } = indexes(this.book)\n      kb.fetcher.nowOrWhenFetched(groupIndex, (ok, err) => {\n        if (!ok) {\n          return reject(err)\n        }\n        const groups = kb.each(this.book, ns.vcard('includesGroup'))\n        return resolve(groups)\n      })\n    })\n  }\n\n  handleClickGroup (group) {\n    return _event => {\n      this.onSelectGroup(group)\n    }\n  }\n}\n\nexport class Group {\n  constructor (element, group) {\n    this.element = element\n    this.group = group\n  }\n\n  render () {\n    const container = document.createElement('div')\n    container.textContent = escape(\n      // @@@@@ need to escape??\n      getWithDefault(this.group, ns.vcard('fn'), `[${this.group.value}]`)\n    )\n    this.element.innerHTML = ''\n    this.element.appendChild(container)\n    return this\n  }\n}\n\nexport class GroupBuilder {\n  constructor (element, book, group, doneBuildingCb, groupChangedCb) {\n    this.element = element\n    this.book = book\n    this.group = group\n    this.onGroupChanged = (err, changeType, agent) => {\n      if (groupChangedCb) {\n        groupChangedCb(err, changeType, agent)\n      }\n    }\n    this.groupChangedCb = groupChangedCb\n    this.doneBuildingCb = doneBuildingCb\n  }\n\n  refresh () {\n    // TODO: implement\n  }\n\n  render () {\n    const dropContainer = document.createElement('div')\n    dropContainer.style.maxWidth = '350px'\n    dropContainer.style.minHeight = '200px'\n    dropContainer.style.outline = '1px solid black'\n    dropContainer.style.display = 'flex'\n    dropContainer.style.flexDirection = 'column'\n\n    makeDropTarget(dropContainer, uris => {\n      uris.forEach(uri => {\n        this.add(uri).catch(err => {\n          this.element.appendChild(\n            errorMessageBlock(\n              document,\n              escape(`Could not add the given WebId. (${err})`)\n            )\n          )\n        })\n      })\n    })\n\n    const groupNameInput = document.createElement('input')\n    groupNameInput.type = 'text'\n    groupNameInput.value = getWithDefault(\n      this.group,\n      ns.vcard('fn'),\n      'Untitled Group'\n    )\n    groupNameInput.addEventListener('change', event => {\n      this.setGroupName(event.target.value).catch(err => {\n        this.element.appendChild(\n          errorMessageBlock(document, `Error changing group name. (${err})`)\n        )\n      })\n    })\n    const groupNameLabel = document.createElement('label')\n    groupNameLabel.textContent = escape('Group Name:')\n    groupNameLabel.appendChild(groupNameInput)\n    dropContainer.appendChild(groupNameLabel)\n\n    if (kb.any(this.group, ns.vcard('hasMember'))) {\n      kb.match(this.group, ns.vcard('hasMember')).forEach(statement => {\n        const webIdNode = statement.object\n        const personDiv = document.createElement('div')\n        new Person(personDiv, webIdNode, this.handleRemove(webIdNode)).render()\n        dropContainer.appendChild(personDiv)\n      })\n    } else {\n      const copy = document.createElement('p')\n      copy.textContent = escape`\n        To add someone to this group, drag and drop their WebID URL onto the box.\n      `\n      dropContainer.appendChild(copy)\n    }\n\n    const doneBuildingButton = document.createElement('button')\n    doneBuildingButton.textContent = escape('Done')\n    doneBuildingButton.addEventListener('click', _event => {\n      this.doneBuildingCb(this.group)\n    })\n    dropContainer.appendChild(doneBuildingButton)\n\n    this.element.innerHTML = ''\n    this.element.appendChild(dropContainer)\n    return this\n  }\n\n  add (webId) {\n    return new Promise((resolve, reject) => {\n      kb.fetcher.nowOrWhenFetched(webId, (ok, err) => {\n        if (!ok) {\n          this.onGroupChanged(err)\n          return reject(err)\n        }\n        // make sure it's a valid person, group, or entity (for now just handle\n        // webId)\n        const webIdNode = rdf.namedNode(webId)\n        const rdfClass = kb.any(webIdNode, ns.rdf('type'))\n        if (!rdfClass || !rdfClass.equals(ns.foaf('Person'))) {\n          return reject(\n            new Error(\n              `Only people supported right now. (tried to add something of type ${rdfClass.value})`\n            )\n          )\n        }\n        return resolve(webIdNode)\n      })\n    }).then(webIdNode => {\n      const statement = rdf.st(this.group, ns.vcard('hasMember'), webIdNode)\n      if (kb.holdsStatement(statement)) {\n        return webIdNode\n      }\n      return patch(this.group.doc().uri, { toIns: [statement] }).then(() => {\n        statement.why = this.group.doc()\n        kb.add(statement)\n        this.onGroupChanged(null, 'added', webIdNode)\n        this.render()\n      })\n    })\n  }\n\n  handleRemove (webIdNode) {\n    return _event => {\n      const statement = rdf.st(this.group, ns.vcard('hasMember'), webIdNode)\n      return patch(this.group.doc().uri, { toDel: [statement] })\n        .then(() => {\n          kb.remove(statement)\n          this.onGroupChanged(null, 'removed', webIdNode)\n          this.render()\n          return true\n        })\n        .catch(err => {\n          const name = kb.any(webIdNode, ns.foaf('name'))\n          const errorMessage =\n            name && name.value\n              ? `Could not remove ${name.value}. (${err})`\n              : `Could not remove ${webIdNode.value}. (${err})`\n          throw new Error(errorMessage)\n        })\n    }\n  }\n\n  setGroupName (name) {\n    const { groupIndex } = indexes(this.book)\n    const updatePromises = [this.group.doc(), groupIndex].map(namedGraph => {\n      const oldNameStatements = kb.match(\n        this.group,\n        ns.vcard('fn'),\n        null,\n        namedGraph\n      )\n      const newNameStatement = rdf.st(\n        this.group,\n        ns.vcard('fn'),\n        rdf.literal(name)\n      )\n      return patch(namedGraph.value, {\n        toDel: oldNameStatements,\n        toIns: [newNameStatement]\n      }).then(_solidResponse => {\n        kb.removeStatements(oldNameStatements)\n        newNameStatement.why = namedGraph\n        kb.add(newNameStatement)\n      })\n    })\n    return Promise.all(updatePromises)\n  }\n}\n// @ignore exporting this only for the unit test\n// @@ TODO maybe I should move this down at end, but for\n// now I will leave it where it was\nexport class Person {\n  constructor (element, webIdNode, handleRemove) {\n    this.webIdNode = webIdNode\n    this.element = element\n    this.handleRemove = handleRemove\n  }\n\n  render () {\n    const container = document.createElement('div')\n    container.style.display = 'flex'\n\n    // TODO: take a look at UI.widgets.setName\n    const imgSrc = getWithDefault(\n      this.webIdNode,\n      ns.foaf('img'),\n      iconBase + 'noun_15059.svg'\n    )\n    const profileImg = document.createElement('img')\n    profileImg.src = escape(imgSrc)\n    profileImg.width = '50'\n    profileImg.height = '50'\n    profileImg.style.margin = '5px'\n\n    // TODO: take a look at UI.widgets.setImage\n    const name = getWithDefault(\n      this.webIdNode,\n      ns.foaf('name'),\n      `[${this.webIdNode}]`\n    )\n    const nameSpan = document.createElement('span')\n    nameSpan.innerHTML = escape(name)\n    nameSpan.style.flexGrow = '1'\n    nameSpan.style.margin = 'auto 0'\n\n    const removeButton = document.createElement('button')\n    removeButton.textContent = 'Remove'\n    removeButton.addEventListener('click', _event =>\n      this.handleRemove().catch(err => {\n        this.element.appendChild(errorMessageBlock(document, escape(`${err}`)))\n      })\n    )\n    removeButton.style.margin = '5px'\n\n    container.appendChild(profileImg)\n    container.appendChild(nameSpan)\n    container.appendChild(removeButton)\n\n    this.element.innerHTML = ''\n    this.element.appendChild(container)\n    return this\n  }\n}\n\nfunction getWithDefault (subject, predicate, defaultValue) {\n  const object = kb.any(subject, predicate)\n  return object ? object.value : defaultValue\n}\n\nfunction patch (url, { toDel, toIns }) {\n  return new Promise((resolve, reject) => {\n    kb.updater.update(toDel, toIns, (uri, success, errorMessage) => {\n      if (!success) {\n        return reject(\n          new Error(`PATCH failed for resource <${uri}>: ${errorMessage}`)\n        )\n      }\n      resolve()\n    })\n  })\n  // return webClient.patch(url, toDel, toIns)\n  //   .then(solidResponse => {\n  //     const status = solidResponse.xhr.status\n  //     if (status < 200 || status >= 400) {\n  //       const err = new Error(`PATCH failed for resource <${solidResponse.url}>`)\n  //       err.solidResponse = solidResponse\n  //       throw err\n  //     }\n  //   })\n}\n\nfunction indexes (book) {\n  return {\n    // bookIndex: book,\n    groupIndex: kb.any(book, ns.vcard('groupIndex')),\n    groupContainer: kb.sym(book.dir().uri + 'Group/')\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"peoplePicker.cjs.js","names":["solidLogicSingleton","escape","errorMessageBlock","ns","rdf","uuidv4","iconBase"],"sources":["../../src/widgets/peoplePicker.js"],"sourcesContent":["/**\n *\n * People Picker Pane\n *\n * This pane offers a mechanism for selecting a set of individuals, groups, or\n * organizations to take some action on.\n *\n * Assumptions\n *   - Assumes that the user has a type index entry for vcard:AddressBook. @@ bad assuption\n *\n */\nimport escape from 'escape-html'\nimport { v4 as uuidv4 } from 'uuid'\nimport * as rdf from 'rdflib'\nimport * as debug from '../lib/debug'\n\nimport { makeDropTarget } from './dragAndDrop'\nimport { errorMessageBlock } from './error'\nimport { iconBase } from '../lib/iconBase'\nimport ns from '../lib/ns'\nimport { solidLogicSingleton } from 'solid-logic'\n\nconst kb = solidLogicSingleton.store\n\nexport class PeoplePicker {\n  constructor (element, typeIndex, groupPickedCb, options) { // @@ can't expect typeindex to be passed\n    this.options = options || {}\n    this.element = element\n    this.typeIndex = typeIndex\n    this.groupPickedCb = groupPickedCb\n    this.selectedgroup = this.options.selectedgroup // current selected group if any\n    this.onSelectGroup = this.onSelectGroup.bind(this)\n  }\n\n  render () {\n    const container = document.createElement('div')\n    container.style.maxWidth = '350px'\n    container.style.minHeight = '200px'\n    container.style.outline = '1px solid black'\n    container.style.display = 'flex'\n\n    if (this.selectedgroup) {\n      container.style.flexDirection = 'column'\n      const selectedGroup = document.createElement('div')\n      new Group(selectedGroup, this.selectedgroup).render()\n      const changeGroupButton = document.createElement('button')\n      changeGroupButton.textContent = escape('Change group')\n      changeGroupButton.addEventListener('click', _event => {\n        this.selectedgroup = null\n        this.render()\n      })\n      container.appendChild(selectedGroup)\n      container.appendChild(changeGroupButton)\n    } else {\n      this.findAddressBook(this.typeIndex)\n        .then(({ book }) => {\n          const chooseExistingGroupButton = document.createElement('button')\n          chooseExistingGroupButton.textContent = escape(\n            'Pick an existing group'\n          )\n          chooseExistingGroupButton.style.margin = 'auto'\n          chooseExistingGroupButton.addEventListener('click', _event => {\n            new GroupPicker(container, book, this.onSelectGroup).render()\n          })\n\n          const createNewGroupButton = document.createElement('button')\n          createNewGroupButton.textContent = escape('Create a new group')\n          createNewGroupButton.style.margin = 'auto'\n          createNewGroupButton.addEventListener('click', _event => {\n            this.createNewGroup(book, this.options.defaultNewGroupName)\n              .then(({ group }) => {\n                new GroupBuilder(\n                  this.element,\n                  book,\n                  group,\n                  this.onSelectGroup\n                ).render()\n              })\n              .catch(errorBody => {\n                this.element.appendChild(\n                  errorMessageBlock(\n                    document,\n                    escape(`Error creating a new group. (${errorBody})`)\n                  )\n                )\n              })\n          })\n\n          container.appendChild(chooseExistingGroupButton)\n          container.appendChild(createNewGroupButton)\n\n          this.element.innerHTML = ''\n          this.element.appendChild(container)\n        })\n        .catch(err => {\n          this.element.appendChild(\n            errorMessageBlock(\n              document,\n              escape(`Could find your groups. (${err})`)\n            )\n          )\n        })\n    }\n\n    this.element.innerHTML = ''\n    this.element.appendChild(container)\n    return this\n  }\n\n  findAddressBook (typeIndex) {\n    return new Promise((resolve, reject) => {\n      kb.fetcher.nowOrWhenFetched(typeIndex, (ok, err) => {\n        if (!ok) {\n          return reject(err)\n        }\n        const bookRegistration = kb.any(\n          null,\n          ns.solid('forClass'),\n          ns.vcard('AddressBook')\n        )\n        if (!bookRegistration) {\n          return reject(\n            new Error(\n              'no address book registered in the solid type index ' + typeIndex\n            )\n          )\n        }\n        const book = kb.any(bookRegistration, ns.solid('instance'))\n        if (!book) {\n          return reject(new Error('incomplete address book registration'))\n        }\n        kb.fetcher\n          .load(book)\n          .then(function (_xhr) {\n            return resolve({ book })\n          })\n          .catch(function (errr) {\n            return reject(new Error('Could not load address book ' + errr))\n          })\n      })\n    })\n  }\n\n  createNewGroup (book, defaultNewGroupName) {\n    const { groupIndex, groupContainer } = indexes(book)\n    const group = rdf.sym(\n      `${groupContainer.uri}${uuidv4().slice(0, 8)}.ttl#this`\n    )\n    const name = defaultNewGroupName || 'Untitled Group'\n\n    // NOTE that order matters here.  Unfortunately this type of update is\n    // non-atomic in that solid requires us to send two PATCHes, either of which\n    // might fail.\n    const patchPromises = [group.doc(), groupIndex].map(doc => {\n      const typeStatement = rdf.st(group, ns.rdf('type'), ns.vcard('Group'), doc)\n      const nameStatement = rdf.st(group, ns.vcard('fn'), name, group.doc(), doc)\n      const includesGroupStatement = rdf.st(\n        book,\n        ns.vcard('includesGroup'),\n        group,\n        doc\n      )\n      const toIns = doc.equals(groupIndex)\n        ? [typeStatement, nameStatement, includesGroupStatement]\n        : [typeStatement, nameStatement]\n      return patch(doc.uri, { toIns }).then(() => {\n        toIns.forEach(st => {\n          kb.add(st)\n        })\n      })\n    })\n    return Promise.all(patchPromises)\n      .then(() => ({ group }))\n      .catch(err => {\n        debug.log('Could not create new group.  PATCH failed ' + err)\n        throw new Error(\n          `Couldn't create new group.  PATCH failed for (${\n          err.xhr ? err.xhr.responseURL : ''\n          } )`\n        )\n      })\n  }\n\n  onSelectGroup (group) {\n    this.selectedgroup = group\n    this.groupPickedCb(group)\n    this.render()\n  }\n}\n\nexport class GroupPicker {\n  constructor (element, book, onSelectGroup) {\n    this.element = element\n    this.book = book\n    this.onSelectGroup = onSelectGroup\n  }\n\n  render () {\n    this.loadGroups()\n      .then(groups => {\n        // render the groups\n        const container = document.createElement('div')\n        container.style.display = 'flex'\n        container.style.flexDirection = 'column'\n        groups.forEach(group => {\n          const groupButton = document.createElement('button')\n          groupButton.addEventListener('click', this.handleClickGroup(group))\n          new Group(groupButton, group).render()\n          container.appendChild(groupButton)\n        })\n        this.element.innerHTML = ''\n        this.element.appendChild(container)\n      })\n      .catch(err => {\n        this.element.appendChild(\n          errorMessageBlock(\n            document,\n            escape(`There was an error loading your groups. (${err})`)\n          )\n        )\n      })\n    return this\n  }\n\n  loadGroups () {\n    return new Promise((resolve, reject) => {\n      const { groupIndex } = indexes(this.book)\n      kb.fetcher.nowOrWhenFetched(groupIndex, (ok, err) => {\n        if (!ok) {\n          return reject(err)\n        }\n        const groups = kb.each(this.book, ns.vcard('includesGroup'))\n        return resolve(groups)\n      })\n    })\n  }\n\n  handleClickGroup (group) {\n    return _event => {\n      this.onSelectGroup(group)\n    }\n  }\n}\n\nexport class Group {\n  constructor (element, group) {\n    this.element = element\n    this.group = group\n  }\n\n  render () {\n    const container = document.createElement('div')\n    container.textContent = escape(\n      // @@@@@ need to escape??\n      getWithDefault(this.group, ns.vcard('fn'), `[${this.group.value}]`)\n    )\n    this.element.innerHTML = ''\n    this.element.appendChild(container)\n    return this\n  }\n}\n\nexport class GroupBuilder {\n  constructor (element, book, group, doneBuildingCb, groupChangedCb) {\n    this.element = element\n    this.book = book\n    this.group = group\n    this.onGroupChanged = (err, changeType, agent) => {\n      if (groupChangedCb) {\n        groupChangedCb(err, changeType, agent)\n      }\n    }\n    this.groupChangedCb = groupChangedCb\n    this.doneBuildingCb = doneBuildingCb\n  }\n\n  refresh () {\n    // TODO: implement\n  }\n\n  render () {\n    const dropContainer = document.createElement('div')\n    dropContainer.style.maxWidth = '350px'\n    dropContainer.style.minHeight = '200px'\n    dropContainer.style.outline = '1px solid black'\n    dropContainer.style.display = 'flex'\n    dropContainer.style.flexDirection = 'column'\n\n    makeDropTarget(dropContainer, uris => {\n      uris.forEach(uri => {\n        this.add(uri).catch(err => {\n          this.element.appendChild(\n            errorMessageBlock(\n              document,\n              escape(`Could not add the given WebId. (${err})`)\n            )\n          )\n        })\n      })\n    })\n\n    const groupNameInput = document.createElement('input')\n    groupNameInput.type = 'text'\n    groupNameInput.value = getWithDefault(\n      this.group,\n      ns.vcard('fn'),\n      'Untitled Group'\n    )\n    groupNameInput.addEventListener('change', event => {\n      this.setGroupName(event.target.value).catch(err => {\n        this.element.appendChild(\n          errorMessageBlock(document, `Error changing group name. (${err})`)\n        )\n      })\n    })\n    const groupNameLabel = document.createElement('label')\n    groupNameLabel.textContent = escape('Group Name:')\n    groupNameLabel.appendChild(groupNameInput)\n    dropContainer.appendChild(groupNameLabel)\n\n    if (kb.any(this.group, ns.vcard('hasMember'))) {\n      kb.match(this.group, ns.vcard('hasMember')).forEach(statement => {\n        const webIdNode = statement.object\n        const personDiv = document.createElement('div')\n        new Person(personDiv, webIdNode, this.handleRemove(webIdNode)).render()\n        dropContainer.appendChild(personDiv)\n      })\n    } else {\n      const copy = document.createElement('p')\n      copy.textContent = escape`\n        To add someone to this group, drag and drop their WebID URL onto the box.\n      `\n      dropContainer.appendChild(copy)\n    }\n\n    const doneBuildingButton = document.createElement('button')\n    doneBuildingButton.textContent = escape('Done')\n    doneBuildingButton.addEventListener('click', _event => {\n      this.doneBuildingCb(this.group)\n    })\n    dropContainer.appendChild(doneBuildingButton)\n\n    this.element.innerHTML = ''\n    this.element.appendChild(dropContainer)\n    return this\n  }\n\n  add (webId) {\n    return new Promise((resolve, reject) => {\n      kb.fetcher.nowOrWhenFetched(webId, (ok, err) => {\n        if (!ok) {\n          this.onGroupChanged(err)\n          return reject(err)\n        }\n        // make sure it's a valid person, group, or entity (for now just handle\n        // webId)\n        const webIdNode = rdf.namedNode(webId)\n        const rdfClass = kb.any(webIdNode, ns.rdf('type'))\n        if (!rdfClass || !rdfClass.equals(ns.foaf('Person'))) {\n          return reject(\n            new Error(\n              `Only people supported right now. (tried to add something of type ${rdfClass.value})`\n            )\n          )\n        }\n        return resolve(webIdNode)\n      })\n    }).then(webIdNode => {\n      const statement = rdf.st(this.group, ns.vcard('hasMember'), webIdNode)\n      if (kb.holdsStatement(statement)) {\n        return webIdNode\n      }\n      return patch(this.group.doc().uri, { toIns: [statement] }).then(() => {\n        statement.why = this.group.doc()\n        kb.add(statement)\n        this.onGroupChanged(null, 'added', webIdNode)\n        this.render()\n      })\n    })\n  }\n\n  handleRemove (webIdNode) {\n    return _event => {\n      const statement = rdf.st(this.group, ns.vcard('hasMember'), webIdNode)\n      return patch(this.group.doc().uri, { toDel: [statement] })\n        .then(() => {\n          kb.remove(statement)\n          this.onGroupChanged(null, 'removed', webIdNode)\n          this.render()\n          return true\n        })\n        .catch(err => {\n          const name = kb.any(webIdNode, ns.foaf('name'))\n          const errorMessage =\n            name && name.value\n              ? `Could not remove ${name.value}. (${err})`\n              : `Could not remove ${webIdNode.value}. (${err})`\n          throw new Error(errorMessage)\n        })\n    }\n  }\n\n  setGroupName (name) {\n    const { groupIndex } = indexes(this.book)\n    const updatePromises = [this.group.doc(), groupIndex].map(namedGraph => {\n      const oldNameStatements = kb.match(\n        this.group,\n        ns.vcard('fn'),\n        null,\n        namedGraph\n      )\n      const newNameStatement = rdf.st(\n        this.group,\n        ns.vcard('fn'),\n        rdf.literal(name)\n      )\n      return patch(namedGraph.value, {\n        toDel: oldNameStatements,\n        toIns: [newNameStatement]\n      }).then(_solidResponse => {\n        kb.removeStatements(oldNameStatements)\n        newNameStatement.why = namedGraph\n        kb.add(newNameStatement)\n      })\n    })\n    return Promise.all(updatePromises)\n  }\n}\n// @ignore exporting this only for the unit test\n// @@ TODO maybe I should move this down at end, but for\n// now I will leave it where it was\nexport class Person {\n  constructor (element, webIdNode, handleRemove) {\n    this.webIdNode = webIdNode\n    this.element = element\n    this.handleRemove = handleRemove\n  }\n\n  render () {\n    const container = document.createElement('div')\n    container.style.display = 'flex'\n\n    // TODO: take a look at UI.widgets.setName\n    const imgSrc = getWithDefault(\n      this.webIdNode,\n      ns.foaf('img'),\n      iconBase + 'noun_15059.svg'\n    )\n    const profileImg = document.createElement('img')\n    profileImg.src = escape(imgSrc)\n    profileImg.width = '50'\n    profileImg.height = '50'\n    profileImg.style.margin = '5px'\n\n    // TODO: take a look at UI.widgets.setImage\n    const name = getWithDefault(\n      this.webIdNode,\n      ns.foaf('name'),\n      `[${this.webIdNode}]`\n    )\n    const nameSpan = document.createElement('span')\n    nameSpan.innerHTML = escape(name)\n    nameSpan.style.flexGrow = '1'\n    nameSpan.style.margin = 'auto 0'\n\n    const removeButton = document.createElement('button')\n    removeButton.textContent = 'Remove'\n    removeButton.addEventListener('click', _event =>\n      this.handleRemove().catch(err => {\n        this.element.appendChild(errorMessageBlock(document, escape(`${err}`)))\n      })\n    )\n    removeButton.style.margin = '5px'\n\n    container.appendChild(profileImg)\n    container.appendChild(nameSpan)\n    container.appendChild(removeButton)\n\n    this.element.innerHTML = ''\n    this.element.appendChild(container)\n    return this\n  }\n}\n\nfunction getWithDefault (subject, predicate, defaultValue) {\n  const object = kb.any(subject, predicate)\n  return object ? object.value : defaultValue\n}\n\nfunction patch (url, { toDel, toIns }) {\n  return new Promise((resolve, reject) => {\n    kb.updater.update(toDel, toIns, (uri, success, errorMessage) => {\n      if (!success) {\n        return reject(\n          new Error(`PATCH failed for resource <${uri}>: ${errorMessage}`)\n        )\n      }\n      resolve()\n    })\n  })\n  // return webClient.patch(url, toDel, toIns)\n  //   .then(solidResponse => {\n  //     const status = solidResponse.xhr.status\n  //     if (status < 200 || status >= 400) {\n  //       const err = new Error(`PATCH failed for resource <${solidResponse.url}>`)\n  //       err.solidResponse = solidResponse\n  //       throw err\n  //     }\n  //   })\n}\n\nfunction indexes (book) {\n  return {\n    // bookIndex: book,\n    groupIndex: kb.any(book, ns.vcard('groupIndex')),\n    groupContainer: kb.sym(book.dir().uri + 'Group/')\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "solid-ui",
-	"version": "3.1.3-9",
+	"version": "5.0.0-0",
 	"description": "UI library for Solid applications",
 	"main": "dist/index.cjs.js",
 	"types": "dist/index.d.ts",
@@ -48,7 +48,8 @@
 		"build-styles": "vite build --mode styles",
 		"build-version": "sh ./timestamp.sh > src/versionInfo.ts && eslint 'src/versionInfo.ts' --fix",
 		"postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
-		"watch": "concurrently -k -n npm,styles \"npm:watch-npm\" \"npm:watch-styles\"",
+		"watch": "npm run build-styles && npm run watch-npm",
+		"watch-all": "concurrently -k -n npm,styles \"npm:watch-npm\" \"npm:watch-styles\"",
 		"watch-npm": "vite build --watch",
 		"watch-styles": "vite build --mode styles --watch",
 		"lint": "eslint",
@@ -92,15 +93,28 @@
 	"homepage": "https://github.com/SolidOS/solid-ui",
 	"dependencies": {
 		"@awesome.me/webawesome": "^3.9.0",
+		"@codemirror/commands": "^6.10.0",
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.11",
+		"@codemirror/lang-javascript": "^6.2.5",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/lang-markdown": "^6.3.1",
+		"@codemirror/lang-xml": "^6.1.0",
+		"@codemirror/language": "^6.12.3",
+		"@codemirror/legacy-modes": "^6.5.3",
+		"@codemirror/state": "^6.6.0",
+		"@codemirror/view": "^6.43.0",
 		"@lit/context": "^1.1.6",
+		"@lit/task": "^1.0.3",
 		"@noble/curves": "^2.2.0",
 		"@noble/hashes": "^2.2.0",
+		"@uiw/codemirror-theme-vscode": "^4.25.10",
 		"escape-html": "^1.0.3",
 		"lit": "^3.3.3",
 		"mime-types": "^3.0.2",
-		"pane-registry": "3.1.2-1",
+		"pane-registry": "5.0.0-0",
 		"rdflib": "2.4.0",
-		"solid-logic": "4.0.8-1",
+		"solid-logic": "6.0.0-0",
 		"solid-namespace": "^0.5.4",
 		"uuid": "^14.0.0"
 	},
@@ -119,7 +133,6 @@
 		"@iconify/json": "2.2.481",
 		"@rolldown/plugin-babel": "^0.2.3",
 		"@storybook/addon-docs": "10.4.2",
-		"@storybook/addon-links": "10.4.2",
 		"@storybook/web-components-vite": "10.4.2",
 		"@tailwindcss/vite": "^4.3.0",
 		"@testing-library/dom": "^10.4.1",

package/dist/chunks/DialogProvider-Bt65G0Tk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogProvider-Bt65G0Tk.js","names":["e","t","i","t","customElement","WebComponent","provide","property","dialogContext","_classDecs","_DialogProvider","_A","WeakMap","_B","_ref","_dialogIdDecs","type","String","reflect","_dialogDecs","context","DialogProvider","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_dialogId","_init_dialog","id","_classPrivateFieldGet","dialogId","v","_classPrivateFieldSet","dialog","willUpdate","changedProperties","has","firstUpdated","slot","shadowRoot","querySelector","dispatchEvent","CustomEvent","bubbles","composed","detail","assignedElements","_DialogProvider2","e","c","_initClass","_applyDecs","default"],"sources":["../../node_modules/@lit/context/lib/value-notifier.js","../../node_modules/@lit/context/lib/controllers/context-provider.js","../../node_modules/@lit/context/lib/decorators/provide.js","../../src/components/dialog-provider/DialogProvider.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nclass s{get value(){return this.o}set value(s){this.setValue(s)}setValue(s,t=!1){const i=t||!Object.is(s,this.o);this.o=s,i&&this.updateObservers()}constructor(s){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:t}]of this.subscriptions)s(this.o,t)},void 0!==s&&(this.value=s)}addCallback(s,t,i){if(!i)return void s(this.value);this.subscriptions.has(s)||this.subscriptions.set(s,{disposer:()=>{this.subscriptions.delete(s)},consumerHost:t});const{disposer:h}=this.subscriptions.get(s);s(this.value,h)}clearCallbacks(){this.subscriptions.clear()}}export{s as ValueNotifier};\n//# sourceMappingURL=value-notifier.js.map\n","import{ContextRequestEvent as t}from\"../context-request-event.js\";import{ValueNotifier as s}from\"../value-notifier.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends Event{constructor(t,s){super(\"context-provider\",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s}}class i extends s{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{if(t.context!==this.context)return;const s=t.contextTarget??t.composedPath()[0];s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe))},this.onProviderRequest=s=>{if(s.context!==this.context)return;if((s.contextTarget??s.composedPath()[0])===this.host)return;const e=new Set;for(const[s,{consumerHost:i}]of this.subscriptions)e.has(s)||(e.add(s),i.dispatchEvent(new t(this.context,i,s,!0)));s.stopPropagation()},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(\"context-request\",this.onContextRequest),this.host.addEventListener(\"context-provider\",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new e(this.context,this.host))}}export{i as ContextProvider,e as ContextProviderEvent};\n//# sourceMappingURL=context-provider.js.map\n","import{ContextProvider as t}from\"../controllers/context-provider.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function e({context:e}){return(n,i)=>{const r=new WeakMap;if(\"object\"==typeof i)return{get(){return n.get.call(this)},set(t){return r.get(this).setValue(t),n.set.call(this,t)},init(n){return r.set(this,new t(this,{context:e,initialValue:n})),n}};{n.constructor.addInitializer((n=>{r.set(n,new t(n,{context:e}))}));const o=Object.getOwnPropertyDescriptor(n,i);let s;if(void 0===o){const t=new WeakMap;s={get(){return t.get(this)},set(e){r.get(this).setValue(e),t.set(this,e)},configurable:!0,enumerable:!0}}else{const t=o.set;s={...o,set(e){r.get(this).setValue(e),t?.call(this,e)}}}return void Object.defineProperty(n,i,s)}}}export{e as provide};\n//# sourceMappingURL=provide.js.map\n","import { customElement, WebComponent } from '@/lib/components'\nimport { provide } from '@lit/context'\nimport { property } from 'lit/decorators.js'\nimport { DialogContext, dialogContext } from '@/lib/dialogs/context'\n\n@customElement('solid-ui-dialog-provider')\nexport default class DialogProvider extends WebComponent {\n  @property({ type: String, reflect: true })\n  accessor dialogId: string | undefined\n\n  @provide({ context: dialogContext })\n  private accessor dialog: DialogContext = { id: '' }\n\n  protected willUpdate (changedProperties: Map<string, any>) {\n    super.willUpdate(changedProperties)\n\n    if (changedProperties.has('dialogId') && this.dialogId) {\n      this.dialog = { id: this.dialogId }\n    }\n  }\n\n  protected firstUpdated () {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | undefined\n\n    this.dispatchEvent(new CustomEvent('mounted', { bubbles: true, composed: true, detail: slot?.assignedElements()[0] }))\n  }\n}\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}

package/dist/chunks/account-CWY924jw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"account-CWY924jw.js","names":["consume","html","nothing","property","customElement","WebComponent","authContext","DEFAULT_AUTH_CONTEXT","styles","_classDecs","_Account","_Account2","_A","WeakMap","_B","_ref","_menuItemsDecs","type","Array","_authDecs","context","subscribe","_Account3","Account","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_menuItems","_init_auth","_defineProperty","_classPrivateFieldGet","menuItems","v","_classPrivateFieldSet","auth","connectedCallback","unsubscribeSessionUpdated","onSessionUpdated","requestUpdate","disconnectedCallback","render","account","map","menuItem","href","onSelected","label","e","c","_initClass","_applyDecs","_Class","_identity","loggedIn","component","default","Account"],"sources":["../../src/components/account/Account.styles.css","../../src/components/account/Account.ts","../../src/components/account/index.ts"],"sourcesContent":[":host {\n    display: inline-flex;\n    flex-direction: row;\n    gap: 10px;\n}\n\n:host([data-state-loggedIn]) {\n    --padding: 4px;\n    --border-width: 1px;\n    --image-size: 1.875rem; /* 30px */\n\n    button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        background-color: var(--solid-ui-color-body-grey);\n        padding: var(--padding);\n        border-radius: calc((var(--image-size) + 2 * var(--padding) + 2 * var(--border-width)) / 2);\n        color: var(--solid-ui-color-white);\n\n        solid-ui-avatar {\n            width: var(--image-size);\n            height: var(--image-size);\n            border: var(--border-width) solid var(--solid-ui-color-white);\n            border-radius: 50%;\n        }\n\n        icon-lucide-chevron-down {\n            width: 16px;\n            height: 16px;\n        }\n    }\n}\n","import { consume } from '@lit/context'\nimport { html, nothing, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { customElement, WebComponent } from '@/lib/components'\nimport { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'\n\nimport '@/components/avatar'\nimport '@/components/button'\nimport '@/components/login-button'\nimport '@/components/logout-button'\nimport '@/components/menu-item'\nimport '@/components/menu'\nimport '@/components/signup-button'\nimport '~icons/lucide/chevron-down'\nimport '~icons/lucide/log-in'\nimport '~icons/lucide/log-out'\nimport '~icons/lucide/user'\n\nimport styles from './Account.styles.css'\n\nexport interface AccountMenuItem {\n  label: string | TemplateResult\n  href?: string\n  onSelected?(): void\n}\n\n@customElement('solid-ui-account')\nexport default class Account extends WebComponent {\n  static styles = styles\n  static states = {\n    loggedIn: (component: Account) => !!component.auth.account,\n  }\n\n  @property({ type: Array })\n  accessor menuItems: AccountMenuItem[] = []\n\n  @consume({ context: authContext, subscribe: true })\n  private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT\n\n  private unsubscribeSessionUpdated?: () => void\n\n  connectedCallback () {\n    super.connectedCallback()\n\n    this.unsubscribeSessionUpdated = this.auth.onSessionUpdated(() => this.requestUpdate())\n  }\n\n  disconnectedCallback () {\n    super.disconnectedCallback()\n\n    this.unsubscribeSessionUpdated?.()\n  }\n\n  protected render () {\n    if (!this.auth.account) {\n      return html`\n        <solid-ui-login-button>\n            <solid-ui-button slot=\"trigger\">\n                <icon-lucide-user slot=\"left-icon\"></icon-lucide-user>\n                Log In\n            </solid-ui-button>\n        </solid-ui-login-button>\n        <solid-ui-signup-button>\n            <solid-ui-button slot=\"trigger\" variant=\"outline\">\n                <icon-lucide-log-in slot=\"left-icon\"></icon-lucide-log-in>\n                Sign Up\n            </solid-ui-button>\n        </solid-ui-signup-button>\n      `\n    }\n\n    return html`\n        <solid-ui-menu placement=\"bottom-end\" distance=\"5\">\n            <button type=\"button\" slot=\"trigger\">\n                <solid-ui-avatar></solid-ui-avatar>\n                <icon-lucide-chevron-down slot=\"right-icon\"></icon-lucide-chevron-down>\n            </button>\n\n            ${this.menuItems.map(menuItem => html`\n                <solid-ui-menu-item .href=${menuItem.href ?? nothing} @solid-ui-select=${() => menuItem.onSelected?.()}>\n                    ${menuItem.label}\n                </solid-ui-menu-item>\n            `)}\n            <solid-ui-logout-button>\n                <solid-ui-menu-item slot=\"trigger\">\n                    <icon-lucide-log-out slot=\"left-icon\"></icon-lucide-log-out>\n                    Sign out\n                </solid-ui-menu-item>\n            </solid-ui-logout-button>\n        </solid-ui-menu>\n    `\n  }\n}\n","import Account, { type AccountMenuItem } from './Account'\n\nexport { Account, type AccountMenuItem }\nexport default Account\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACkByCS,IAAA,CAQxCL,EAAc,kBAAkB,CAAC;AAAA,IAAAM;AAAA,KAAAC,KAAAC,kBAAA,IAAAC,QAAA,GAAAC,kBAAA,IAAAD,QAAA,GAAAE,KAAAC,IAO/Bb,EAAS,EAAEc,MAAMC,MAAM,CAAC,GAACC,IAGzBnB,EAAQ;CAAEoB,SAASd;CAAae,WAAW;AAAK,CAAC,GAAC,cAAAC,IAVrD,cACqCjB,EAAa;CAAAmB,YAAA,GAAAC,GAAA;EAUSK,AAVT,MAAA,GAAAL,CAAA,GAAAC,EAAA,MAAAd,IAAAe,EAAA,IAAA,GAAAC,EAAA,MAOR,CAAA,CAAE,EAAA,GAAAF,EAAA,MAAAZ,GAAAe,EAAA,MAGLtB,CAAoB,CAAA,GAAAuB,EAAA,MAAA,6BAAA,KAAA,CAAA;CAAA;CAAA,KAAAf,KAAA;EAAA,OAAAgB,EAAAnB,GAAA,IAAA;CAAA;CAAA,IAHhDoB,UAASC,GAAA;EAAAC,EAAAtB,GAAA,MAAAqB,CAAA;CAAA;CAAA,IAGDE,OAAI;EAAA,OAAAJ,EAAAjB,GAAA,IAAA;CAAA;CAAA,IAAJqB,KAAIF,GAAA;EAAAC,EAAApB,GAAA,MAAAmB,CAAA;CAAA;CAIrBG,oBAAqB;EAGnB,AAFA,MAAMA,kBAAkB,GAExB,KAAKC,4BAA4B,KAAKF,KAAKG,uBAAuB,KAAKC,cAAc,CAAC;CACxF;CAEAC,uBAAwB;EAGtB,AAFA,MAAMA,qBAAqB,GAE3B,KAAKH,4BAA4B;CACnC;CAEUI,SAAU;EAkBlB,OAjBK,KAAKN,KAAKO,UAiBRzC,CAAI;;;;;;;cAOD,KAAK+B,UAAUW,KAAIC,MAAY3C,CAAI;4CACL2C,EAASC,QAAQ3C,EAAO,0BAA2B0C,EAASE,aAAa,EAAC;sBAChGF,EAASG,MAAK;;aAEvB,EAAC;;;;;;;;QA3BD9C,CAAI;;;;;;;;;;;;;;CAoCf;AACF,GAAC,CAAA+C,GAAA,CAAApB,GAAAC,GAAAF,IAAAsB,GAAA,CAAAvC,GAAAwC,MAAAC,EAAA7B,GAAA,CAAA;CAAAN;CAAA;CAAA;AAAA,GAAA;CAAAG;CAAA;CAAA;AAAA,CAAA,GAAAV,GAAA,GAAA,KAAA,GAjEoCJ,CAAY,GAAAiB,IAAA8B,IAAA,cAAAC,EAAA;CAAA7B,cAAA;EAAA,MAAAd,CAAA,GAAAoB,EAAA,MAAA,UAC/BtB,CAAM,GAAAsB,EAAA,MAAA,UACN,EACdwB,WAAWC,MAAuB,CAAC,CAACA,EAAUpB,KAAKO,QACrD,CAAC,GAAAQ,EAAA;CAAA;AAAA,GAAApB,EAAAsB,GAAAzC,GAAA,KAAA,CAAA,GAAAyC,GAAA;;;AC5BH,IAAA,IAAeK"}