slim-select 2.7.1 → 2.8.0

package/src/vue/dist/slimselectvue.global.js

@@ -1,1958 +1,1965 @@
 var SlimSelectVue = (function (vue) {
   'use strict';
 
-  function generateID() {
-      return Math.random().toString(36).substring(2, 10);
-  }
-  function hasClassInTree(element, className) {
-      function hasClass(e, c) {
-          if (c && e && e.classList && e.classList.contains(c)) {
-              return e;
-          }
-          if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
-              return e;
-          }
-          return null;
-      }
-      function parentByClass(e, c) {
-          if (!e || e === document) {
-              return null;
-          }
-          else if (hasClass(e, c)) {
-              return e;
-          }
-          else {
-              return parentByClass(e.parentNode, c);
-          }
-      }
-      return hasClass(element, className) || parentByClass(element, className);
-  }
-  function debounce(func, wait = 50, immediate = false) {
-      let timeout;
-      return function (...args) {
-          const context = self;
-          const later = () => {
-              timeout = null;
-              if (!immediate) {
-                  func.apply(context, args);
-              }
-          };
-          const callNow = immediate && !timeout;
-          clearTimeout(timeout);
-          timeout = setTimeout(later, wait);
-          if (callNow) {
-              func.apply(context, args);
-          }
-      };
-  }
-  function isEqual(a, b) {
-      return JSON.stringify(a) === JSON.stringify(b);
-  }
-  function kebabCase(str) {
-      const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
-      return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
+  function generateID() {
+      return Math.random().toString(36).substring(2, 10);
+  }
+  function hasClassInTree(element, className) {
+      function hasClass(e, c) {
+          if (c && e && e.classList && e.classList.contains(c)) {
+              return e;
+          }
+          if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
+              return e;
+          }
+          return null;
+      }
+      function parentByClass(e, c) {
+          if (!e || e === document) {
+              return null;
+          }
+          else if (hasClass(e, c)) {
+              return e;
+          }
+          else {
+              return parentByClass(e.parentNode, c);
+          }
+      }
+      return hasClass(element, className) || parentByClass(element, className);
+  }
+  function debounce(func, wait = 50, immediate = false) {
+      let timeout;
+      return function (...args) {
+          const context = self;
+          const later = () => {
+              timeout = null;
+              if (!immediate) {
+                  func.apply(context, args);
+              }
+          };
+          const callNow = immediate && !timeout;
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+          if (callNow) {
+              func.apply(context, args);
+          }
+      };
+  }
+  function isEqual(a, b) {
+      return JSON.stringify(a) === JSON.stringify(b);
+  }
+  function kebabCase(str) {
+      const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
+      return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
   }
 
-  class Settings {
-      constructor(settings) {
-          this.id = '';
-          this.style = '';
-          this.class = [];
-          this.isMultiple = false;
-          this.isOpen = false;
-          this.isFullOpen = false;
-          this.intervalMove = null;
-          if (!settings) {
-              settings = {};
-          }
-          this.id = 'ss-' + generateID();
-          this.style = settings.style || '';
-          this.class = settings.class || [];
-          this.disabled = settings.disabled !== undefined ? settings.disabled : false;
-          this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
-          this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
-          this.ariaLabel = settings.ariaLabel || 'Combobox';
-          this.searchPlaceholder = settings.searchPlaceholder || 'Search';
-          this.searchText = settings.searchText || 'No Results';
-          this.searchingText = settings.searchingText || 'Searching...';
-          this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
-          this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
-          this.contentLocation = settings.contentLocation || document.body;
-          this.contentPosition = settings.contentPosition || 'absolute';
-          this.openPosition = settings.openPosition || 'auto';
-          this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
-          this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
-          this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
-          this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-          this.minSelected = settings.minSelected || 0;
-          this.maxSelected = settings.maxSelected || 1000;
-          this.timeoutDelay = settings.timeoutDelay || 200;
-          this.maxValuesShown = settings.maxValuesShown || 20;
-          this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
-      }
+  class Optgroup {
+      constructor(optgroup) {
+          this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
+          this.label = optgroup.label || '';
+          this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
+          this.selectAllText = optgroup.selectAllText || 'Select All';
+          this.closable = optgroup.closable || 'off';
+          this.options = [];
+          if (optgroup.options) {
+              for (const o of optgroup.options) {
+                  this.options.push(new Option(o));
+              }
+          }
+      }
+  }
+  class Option {
+      constructor(option) {
+          this.id = !option.id || option.id === '' ? generateID() : option.id;
+          this.value = option.value === undefined ? option.text : option.value;
+          this.text = option.text || '';
+          this.html = option.html || '';
+          this.selected = option.selected !== undefined ? option.selected : false;
+          this.display = option.display !== undefined ? option.display : true;
+          this.disabled = option.disabled !== undefined ? option.disabled : false;
+          this.mandatory = option.mandatory !== undefined ? option.mandatory : false;
+          this.placeholder = option.placeholder !== undefined ? option.placeholder : false;
+          this.class = option.class || '';
+          this.style = option.style || '';
+          this.data = option.data || {};
+      }
+  }
+  class Store {
+      constructor(type, data) {
+          this.selectType = 'single';
+          this.data = [];
+          this.selectType = type;
+          this.setData(data);
+      }
+      validateDataArray(data) {
+          if (!Array.isArray(data)) {
+              return new Error('Data must be an array');
+          }
+          for (let dataObj of data) {
+              if (dataObj instanceof Optgroup || 'label' in dataObj) {
+                  if (!('label' in dataObj)) {
+                      return new Error('Optgroup must have a label');
+                  }
+                  if ('options' in dataObj && dataObj.options) {
+                      for (let option of dataObj.options) {
+                          return this.validateOption(option);
+                      }
+                  }
+              }
+              else if (dataObj instanceof Option || 'text' in dataObj) {
+                  return this.validateOption(dataObj);
+              }
+              else {
+                  return new Error('Data object must be a valid optgroup or option');
+              }
+          }
+          return null;
+      }
+      validateOption(option) {
+          if (!('text' in option)) {
+              return new Error('Option must have a text');
+          }
+          return null;
+      }
+      partialToFullData(data) {
+          let dataFinal = [];
+          data.forEach((dataObj) => {
+              if (dataObj instanceof Optgroup || 'label' in dataObj) {
+                  let optOptions = [];
+                  if ('options' in dataObj && dataObj.options) {
+                      dataObj.options.forEach((option) => {
+                          optOptions.push(new Option(option));
+                      });
+                  }
+                  if (optOptions.length > 0) {
+                      dataFinal.push(new Optgroup(dataObj));
+                  }
+              }
+              if (dataObj instanceof Option || 'text' in dataObj) {
+                  dataFinal.push(new Option(dataObj));
+              }
+          });
+          return dataFinal;
+      }
+      setData(data) {
+          this.data = this.partialToFullData(data);
+          if (this.selectType === 'single') {
+              this.setSelectedBy('value', this.getSelected());
+          }
+      }
+      getData() {
+          return this.filter(null, true);
+      }
+      getDataOptions() {
+          return this.filter(null, false);
+      }
+      addOption(option) {
+          this.setData(this.getData().concat(new Option(option)));
+      }
+      setSelectedBy(selectedType, selectedValues) {
+          let firstOption = null;
+          let hasSelected = false;
+          for (let dataObj of this.data) {
+              if (dataObj instanceof Optgroup) {
+                  for (let option of dataObj.options) {
+                      if (!firstOption) {
+                          firstOption = option;
+                      }
+                      option.selected = hasSelected ? false : selectedValues.includes(option[selectedType]);
+                      if (option.selected && this.selectType === 'single') {
+                          hasSelected = true;
+                      }
+                  }
+              }
+              if (dataObj instanceof Option) {
+                  if (!firstOption) {
+                      firstOption = dataObj;
+                  }
+                  dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
+                  if (dataObj.selected && this.selectType === 'single') {
+                      hasSelected = true;
+                  }
+              }
+          }
+          if (this.selectType === 'single' && firstOption && !hasSelected) {
+              firstOption.selected = true;
+          }
+      }
+      getSelected() {
+          let selectedOptions = this.getSelectedOptions();
+          let selectedValues = [];
+          selectedOptions.forEach((option) => {
+              selectedValues.push(option.value);
+          });
+          return selectedValues;
+      }
+      getSelectedOptions() {
+          return this.filter((opt) => {
+              return opt.selected;
+          }, false);
+      }
+      getSelectedIDs() {
+          let selectedOptions = this.getSelectedOptions();
+          let selectedIDs = [];
+          selectedOptions.forEach((op) => {
+              selectedIDs.push(op.id);
+          });
+          return selectedIDs;
+      }
+      getOptgroupByID(id) {
+          for (let dataObj of this.data) {
+              if (dataObj instanceof Optgroup && dataObj.id === id) {
+                  return dataObj;
+              }
+          }
+          return null;
+      }
+      getOptionByID(id) {
+          let options = this.filter((opt) => {
+              return opt.id === id;
+          }, false);
+          return options.length ? options[0] : null;
+      }
+      getSelectType() {
+          return this.selectType;
+      }
+      getFirstOption() {
+          let option = null;
+          for (let dataObj of this.data) {
+              if (dataObj instanceof Optgroup) {
+                  option = dataObj.options[0];
+              }
+              else if (dataObj instanceof Option) {
+                  option = dataObj;
+              }
+              if (option) {
+                  break;
+              }
+          }
+          return option;
+      }
+      search(search, searchFilter) {
+          search = search.trim();
+          if (search === '') {
+              return this.getData();
+          }
+          return this.filter((opt) => {
+              return searchFilter(opt, search);
+          }, true);
+      }
+      filter(filter, includeOptgroup) {
+          const dataSearch = [];
+          this.data.forEach((dataObj) => {
+              if (dataObj instanceof Optgroup) {
+                  let optOptions = [];
+                  dataObj.options.forEach((option) => {
+                      if (!filter || filter(option)) {
+                          if (!includeOptgroup) {
+                              dataSearch.push(new Option(option));
+                          }
+                          else {
+                              optOptions.push(new Option(option));
+                          }
+                      }
+                  });
+                  if (optOptions.length > 0) {
+                      let optgroup = new Optgroup(dataObj);
+                      optgroup.options = optOptions;
+                      dataSearch.push(optgroup);
+                  }
+              }
+              if (dataObj instanceof Option) {
+                  if (!filter || filter(dataObj)) {
+                      dataSearch.push(new Option(dataObj));
+                  }
+              }
+          });
+          return dataSearch;
+      }
   }
 
-  class Optgroup {
-      constructor(optgroup) {
-          this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
-          this.label = optgroup.label || '';
-          this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
-          this.selectAllText = optgroup.selectAllText || 'Select All';
-          this.closable = optgroup.closable || 'off';
-          this.options = [];
-          if (optgroup.options) {
-              for (const o of optgroup.options) {
-                  this.options.push(new Option(o));
-              }
-          }
-      }
-  }
-  class Option {
-      constructor(option) {
-          this.id = !option.id || option.id === '' ? generateID() : option.id;
-          this.value = option.value === undefined ? option.text : option.value;
-          this.text = option.text || '';
-          this.html = option.html || '';
-          this.selected = option.selected !== undefined ? option.selected : false;
-          this.display = option.display !== undefined ? option.display : true;
-          this.disabled = option.disabled !== undefined ? option.disabled : false;
-          this.mandatory = option.mandatory !== undefined ? option.mandatory : false;
-          this.placeholder = option.placeholder !== undefined ? option.placeholder : false;
-          this.class = option.class || '';
-          this.style = option.style || '';
-          this.data = option.data || {};
-      }
-  }
-  class Store {
-      constructor(type, data) {
-          this.selectType = 'single';
-          this.data = [];
-          this.selectType = type;
-          this.setData(data);
-      }
-      validateDataArray(data) {
-          if (!Array.isArray(data)) {
-              return new Error('Data must be an array');
-          }
-          for (let dataObj of data) {
-              if (dataObj instanceof Optgroup || 'label' in dataObj) {
-                  if (!('label' in dataObj)) {
-                      return new Error('Optgroup must have a label');
-                  }
-                  if ('options' in dataObj && dataObj.options) {
-                      for (let option of dataObj.options) {
-                          return this.validateOption(option);
-                      }
-                  }
-              }
-              else if (dataObj instanceof Option || 'text' in dataObj) {
-                  return this.validateOption(dataObj);
-              }
-              else {
-                  return new Error('Data object must be a valid optgroup or option');
-              }
-          }
-          return null;
-      }
-      validateOption(option) {
-          if (!('text' in option)) {
-              return new Error('Option must have a text');
-          }
-          return null;
-      }
-      partialToFullData(data) {
-          let dataFinal = [];
-          data.forEach((dataObj) => {
-              if (dataObj instanceof Optgroup || 'label' in dataObj) {
-                  let optOptions = [];
-                  if ('options' in dataObj && dataObj.options) {
-                      dataObj.options.forEach((option) => {
-                          optOptions.push(new Option(option));
-                      });
-                  }
-                  if (optOptions.length > 0) {
-                      dataFinal.push(new Optgroup(dataObj));
-                  }
-              }
-              if (dataObj instanceof Option || 'text' in dataObj) {
-                  dataFinal.push(new Option(dataObj));
-              }
-          });
-          return dataFinal;
-      }
-      setData(data) {
-          this.data = this.partialToFullData(data);
-          if (this.selectType === 'single') {
-              this.setSelectedBy('value', this.getSelected());
-          }
-      }
-      getData() {
-          return this.filter(null, true);
-      }
-      getDataOptions() {
-          return this.filter(null, false);
-      }
-      addOption(option) {
-          this.setData(this.getData().concat(new Option(option)));
-      }
-      setSelectedBy(selectedType, selectedValues) {
-          let firstOption = null;
-          let hasSelected = false;
-          for (let dataObj of this.data) {
-              if (dataObj instanceof Optgroup) {
-                  for (let option of dataObj.options) {
-                      if (!firstOption) {
-                          firstOption = option;
-                      }
-                      option.selected = hasSelected ? false : selectedValues.includes(option[selectedType]);
-                      if (option.selected && this.selectType === 'single') {
-                          hasSelected = true;
-                      }
-                  }
-              }
-              if (dataObj instanceof Option) {
-                  if (!firstOption) {
-                      firstOption = dataObj;
-                  }
-                  dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
-                  if (dataObj.selected && this.selectType === 'single') {
-                      hasSelected = true;
-                  }
-              }
-          }
-          if (this.selectType === 'single' && firstOption && !hasSelected) {
-              firstOption.selected = true;
-          }
-      }
-      getSelected() {
-          let selectedOptions = this.getSelectedOptions();
-          let selectedValues = [];
-          selectedOptions.forEach((option) => {
-              selectedValues.push(option.value);
-          });
-          return selectedValues;
-      }
-      getSelectedOptions() {
-          return this.filter((opt) => {
-              return opt.selected;
-          }, false);
-      }
-      getSelectedIDs() {
-          let selectedOptions = this.getSelectedOptions();
-          let selectedIDs = [];
-          selectedOptions.forEach((op) => {
-              selectedIDs.push(op.id);
-          });
-          return selectedIDs;
-      }
-      getOptgroupByID(id) {
-          for (let dataObj of this.data) {
-              if (dataObj instanceof Optgroup && dataObj.id === id) {
-                  return dataObj;
-              }
-          }
-          return null;
-      }
-      getOptionByID(id) {
-          let options = this.filter((opt) => {
-              return opt.id === id;
-          }, false);
-          return options.length ? options[0] : null;
-      }
-      getSelectType() {
-          return this.selectType;
-      }
-      getFirstOption() {
-          let option = null;
-          for (let dataObj of this.data) {
-              if (dataObj instanceof Optgroup) {
-                  option = dataObj.options[0];
-              }
-              else if (dataObj instanceof Option) {
-                  option = dataObj;
-              }
-              if (option) {
-                  break;
-              }
-          }
-          return option;
-      }
-      search(search, searchFilter) {
-          search = search.trim();
-          if (search === '') {
-              return this.getData();
-          }
-          return this.filter((opt) => {
-              return searchFilter(opt, search);
-          }, true);
-      }
-      filter(filter, includeOptgroup) {
-          const dataSearch = [];
-          this.data.forEach((dataObj) => {
-              if (dataObj instanceof Optgroup) {
-                  let optOptions = [];
-                  dataObj.options.forEach((option) => {
-                      if (!filter || filter(option)) {
-                          if (!includeOptgroup) {
-                              dataSearch.push(new Option(option));
-                          }
-                          else {
-                              optOptions.push(new Option(option));
-                          }
-                      }
-                  });
-                  if (optOptions.length > 0) {
-                      let optgroup = new Optgroup(dataObj);
-                      optgroup.options = optOptions;
-                      dataSearch.push(optgroup);
-                  }
-              }
-              if (dataObj instanceof Option) {
-                  if (!filter || filter(dataObj)) {
-                      dataSearch.push(new Option(dataObj));
-                  }
-              }
-          });
-          return dataSearch;
-      }
+  class Render {
+      constructor(settings, store, callbacks) {
+          this.classes = {
+              main: 'ss-main',
+              placeholder: 'ss-placeholder',
+              values: 'ss-values',
+              single: 'ss-single',
+              max: 'ss-max',
+              value: 'ss-value',
+              valueText: 'ss-value-text',
+              valueDelete: 'ss-value-delete',
+              valueOut: 'ss-value-out',
+              deselect: 'ss-deselect',
+              deselectPath: 'M10,10 L90,90 M10,90 L90,10',
+              arrow: 'ss-arrow',
+              arrowClose: 'M10,30 L50,70 L90,30',
+              arrowOpen: 'M10,70 L50,30 L90,70',
+              content: 'ss-content',
+              openAbove: 'ss-open-above',
+              openBelow: 'ss-open-below',
+              search: 'ss-search',
+              searchHighlighter: 'ss-search-highlight',
+              searching: 'ss-searching',
+              addable: 'ss-addable',
+              addablePath: 'M50,10 L50,90 M10,50 L90,50',
+              list: 'ss-list',
+              optgroup: 'ss-optgroup',
+              optgroupLabel: 'ss-optgroup-label',
+              optgroupLabelText: 'ss-optgroup-label-text',
+              optgroupActions: 'ss-optgroup-actions',
+              optgroupSelectAll: 'ss-selectall',
+              optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
+              optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
+              optgroupClosable: 'ss-closable',
+              option: 'ss-option',
+              optionDelete: 'M10,10 L90,90 M10,90 L90,10',
+              highlighted: 'ss-highlighted',
+              open: 'ss-open',
+              close: 'ss-close',
+              selected: 'ss-selected',
+              error: 'ss-error',
+              disabled: 'ss-disabled',
+              hide: 'ss-hide',
+          };
+          this.store = store;
+          this.settings = settings;
+          this.callbacks = callbacks;
+          this.main = this.mainDiv();
+          this.content = this.contentDiv();
+          this.updateClassStyles();
+          this.updateAriaAttributes();
+          this.settings.contentLocation.appendChild(this.content.main);
+      }
+      enable() {
+          this.main.main.classList.remove(this.classes.disabled);
+          this.content.search.input.disabled = false;
+      }
+      disable() {
+          this.main.main.classList.add(this.classes.disabled);
+          this.content.search.input.disabled = true;
+      }
+      open() {
+          this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
+          this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
+          this.main.main.setAttribute('aria-expanded', 'true');
+          this.moveContent();
+          const selectedOptions = this.store.getSelectedOptions();
+          if (selectedOptions.length) {
+              const selectedId = selectedOptions[selectedOptions.length - 1].id;
+              const selectedOption = this.content.list.querySelector('[data-id="' + selectedId + '"]');
+              if (selectedOption) {
+                  this.ensureElementInView(this.content.list, selectedOption);
+              }
+          }
+      }
+      close() {
+          this.main.main.classList.remove(this.classes.openAbove);
+          this.main.main.classList.remove(this.classes.openBelow);
+          this.main.main.setAttribute('aria-expanded', 'false');
+          this.content.main.classList.remove(this.classes.openAbove);
+          this.content.main.classList.remove(this.classes.openBelow);
+          this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
+      }
+      updateClassStyles() {
+          this.main.main.className = '';
+          this.main.main.removeAttribute('style');
+          this.content.main.className = '';
+          this.content.main.removeAttribute('style');
+          this.main.main.classList.add(this.classes.main);
+          this.content.main.classList.add(this.classes.content);
+          if (this.settings.style !== '') {
+              this.main.main.style.cssText = this.settings.style;
+              this.content.main.style.cssText = this.settings.style;
+          }
+          if (this.settings.class.length) {
+              for (const c of this.settings.class) {
+                  if (c.trim() !== '') {
+                      this.main.main.classList.add(c.trim());
+                      this.content.main.classList.add(c.trim());
+                  }
+              }
+          }
+          if (this.settings.contentPosition === 'relative') {
+              this.content.main.classList.add('ss-' + this.settings.contentPosition);
+          }
+      }
+      updateAriaAttributes() {
+          this.main.main.role = 'combobox';
+          this.main.main.setAttribute('aria-haspopup', 'listbox');
+          this.main.main.setAttribute('aria-controls', this.content.main.id);
+          this.main.main.setAttribute('aria-expanded', 'false');
+          this.content.main.setAttribute('role', 'listbox');
+      }
+      mainDiv() {
+          var _a;
+          const main = document.createElement('div');
+          main.dataset.id = this.settings.id;
+          main.setAttribute('aria-label', this.settings.ariaLabel);
+          main.tabIndex = 0;
+          main.onkeydown = (e) => {
+              switch (e.key) {
+                  case 'ArrowUp':
+                  case 'ArrowDown':
+                      this.callbacks.open();
+                      e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
+                      return false;
+                  case 'Tab':
+                      this.callbacks.close();
+                      return true;
+                  case 'Enter':
+                  case ' ':
+                      this.callbacks.open();
+                      const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
+                      if (highlighted) {
+                          highlighted.click();
+                      }
+                      return false;
+                  case 'Escape':
+                      this.callbacks.close();
+                      return false;
+              }
+              return false;
+          };
+          main.onclick = (e) => {
+              if (this.settings.disabled) {
+                  return;
+              }
+              this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
+          };
+          const values = document.createElement('div');
+          values.classList.add(this.classes.values);
+          main.appendChild(values);
+          const deselect = document.createElement('div');
+          deselect.classList.add(this.classes.deselect);
+          const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
+          if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
+              deselect.classList.add(this.classes.hide);
+          }
+          else {
+              deselect.classList.remove(this.classes.hide);
+          }
+          deselect.onclick = (e) => {
+              e.stopPropagation();
+              if (this.settings.disabled) {
+                  return;
+              }
+              let shouldDelete = true;
+              const before = this.store.getSelectedOptions();
+              const after = [];
+              if (this.callbacks.beforeChange) {
+                  shouldDelete = this.callbacks.beforeChange(after, before) === true;
+              }
+              if (shouldDelete) {
+                  if (this.settings.isMultiple) {
+                      this.callbacks.setSelected([], false);
+                      this.updateDeselectAll();
+                  }
+                  else {
+                      const firstOption = this.store.getFirstOption();
+                      const value = firstOption ? firstOption.value : '';
+                      this.callbacks.setSelected(value, false);
+                  }
+                  if (this.settings.closeOnSelect) {
+                      this.callbacks.close();
+                  }
+                  if (this.callbacks.afterChange) {
+                      this.callbacks.afterChange(this.store.getSelectedOptions());
+                  }
+              }
+          };
+          const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          deselectSvg.setAttribute('viewBox', '0 0 100 100');
+          const deselectPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+          deselectPath.setAttribute('d', this.classes.deselectPath);
+          deselectSvg.appendChild(deselectPath);
+          deselect.appendChild(deselectSvg);
+          main.appendChild(deselect);
+          const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          arrow.classList.add(this.classes.arrow);
+          arrow.setAttribute('viewBox', '0 0 100 100');
+          const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+          arrowPath.setAttribute('d', this.classes.arrowClose);
+          if (this.settings.alwaysOpen) {
+              arrow.classList.add(this.classes.hide);
+          }
+          arrow.appendChild(arrowPath);
+          main.appendChild(arrow);
+          return {
+              main: main,
+              values: values,
+              deselect: {
+                  main: deselect,
+                  svg: deselectSvg,
+                  path: deselectPath,
+              },
+              arrow: {
+                  main: arrow,
+                  path: arrowPath,
+              },
+          };
+      }
+      mainFocus(eventType) {
+          if (eventType !== 'click') {
+              this.main.main.focus({ preventScroll: true });
+          }
+      }
+      placeholder() {
+          const placeholderOption = this.store.filter((o) => o.placeholder, false);
+          let placeholderText = this.settings.placeholderText;
+          if (placeholderOption.length) {
+              if (placeholderOption[0].html !== '') {
+                  placeholderText = placeholderOption[0].html;
+              }
+              else if (placeholderOption[0].text !== '') {
+                  placeholderText = placeholderOption[0].text;
+              }
+          }
+          const placeholder = document.createElement('div');
+          placeholder.classList.add(this.classes.placeholder);
+          placeholder.innerHTML = placeholderText;
+          return placeholder;
+      }
+      renderValues() {
+          if (!this.settings.isMultiple) {
+              this.renderSingleValue();
+              return;
+          }
+          this.renderMultipleValues();
+      }
+      renderSingleValue() {
+          const selected = this.store.filter((o) => {
+              return o.selected && !o.placeholder;
+          }, false);
+          const selectedSingle = selected.length > 0 ? selected[0] : null;
+          if (!selectedSingle) {
+              this.main.values.innerHTML = this.placeholder().outerHTML;
+          }
+          else {
+              const singleValue = document.createElement('div');
+              singleValue.classList.add(this.classes.single);
+              if (selectedSingle.html) {
+                  singleValue.innerHTML = selectedSingle.html;
+              }
+              else {
+                  singleValue.innerText = selectedSingle.text;
+              }
+              this.main.values.innerHTML = singleValue.outerHTML;
+          }
+          if (!this.settings.allowDeselect || !selected.length) {
+              this.main.deselect.main.classList.add(this.classes.hide);
+          }
+          else {
+              this.main.deselect.main.classList.remove(this.classes.hide);
+          }
+      }
+      renderMultipleValues() {
+          let currentNodes = this.main.values.childNodes;
+          let selectedOptions = this.store.filter((opt) => {
+              return opt.selected && opt.display;
+          }, false);
+          if (selectedOptions.length === 0) {
+              this.main.values.innerHTML = this.placeholder().outerHTML;
+              return;
+          }
+          else {
+              const placeholder = this.main.values.querySelector('.' + this.classes.placeholder);
+              if (placeholder) {
+                  placeholder.remove();
+              }
+          }
+          if (selectedOptions.length > this.settings.maxValuesShown) {
+              const singleValue = document.createElement('div');
+              singleValue.classList.add(this.classes.max);
+              singleValue.textContent = this.settings.maxValuesMessage.replace('{number}', selectedOptions.length.toString());
+              this.main.values.innerHTML = singleValue.outerHTML;
+              return;
+          }
+          else {
+              const maxValuesMessage = this.main.values.querySelector('.' + this.classes.max);
+              if (maxValuesMessage) {
+                  maxValuesMessage.remove();
+              }
+          }
+          let removeNodes = [];
+          for (let i = 0; i < currentNodes.length; i++) {
+              const node = currentNodes[i];
+              const id = node.getAttribute('data-id');
+              if (id) {
+                  const found = selectedOptions.filter((opt) => {
+                      return opt.id === id;
+                  }, false);
+                  if (!found.length) {
+                      removeNodes.push(node);
+                  }
+              }
+          }
+          for (const n of removeNodes) {
+              n.classList.add(this.classes.valueOut);
+              setTimeout(() => {
+                  if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
+                      this.main.values.removeChild(n);
+                  }
+              }, 100);
+          }
+          currentNodes = this.main.values.childNodes;
+          for (let d = 0; d < selectedOptions.length; d++) {
+              let shouldAdd = true;
+              for (let i = 0; i < currentNodes.length; i++) {
+                  if (selectedOptions[d].id === String(currentNodes[i].dataset.id)) {
+                      shouldAdd = false;
+                  }
+              }
+              if (shouldAdd) {
+                  if (this.settings.keepOrder) {
+                      this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
+                  }
+                  else {
+                      if (currentNodes.length === 0) {
+                          this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
+                      }
+                      else if (d === 0) {
+                          this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
+                      }
+                      else {
+                          currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
+                      }
+                  }
+              }
+          }
+          this.updateDeselectAll();
+      }
+      multipleValue(option) {
+          const value = document.createElement('div');
+          value.classList.add(this.classes.value);
+          value.dataset.id = option.id;
+          const text = document.createElement('div');
+          text.classList.add(this.classes.valueText);
+          text.innerText = option.text;
+          value.appendChild(text);
+          if (!option.mandatory) {
+              const deleteDiv = document.createElement('div');
+              deleteDiv.classList.add(this.classes.valueDelete);
+              deleteDiv.onclick = (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (this.settings.disabled) {
+                      return;
+                  }
+                  let shouldDelete = true;
+                  const before = this.store.getSelectedOptions();
+                  const after = before.filter((o) => {
+                      return o.selected && o.id !== option.id;
+                  }, true);
+                  if (this.settings.minSelected && after.length < this.settings.minSelected) {
+                      return;
+                  }
+                  if (this.callbacks.beforeChange) {
+                      shouldDelete = this.callbacks.beforeChange(after, before) === true;
+                  }
+                  if (shouldDelete) {
+                      let selectedValues = [];
+                      for (const o of after) {
+                          if (o instanceof Optgroup) {
+                              for (const c of o.options) {
+                                  selectedValues.push(c.value);
+                              }
+                          }
+                          if (o instanceof Option) {
+                              selectedValues.push(o.value);
+                          }
+                      }
+                      this.callbacks.setSelected(selectedValues, false);
+                      if (this.settings.closeOnSelect) {
+                          this.callbacks.close();
+                      }
+                      if (this.callbacks.afterChange) {
+                          this.callbacks.afterChange(after);
+                      }
+                      this.updateDeselectAll();
+                  }
+              };
+              const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+              deleteSvg.setAttribute('viewBox', '0 0 100 100');
+              const deletePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+              deletePath.setAttribute('d', this.classes.optionDelete);
+              deleteSvg.appendChild(deletePath);
+              deleteDiv.appendChild(deleteSvg);
+              value.appendChild(deleteDiv);
+          }
+          return value;
+      }
+      contentDiv() {
+          const main = document.createElement('div');
+          main.dataset.id = this.settings.id;
+          const search = this.searchDiv();
+          main.appendChild(search.main);
+          const list = this.listDiv();
+          main.appendChild(list);
+          return {
+              main: main,
+              search: search,
+              list: list,
+          };
+      }
+      moveContent() {
+          if (this.settings.contentPosition === 'relative') {
+              this.moveContentBelow();
+              return;
+          }
+          if (this.settings.openPosition === 'down') {
+              this.moveContentBelow();
+              return;
+          }
+          else if (this.settings.openPosition === 'up') {
+              this.moveContentAbove();
+              return;
+          }
+          if (this.putContent() === 'up') {
+              this.moveContentAbove();
+          }
+          else {
+              this.moveContentBelow();
+          }
+      }
+      searchDiv() {
+          const main = document.createElement('div');
+          const input = document.createElement('input');
+          const addable = document.createElement('div');
+          main.classList.add(this.classes.search);
+          const searchReturn = {
+              main,
+              input,
+          };
+          if (!this.settings.showSearch) {
+              main.classList.add(this.classes.hide);
+              input.readOnly = true;
+          }
+          input.type = 'search';
+          input.placeholder = this.settings.searchPlaceholder;
+          input.tabIndex = -1;
+          input.setAttribute('aria-label', this.settings.searchPlaceholder);
+          input.setAttribute('autocapitalize', 'off');
+          input.setAttribute('autocomplete', 'off');
+          input.setAttribute('autocorrect', 'off');
+          input.oninput = debounce((e) => {
+              this.callbacks.search(e.target.value);
+          }, 100);
+          input.onkeydown = (e) => {
+              switch (e.key) {
+                  case 'ArrowUp':
+                  case 'ArrowDown':
+                      e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
+                      return false;
+                  case 'Tab':
+                      this.callbacks.close();
+                      return true;
+                  case 'Escape':
+                      this.callbacks.close();
+                      return false;
+                  case 'Enter':
+                  case ' ':
+                      if (this.callbacks.addable && e.ctrlKey) {
+                          addable.click();
+                          return false;
+                      }
+                      else {
+                          const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
+                          if (highlighted) {
+                              highlighted.click();
+                              return false;
+                          }
+                      }
+                      return true;
+              }
+              return true;
+          };
+          main.appendChild(input);
+          if (this.callbacks.addable) {
+              addable.classList.add(this.classes.addable);
+              const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+              plus.setAttribute('viewBox', '0 0 100 100');
+              const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+              plusPath.setAttribute('d', this.classes.addablePath);
+              plus.appendChild(plusPath);
+              addable.appendChild(plus);
+              addable.onclick = (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (!this.callbacks.addable) {
+                      return;
+                  }
+                  const inputValue = this.content.search.input.value.trim();
+                  if (inputValue === '') {
+                      this.content.search.input.focus();
+                      return;
+                  }
+                  const runFinish = (oo) => {
+                      let newOption = new Option(oo);
+                      this.callbacks.addOption(newOption);
+                      if (this.settings.isMultiple) {
+                          let values = this.store.getSelected();
+                          values.push(newOption.value);
+                          this.callbacks.setSelected(values, true);
+                      }
+                      else {
+                          this.callbacks.setSelected([newOption.value], true);
+                      }
+                      this.callbacks.search('');
+                      if (this.settings.closeOnSelect) {
+                          setTimeout(() => {
+                              this.callbacks.close();
+                          }, 100);
+                      }
+                  };
+                  const addableValue = this.callbacks.addable(inputValue);
+                  if (addableValue === false || addableValue === undefined || addableValue === null) {
+                      return;
+                  }
+                  if (addableValue instanceof Promise) {
+                      addableValue.then((value) => {
+                          if (typeof value === 'string') {
+                              runFinish({
+                                  text: value,
+                                  value: value,
+                              });
+                          }
+                          else {
+                              runFinish(value);
+                          }
+                      });
+                  }
+                  else if (typeof addableValue === 'string') {
+                      runFinish({
+                          text: addableValue,
+                          value: addableValue,
+                      });
+                  }
+                  else {
+                      runFinish(addableValue);
+                  }
+                  return;
+              };
+              main.appendChild(addable);
+              searchReturn.addable = {
+                  main: addable,
+                  svg: plus,
+                  path: plusPath,
+              };
+          }
+          return searchReturn;
+      }
+      searchFocus() {
+          this.content.search.input.focus();
+      }
+      getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
+          let query = '.' + this.classes.option;
+          if (notPlaceholder) {
+              query += ':not(.' + this.classes.placeholder + ')';
+          }
+          if (notDisabled) {
+              query += ':not(.' + this.classes.disabled + ')';
+          }
+          if (notHidden) {
+              query += ':not(.' + this.classes.hide + ')';
+          }
+          return Array.from(this.content.list.querySelectorAll(query));
+      }
+      highlight(dir) {
+          const options = this.getOptions(true, true, true);
+          if (options.length === 0) {
+              return;
+          }
+          if (options.length === 1) {
+              if (!options[0].classList.contains(this.classes.highlighted)) {
+                  options[0].classList.add(this.classes.highlighted);
+                  return;
+              }
+          }
+          let highlighted = false;
+          for (const o of options) {
+              if (o.classList.contains(this.classes.highlighted)) {
+                  highlighted = true;
+              }
+          }
+          if (!highlighted) {
+              for (const o of options) {
+                  if (o.classList.contains(this.classes.selected)) {
+                      o.classList.add(this.classes.highlighted);
+                      break;
+                  }
+              }
+          }
+          for (let i = 0; i < options.length; i++) {
+              if (options[i].classList.contains(this.classes.highlighted)) {
+                  const prevOption = options[i];
+                  prevOption.classList.remove(this.classes.highlighted);
+                  const prevParent = prevOption.parentElement;
+                  if (prevParent && prevParent.classList.contains(this.classes.open)) {
+                      const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
+                      if (optgroupLabel) {
+                          optgroupLabel.click();
+                      }
+                  }
+                  let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
+                  selectOption.classList.add(this.classes.highlighted);
+                  this.ensureElementInView(this.content.list, selectOption);
+                  const selectParent = selectOption.parentElement;
+                  if (selectParent && selectParent.classList.contains(this.classes.close)) {
+                      const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
+                      if (optgroupLabel) {
+                          optgroupLabel.click();
+                      }
+                  }
+                  return;
+              }
+          }
+          options[dir === 'down' ? 0 : options.length - 1].classList.add(this.classes.highlighted);
+          this.ensureElementInView(this.content.list, options[dir === 'down' ? 0 : options.length - 1]);
+      }
+      listDiv() {
+          const options = document.createElement('div');
+          options.classList.add(this.classes.list);
+          return options;
+      }
+      renderError(error) {
+          this.content.list.innerHTML = '';
+          const errorDiv = document.createElement('div');
+          errorDiv.classList.add(this.classes.error);
+          errorDiv.textContent = error;
+          this.content.list.appendChild(errorDiv);
+      }
+      renderSearching() {
+          this.content.list.innerHTML = '';
+          const searchingDiv = document.createElement('div');
+          searchingDiv.classList.add(this.classes.searching);
+          searchingDiv.textContent = this.settings.searchingText;
+          this.content.list.appendChild(searchingDiv);
+      }
+      renderOptions(data) {
+          this.content.list.innerHTML = '';
+          if (data.length === 0) {
+              const noResults = document.createElement('div');
+              noResults.classList.add(this.classes.search);
+              noResults.innerHTML = this.settings.searchText;
+              this.content.list.appendChild(noResults);
+              return;
+          }
+          for (const d of data) {
+              if (d instanceof Optgroup) {
+                  const optgroupEl = document.createElement('div');
+                  optgroupEl.classList.add(this.classes.optgroup);
+                  const optgroupLabel = document.createElement('div');
+                  optgroupLabel.classList.add(this.classes.optgroupLabel);
+                  optgroupEl.appendChild(optgroupLabel);
+                  const optgroupLabelText = document.createElement('div');
+                  optgroupLabelText.classList.add(this.classes.optgroupLabelText);
+                  optgroupLabelText.textContent = d.label;
+                  optgroupLabel.appendChild(optgroupLabelText);
+                  const optgroupActions = document.createElement('div');
+                  optgroupActions.classList.add(this.classes.optgroupActions);
+                  optgroupLabel.appendChild(optgroupActions);
+                  if (this.settings.isMultiple && d.selectAll) {
+                      const selectAll = document.createElement('div');
+                      selectAll.classList.add(this.classes.optgroupSelectAll);
+                      let allSelected = true;
+                      for (const o of d.options) {
+                          if (!o.selected) {
+                              allSelected = false;
+                              break;
+                          }
+                      }
+                      if (allSelected) {
+                          selectAll.classList.add(this.classes.selected);
+                      }
+                      const selectAllText = document.createElement('span');
+                      selectAllText.textContent = d.selectAllText;
+                      selectAll.appendChild(selectAllText);
+                      const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                      selectAllSvg.setAttribute('viewBox', '0 0 100 100');
+                      selectAll.appendChild(selectAllSvg);
+                      const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                      selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
+                      selectAllSvg.appendChild(selectAllBox);
+                      const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                      selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
+                      selectAllSvg.appendChild(selectAllCheck);
+                      selectAll.addEventListener('click', (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          const currentSelected = this.store.getSelected();
+                          if (allSelected) {
+                              const newSelected = currentSelected.filter((s) => {
+                                  for (const o of d.options) {
+                                      if (s === o.value) {
+                                          return false;
+                                      }
+                                  }
+                                  return true;
+                              });
+                              this.callbacks.setSelected(newSelected, true);
+                              return;
+                          }
+                          else {
+                              const newSelected = currentSelected.concat(d.options.map((o) => o.value));
+                              for (const o of d.options) {
+                                  if (!this.store.getOptionByID(o.id)) {
+                                      this.callbacks.addOption(o);
+                                  }
+                              }
+                              this.callbacks.setSelected(newSelected, true);
+                              return;
+                          }
+                      });
+                      optgroupActions.appendChild(selectAll);
+                  }
+                  if (d.closable !== 'off') {
+                      const optgroupClosable = document.createElement('div');
+                      optgroupClosable.classList.add(this.classes.optgroupClosable);
+                      const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                      optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
+                      optgroupClosableSvg.classList.add(this.classes.arrow);
+                      optgroupClosable.appendChild(optgroupClosableSvg);
+                      const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                      optgroupClosableSvg.appendChild(optgroupClosableArrow);
+                      if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
+                          optgroupClosable.classList.add(this.classes.open);
+                          optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                      }
+                      else if (d.closable === 'open') {
+                          optgroupEl.classList.add(this.classes.open);
+                          optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                      }
+                      else if (d.closable === 'close') {
+                          optgroupEl.classList.add(this.classes.close);
+                          optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
+                      }
+                      optgroupLabel.addEventListener('click', (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (optgroupEl.classList.contains(this.classes.close)) {
+                              optgroupEl.classList.remove(this.classes.close);
+                              optgroupEl.classList.add(this.classes.open);
+                              optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
+                          }
+                          else {
+                              optgroupEl.classList.remove(this.classes.open);
+                              optgroupEl.classList.add(this.classes.close);
+                              optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
+                          }
+                      });
+                      optgroupActions.appendChild(optgroupClosable);
+                  }
+                  optgroupEl.appendChild(optgroupLabel);
+                  for (const o of d.options) {
+                      optgroupEl.appendChild(this.option(o));
+                  }
+                  this.content.list.appendChild(optgroupEl);
+              }
+              if (d instanceof Option) {
+                  this.content.list.appendChild(this.option(d));
+              }
+          }
+      }
+      option(option) {
+          if (option.placeholder) {
+              const placeholder = document.createElement('div');
+              placeholder.classList.add(this.classes.option);
+              placeholder.classList.add(this.classes.hide);
+              return placeholder;
+          }
+          const optionEl = document.createElement('div');
+          optionEl.dataset.id = option.id;
+          optionEl.id = option.id;
+          optionEl.classList.add(this.classes.option);
+          optionEl.setAttribute('role', 'option');
+          if (option.class) {
+              option.class.split(' ').forEach((dataClass) => {
+                  optionEl.classList.add(dataClass);
+              });
+          }
+          if (option.style) {
+              optionEl.style.cssText = option.style;
+          }
+          if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
+              optionEl.innerHTML = this.highlightText(option.html !== '' ? option.html : option.text, this.content.search.input.value, this.classes.searchHighlighter);
+          }
+          else if (option.html !== '') {
+              optionEl.innerHTML = option.html;
+          }
+          else {
+              optionEl.textContent = option.text;
+          }
+          if (this.settings.showOptionTooltips && optionEl.textContent) {
+              optionEl.setAttribute('title', optionEl.textContent);
+          }
+          if (!option.display) {
+              optionEl.classList.add(this.classes.hide);
+          }
+          if (option.disabled) {
+              optionEl.classList.add(this.classes.disabled);
+          }
+          if (option.selected && this.settings.hideSelected) {
+              optionEl.classList.add(this.classes.hide);
+          }
+          if (option.selected) {
+              optionEl.classList.add(this.classes.selected);
+              optionEl.setAttribute('aria-selected', 'true');
+              this.main.main.setAttribute('aria-activedescendant', optionEl.id);
+          }
+          else {
+              optionEl.classList.remove(this.classes.selected);
+              optionEl.setAttribute('aria-selected', 'false');
+          }
+          optionEl.addEventListener('click', (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              const selectedOptions = this.store.getSelected();
+              const element = e.currentTarget;
+              const elementID = String(element.dataset.id);
+              if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
+                  return;
+              }
+              if ((this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
+                  (this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)) {
+                  return;
+              }
+              let shouldUpdate = false;
+              const before = this.store.getSelectedOptions();
+              let after = [];
+              if (this.settings.isMultiple) {
+                  if (option.selected) {
+                      after = before.filter((o) => o.id !== elementID);
+                  }
+                  else {
+                      after = before.concat(option);
+                  }
+              }
+              if (!this.settings.isMultiple) {
+                  if (option.selected) {
+                      after = [];
+                  }
+                  else {
+                      after = [option];
+                  }
+              }
+              if (!this.callbacks.beforeChange) {
+                  shouldUpdate = true;
+              }
+              if (this.callbacks.beforeChange) {
+                  if (this.callbacks.beforeChange(after, before) === false) {
+                      shouldUpdate = false;
+                  }
+                  else {
+                      shouldUpdate = true;
+                  }
+              }
+              if (shouldUpdate) {
+                  if (!this.store.getOptionByID(elementID)) {
+                      this.callbacks.addOption(option);
+                  }
+                  this.callbacks.setSelected(after.map((o) => o.value), false);
+                  if (this.settings.closeOnSelect) {
+                      this.callbacks.close();
+                  }
+                  if (this.callbacks.afterChange) {
+                      this.callbacks.afterChange(after);
+                  }
+              }
+          });
+          return optionEl;
+      }
+      destroy() {
+          this.main.main.remove();
+          this.content.main.remove();
+      }
+      highlightText(str, search, className) {
+          let completedString = str;
+          const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
+          if (!str.match(regex)) {
+              return str;
+          }
+          const matchStartPosition = str.match(regex).index;
+          const matchEndPosition = matchStartPosition + str.match(regex)[0].toString().length;
+          const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition);
+          completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`);
+          return completedString;
+      }
+      moveContentAbove() {
+          const mainHeight = this.main.main.offsetHeight;
+          const contentHeight = this.content.main.offsetHeight;
+          this.main.main.classList.remove(this.classes.openBelow);
+          this.main.main.classList.add(this.classes.openAbove);
+          this.content.main.classList.remove(this.classes.openBelow);
+          this.content.main.classList.add(this.classes.openAbove);
+          const containerRect = this.main.main.getBoundingClientRect();
+          this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px';
+          this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
+          this.content.main.style.left = containerRect.left + window.scrollX + 'px';
+          this.content.main.style.width = containerRect.width + 'px';
+      }
+      moveContentBelow() {
+          this.main.main.classList.remove(this.classes.openAbove);
+          this.main.main.classList.add(this.classes.openBelow);
+          this.content.main.classList.remove(this.classes.openAbove);
+          this.content.main.classList.add(this.classes.openBelow);
+          const containerRect = this.main.main.getBoundingClientRect();
+          this.content.main.style.margin = '-1px 0px 0px 0px';
+          if (this.settings.contentPosition !== 'relative') {
+              this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
+              this.content.main.style.left = containerRect.left + window.scrollX + 'px';
+              this.content.main.style.width = containerRect.width + 'px';
+          }
+      }
+      ensureElementInView(container, element) {
+          const cTop = container.scrollTop + container.offsetTop;
+          const cBottom = cTop + container.clientHeight;
+          const eTop = element.offsetTop;
+          const eBottom = eTop + element.clientHeight;
+          if (eTop < cTop) {
+              container.scrollTop -= cTop - eTop;
+          }
+          else if (eBottom > cBottom) {
+              container.scrollTop += eBottom - cBottom;
+          }
+      }
+      putContent() {
+          const mainHeight = this.main.main.offsetHeight;
+          const mainRect = this.main.main.getBoundingClientRect();
+          const contentHeight = this.content.main.offsetHeight;
+          const spaceBelow = window.innerHeight - (mainRect.top + mainHeight);
+          if (spaceBelow <= contentHeight) {
+              if (mainRect.top > contentHeight) {
+                  return 'up';
+              }
+              else {
+                  return 'down';
+              }
+          }
+          return 'down';
+      }
+      updateDeselectAll() {
+          if (!this.store || !this.settings) {
+              return;
+          }
+          const selected = this.store.getSelectedOptions();
+          const hasSelectedItems = selected && selected.length > 0;
+          const isMultiple = this.settings.isMultiple;
+          const allowDeselect = this.settings.allowDeselect;
+          const deselectButton = this.main.deselect.main;
+          const hideClass = this.classes.hide;
+          if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
+              deselectButton.classList.remove(hideClass);
+          }
+          else {
+              deselectButton.classList.add(hideClass);
+          }
+      }
   }
 
-  class Render {
-      constructor(settings, store, callbacks) {
-          this.classes = {
-              main: 'ss-main',
-              placeholder: 'ss-placeholder',
-              values: 'ss-values',
-              single: 'ss-single',
-              max: 'ss-max',
-              value: 'ss-value',
-              valueText: 'ss-value-text',
-              valueDelete: 'ss-value-delete',
-              valueOut: 'ss-value-out',
-              deselect: 'ss-deselect',
-              deselectPath: 'M10,10 L90,90 M10,90 L90,10',
-              arrow: 'ss-arrow',
-              arrowClose: 'M10,30 L50,70 L90,30',
-              arrowOpen: 'M10,70 L50,30 L90,70',
-              content: 'ss-content',
-              openAbove: 'ss-open-above',
-              openBelow: 'ss-open-below',
-              search: 'ss-search',
-              searchHighlighter: 'ss-search-highlight',
-              searching: 'ss-searching',
-              addable: 'ss-addable',
-              addablePath: 'M50,10 L50,90 M10,50 L90,50',
-              list: 'ss-list',
-              optgroup: 'ss-optgroup',
-              optgroupLabel: 'ss-optgroup-label',
-              optgroupLabelText: 'ss-optgroup-label-text',
-              optgroupActions: 'ss-optgroup-actions',
-              optgroupSelectAll: 'ss-selectall',
-              optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
-              optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
-              optgroupClosable: 'ss-closable',
-              option: 'ss-option',
-              optionDelete: 'M10,10 L90,90 M10,90 L90,10',
-              highlighted: 'ss-highlighted',
-              open: 'ss-open',
-              close: 'ss-close',
-              selected: 'ss-selected',
-              error: 'ss-error',
-              disabled: 'ss-disabled',
-              hide: 'ss-hide',
-          };
-          this.store = store;
-          this.settings = settings;
-          this.callbacks = callbacks;
-          this.main = this.mainDiv();
-          this.content = this.contentDiv();
-          this.updateClassStyles();
-          this.updateAriaAttributes();
-          this.settings.contentLocation.appendChild(this.content.main);
-      }
-      enable() {
-          this.main.main.classList.remove(this.classes.disabled);
-          this.content.search.input.disabled = false;
-      }
-      disable() {
-          this.main.main.classList.add(this.classes.disabled);
-          this.content.search.input.disabled = true;
-      }
-      open() {
-          this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
-          this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
-          this.main.main.setAttribute('aria-expanded', 'true');
-          this.moveContent();
-          const selectedOptions = this.store.getSelectedOptions();
-          if (selectedOptions.length) {
-              const selectedId = selectedOptions[selectedOptions.length - 1].id;
-              const selectedOption = this.content.list.querySelector('[data-id="' + selectedId + '"]');
-              if (selectedOption) {
-                  this.ensureElementInView(this.content.list, selectedOption);
-              }
-          }
-      }
-      close() {
-          this.main.main.classList.remove(this.classes.openAbove);
-          this.main.main.classList.remove(this.classes.openBelow);
-          this.main.main.setAttribute('aria-expanded', 'false');
-          this.content.main.classList.remove(this.classes.openAbove);
-          this.content.main.classList.remove(this.classes.openBelow);
-          this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
-      }
-      updateClassStyles() {
-          this.main.main.className = '';
-          this.main.main.removeAttribute('style');
-          this.content.main.className = '';
-          this.content.main.removeAttribute('style');
-          this.main.main.classList.add(this.classes.main);
-          this.content.main.classList.add(this.classes.content);
-          if (this.settings.style !== '') {
-              this.main.main.style.cssText = this.settings.style;
-              this.content.main.style.cssText = this.settings.style;
-          }
-          if (this.settings.class.length) {
-              for (const c of this.settings.class) {
-                  if (c.trim() !== '') {
-                      this.main.main.classList.add(c.trim());
-                      this.content.main.classList.add(c.trim());
-                  }
-              }
-          }
-          if (this.settings.contentPosition === 'relative') {
-              this.content.main.classList.add('ss-' + this.settings.contentPosition);
-          }
-      }
-      updateAriaAttributes() {
-          this.main.main.role = 'combobox';
-          this.main.main.setAttribute('aria-haspopup', 'listbox');
-          this.main.main.setAttribute('aria-controls', this.content.main.id);
-          this.main.main.setAttribute('aria-expanded', 'false');
-          this.content.main.setAttribute('role', 'listbox');
-      }
-      mainDiv() {
-          var _a;
-          const main = document.createElement('div');
-          main.dataset.id = this.settings.id;
-          main.setAttribute('aria-label', this.settings.ariaLabel);
-          main.tabIndex = 0;
-          main.onkeydown = (e) => {
-              switch (e.key) {
-                  case 'ArrowUp':
-                  case 'ArrowDown':
-                      this.callbacks.open();
-                      e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
-                      return false;
-                  case 'Tab':
-                      this.callbacks.close();
-                      return true;
-                  case 'Enter':
-                  case ' ':
-                      this.callbacks.open();
-                      const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
-                      if (highlighted) {
-                          highlighted.click();
-                      }
-                      return false;
-                  case 'Escape':
-                      this.callbacks.close();
-                      return false;
-              }
-              return false;
-          };
-          main.onclick = (e) => {
-              if (this.settings.disabled) {
-                  return;
-              }
-              this.settings.isOpen ? this.callbacks.close() : this.callbacks.open();
-          };
-          const values = document.createElement('div');
-          values.classList.add(this.classes.values);
-          main.appendChild(values);
-          const deselect = document.createElement('div');
-          deselect.classList.add(this.classes.deselect);
-          const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
-          if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
-              deselect.classList.add(this.classes.hide);
-          }
-          else {
-              deselect.classList.remove(this.classes.hide);
-          }
-          deselect.onclick = (e) => {
-              e.stopPropagation();
-              if (this.settings.disabled) {
-                  return;
-              }
-              let shouldDelete = true;
-              const before = this.store.getSelectedOptions();
-              const after = [];
-              if (this.callbacks.beforeChange) {
-                  shouldDelete = this.callbacks.beforeChange(after, before) === true;
-              }
-              if (shouldDelete) {
-                  if (this.settings.isMultiple) {
-                      this.callbacks.setSelected([], false);
-                      this.updateDeselectAll();
-                  }
-                  else {
-                      const firstOption = this.store.getFirstOption();
-                      const value = firstOption ? firstOption.value : '';
-                      this.callbacks.setSelected(value, false);
-                  }
-                  if (this.settings.closeOnSelect) {
-                      this.callbacks.close();
-                  }
-                  if (this.callbacks.afterChange) {
-                      this.callbacks.afterChange(this.store.getSelectedOptions());
-                  }
-              }
-          };
-          const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          deselectSvg.setAttribute('viewBox', '0 0 100 100');
-          const deselectPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-          deselectPath.setAttribute('d', this.classes.deselectPath);
-          deselectSvg.appendChild(deselectPath);
-          deselect.appendChild(deselectSvg);
-          main.appendChild(deselect);
-          const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          arrow.classList.add(this.classes.arrow);
-          arrow.setAttribute('viewBox', '0 0 100 100');
-          const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-          arrowPath.setAttribute('d', this.classes.arrowClose);
-          if (this.settings.alwaysOpen) {
-              arrow.classList.add(this.classes.hide);
-          }
-          arrow.appendChild(arrowPath);
-          main.appendChild(arrow);
-          return {
-              main: main,
-              values: values,
-              deselect: {
-                  main: deselect,
-                  svg: deselectSvg,
-                  path: deselectPath,
-              },
-              arrow: {
-                  main: arrow,
-                  path: arrowPath,
-              },
-          };
-      }
-      mainFocus(eventType) {
-          if (eventType !== 'click') {
-              this.main.main.focus({ preventScroll: true });
-          }
-      }
-      placeholder() {
-          const placeholderOption = this.store.filter((o) => o.placeholder, false);
-          let placeholderText = this.settings.placeholderText;
-          if (placeholderOption.length) {
-              if (placeholderOption[0].html !== '') {
-                  placeholderText = placeholderOption[0].html;
-              }
-              else if (placeholderOption[0].text !== '') {
-                  placeholderText = placeholderOption[0].text;
-              }
-          }
-          const placeholder = document.createElement('div');
-          placeholder.classList.add(this.classes.placeholder);
-          placeholder.innerHTML = placeholderText;
-          return placeholder;
-      }
-      renderValues() {
-          if (!this.settings.isMultiple) {
-              this.renderSingleValue();
-              return;
-          }
-          this.renderMultipleValues();
-      }
-      renderSingleValue() {
-          const selected = this.store.filter((o) => {
-              return o.selected && !o.placeholder;
-          }, false);
-          const selectedSingle = selected.length > 0 ? selected[0] : null;
-          if (!selectedSingle) {
-              this.main.values.innerHTML = this.placeholder().outerHTML;
-          }
-          else {
-              const singleValue = document.createElement('div');
-              singleValue.classList.add(this.classes.single);
-              if (selectedSingle.html) {
-                  singleValue.innerHTML = selectedSingle.html;
-              }
-              else {
-                  singleValue.innerText = selectedSingle.text;
-              }
-              this.main.values.innerHTML = singleValue.outerHTML;
-          }
-          if (!this.settings.allowDeselect || !selected.length) {
-              this.main.deselect.main.classList.add(this.classes.hide);
-          }
-          else {
-              this.main.deselect.main.classList.remove(this.classes.hide);
-          }
-      }
-      renderMultipleValues() {
-          let currentNodes = this.main.values.childNodes;
-          let selectedOptions = this.store.filter((opt) => {
-              return opt.selected && opt.display;
-          }, false);
-          if (selectedOptions.length === 0) {
-              this.main.values.innerHTML = this.placeholder().outerHTML;
-              return;
-          }
-          else {
-              const placeholder = this.main.values.querySelector('.' + this.classes.placeholder);
-              if (placeholder) {
-                  placeholder.remove();
-              }
-          }
-          if (selectedOptions.length > this.settings.maxValuesShown) {
-              const singleValue = document.createElement('div');
-              singleValue.classList.add(this.classes.max);
-              singleValue.textContent = this.settings.maxValuesMessage.replace('{number}', selectedOptions.length.toString());
-              this.main.values.innerHTML = singleValue.outerHTML;
-              return;
-          }
-          else {
-              const maxValuesMessage = this.main.values.querySelector('.' + this.classes.max);
-              if (maxValuesMessage) {
-                  maxValuesMessage.remove();
-              }
-          }
-          let removeNodes = [];
-          for (let i = 0; i < currentNodes.length; i++) {
-              const node = currentNodes[i];
-              const id = node.getAttribute('data-id');
-              if (id) {
-                  const found = selectedOptions.filter((opt) => {
-                      return opt.id === id;
-                  }, false);
-                  if (!found.length) {
-                      removeNodes.push(node);
-                  }
-              }
-          }
-          for (const n of removeNodes) {
-              n.classList.add(this.classes.valueOut);
-              setTimeout(() => {
-                  if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
-                      this.main.values.removeChild(n);
-                  }
-              }, 100);
-          }
-          currentNodes = this.main.values.childNodes;
-          for (let d = 0; d < selectedOptions.length; d++) {
-              let shouldAdd = true;
-              for (let i = 0; i < currentNodes.length; i++) {
-                  if (selectedOptions[d].id === String(currentNodes[i].dataset.id)) {
-                      shouldAdd = false;
-                  }
-              }
-              if (shouldAdd) {
-                  if (currentNodes.length === 0) {
-                      this.main.values.appendChild(this.multipleValue(selectedOptions[d]));
-                  }
-                  else if (d === 0) {
-                      this.main.values.insertBefore(this.multipleValue(selectedOptions[d]), currentNodes[d]);
-                  }
-                  else {
-                      currentNodes[d - 1].insertAdjacentElement('afterend', this.multipleValue(selectedOptions[d]));
-                  }
-              }
-          }
-          this.updateDeselectAll();
-      }
-      multipleValue(option) {
-          const value = document.createElement('div');
-          value.classList.add(this.classes.value);
-          value.dataset.id = option.id;
-          const text = document.createElement('div');
-          text.classList.add(this.classes.valueText);
-          text.innerText = option.text;
-          value.appendChild(text);
-          if (!option.mandatory) {
-              const deleteDiv = document.createElement('div');
-              deleteDiv.classList.add(this.classes.valueDelete);
-              deleteDiv.onclick = (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if (this.settings.disabled) {
-                      return;
-                  }
-                  let shouldDelete = true;
-                  const before = this.store.getSelectedOptions();
-                  const after = before.filter((o) => {
-                      return o.selected && o.id !== option.id;
-                  }, true);
-                  if (this.settings.minSelected && after.length < this.settings.minSelected) {
-                      return;
-                  }
-                  if (this.callbacks.beforeChange) {
-                      shouldDelete = this.callbacks.beforeChange(after, before) === true;
-                  }
-                  if (shouldDelete) {
-                      let selectedValues = [];
-                      for (const o of after) {
-                          if (o instanceof Optgroup) {
-                              for (const c of o.options) {
-                                  selectedValues.push(c.value);
-                              }
-                          }
-                          if (o instanceof Option) {
-                              selectedValues.push(o.value);
-                          }
-                      }
-                      this.callbacks.setSelected(selectedValues, false);
-                      if (this.settings.closeOnSelect) {
-                          this.callbacks.close();
-                      }
-                      if (this.callbacks.afterChange) {
-                          this.callbacks.afterChange(after);
-                      }
-                      this.updateDeselectAll();
-                  }
-              };
-              const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-              deleteSvg.setAttribute('viewBox', '0 0 100 100');
-              const deletePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              deletePath.setAttribute('d', this.classes.optionDelete);
-              deleteSvg.appendChild(deletePath);
-              deleteDiv.appendChild(deleteSvg);
-              value.appendChild(deleteDiv);
-          }
-          return value;
-      }
-      contentDiv() {
-          const main = document.createElement('div');
-          main.dataset.id = this.settings.id;
-          const search = this.searchDiv();
-          main.appendChild(search.main);
-          const list = this.listDiv();
-          main.appendChild(list);
-          return {
-              main: main,
-              search: search,
-              list: list,
-          };
-      }
-      moveContent() {
-          if (this.settings.contentPosition === 'relative') {
-              this.moveContentBelow();
-              return;
-          }
-          if (this.settings.openPosition === 'down') {
-              this.moveContentBelow();
-              return;
-          }
-          else if (this.settings.openPosition === 'up') {
-              this.moveContentAbove();
-              return;
-          }
-          if (this.putContent() === 'up') {
-              this.moveContentAbove();
-          }
-          else {
-              this.moveContentBelow();
-          }
-      }
-      searchDiv() {
-          const main = document.createElement('div');
-          const input = document.createElement('input');
-          const addable = document.createElement('div');
-          main.classList.add(this.classes.search);
-          const searchReturn = {
-              main,
-              input,
-          };
-          if (!this.settings.showSearch) {
-              main.classList.add(this.classes.hide);
-              input.readOnly = true;
-          }
-          input.type = 'search';
-          input.placeholder = this.settings.searchPlaceholder;
-          input.tabIndex = -1;
-          input.setAttribute('aria-label', this.settings.searchPlaceholder);
-          input.setAttribute('autocapitalize', 'off');
-          input.setAttribute('autocomplete', 'off');
-          input.setAttribute('autocorrect', 'off');
-          input.oninput = debounce((e) => {
-              this.callbacks.search(e.target.value);
-          }, 100);
-          input.onkeydown = (e) => {
-              switch (e.key) {
-                  case 'ArrowUp':
-                  case 'ArrowDown':
-                      e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
-                      return false;
-                  case 'Tab':
-                      this.callbacks.close();
-                      return true;
-                  case 'Escape':
-                      this.callbacks.close();
-                      return false;
-                  case 'Enter':
-                  case ' ':
-                      if (this.callbacks.addable && e.ctrlKey) {
-                          addable.click();
-                          return false;
-                      }
-                      else {
-                          const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
-                          if (highlighted) {
-                              highlighted.click();
-                              return false;
-                          }
-                      }
-                      return true;
-              }
-              return true;
-          };
-          main.appendChild(input);
-          if (this.callbacks.addable) {
-              addable.classList.add(this.classes.addable);
-              const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-              plus.setAttribute('viewBox', '0 0 100 100');
-              const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              plusPath.setAttribute('d', this.classes.addablePath);
-              plus.appendChild(plusPath);
-              addable.appendChild(plus);
-              addable.onclick = (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if (!this.callbacks.addable) {
-                      return;
-                  }
-                  const inputValue = this.content.search.input.value.trim();
-                  if (inputValue === '') {
-                      this.content.search.input.focus();
-                      return;
-                  }
-                  const runFinish = (oo) => {
-                      let newOption = new Option(oo);
-                      this.callbacks.addOption(newOption);
-                      if (this.settings.isMultiple) {
-                          let values = this.store.getSelected();
-                          values.push(newOption.value);
-                          this.callbacks.setSelected(values, true);
-                      }
-                      else {
-                          this.callbacks.setSelected([newOption.value], true);
-                      }
-                      this.callbacks.search('');
-                      if (this.settings.closeOnSelect) {
-                          setTimeout(() => {
-                              this.callbacks.close();
-                          }, 100);
-                      }
-                  };
-                  const addableValue = this.callbacks.addable(inputValue);
-                  if (addableValue === false || addableValue === undefined || addableValue === null) {
-                      return;
-                  }
-                  if (addableValue instanceof Promise) {
-                      addableValue.then((value) => {
-                          if (typeof value === 'string') {
-                              runFinish({
-                                  text: value,
-                                  value: value,
-                              });
-                          }
-                          else {
-                              runFinish(value);
-                          }
-                      });
-                  }
-                  else if (typeof addableValue === 'string') {
-                      runFinish({
-                          text: addableValue,
-                          value: addableValue,
-                      });
-                  }
-                  else {
-                      runFinish(addableValue);
-                  }
-                  return;
-              };
-              main.appendChild(addable);
-              searchReturn.addable = {
-                  main: addable,
-                  svg: plus,
-                  path: plusPath,
-              };
-          }
-          return searchReturn;
-      }
-      searchFocus() {
-          this.content.search.input.focus();
-      }
-      getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
-          let query = '.' + this.classes.option;
-          if (notPlaceholder) {
-              query += ':not(.' + this.classes.placeholder + ')';
-          }
-          if (notDisabled) {
-              query += ':not(.' + this.classes.disabled + ')';
-          }
-          if (notHidden) {
-              query += ':not(.' + this.classes.hide + ')';
-          }
-          return Array.from(this.content.list.querySelectorAll(query));
-      }
-      highlight(dir) {
-          const options = this.getOptions(true, true, true);
-          if (options.length === 0) {
-              return;
-          }
-          if (options.length === 1) {
-              if (!options[0].classList.contains(this.classes.highlighted)) {
-                  options[0].classList.add(this.classes.highlighted);
-                  return;
-              }
-          }
-          let highlighted = false;
-          for (const o of options) {
-              if (o.classList.contains(this.classes.highlighted)) {
-                  highlighted = true;
-              }
-          }
-          if (!highlighted) {
-              for (const o of options) {
-                  if (o.classList.contains(this.classes.selected)) {
-                      o.classList.add(this.classes.highlighted);
-                      break;
-                  }
-              }
-          }
-          for (let i = 0; i < options.length; i++) {
-              if (options[i].classList.contains(this.classes.highlighted)) {
-                  const prevOption = options[i];
-                  prevOption.classList.remove(this.classes.highlighted);
-                  const prevParent = prevOption.parentElement;
-                  if (prevParent && prevParent.classList.contains(this.classes.open)) {
-                      const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel);
-                      if (optgroupLabel) {
-                          optgroupLabel.click();
-                      }
-                  }
-                  let selectOption = options[dir === 'down' ? (i + 1 < options.length ? i + 1 : 0) : i - 1 >= 0 ? i - 1 : options.length - 1];
-                  selectOption.classList.add(this.classes.highlighted);
-                  this.ensureElementInView(this.content.list, selectOption);
-                  const selectParent = selectOption.parentElement;
-                  if (selectParent && selectParent.classList.contains(this.classes.close)) {
-                      const optgroupLabel = selectParent.querySelector('.' + this.classes.optgroupLabel);
-                      if (optgroupLabel) {
-                          optgroupLabel.click();
-                      }
-                  }
-                  return;
-              }
-          }
-          options[dir === 'down' ? 0 : options.length - 1].classList.add(this.classes.highlighted);
-          this.ensureElementInView(this.content.list, options[dir === 'down' ? 0 : options.length - 1]);
-      }
-      listDiv() {
-          const options = document.createElement('div');
-          options.classList.add(this.classes.list);
-          return options;
-      }
-      renderError(error) {
-          this.content.list.innerHTML = '';
-          const errorDiv = document.createElement('div');
-          errorDiv.classList.add(this.classes.error);
-          errorDiv.textContent = error;
-          this.content.list.appendChild(errorDiv);
-      }
-      renderSearching() {
-          this.content.list.innerHTML = '';
-          const searchingDiv = document.createElement('div');
-          searchingDiv.classList.add(this.classes.searching);
-          searchingDiv.textContent = this.settings.searchingText;
-          this.content.list.appendChild(searchingDiv);
-      }
-      renderOptions(data) {
-          this.content.list.innerHTML = '';
-          if (data.length === 0) {
-              const noResults = document.createElement('div');
-              noResults.classList.add(this.classes.search);
-              noResults.innerHTML = this.settings.searchText;
-              this.content.list.appendChild(noResults);
-              return;
-          }
-          for (const d of data) {
-              if (d instanceof Optgroup) {
-                  const optgroupEl = document.createElement('div');
-                  optgroupEl.classList.add(this.classes.optgroup);
-                  const optgroupLabel = document.createElement('div');
-                  optgroupLabel.classList.add(this.classes.optgroupLabel);
-                  optgroupEl.appendChild(optgroupLabel);
-                  const optgroupLabelText = document.createElement('div');
-                  optgroupLabelText.classList.add(this.classes.optgroupLabelText);
-                  optgroupLabelText.textContent = d.label;
-                  optgroupLabel.appendChild(optgroupLabelText);
-                  const optgroupActions = document.createElement('div');
-                  optgroupActions.classList.add(this.classes.optgroupActions);
-                  optgroupLabel.appendChild(optgroupActions);
-                  if (this.settings.isMultiple && d.selectAll) {
-                      const selectAll = document.createElement('div');
-                      selectAll.classList.add(this.classes.optgroupSelectAll);
-                      let allSelected = true;
-                      for (const o of d.options) {
-                          if (!o.selected) {
-                              allSelected = false;
-                              break;
-                          }
-                      }
-                      if (allSelected) {
-                          selectAll.classList.add(this.classes.selected);
-                      }
-                      const selectAllText = document.createElement('span');
-                      selectAllText.textContent = d.selectAllText;
-                      selectAll.appendChild(selectAllText);
-                      const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                      selectAllSvg.setAttribute('viewBox', '0 0 100 100');
-                      selectAll.appendChild(selectAllSvg);
-                      const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                      selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
-                      selectAllSvg.appendChild(selectAllBox);
-                      const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                      selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
-                      selectAllSvg.appendChild(selectAllCheck);
-                      selectAll.addEventListener('click', (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          const currentSelected = this.store.getSelected();
-                          if (allSelected) {
-                              const newSelected = currentSelected.filter((s) => {
-                                  for (const o of d.options) {
-                                      if (s === o.value) {
-                                          return false;
-                                      }
-                                  }
-                                  return true;
-                              });
-                              this.callbacks.setSelected(newSelected, true);
-                              return;
-                          }
-                          else {
-                              const newSelected = currentSelected.concat(d.options.map((o) => o.value));
-                              for (const o of d.options) {
-                                  if (!this.store.getOptionByID(o.id)) {
-                                      this.callbacks.addOption(o);
-                                  }
-                              }
-                              this.callbacks.setSelected(newSelected, true);
-                              return;
-                          }
-                      });
-                      optgroupActions.appendChild(selectAll);
-                  }
-                  if (d.closable !== 'off') {
-                      const optgroupClosable = document.createElement('div');
-                      optgroupClosable.classList.add(this.classes.optgroupClosable);
-                      const optgroupClosableSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                      optgroupClosableSvg.setAttribute('viewBox', '0 0 100 100');
-                      optgroupClosableSvg.classList.add(this.classes.arrow);
-                      optgroupClosable.appendChild(optgroupClosableSvg);
-                      const optgroupClosableArrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                      optgroupClosableSvg.appendChild(optgroupClosableArrow);
-                      if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
-                          optgroupClosable.classList.add(this.classes.open);
-                          optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
-                      }
-                      else if (d.closable === 'open') {
-                          optgroupEl.classList.add(this.classes.open);
-                          optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
-                      }
-                      else if (d.closable === 'close') {
-                          optgroupEl.classList.add(this.classes.close);
-                          optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
-                      }
-                      optgroupLabel.addEventListener('click', (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          if (optgroupEl.classList.contains(this.classes.close)) {
-                              optgroupEl.classList.remove(this.classes.close);
-                              optgroupEl.classList.add(this.classes.open);
-                              optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen);
-                          }
-                          else {
-                              optgroupEl.classList.remove(this.classes.open);
-                              optgroupEl.classList.add(this.classes.close);
-                              optgroupClosableArrow.setAttribute('d', this.classes.arrowClose);
-                          }
-                      });
-                      optgroupActions.appendChild(optgroupClosable);
-                  }
-                  optgroupEl.appendChild(optgroupLabel);
-                  for (const o of d.options) {
-                      optgroupEl.appendChild(this.option(o));
-                  }
-                  this.content.list.appendChild(optgroupEl);
-              }
-              if (d instanceof Option) {
-                  this.content.list.appendChild(this.option(d));
-              }
-          }
-      }
-      option(option) {
-          if (option.placeholder) {
-              const placeholder = document.createElement('div');
-              placeholder.classList.add(this.classes.option);
-              placeholder.classList.add(this.classes.hide);
-              return placeholder;
-          }
-          const optionEl = document.createElement('div');
-          optionEl.dataset.id = option.id;
-          optionEl.id = option.id;
-          optionEl.classList.add(this.classes.option);
-          optionEl.setAttribute('role', 'option');
-          if (option.class) {
-              option.class.split(' ').forEach((dataClass) => {
-                  optionEl.classList.add(dataClass);
-              });
-          }
-          if (option.style) {
-              optionEl.style.cssText = option.style;
-          }
-          if (this.settings.searchHighlight && this.content.search.input.value.trim() !== '') {
-              optionEl.innerHTML = this.highlightText(option.html !== '' ? option.html : option.text, this.content.search.input.value, this.classes.searchHighlighter);
-          }
-          else if (option.html !== '') {
-              optionEl.innerHTML = option.html;
-          }
-          else {
-              optionEl.textContent = option.text;
-          }
-          if (this.settings.showOptionTooltips && optionEl.textContent) {
-              optionEl.setAttribute('title', optionEl.textContent);
-          }
-          if (!option.display) {
-              optionEl.classList.add(this.classes.hide);
-          }
-          if (option.disabled) {
-              optionEl.classList.add(this.classes.disabled);
-          }
-          if (option.selected && this.settings.hideSelected) {
-              optionEl.classList.add(this.classes.hide);
-          }
-          if (option.selected) {
-              optionEl.classList.add(this.classes.selected);
-              optionEl.setAttribute('aria-selected', 'true');
-              this.main.main.setAttribute('aria-activedescendant', optionEl.id);
-          }
-          else {
-              optionEl.classList.remove(this.classes.selected);
-              optionEl.setAttribute('aria-selected', 'false');
-          }
-          optionEl.addEventListener('click', (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              const selectedOptions = this.store.getSelected();
-              const element = e.currentTarget;
-              const elementID = String(element.dataset.id);
-              if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
-                  return;
-              }
-              if ((this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
-                  (this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)) {
-                  return;
-              }
-              let shouldUpdate = false;
-              const before = this.store.getSelectedOptions();
-              let after = [];
-              if (this.settings.isMultiple) {
-                  if (option.selected) {
-                      after = before.filter((o) => o.id !== elementID);
-                  }
-                  else {
-                      after = before.concat(option);
-                  }
-              }
-              if (!this.settings.isMultiple) {
-                  if (option.selected) {
-                      after = [];
-                  }
-                  else {
-                      after = [option];
-                  }
-              }
-              if (!this.callbacks.beforeChange) {
-                  shouldUpdate = true;
-              }
-              if (this.callbacks.beforeChange) {
-                  if (this.callbacks.beforeChange(after, before) === false) {
-                      shouldUpdate = false;
-                  }
-                  else {
-                      shouldUpdate = true;
-                  }
-              }
-              if (shouldUpdate) {
-                  if (!this.store.getOptionByID(elementID)) {
-                      this.callbacks.addOption(option);
-                  }
-                  this.callbacks.setSelected(after.map((o) => o.value), false);
-                  if (this.settings.closeOnSelect) {
-                      this.callbacks.close();
-                  }
-                  if (this.callbacks.afterChange) {
-                      this.callbacks.afterChange(after);
-                  }
-              }
-          });
-          return optionEl;
-      }
-      destroy() {
-          this.main.main.remove();
-          this.content.main.remove();
-      }
-      highlightText(str, search, className) {
-          let completedString = str;
-          const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i');
-          if (!str.match(regex)) {
-              return str;
-          }
-          const matchStartPosition = str.match(regex).index;
-          const matchEndPosition = matchStartPosition + str.match(regex)[0].toString().length;
-          const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition);
-          completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`);
-          return completedString;
-      }
-      moveContentAbove() {
-          const mainHeight = this.main.main.offsetHeight;
-          const contentHeight = this.content.main.offsetHeight;
-          this.main.main.classList.remove(this.classes.openBelow);
-          this.main.main.classList.add(this.classes.openAbove);
-          this.content.main.classList.remove(this.classes.openBelow);
-          this.content.main.classList.add(this.classes.openAbove);
-          const containerRect = this.main.main.getBoundingClientRect();
-          this.content.main.style.margin = '-' + (mainHeight + contentHeight - 1) + 'px 0px 0px 0px';
-          this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
-          this.content.main.style.left = containerRect.left + window.scrollX + 'px';
-          this.content.main.style.width = containerRect.width + 'px';
-      }
-      moveContentBelow() {
-          this.main.main.classList.remove(this.classes.openAbove);
-          this.main.main.classList.add(this.classes.openBelow);
-          this.content.main.classList.remove(this.classes.openAbove);
-          this.content.main.classList.add(this.classes.openBelow);
-          const containerRect = this.main.main.getBoundingClientRect();
-          this.content.main.style.margin = '-1px 0px 0px 0px';
-          if (this.settings.contentPosition !== 'relative') {
-              this.content.main.style.top = containerRect.top + containerRect.height + window.scrollY + 'px';
-              this.content.main.style.left = containerRect.left + window.scrollX + 'px';
-              this.content.main.style.width = containerRect.width + 'px';
-          }
-      }
-      ensureElementInView(container, element) {
-          const cTop = container.scrollTop + container.offsetTop;
-          const cBottom = cTop + container.clientHeight;
-          const eTop = element.offsetTop;
-          const eBottom = eTop + element.clientHeight;
-          if (eTop < cTop) {
-              container.scrollTop -= cTop - eTop;
-          }
-          else if (eBottom > cBottom) {
-              container.scrollTop += eBottom - cBottom;
-          }
-      }
-      putContent() {
-          const mainHeight = this.main.main.offsetHeight;
-          const mainRect = this.main.main.getBoundingClientRect();
-          const contentHeight = this.content.main.offsetHeight;
-          const spaceBelow = window.innerHeight - (mainRect.top + mainHeight);
-          if (spaceBelow <= contentHeight) {
-              if (mainRect.top > contentHeight) {
-                  return 'up';
-              }
-              else {
-                  return 'down';
-              }
-          }
-          return 'down';
-      }
-      updateDeselectAll() {
-          if (!this.store || !this.settings) {
-              return;
-          }
-          const selected = this.store.getSelectedOptions();
-          const hasSelectedItems = selected && selected.length > 0;
-          const isMultiple = this.settings.isMultiple;
-          const allowDeselect = this.settings.allowDeselect;
-          const deselectButton = this.main.deselect.main;
-          const hideClass = this.classes.hide;
-          if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
-              deselectButton.classList.remove(hideClass);
-          }
-          else {
-              deselectButton.classList.add(hideClass);
-          }
-      }
+  class Select {
+      constructor(select) {
+          this.listen = false;
+          this.observer = null;
+          this.select = select;
+          this.valueChange = this.valueChange.bind(this);
+          this.select.addEventListener('change', this.valueChange, {
+              passive: true,
+          });
+          this.observer = new MutationObserver(this.observeCall.bind(this));
+          this.changeListen(true);
+      }
+      enable() {
+          this.select.disabled = false;
+      }
+      disable() {
+          this.select.disabled = true;
+      }
+      hideUI() {
+          this.select.tabIndex = -1;
+          this.select.style.display = 'none';
+          this.select.setAttribute('aria-hidden', 'true');
+      }
+      showUI() {
+          this.select.removeAttribute('tabindex');
+          this.select.style.display = '';
+          this.select.removeAttribute('aria-hidden');
+      }
+      changeListen(listen) {
+          this.listen = listen;
+          if (listen) {
+              if (this.observer) {
+                  this.observer.observe(this.select, {
+                      subtree: true,
+                      childList: true,
+                      attributes: true,
+                  });
+              }
+          }
+          if (!listen) {
+              if (this.observer) {
+                  this.observer.disconnect();
+              }
+          }
+      }
+      valueChange(ev) {
+          if (this.listen && this.onValueChange) {
+              this.onValueChange(this.getSelectedValues());
+          }
+          return true;
+      }
+      observeCall(mutations) {
+          if (!this.listen) {
+              return;
+          }
+          let classChanged = false;
+          let disabledChanged = false;
+          let optgroupOptionChanged = false;
+          for (const m of mutations) {
+              if (m.target === this.select) {
+                  if (m.attributeName === 'disabled') {
+                      disabledChanged = true;
+                  }
+                  if (m.attributeName === 'class') {
+                      classChanged = true;
+                  }
+              }
+              if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
+                  optgroupOptionChanged = true;
+              }
+          }
+          if (classChanged && this.onClassChange) {
+              this.onClassChange(this.select.className.split(' '));
+          }
+          if (disabledChanged && this.onDisabledChange) {
+              this.changeListen(false);
+              this.onDisabledChange(this.select.disabled);
+              this.changeListen(true);
+          }
+          if (optgroupOptionChanged && this.onOptionsChange) {
+              this.changeListen(false);
+              this.onOptionsChange(this.getData());
+              this.changeListen(true);
+          }
+      }
+      getData() {
+          let data = [];
+          const nodes = this.select.childNodes;
+          for (const n of nodes) {
+              if (n.nodeName === 'OPTGROUP') {
+                  data.push(this.getDataFromOptgroup(n));
+              }
+              if (n.nodeName === 'OPTION') {
+                  data.push(this.getDataFromOption(n));
+              }
+          }
+          return data;
+      }
+      getDataFromOptgroup(optgroup) {
+          let data = {
+              id: optgroup.id,
+              label: optgroup.label,
+              selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
+              selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
+              closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
+              options: [],
+          };
+          const options = optgroup.childNodes;
+          for (const o of options) {
+              if (o.nodeName === 'OPTION') {
+                  data.options.push(this.getDataFromOption(o));
+              }
+          }
+          return data;
+      }
+      getDataFromOption(option) {
+          return {
+              id: option.id,
+              value: option.value,
+              text: option.text,
+              html: option.dataset && option.dataset.html ? option.dataset.html : '',
+              selected: option.selected,
+              display: option.style.display === 'none' ? false : true,
+              disabled: option.disabled,
+              mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
+              placeholder: option.dataset.placeholder === 'true',
+              class: option.className,
+              style: option.style.cssText,
+              data: option.dataset,
+          };
+      }
+      getSelectedValues() {
+          let values = [];
+          const options = this.select.childNodes;
+          for (const o of options) {
+              if (o.nodeName === 'OPTGROUP') {
+                  const optgroupOptions = o.childNodes;
+                  for (const oo of optgroupOptions) {
+                      if (oo.nodeName === 'OPTION') {
+                          const option = oo;
+                          if (option.selected) {
+                              values.push(option.value);
+                          }
+                      }
+                  }
+              }
+              if (o.nodeName === 'OPTION') {
+                  const option = o;
+                  if (option.selected) {
+                      values.push(option.value);
+                  }
+              }
+          }
+          return values;
+      }
+      setSelected(value) {
+          this.changeListen(false);
+          const options = this.select.childNodes;
+          for (const o of options) {
+              if (o.nodeName === 'OPTGROUP') {
+                  const optgroup = o;
+                  const optgroupOptions = optgroup.childNodes;
+                  for (const oo of optgroupOptions) {
+                      if (oo.nodeName === 'OPTION') {
+                          const option = oo;
+                          option.selected = value.includes(option.value);
+                      }
+                  }
+              }
+              if (o.nodeName === 'OPTION') {
+                  const option = o;
+                  option.selected = value.includes(option.value);
+              }
+          }
+          this.changeListen(true);
+      }
+      updateSelect(id, style, classes) {
+          this.changeListen(false);
+          if (id) {
+              this.select.dataset.id = id;
+          }
+          if (style) {
+              this.select.style.cssText = style;
+          }
+          if (classes) {
+              this.select.className = '';
+              classes.forEach((c) => {
+                  if (c.trim() !== '') {
+                      this.select.classList.add(c.trim());
+                  }
+              });
+          }
+          this.changeListen(true);
+      }
+      updateOptions(data) {
+          this.changeListen(false);
+          this.select.innerHTML = '';
+          for (const d of data) {
+              if (d instanceof Optgroup) {
+                  this.select.appendChild(this.createOptgroup(d));
+              }
+              if (d instanceof Option) {
+                  this.select.appendChild(this.createOption(d));
+              }
+          }
+          this.select.dispatchEvent(new Event('change'));
+          this.changeListen(true);
+      }
+      createOptgroup(optgroup) {
+          const optgroupEl = document.createElement('optgroup');
+          optgroupEl.id = optgroup.id;
+          optgroupEl.label = optgroup.label;
+          if (optgroup.selectAll) {
+              optgroupEl.dataset.selectAll = 'true';
+          }
+          if (optgroup.closable !== 'off') {
+              optgroupEl.dataset.closable = optgroup.closable;
+          }
+          if (optgroup.options) {
+              for (const o of optgroup.options) {
+                  optgroupEl.appendChild(this.createOption(o));
+              }
+          }
+          return optgroupEl;
+      }
+      createOption(info) {
+          const optionEl = document.createElement('option');
+          optionEl.id = info.id;
+          optionEl.value = info.value;
+          optionEl.innerHTML = info.text;
+          if (info.html !== '') {
+              optionEl.setAttribute('data-html', info.html);
+          }
+          if (info.selected) {
+              optionEl.selected = info.selected;
+          }
+          if (info.disabled) {
+              optionEl.disabled = true;
+          }
+          if (info.display === false) {
+              optionEl.style.display = 'none';
+          }
+          if (info.placeholder) {
+              optionEl.setAttribute('data-placeholder', 'true');
+          }
+          if (info.mandatory) {
+              optionEl.setAttribute('data-mandatory', 'true');
+          }
+          if (info.class) {
+              info.class.split(' ').forEach((optionClass) => {
+                  optionEl.classList.add(optionClass);
+              });
+          }
+          if (info.data && typeof info.data === 'object') {
+              Object.keys(info.data).forEach((key) => {
+                  optionEl.setAttribute('data-' + kebabCase(key), info.data[key]);
+              });
+          }
+          return optionEl;
+      }
+      destroy() {
+          this.changeListen(false);
+          this.select.removeEventListener('change', this.valueChange);
+          if (this.observer) {
+              this.observer.disconnect();
+              this.observer = null;
+          }
+          delete this.select.dataset.id;
+          this.showUI();
+      }
   }
 
-  class Select {
-      constructor(select) {
-          this.listen = false;
-          this.observer = null;
-          this.select = select;
-          this.valueChange = this.valueChange.bind(this);
-          this.select.addEventListener('change', this.valueChange, {
-              passive: true,
-          });
-          this.observer = new MutationObserver(this.observeCall.bind(this));
-          this.changeListen(true);
-      }
-      enable() {
-          this.select.disabled = false;
-      }
-      disable() {
-          this.select.disabled = true;
-      }
-      hideUI() {
-          this.select.tabIndex = -1;
-          this.select.style.display = 'none';
-          this.select.setAttribute('aria-hidden', 'true');
-      }
-      showUI() {
-          this.select.removeAttribute('tabindex');
-          this.select.style.display = '';
-          this.select.removeAttribute('aria-hidden');
-      }
-      changeListen(listen) {
-          this.listen = listen;
-          if (listen) {
-              if (this.observer) {
-                  this.observer.observe(this.select, {
-                      subtree: true,
-                      childList: true,
-                      attributes: true,
-                  });
-              }
-          }
-          if (!listen) {
-              if (this.observer) {
-                  this.observer.disconnect();
-              }
-          }
-      }
-      valueChange(ev) {
-          if (this.listen && this.onValueChange) {
-              this.onValueChange(this.getSelectedValues());
-          }
-          return true;
-      }
-      observeCall(mutations) {
-          if (!this.listen) {
-              return;
-          }
-          let classChanged = false;
-          let disabledChanged = false;
-          let optgroupOptionChanged = false;
-          for (const m of mutations) {
-              if (m.target === this.select) {
-                  if (m.attributeName === 'disabled') {
-                      disabledChanged = true;
-                  }
-                  if (m.attributeName === 'class') {
-                      classChanged = true;
-                  }
-              }
-              if (m.target.nodeName === 'OPTGROUP' || m.target.nodeName === 'OPTION') {
-                  optgroupOptionChanged = true;
-              }
-          }
-          if (classChanged && this.onClassChange) {
-              this.onClassChange(this.select.className.split(' '));
-          }
-          if (disabledChanged && this.onDisabledChange) {
-              this.changeListen(false);
-              this.onDisabledChange(this.select.disabled);
-              this.changeListen(true);
-          }
-          if (optgroupOptionChanged && this.onOptionsChange) {
-              this.changeListen(false);
-              this.onOptionsChange(this.getData());
-              this.changeListen(true);
-          }
-      }
-      getData() {
-          let data = [];
-          const nodes = this.select.childNodes;
-          for (const n of nodes) {
-              if (n.nodeName === 'OPTGROUP') {
-                  data.push(this.getDataFromOptgroup(n));
-              }
-              if (n.nodeName === 'OPTION') {
-                  data.push(this.getDataFromOption(n));
-              }
-          }
-          return data;
-      }
-      getDataFromOptgroup(optgroup) {
-          let data = {
-              id: optgroup.id,
-              label: optgroup.label,
-              selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
-              selectAllText: optgroup.dataset ? optgroup.dataset.selectalltext : 'Select all',
-              closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
-              options: [],
-          };
-          const options = optgroup.childNodes;
-          for (const o of options) {
-              if (o.nodeName === 'OPTION') {
-                  data.options.push(this.getDataFromOption(o));
-              }
-          }
-          return data;
-      }
-      getDataFromOption(option) {
-          return {
-              id: option.id,
-              value: option.value,
-              text: option.text,
-              html: option.dataset && option.dataset.html ? option.dataset.html : '',
-              selected: option.selected,
-              display: option.style.display === 'none' ? false : true,
-              disabled: option.disabled,
-              mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
-              placeholder: option.dataset.placeholder === 'true',
-              class: option.className,
-              style: option.style.cssText,
-              data: option.dataset,
-          };
-      }
-      getSelectedValues() {
-          let values = [];
-          const options = this.select.childNodes;
-          for (const o of options) {
-              if (o.nodeName === 'OPTGROUP') {
-                  const optgroupOptions = o.childNodes;
-                  for (const oo of optgroupOptions) {
-                      if (oo.nodeName === 'OPTION') {
-                          const option = oo;
-                          if (option.selected) {
-                              values.push(option.value);
-                          }
-                      }
-                  }
-              }
-              if (o.nodeName === 'OPTION') {
-                  const option = o;
-                  if (option.selected) {
-                      values.push(option.value);
-                  }
-              }
-          }
-          return values;
-      }
-      setSelected(value) {
-          this.changeListen(false);
-          const options = this.select.childNodes;
-          for (const o of options) {
-              if (o.nodeName === 'OPTGROUP') {
-                  const optgroup = o;
-                  const optgroupOptions = optgroup.childNodes;
-                  for (const oo of optgroupOptions) {
-                      if (oo.nodeName === 'OPTION') {
-                          const option = oo;
-                          option.selected = value.includes(option.value);
-                      }
-                  }
-              }
-              if (o.nodeName === 'OPTION') {
-                  const option = o;
-                  option.selected = value.includes(option.value);
-              }
-          }
-          this.changeListen(true);
-      }
-      updateSelect(id, style, classes) {
-          this.changeListen(false);
-          if (id) {
-              this.select.dataset.id = id;
-          }
-          if (style) {
-              this.select.style.cssText = style;
-          }
-          if (classes) {
-              this.select.className = '';
-              classes.forEach((c) => {
-                  if (c.trim() !== '') {
-                      this.select.classList.add(c.trim());
-                  }
-              });
-          }
-          this.changeListen(true);
-      }
-      updateOptions(data) {
-          this.changeListen(false);
-          this.select.innerHTML = '';
-          for (const d of data) {
-              if (d instanceof Optgroup) {
-                  this.select.appendChild(this.createOptgroup(d));
-              }
-              if (d instanceof Option) {
-                  this.select.appendChild(this.createOption(d));
-              }
-          }
-          this.select.dispatchEvent(new Event('change'));
-          this.changeListen(true);
-      }
-      createOptgroup(optgroup) {
-          const optgroupEl = document.createElement('optgroup');
-          optgroupEl.id = optgroup.id;
-          optgroupEl.label = optgroup.label;
-          if (optgroup.selectAll) {
-              optgroupEl.dataset.selectAll = 'true';
-          }
-          if (optgroup.closable !== 'off') {
-              optgroupEl.dataset.closable = optgroup.closable;
-          }
-          if (optgroup.options) {
-              for (const o of optgroup.options) {
-                  optgroupEl.appendChild(this.createOption(o));
-              }
-          }
-          return optgroupEl;
-      }
-      createOption(info) {
-          const optionEl = document.createElement('option');
-          optionEl.id = info.id;
-          optionEl.value = info.value;
-          optionEl.innerHTML = info.text;
-          if (info.html !== '') {
-              optionEl.setAttribute('data-html', info.html);
-          }
-          if (info.selected) {
-              optionEl.selected = info.selected;
-          }
-          if (info.disabled) {
-              optionEl.disabled = true;
-          }
-          if (info.display === false) {
-              optionEl.style.display = 'none';
-          }
-          if (info.placeholder) {
-              optionEl.setAttribute('data-placeholder', 'true');
-          }
-          if (info.mandatory) {
-              optionEl.setAttribute('data-mandatory', 'true');
-          }
-          if (info.class) {
-              info.class.split(' ').forEach((optionClass) => {
-                  optionEl.classList.add(optionClass);
-              });
-          }
-          if (info.data && typeof info.data === 'object') {
-              Object.keys(info.data).forEach((key) => {
-                  optionEl.setAttribute('data-' + kebabCase(key), info.data[key]);
-              });
-          }
-          return optionEl;
-      }
-      destroy() {
-          this.changeListen(false);
-          this.select.removeEventListener('change', this.valueChange);
-          if (this.observer) {
-              this.observer.disconnect();
-              this.observer = null;
-          }
-          delete this.select.dataset.id;
-          this.showUI();
-      }
+  class Settings {
+      constructor(settings) {
+          this.id = '';
+          this.style = '';
+          this.class = [];
+          this.isMultiple = false;
+          this.isOpen = false;
+          this.isFullOpen = false;
+          this.intervalMove = null;
+          if (!settings) {
+              settings = {};
+          }
+          this.id = 'ss-' + generateID();
+          this.style = settings.style || '';
+          this.class = settings.class || [];
+          this.disabled = settings.disabled !== undefined ? settings.disabled : false;
+          this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
+          this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
+          this.ariaLabel = settings.ariaLabel || 'Combobox';
+          this.searchPlaceholder = settings.searchPlaceholder || 'Search';
+          this.searchText = settings.searchText || 'No Results';
+          this.searchingText = settings.searchingText || 'Searching...';
+          this.searchHighlight = settings.searchHighlight !== undefined ? settings.searchHighlight : false;
+          this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true;
+          this.contentLocation = settings.contentLocation || document.body;
+          this.contentPosition = settings.contentPosition || 'absolute';
+          this.openPosition = settings.openPosition || 'auto';
+          this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value';
+          this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
+          this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
+          this.keepOrder = settings.keepOrder !== undefined ? settings.keepOrder : false;
+          this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
+          this.minSelected = settings.minSelected || 0;
+          this.maxSelected = settings.maxSelected || 1000;
+          this.timeoutDelay = settings.timeoutDelay || 200;
+          this.maxValuesShown = settings.maxValuesShown || 20;
+          this.maxValuesMessage = settings.maxValuesMessage || '{number} selected';
+      }
   }
 
-  class SlimSelect {
-      constructor(config) {
-          var _a;
-          this.events = {
-              search: undefined,
-              searchFilter: (opt, search) => {
-                  return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
-              },
-              addable: undefined,
-              beforeChange: undefined,
-              afterChange: undefined,
-              beforeOpen: undefined,
-              afterOpen: undefined,
-              beforeClose: undefined,
-              afterClose: undefined,
-          };
-          this.windowResize = debounce(() => {
-              if (!this.settings.isOpen && !this.settings.isFullOpen) {
-                  return;
-              }
-              this.render.moveContent();
-          });
-          this.windowScroll = debounce(() => {
-              if (!this.settings.isOpen && !this.settings.isFullOpen) {
-                  return;
-              }
-              this.render.moveContent();
-          });
-          this.documentClick = (e) => {
-              if (!this.settings.isOpen) {
-                  return;
-              }
-              if (e.target && !hasClassInTree(e.target, this.settings.id)) {
-                  this.close(e.type);
-              }
-          };
-          this.windowVisibilityChange = () => {
-              if (document.hidden) {
-                  this.close();
-              }
-          };
-          this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
-          if (!this.selectEl) {
-              if (config.events && config.events.error) {
-                  config.events.error(new Error('Could not find select element'));
-              }
-              return;
-          }
-          if (this.selectEl.tagName !== 'SELECT') {
-              if (config.events && config.events.error) {
-                  config.events.error(new Error('Element isnt of type select'));
-              }
-              return;
-          }
-          if (this.selectEl.dataset.ssid) {
-              this.destroy();
-          }
-          this.settings = new Settings(config.settings);
-          const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
-          for (const key in config.events) {
-              if (!config.events.hasOwnProperty(key)) {
-                  continue;
-              }
-              if (debounceEvents.indexOf(key) !== -1) {
-                  this.events[key] = debounce(config.events[key], 100);
-              }
-              else {
-                  this.events[key] = config.events[key];
-              }
-          }
-          this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
-          this.settings.isMultiple = this.selectEl.multiple;
-          this.settings.style = this.selectEl.style.cssText;
-          this.settings.class = this.selectEl.className.split(' ');
-          this.select = new Select(this.selectEl);
-          this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
-          this.select.hideUI();
-          this.select.onValueChange = (values) => {
-              this.setSelected(values);
-          };
-          this.select.onClassChange = (classes) => {
-              this.settings.class = classes;
-              this.render.updateClassStyles();
-          };
-          this.select.onDisabledChange = (disabled) => {
-              if (disabled) {
-                  this.disable();
-              }
-              else {
-                  this.enable();
-              }
-          };
-          this.select.onOptionsChange = (data) => {
-              this.setData(data);
-          };
-          this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
-          if (config.data) {
-              this.select.updateOptions(this.store.getData());
-          }
-          const callbacks = {
-              open: this.open.bind(this),
-              close: this.close.bind(this),
-              addable: this.events.addable ? this.events.addable : undefined,
-              setSelected: this.setSelected.bind(this),
-              addOption: this.addOption.bind(this),
-              search: this.search.bind(this),
-              beforeChange: this.events.beforeChange,
-              afterChange: this.events.afterChange,
-          };
-          this.render = new Render(this.settings, this.store, callbacks);
-          this.render.renderValues();
-          this.render.renderOptions(this.store.getData());
-          const selectAriaLabel = this.selectEl.getAttribute('aria-label');
-          const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
-          if (selectAriaLabel) {
-              this.render.main.main.setAttribute('aria-label', selectAriaLabel);
-          }
-          else if (selectAriaLabelledBy) {
-              this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
-          }
-          if (this.selectEl.parentNode) {
-              this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
-          }
-          document.addEventListener('click', this.documentClick);
-          window.addEventListener('resize', this.windowResize, false);
-          if (this.settings.openPosition === 'auto') {
-              window.addEventListener('scroll', this.windowScroll, false);
-          }
-          document.addEventListener('visibilitychange', this.windowVisibilityChange);
-          if (this.settings.disabled) {
-              this.disable();
-          }
-          if (this.settings.alwaysOpen) {
-              this.open();
-          }
-          this.selectEl.slim = this;
-      }
-      enable() {
-          this.settings.disabled = false;
-          this.select.enable();
-          this.render.enable();
-      }
-      disable() {
-          this.settings.disabled = true;
-          this.select.disable();
-          this.render.disable();
-      }
-      getData() {
-          return this.store.getData();
-      }
-      setData(data) {
-          const selected = this.store.getSelected();
-          const err = this.store.validateDataArray(data);
-          if (err) {
-              if (this.events.error) {
-                  this.events.error(err);
-              }
-              return;
-          }
-          this.store.setData(data);
-          const dataClean = this.store.getData();
-          this.select.updateOptions(dataClean);
-          this.render.renderValues();
-          this.render.renderOptions(dataClean);
-          if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
-              this.events.afterChange(this.store.getSelectedOptions());
-          }
-      }
-      getSelected() {
-          return this.store.getSelected();
-      }
-      setSelected(value, runAfterChange = true) {
-          const selected = this.store.getSelected();
-          this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
-          const data = this.store.getData();
-          this.select.updateOptions(data);
-          this.render.renderValues();
-          if (this.render.content.search.input.value !== '') {
-              this.search(this.render.content.search.input.value);
-          }
-          else {
-              this.render.renderOptions(data);
-          }
-          if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
-              this.events.afterChange(this.store.getSelectedOptions());
-          }
-      }
-      addOption(option) {
-          const selected = this.store.getSelected();
-          if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
-              this.store.addOption(option);
-          }
-          const data = this.store.getData();
-          this.select.updateOptions(data);
-          this.render.renderValues();
-          this.render.renderOptions(data);
-          if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
-              this.events.afterChange(this.store.getSelectedOptions());
-          }
-      }
-      open() {
-          if (this.settings.disabled || this.settings.isOpen) {
-              return;
-          }
-          if (this.events.beforeOpen) {
-              this.events.beforeOpen();
-          }
-          this.render.open();
-          if (this.settings.showSearch) {
-              this.render.searchFocus();
-          }
-          this.settings.isOpen = true;
-          setTimeout(() => {
-              if (this.events.afterOpen) {
-                  this.events.afterOpen();
-              }
-              if (this.settings.isOpen) {
-                  this.settings.isFullOpen = true;
-              }
-          }, this.settings.timeoutDelay);
-          if (this.settings.contentPosition === 'absolute') {
-              if (this.settings.intervalMove) {
-                  clearInterval(this.settings.intervalMove);
-              }
-              this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
-          }
-      }
-      close(eventType = null) {
-          if (!this.settings.isOpen || this.settings.alwaysOpen) {
-              return;
-          }
-          if (this.events.beforeClose) {
-              this.events.beforeClose();
-          }
-          this.render.close();
-          if (this.render.content.search.input.value !== '') {
-              this.search('');
-          }
-          this.render.mainFocus(eventType);
-          this.settings.isOpen = false;
-          this.settings.isFullOpen = false;
-          setTimeout(() => {
-              if (this.events.afterClose) {
-                  this.events.afterClose();
-              }
-          }, this.settings.timeoutDelay);
-          if (this.settings.intervalMove) {
-              clearInterval(this.settings.intervalMove);
-          }
-      }
-      search(value) {
-          if (this.render.content.search.input.value !== value) {
-              this.render.content.search.input.value = value;
-          }
-          if (!this.events.search) {
-              this.render.renderOptions(value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter));
-              return;
-          }
-          this.render.renderSearching();
-          const searchResp = this.events.search(value, this.store.getSelectedOptions());
-          if (searchResp instanceof Promise) {
-              searchResp
-                  .then((data) => {
-                  this.render.renderOptions(this.store.partialToFullData(data));
-              })
-                  .catch((err) => {
-                  this.render.renderError(typeof err === 'string' ? err : err.message);
-              });
-              return;
-          }
-          else if (Array.isArray(searchResp)) {
-              this.render.renderOptions(this.store.partialToFullData(searchResp));
-          }
-          else {
-              this.render.renderError('Search event must return a promise or an array of data');
-          }
-      }
-      destroy() {
-          document.removeEventListener('click', this.documentClick);
-          window.removeEventListener('resize', this.windowResize, false);
-          if (this.settings.openPosition === 'auto') {
-              window.removeEventListener('scroll', this.windowScroll, false);
-          }
-          document.removeEventListener('visibilitychange', this.windowVisibilityChange);
-          this.store.setData([]);
-          this.render.destroy();
-          this.select.destroy();
-      }
+  class SlimSelect {
+      constructor(config) {
+          var _a;
+          this.events = {
+              search: undefined,
+              searchFilter: (opt, search) => {
+                  return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+              },
+              addable: undefined,
+              beforeChange: undefined,
+              afterChange: undefined,
+              beforeOpen: undefined,
+              afterOpen: undefined,
+              beforeClose: undefined,
+              afterClose: undefined,
+          };
+          this.windowResize = debounce(() => {
+              if (!this.settings.isOpen && !this.settings.isFullOpen) {
+                  return;
+              }
+              this.render.moveContent();
+          });
+          this.windowScroll = debounce(() => {
+              if (!this.settings.isOpen && !this.settings.isFullOpen) {
+                  return;
+              }
+              this.render.moveContent();
+          });
+          this.documentClick = (e) => {
+              if (!this.settings.isOpen) {
+                  return;
+              }
+              if (e.target && !hasClassInTree(e.target, this.settings.id)) {
+                  this.close(e.type);
+              }
+          };
+          this.windowVisibilityChange = () => {
+              if (document.hidden) {
+                  this.close();
+              }
+          };
+          this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
+          if (!this.selectEl) {
+              if (config.events && config.events.error) {
+                  config.events.error(new Error('Could not find select element'));
+              }
+              return;
+          }
+          if (this.selectEl.tagName !== 'SELECT') {
+              if (config.events && config.events.error) {
+                  config.events.error(new Error('Element isnt of type select'));
+              }
+              return;
+          }
+          if (this.selectEl.dataset.ssid) {
+              this.destroy();
+          }
+          this.settings = new Settings(config.settings);
+          const debounceEvents = ['afterChange', 'beforeOpen', 'afterOpen', 'beforeClose', 'afterClose'];
+          for (const key in config.events) {
+              if (!config.events.hasOwnProperty(key)) {
+                  continue;
+              }
+              if (debounceEvents.indexOf(key) !== -1) {
+                  this.events[key] = debounce(config.events[key], 100);
+              }
+              else {
+                  this.events[key] = config.events[key];
+              }
+          }
+          this.settings.disabled = ((_a = config.settings) === null || _a === void 0 ? void 0 : _a.disabled) ? config.settings.disabled : this.selectEl.disabled;
+          this.settings.isMultiple = this.selectEl.multiple;
+          this.settings.style = this.selectEl.style.cssText;
+          this.settings.class = this.selectEl.className.split(' ');
+          this.select = new Select(this.selectEl);
+          this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
+          this.select.hideUI();
+          this.select.onValueChange = (values) => {
+              this.setSelected(values);
+          };
+          this.select.onClassChange = (classes) => {
+              this.settings.class = classes;
+              this.render.updateClassStyles();
+          };
+          this.select.onDisabledChange = (disabled) => {
+              if (disabled) {
+                  this.disable();
+              }
+              else {
+                  this.enable();
+              }
+          };
+          this.select.onOptionsChange = (data) => {
+              this.setData(data);
+          };
+          this.store = new Store(this.settings.isMultiple ? 'multiple' : 'single', config.data ? config.data : this.select.getData());
+          if (config.data) {
+              this.select.updateOptions(this.store.getData());
+          }
+          const renderCallbacks = {
+              open: this.open.bind(this),
+              close: this.close.bind(this),
+              addable: this.events.addable ? this.events.addable : undefined,
+              setSelected: this.setSelected.bind(this),
+              addOption: this.addOption.bind(this),
+              search: this.search.bind(this),
+              beforeChange: this.events.beforeChange,
+              afterChange: this.events.afterChange,
+          };
+          this.render = new Render(this.settings, this.store, renderCallbacks);
+          this.render.renderValues();
+          this.render.renderOptions(this.store.getData());
+          const selectAriaLabel = this.selectEl.getAttribute('aria-label');
+          const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
+          if (selectAriaLabel) {
+              this.render.main.main.setAttribute('aria-label', selectAriaLabel);
+          }
+          else if (selectAriaLabelledBy) {
+              this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
+          }
+          if (this.selectEl.parentNode) {
+              this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
+          }
+          window.addEventListener('resize', this.windowResize, false);
+          if (this.settings.openPosition === 'auto') {
+              window.addEventListener('scroll', this.windowScroll, false);
+          }
+          document.addEventListener('visibilitychange', this.windowVisibilityChange);
+          if (this.settings.disabled) {
+              this.disable();
+          }
+          if (this.settings.alwaysOpen) {
+              this.open();
+          }
+          this.selectEl.slim = this;
+      }
+      enable() {
+          this.settings.disabled = false;
+          this.select.enable();
+          this.render.enable();
+      }
+      disable() {
+          this.settings.disabled = true;
+          this.select.disable();
+          this.render.disable();
+      }
+      getData() {
+          return this.store.getData();
+      }
+      setData(data) {
+          const selected = this.store.getSelected();
+          const err = this.store.validateDataArray(data);
+          if (err) {
+              if (this.events.error) {
+                  this.events.error(err);
+              }
+              return;
+          }
+          this.store.setData(data);
+          const dataClean = this.store.getData();
+          this.select.updateOptions(dataClean);
+          this.render.renderValues();
+          this.render.renderOptions(dataClean);
+          if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+              this.events.afterChange(this.store.getSelectedOptions());
+          }
+      }
+      getSelected() {
+          return this.store.getSelected();
+      }
+      setSelected(value, runAfterChange = true) {
+          const selected = this.store.getSelected();
+          this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
+          const data = this.store.getData();
+          this.select.updateOptions(data);
+          this.render.renderValues();
+          if (this.render.content.search.input.value !== '') {
+              this.search(this.render.content.search.input.value);
+          }
+          else {
+              this.render.renderOptions(data);
+          }
+          if (runAfterChange && this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+              this.events.afterChange(this.store.getSelectedOptions());
+          }
+      }
+      addOption(option) {
+          const selected = this.store.getSelected();
+          if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
+              this.store.addOption(option);
+          }
+          const data = this.store.getData();
+          this.select.updateOptions(data);
+          this.render.renderValues();
+          this.render.renderOptions(data);
+          if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+              this.events.afterChange(this.store.getSelectedOptions());
+          }
+      }
+      open() {
+          if (this.settings.disabled || this.settings.isOpen) {
+              return;
+          }
+          if (this.events.beforeOpen) {
+              this.events.beforeOpen();
+          }
+          this.render.open();
+          if (this.settings.showSearch) {
+              this.render.searchFocus();
+          }
+          this.settings.isOpen = true;
+          setTimeout(() => {
+              if (this.events.afterOpen) {
+                  this.events.afterOpen();
+              }
+              if (this.settings.isOpen) {
+                  this.settings.isFullOpen = true;
+              }
+              document.addEventListener('click', this.documentClick);
+          }, this.settings.timeoutDelay);
+          if (this.settings.contentPosition === 'absolute') {
+              if (this.settings.intervalMove) {
+                  clearInterval(this.settings.intervalMove);
+              }
+              this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
+          }
+      }
+      close(eventType = null) {
+          if (!this.settings.isOpen || this.settings.alwaysOpen) {
+              return;
+          }
+          if (this.events.beforeClose) {
+              this.events.beforeClose();
+          }
+          this.render.close();
+          if (this.render.content.search.input.value !== '') {
+              this.search('');
+          }
+          this.render.mainFocus(eventType);
+          this.settings.isOpen = false;
+          this.settings.isFullOpen = false;
+          setTimeout(() => {
+              if (this.events.afterClose) {
+                  this.events.afterClose();
+              }
+              document.removeEventListener('click', this.documentClick);
+          }, this.settings.timeoutDelay);
+          if (this.settings.intervalMove) {
+              clearInterval(this.settings.intervalMove);
+          }
+      }
+      search(value) {
+          if (this.render.content.search.input.value !== value) {
+              this.render.content.search.input.value = value;
+          }
+          if (!this.events.search) {
+              this.render.renderOptions(value === '' ? this.store.getData() : this.store.search(value, this.events.searchFilter));
+              return;
+          }
+          this.render.renderSearching();
+          const searchResp = this.events.search(value, this.store.getSelectedOptions());
+          if (searchResp instanceof Promise) {
+              searchResp
+                  .then((data) => {
+                  this.render.renderOptions(this.store.partialToFullData(data));
+              })
+                  .catch((err) => {
+                  this.render.renderError(typeof err === 'string' ? err : err.message);
+              });
+              return;
+          }
+          else if (Array.isArray(searchResp)) {
+              this.render.renderOptions(this.store.partialToFullData(searchResp));
+          }
+          else {
+              this.render.renderError('Search event must return a promise or an array of data');
+          }
+      }
+      destroy() {
+          document.removeEventListener('click', this.documentClick);
+          window.removeEventListener('resize', this.windowResize, false);
+          if (this.settings.openPosition === 'auto') {
+              window.removeEventListener('scroll', this.windowScroll, false);
+          }
+          document.removeEventListener('visibilitychange', this.windowVisibilityChange);
+          this.store.setData([]);
+          this.render.destroy();
+          this.select.destroy();
+      }
   }
 
-  var script = vue.defineComponent({
-      name: 'SlimSelect',
-      props: {
-          modelValue: {
-              type: [String, Array, undefined],
-          },
-          multiple: {
-              type: Boolean,
-              default: false,
-          },
-          data: {
-              type: Array,
-          },
-          settings: {
-              type: Object,
-          },
-          events: {
-              type: Object,
-          },
-      },
-      emits: ['update:modelValue'],
-      data() {
-          return {
-              slim: null,
-          };
-      },
-      mounted() {
-          let config = {
-              select: this.$refs.slim,
-          };
-          if (this.data) {
-              config.data = this.data;
-          }
-          if (this.settings) {
-              config.settings = this.settings;
-          }
-          config.events = this.events || {};
-          const ogAfterChange = config.events.afterChange;
-          config.events.afterChange = (newVal) => {
-              const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : '';
-              if (this.value !== value) {
-                  this.value = value;
-              }
-              if (config.events && ogAfterChange) {
-                  ogAfterChange(newVal);
-              }
-          };
-          this.slim = new SlimSelect(config);
-          let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0];
-          if (this.value !== selected) {
-              this.slim.setSelected(this.value);
-          }
-      },
-      beforeUnmount() {
-          if (this.slim) {
-              this.slim.destroy();
-          }
-      },
-      watch: {
-          modelValue: {
-              handler: function (newVal) {
-                  var _a;
-                  (_a = this.slim) === null || _a === void 0 ? void 0 : _a.setSelected(this.getCleanValue(newVal));
-              },
-              immediate: true,
-          },
-          data: {
-              handler: function (newData) {
-                  if (this.slim) {
-                      this.slim.setData(newData);
-                  }
-              },
-              deep: true,
-          },
-      },
-      computed: {
-          value: {
-              get() {
-                  return this.getCleanValue(this.$props.modelValue);
-              },
-              set(value) {
-                  this.$emit('update:modelValue', value);
-              },
-          },
-      },
-      methods: {
-          getSlimSelect() {
-              return this.slim;
-          },
-          getCleanValue(val) {
-              const multi = this.$props.multiple;
-              if (typeof val === 'string') {
-                  return multi ? [val] : val;
-              }
-              if (Array.isArray(val)) {
-                  return multi ? val : val[0];
-              }
-              return multi ? [] : '';
-          },
-      },
+  var script = vue.defineComponent({
+      name: 'SlimSelect',
+      props: {
+          modelValue: {
+              type: [String, Array, undefined],
+          },
+          multiple: {
+              type: Boolean,
+              default: false,
+          },
+          data: {
+              type: Array,
+          },
+          settings: {
+              type: Object,
+          },
+          events: {
+              type: Object,
+          },
+      },
+      emits: ['update:modelValue'],
+      data() {
+          return {
+              slim: null,
+          };
+      },
+      mounted() {
+          let config = {
+              select: this.$refs.slim,
+          };
+          if (this.data) {
+              config.data = this.data;
+          }
+          if (this.settings) {
+              config.settings = this.settings;
+          }
+          config.events = this.events || {};
+          const ogAfterChange = config.events.afterChange;
+          config.events.afterChange = (newVal) => {
+              const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : '';
+              if (this.value !== value) {
+                  this.value = value;
+              }
+              if (config.events && ogAfterChange) {
+                  ogAfterChange(newVal);
+              }
+          };
+          this.slim = new SlimSelect(config);
+          let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0];
+          if (this.value !== selected) {
+              this.slim.setSelected(this.value);
+          }
+      },
+      beforeUnmount() {
+          if (this.slim) {
+              this.slim.destroy();
+          }
+      },
+      watch: {
+          modelValue: {
+              handler: function (newVal) {
+                  var _a;
+                  (_a = this.slim) === null || _a === void 0 ? void 0 : _a.setSelected(this.getCleanValue(newVal));
+              },
+              immediate: true,
+          },
+          data: {
+              handler: function (newData) {
+                  if (this.slim) {
+                      this.slim.setData(newData);
+                  }
+              },
+              deep: true,
+          },
+      },
+      computed: {
+          value: {
+              get() {
+                  return this.getCleanValue(this.$props.modelValue);
+              },
+              set(value) {
+                  this.$emit('update:modelValue', value);
+              },
+          },
+      },
+      methods: {
+          getSlimSelect() {
+              return this.slim;
+          },
+          getCleanValue(val) {
+              const multi = this.$props.multiple;
+              if (typeof val === 'string') {
+                  return multi ? [val] : val;
+              }
+              if (Array.isArray(val)) {
+                  return multi ? val : val[0];
+              }
+              return multi ? [] : '';
+          },
+      },
   });
 
   const _hoisted_1 = ["multiple"];