slim-select 2.13.1 → 3.0.1

package/dist/slimselect.es.js

@@ -1,2028 +1,1241 @@
-class CssClasses {
-    constructor(classes) {
-        if (!classes) {
-            classes = {};
-        }
-        this.main = classes.main || 'ss-main';
-        this.placeholder = classes.placeholder || 'ss-placeholder';
-        this.values = classes.values || 'ss-values';
-        this.single = classes.single || 'ss-single';
-        this.max = classes.max || 'ss-max';
-        this.value = classes.value || 'ss-value';
-        this.valueText = classes.valueText || 'ss-value-text';
-        this.valueDelete = classes.valueDelete || 'ss-value-delete';
-        this.valueOut = classes.valueOut || 'ss-value-out';
-        this.deselect = classes.deselect || 'ss-deselect';
-        this.deselectPath = classes.deselectPath || 'M10,10 L90,90 M10,90 L90,10';
-        this.arrow = classes.arrow || 'ss-arrow';
-        this.arrowClose = classes.arrowClose || 'M10,30 L50,70 L90,30';
-        this.arrowOpen = classes.arrowOpen || 'M10,70 L50,30 L90,70';
-        this.content = classes.content || 'ss-content';
-        this.openAbove = classes.openAbove || 'ss-open-above';
-        this.openBelow = classes.openBelow || 'ss-open-below';
-        this.search = classes.search || 'ss-search';
-        this.searchHighlighter = classes.searchHighlighter || 'ss-search-highlight';
-        this.searching = classes.searching || 'ss-searching';
-        this.addable = classes.addable || 'ss-addable';
-        this.addablePath = classes.addablePath || 'M50,10 L50,90 M10,50 L90,50';
-        this.list = classes.list || 'ss-list';
-        this.optgroup = classes.optgroup || 'ss-optgroup';
-        this.optgroupLabel = classes.optgroupLabel || 'ss-optgroup-label';
-        this.optgroupLabelText = classes.optgroupLabelText || 'ss-optgroup-label-text';
-        this.optgroupActions = classes.optgroupActions || 'ss-optgroup-actions';
-        this.optgroupSelectAll = classes.optgroupSelectAll || 'ss-selectall';
-        this.optgroupSelectAllBox = classes.optgroupSelectAllBox || 'M60,10 L10,10 L10,90 L90,90 L90,50';
-        this.optgroupSelectAllCheck = classes.optgroupSelectAllCheck || 'M30,45 L50,70 L90,10';
-        this.optgroupClosable = classes.optgroupClosable || 'ss-closable';
-        this.option = classes.option || 'ss-option';
-        this.optionDelete = classes.optionDelete || 'M10,10 L90,90 M10,90 L90,10';
-        this.highlighted = classes.highlighted || 'ss-highlighted';
-        this.open = classes.open || 'ss-open';
-        this.close = classes.close || 'ss-close';
-        this.selected = classes.selected || 'ss-selected';
-        this.error = classes.error || 'ss-error';
-        this.disabled = classes.disabled || 'ss-disabled';
-        this.hide = classes.hide || 'ss-hide';
-    }
+class E {
+  main;
+  // Placeholder
+  placeholder;
+  // Values
+  values;
+  single;
+  max;
+  value;
+  valueText;
+  valueDelete;
+  valueOut;
+  // Deselect
+  deselect;
+  deselectPath;
+  // Not a class but whatever
+  // Arrow
+  arrow;
+  arrowClose;
+  // Not a class but whatever
+  arrowOpen;
+  // Not a class but whatever
+  // Content
+  content;
+  contentOpen;
+  dirAbove;
+  dirBelow;
+  // Search
+  search;
+  searchHighlighter;
+  searching;
+  addable;
+  addablePath;
+  // Not a class but whatever
+  // List optgroups/options
+  list;
+  // Optgroup
+  optgroup;
+  optgroupLabel;
+  optgroupLabelText;
+  optgroupActions;
+  optgroupSelectAll;
+  // optgroup select all
+  optgroupSelectAllBox;
+  // Not a class but whatever
+  optgroupSelectAllCheck;
+  // Not a class but whatever
+  optgroupClosable;
+  // Option
+  option;
+  optionDelete;
+  // Not a class but whatever
+  highlighted;
+  // Misc
+  mainOpen;
+  close;
+  selected;
+  error;
+  disabled;
+  hide;
+  constructor(e) {
+    e || (e = {}), this.main = e.main || "ss-main", this.placeholder = e.placeholder || "ss-placeholder", this.values = e.values || "ss-values", this.single = e.single || "ss-single", this.max = e.max || "ss-max", this.value = e.value || "ss-value", this.valueText = e.valueText || "ss-value-text", this.valueDelete = e.valueDelete || "ss-value-delete", this.valueOut = e.valueOut || "ss-value-out", this.deselect = e.deselect || "ss-deselect", this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = e.arrow || "ss-arrow", this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = e.content || "ss-content", this.contentOpen = e.contentOpen || "ss-open", this.dirAbove = e.dirAbove || "ss-dir-above", this.dirBelow = e.dirBelow || "ss-dir-below", this.search = e.search || "ss-search", this.searchHighlighter = e.searchHighlighter || "ss-search-highlight", this.searching = e.searching || "ss-searching", this.addable = e.addable || "ss-addable", this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = e.list || "ss-list", this.optgroup = e.optgroup || "ss-optgroup", this.optgroupLabel = e.optgroupLabel || "ss-optgroup-label", this.optgroupLabelText = e.optgroupLabelText || "ss-optgroup-label-text", this.optgroupActions = e.optgroupActions || "ss-optgroup-actions", this.optgroupSelectAll = e.optgroupSelectAll || "ss-selectall", this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = e.optgroupClosable || "ss-closable", this.option = e.option || "ss-option", this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = e.highlighted || "ss-highlighted", this.mainOpen = e.mainOpen || "ss-open", this.close = e.close || "ss-close", this.selected = e.selected || "ss-selected", this.error = e.error || "ss-error", this.disabled = e.disabled || "ss-disabled", this.hide = e.hide || "ss-hide";
+  }
 }
-
-function generateID() {
-    return Math.random().toString(36).substring(2, 10);
+function L() {
+  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 T(p, e) {
+  function t(i, l) {
+    return l && i && i.classList && i.classList.contains(l) || l && i && i.dataset && i.dataset.id && i.dataset.id === e ? i : null;
+  }
+  function s(i, l) {
+    return !i || i === document ? null : t(i, l) ? i : s(i.parentNode, l);
+  }
+  return t(p, e) || s(p, e);
 }
-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 C(p, e = 50, t = !1) {
+  let s;
+  return function(...i) {
+    const l = self, a = () => {
+      s = null, t || p.apply(l, i);
+    }, n = t && !s;
+    clearTimeout(s), s = setTimeout(a, e), n && p.apply(l, i);
+  };
 }
-function isEqual(a, b) {
-    return JSON.stringify(a) === JSON.stringify(b);
+function S(p, e) {
+  return JSON.stringify(p) === JSON.stringify(e);
 }
-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 D(p) {
+  const e = p.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (t) => "-" + t.toLowerCase());
+  return p[0] === p[0].toUpperCase() ? e.substring(1) : e;
 }
-
-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 u {
+  id;
+  value;
+  text;
+  html;
+  defaultSelected;
+  selected;
+  display;
+  disabled;
+  placeholder;
+  class;
+  style;
+  data;
+  mandatory;
+  constructor(e) {
+    this.id = !e.id || e.id === "" ? L() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected !== void 0 ? e.defaultSelected : !1, this.selected = e.selected !== void 0 ? e.selected : !1, this.display = e.display !== void 0 ? e.display : !0, this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.mandatory = e.mandatory !== void 0 ? e.mandatory : !1, this.placeholder = e.placeholder !== void 0 ? e.placeholder : !1, this.class = e.class || "", this.style = e.style || "", this.data = e.data || {};
+  }
 }
-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.defaultSelected = option.defaultSelected !== undefined ? option.defaultSelected : false;
-        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 g {
+  id;
+  label;
+  selectAll;
+  selectAllText;
+  closable;
+  options;
+  constructor(e) {
+    if (this.id = !e.id || e.id === "" ? L() : e.id, this.label = e.label || "", this.selectAll = e.selectAll === void 0 ? !1 : e.selectAll, this.selectAllText = e.selectAllText || "Select All", this.closable = e.closable || "off", this.options = [], e.options)
+      for (const t of e.options)
+        this.options.push(new u(t));
+  }
 }
-class Store {
-    constructor(type, data) {
-        this.selectType = 'single';
-        this.data = [];
-        this.selectedOrder = [];
-        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) {
-                        const validationError = this.validateOption(option);
-                        if (validationError) {
-                            return validationError;
-                        }
-                    }
-                }
-            }
-            else if (dataObj instanceof Option || 'text' in dataObj) {
-                const validationError = this.validateOption(dataObj);
-                if (validationError) {
-                    return validationError;
-                }
-            }
-            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('id', this.getSelected());
-        }
-    }
-    getData() {
-        return this.filter(null, true);
-    }
-    getDataOptions() {
-        return this.filter(null, false);
-    }
-    addOption(option, addToStart = false) {
-        if (addToStart) {
-            let data = [new Option(option)];
-            this.setData(data.concat(this.getData()));
-        }
-        else {
-            this.setData(this.getData().concat(new Option(option)));
-        }
-    }
-    setSelectedBy(selectedType, selectedValues) {
-        let firstOption = null;
-        let hasSelected = false;
-        const selectedObjects = [];
-        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) {
-                        selectedObjects.push(option);
-                        if (this.selectType === 'single') {
-                            hasSelected = true;
-                        }
-                    }
-                }
-            }
-            if (dataObj instanceof Option) {
-                if (!firstOption) {
-                    firstOption = dataObj;
-                }
-                dataObj.selected = hasSelected ? false : selectedValues.includes(dataObj[selectedType]);
-                if (dataObj.selected) {
-                    selectedObjects.push(dataObj);
-                    if (this.selectType === 'single') {
-                        hasSelected = true;
-                    }
-                }
-            }
-        }
-        if (this.selectType === 'single' && firstOption && !hasSelected) {
-            firstOption.selected = true;
-            selectedObjects.push(firstOption);
-        }
-        const selectedIds = selectedValues.map((value) => {
-            var _a;
-            return ((_a = selectedObjects.find((option) => option[selectedType] === value)) === null || _a === void 0 ? void 0 : _a.id) || '';
-        });
-        this.selectedOrder = selectedIds;
-    }
-    getSelected() {
-        return this.getSelectedOptions().map((option) => option.id);
-    }
-    getSelectedValues() {
-        return this.getSelectedOptions().map((option) => option.value);
-    }
-    getSelectedOptions() {
-        return this.filter((opt) => {
-            return opt.selected;
-        }, false);
-    }
-    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) {
+class k {
+  selectType = "single";
+  // Main data set, never null
+  data = [];
+  selectedOrder = [];
+  constructor(e, t) {
+    this.selectType = e, this.setData(t);
+  }
+  // Validate DataArrayPartial
+  validateDataArray(e) {
+    if (!Array.isArray(e))
+      return new Error("Data must be an array");
+    for (let t of e)
+      if (t)
+        if (t instanceof g || "label" in t) {
+          if (!("label" in t))
+            return new Error("Optgroup must have a label");
+          if ("options" in t && t.options)
+            for (let s of t.options) {
+              const i = this.validateOption(s);
+              if (i)
+                return i;
+            }
+        } else if (t instanceof u || "text" in t) {
+          const s = this.validateOption(t);
+          if (s)
+            return s;
+        } else
+          return new Error("Data object must be a valid optgroup or option");
+    return null;
+  }
+  // Validate Option
+  validateOption(e) {
+    return "text" in e ? null : new Error("Option must have a text");
+  }
+  partialToFullData(e) {
+    let t = [];
+    return e.forEach((s) => {
+      if (s) {
+        if (s instanceof g || "label" in s) {
+          let i = [];
+          "options" in s && s.options && s.options.forEach((l) => {
+            i.push(new u(l));
+          }), i.length > 0 && t.push(new g(s));
+        }
+        (s instanceof u || "text" in s) && t.push(new u(s));
+      }
+    }), t;
+  }
+  setData(e, t = !1) {
+    const s = this.partialToFullData(e);
+    if (t) {
+      const i = this.getSelectedOptions(), l = [];
+      i.forEach((a) => {
+        let n = !1;
+        for (const o of s) {
+          if (o instanceof u && o.id === a.id) {
+            n = !0;
+            break;
+          }
+          if (o instanceof g) {
+            for (const c of o.options)
+              if (c.id === a.id) {
+                n = !0;
                 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;
-    }
-    selectedOrderOptions(options) {
-        const newOrder = [];
-        this.selectedOrder.forEach((id) => {
-            const option = options.find((opt) => opt.id === id);
-            if (option) {
-                newOrder.push(option);
-            }
-        });
-        options.forEach((option) => {
-            let isIn = false;
-            newOrder.forEach((selectedOption) => {
-                if (option.id === selectedOption.id) {
-                    isIn = true;
-                    return;
-                }
-            });
-            if (!isIn) {
-                newOrder.push(option);
-            }
-        });
-        return newOrder;
-    }
+              }
+          }
+        }
+        n || l.push(a);
+      }), this.data = [...l, ...s];
+    } else
+      this.data = s;
+    this.selectType === "single" && this.setSelectedBy("id", this.getSelected());
+  }
+  // Get data will return all the data
+  getData() {
+    return this.filter(null, !0);
+  }
+  // Get data options will return the data as a
+  // flat array of just options
+  getDataOptions() {
+    return this.filter(null, !1);
+  }
+  addOption(e, t = !1) {
+    if (t) {
+      let s = [new u(e)];
+      this.setData(s.concat(this.getData()));
+    } else
+      this.setData(this.getData().concat(new u(e)));
+  }
+  // Pass in an array of id that will loop through
+  // each option and set the selected property to true
+  // but also clean selected by determining selectType
+  setSelectedBy(e, t) {
+    let s = null, i = !1;
+    const l = [];
+    for (let n of this.data) {
+      if (n instanceof g)
+        for (let o of n.options) {
+          s || (s = o);
+          let c = o[e] || "";
+          o.selected = i ? !1 : t.includes(c), o.selected && (l.push(o), this.selectType === "single" && (i = !0));
+        }
+      n instanceof u && (s || (s = n), n.selected = i ? !1 : t.includes(n[e]), n.selected && (l.push(n), this.selectType === "single" && (i = !0)));
+    }
+    this.selectType === "single" && s && !i && (s.selected = !0, l.push(s));
+    const a = t.map((n) => l.find((o) => o[e] === n)?.id || "");
+    this.selectedOrder = a;
+  }
+  getSelected() {
+    return this.getSelectedOptions().map((e) => e.id);
+  }
+  getSelectedValues() {
+    return this.getSelectedOptions().map((e) => e.value);
+  }
+  getSelectedOptions() {
+    return this.filter((e) => e.selected, !1);
+  }
+  getOptgroupByID(e) {
+    for (let t of this.data)
+      if (t instanceof g && t.id === e)
+        return t;
+    return null;
+  }
+  getOptionByID(e) {
+    let t = this.filter((s) => s.id === e, !1);
+    return t.length ? t[0] : null;
+  }
+  getSelectType() {
+    return this.selectType;
+  }
+  getFirstOption() {
+    let e = null;
+    for (let t of this.data)
+      if (t instanceof g ? e = t.options[0] : t instanceof u && (e = t), e)
+        break;
+    return e;
+  }
+  // Take in search string and return filtered list of values
+  search(e, t) {
+    return e = e.trim(), e === "" ? this.getData() : this.filter((s) => t(s, e), !0);
+  }
+  // Filter takes in a function that will be used to filter the data
+  // This will also keep optgroups of sub options meet the filter requirements
+  filter(e, t) {
+    const s = [];
+    return this.data.forEach((i) => {
+      if (i instanceof g) {
+        let l = [];
+        if (i.options.forEach((n) => {
+          (!e || e(n)) && (t ? l.push(new u(n)) : s.push(new u(n)));
+        }), l.length > 0) {
+          let n = new g(i);
+          n.options = l, s.push(n);
+        }
+      }
+      i instanceof u && (!e || e(i)) && s.push(new u(i));
+    }), s;
+  }
+  // Take in an array of options and reoder them based upon the selected order
+  selectedOrderOptions(e) {
+    const t = [];
+    return this.selectedOrder.forEach((s) => {
+      const i = e.find((l) => l.id === s);
+      i && t.push(i);
+    }), e.forEach((s) => {
+      let i = !1;
+      t.forEach((l) => {
+        if (s.id === l.id) {
+          i = !0;
+          return;
+        }
+      }), i || t.push(s);
+    }), t;
+  }
 }
-
-class Render {
-    constructor(settings, classes, store, callbacks) {
-        this.store = store;
-        this.settings = settings;
-        this.classes = classes;
-        this.callbacks = callbacks;
-        this.lastSelectedOption = null;
-        this.main = this.mainDiv();
-        this.content = this.contentDiv();
-        this.updateClassStyles();
-        this.updateAriaAttributes();
-        if (this.settings.contentLocation) {
-            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.settings.contentPosition === 'fixed') {
-            this.content.main.classList.add('ss-' + this.settings.contentPosition);
-        }
-    }
-    updateAriaAttributes() {
-        var _a;
-        this.main.main.role = 'combobox';
-        this.main.main.setAttribute('aria-haspopup', 'listbox');
-        this.main.main.setAttribute('aria-controls', (_a = this.content.main.dataset.id) !== null && _a !== void 0 ? _a : '');
-        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;
-            }
-            if (e.key.length === 1) {
-                this.callbacks.open();
-            }
-            return true;
-        };
-        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 id = firstOption ? firstOption.id : '';
-                    this.callbacks.setSelected(id, 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();
-        this.updateDeselectAll();
-    }
-    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();
-            }
-        }
-        if (this.settings.keepOrder) {
-            selectedOptions = this.store.selectedOrderOptions(selectedOptions);
-        }
-        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]));
-                    }
-                }
-            }
-        }
-    }
-    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.textContent = option.text;
-        value.appendChild(text);
-        if (!option.mandatory) {
-            const deleteDiv = document.createElement('div');
-            deleteDiv.classList.add(this.classes.valueDelete);
-            deleteDiv.setAttribute('tabindex', '0');
-            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 selectedIds = [];
-                    for (const o of after) {
-                        if (o instanceof Optgroup) {
-                            for (const c of o.options) {
-                                selectedIds.push(c.id);
-                            }
-                        }
-                        if (o instanceof Option) {
-                            selectedIds.push(o.id);
-                        }
-                    }
-                    this.callbacks.setSelected(selectedIds, 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);
-            deleteDiv.onkeydown = (e) => {
-                if (e.key === 'Enter') {
-                    deleteDiv.click();
-                }
-            };
-        }
-        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 ' ':
-                    const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
-                    if (highlighted) {
-                        highlighted.click();
-                        return false;
-                    }
-                    return true;
-                case 'Enter':
-                    if (this.callbacks.addable) {
-                        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 ids = this.store.getSelected();
-                        ids.push(newOption.id);
-                        this.callbacks.setSelected(ids, true);
-                    }
-                    else {
-                        this.callbacks.setSelected([newOption.id], 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 if (addableValue instanceof Error) {
-                            this.renderError(addableValue.message);
-                        }
-                        else {
-                            runFinish(value);
-                        }
-                    });
-                }
-                else if (typeof addableValue === 'string') {
-                    runFinish({
-                        text: addableValue,
-                        value: addableValue
-                    });
-                }
-                else if (addableValue instanceof Error) {
-                    this.renderError(addableValue.message);
-                }
-                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);
-            if (this.callbacks.addable) {
-                noResults.innerHTML = this.settings.addableText.replace('{value}', this.content.search.input.value);
-            }
-            else {
-                noResults.innerHTML = this.settings.searchText;
-            }
-            this.content.list.appendChild(noResults);
-            return;
-        }
-        if (this.settings.allowDeselect && !this.settings.isMultiple) {
-            const placeholderOption = this.store.filter((o) => o.placeholder, false);
-            if (!placeholderOption.length) {
-                this.store.addOption(new Option({
-                    text: '',
-                    value: '',
-                    selected: false,
-                    placeholder: true
-                }), true);
-            }
-        }
-        const fragment = document.createDocumentFragment();
-        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.id) {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            });
-                            this.callbacks.setSelected(newSelected, true);
-                            return;
-                        }
-                        else {
-                            const newSelected = currentSelected.concat(d.options.map((o) => o.id));
-                            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));
-                    fragment.appendChild(optgroupEl);
-                }
-            }
-            if (d instanceof Option) {
-                fragment.appendChild(this.option(d));
-            }
-        }
-        this.content.list.appendChild(fragment);
-    }
-    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.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.closeOnSelect) {
-                        if (e.shiftKey && this.lastSelectedOption) {
-                            const options = this.store.getDataOptions();
-                            let lastClickedOptionIndex = options.findIndex((o) => o.id === this.lastSelectedOption.id);
-                            let currentOptionIndex = options.findIndex((o) => o.id === option.id);
-                            if (lastClickedOptionIndex >= 0 && currentOptionIndex >= 0) {
-                                const startIndex = Math.min(lastClickedOptionIndex, currentOptionIndex);
-                                const endIndex = Math.max(lastClickedOptionIndex, currentOptionIndex);
-                                const afterRange = options.slice(startIndex, endIndex + 1);
-                                if (afterRange.length > 0 && afterRange.length < this.settings.maxSelected) {
-                                    after = before.concat(afterRange.filter((a) => !before.find((b) => b.id === a.id)));
-                                }
-                            }
-                        }
-                        else if (!option.selected) {
-                            this.lastSelectedOption = 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.id), 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 + (this.settings.contentPosition === 'fixed' ? 0 : window.scrollY) + 'px';
-        this.content.main.style.left =
-            containerRect.left + (this.settings.contentPosition === 'fixed' ? 0 : 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 +
-                    (this.settings.contentPosition === 'fixed' ? 0 : window.scrollY) +
-                    'px';
-            this.content.main.style.left =
-                containerRect.left + (this.settings.contentPosition === 'fixed' ? 0 : 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);
-        }
+class N {
+  settings;
+  store;
+  callbacks;
+  // Used to compute the range selection
+  lastSelectedOption;
+  // Elements
+  main;
+  content;
+  // Classes
+  classes;
+  constructor(e, t, s, i) {
+    this.store = s, this.settings = e, this.classes = t, this.callbacks = i, this.lastSelectedOption = null, this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main);
+  }
+  // Remove disabled classes
+  enable() {
+    this.main.main.classList.remove(this.classes.disabled), this.main.main.setAttribute("aria-disabled", "false"), this.content.search.input.disabled = !1;
+  }
+  // Set disabled classes
+  disable() {
+    this.main.main.classList.add(this.classes.disabled), this.main.main.setAttribute("aria-disabled", "true"), this.content.search.input.disabled = !0;
+  }
+  open() {
+    this.main.arrow.path.setAttribute("d", this.classes.arrowOpen), this.main.main.setAttribute("aria-expanded", "true");
+    const t = this.settings.openPosition === "up" ? this.classes.dirAbove : this.classes.dirBelow;
+    this.main.main.classList.add(t), this.content.main.classList.add(t), this.content.main.classList.add(this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), this.moveContent();
+    const s = this.store.getSelectedOptions();
+    if (s.length) {
+      const i = s[s.length - 1].id, l = this.content.list.querySelector('[data-id="' + i + '"]');
+      l && this.ensureElementInView(this.content.list, l);
+    }
+  }
+  close() {
+    this.main.main.setAttribute("aria-expanded", "false"), this.main.arrow.path.setAttribute("d", this.classes.arrowClose), this.content.main.classList.remove(this.classes.contentOpen), this.content.search.input.setAttribute("aria-hidden", "true"), this.main.main.removeAttribute("aria-activedescendant");
+  }
+  updateClassStyles() {
+    if (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), this.settings.style !== "" && (this.main.main.style.cssText = this.settings.style, this.content.main.style.cssText = this.settings.style), this.settings.class.length)
+      for (const e of this.settings.class)
+        e.trim() !== "" && (this.main.main.classList.add(e.trim()), this.content.main.classList.add(e.trim()));
+    (this.settings.contentPosition === "relative" || this.settings.contentPosition === "fixed") && this.content.main.classList.add("ss-" + this.settings.contentPosition);
+  }
+  updateAriaAttributes() {
+    const e = this.content.list.id;
+    this.main.main.role = "combobox", this.main.main.setAttribute("aria-haspopup", "listbox"), this.main.main.setAttribute("aria-controls", e), this.main.main.setAttribute("aria-expanded", "false"), this.content.list.setAttribute("role", "listbox"), this.content.list.setAttribute("aria-label", this.settings.ariaLabel + " listbox"), this.settings.isMultiple && this.content.list.setAttribute("aria-multiselectable", "true"), this.content.search.input.setAttribute("aria-controls", e);
+  }
+  mainDiv() {
+    const e = document.createElement("div");
+    e.dataset.id = this.settings.id, e.setAttribute("aria-label", this.settings.ariaLabel), e.tabIndex = 0, e.onkeydown = (c) => {
+      switch (c.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+          return this.callbacks.open(), c.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
+        case "Tab":
+          return this.callbacks.close(), !0;
+        // Continue doing normal tabbing
+        case "Enter":
+        case " ":
+          this.callbacks.open();
+          const r = this.content.list.querySelector("." + this.classes.highlighted);
+          return r && r.click(), !1;
+        case "Escape":
+          return this.callbacks.close(), !1;
+      }
+      return c.key.length === 1 && this.callbacks.open(), !0;
+    }, e.onclick = (c) => {
+      this.settings.disabled || (this.settings.isOpen ? this.callbacks.close() : this.callbacks.open());
+    };
+    const t = document.createElement("div");
+    t.classList.add(this.classes.values), e.appendChild(t);
+    const s = document.createElement("div");
+    s.classList.add(this.classes.deselect);
+    const i = this.store?.getSelectedOptions();
+    !this.settings.allowDeselect || this.settings.isMultiple && i && i.length <= 0 ? s.classList.add(this.classes.hide) : s.classList.remove(this.classes.hide), s.onclick = (c) => {
+      if (c.stopPropagation(), this.settings.disabled)
+        return;
+      let r = !0;
+      const h = this.store.getSelectedOptions(), f = [];
+      if (this.callbacks.beforeChange && (r = this.callbacks.beforeChange(f, h) === !0), r) {
+        if (this.settings.isMultiple)
+          this.callbacks.setSelected([], !1), this.updateDeselectAll();
         else {
-            deselectButton.classList.add(hideClass);
+          const d = this.store.getFirstOption(), m = d ? d.id : "";
+          this.callbacks.setSelected(m, !1);
         }
-    }
+        this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
+      }
+    };
+    const l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    l.setAttribute("viewBox", "0 0 100 100");
+    const a = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    a.setAttribute("d", this.classes.deselectPath), l.appendChild(a), s.appendChild(l), e.appendChild(s);
+    const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    n.classList.add(this.classes.arrow), n.setAttribute("viewBox", "0 0 100 100");
+    const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    return o.setAttribute("d", this.classes.arrowClose), this.settings.alwaysOpen && n.classList.add(this.classes.hide), n.appendChild(o), e.appendChild(n), {
+      main: e,
+      values: t,
+      deselect: {
+        main: s,
+        svg: l,
+        path: a
+      },
+      arrow: {
+        main: n,
+        path: o
+      }
+    };
+  }
+  mainFocus(e) {
+    e !== "click" && this.main.main.focus({ preventScroll: !0 });
+  }
+  placeholder() {
+    const e = this.store.filter((i) => i.placeholder, !1);
+    let t = this.settings.placeholderText;
+    e.length && (e[0].html !== "" ? t = e[0].html : e[0].text !== "" && (t = e[0].text));
+    const s = document.createElement("div");
+    return s.classList.add(this.classes.placeholder), s.innerHTML = t, s;
+  }
+  // Get selected values and append to multiSelected values container
+  // and remove those who shouldnt exist
+  renderValues() {
+    if (!this.settings.isMultiple) {
+      this.renderSingleValue();
+      return;
+    }
+    this.renderMultipleValues(), this.updateDeselectAll();
+  }
+  renderSingleValue() {
+    const e = this.store.filter((s) => s.selected && !s.placeholder, !1), t = e.length > 0 ? e[0] : null;
+    if (!t)
+      this.main.values.innerHTML = this.placeholder().outerHTML;
+    else {
+      const s = document.createElement("div");
+      s.classList.add(this.classes.single), t.html ? s.innerHTML = t.html : s.innerText = t.text, this.main.values.innerHTML = s.outerHTML;
+    }
+    !this.settings.allowDeselect || !e.length ? this.main.deselect.main.classList.add(this.classes.hide) : this.main.deselect.main.classList.remove(this.classes.hide);
+  }
+  renderMultipleValues() {
+    let e = this.main.values.childNodes, t = this.store.filter((i) => i.selected && i.display, !1);
+    if (t.length === 0) {
+      this.main.values.innerHTML = this.placeholder().outerHTML;
+      return;
+    } else {
+      const i = this.main.values.querySelector("." + this.classes.placeholder);
+      i && i.remove();
+    }
+    if (t.length > this.settings.maxValuesShown) {
+      const i = document.createElement("div");
+      i.classList.add(this.classes.max), i.textContent = this.settings.maxValuesMessage.replace("{number}", t.length.toString()), this.main.values.innerHTML = i.outerHTML;
+      return;
+    } else {
+      const i = this.main.values.querySelector("." + this.classes.max);
+      i && i.remove();
+    }
+    this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
+    let s = [];
+    for (let i = 0; i < e.length; i++) {
+      const l = e[i], a = l.getAttribute("data-id");
+      a && (t.filter((o) => o.id === a, !1).length || s.push(l));
+    }
+    for (const i of s)
+      i.classList.add(this.classes.valueOut), setTimeout(() => {
+        this.main.values.hasChildNodes() && this.main.values.contains(i) && this.main.values.removeChild(i);
+      }, 100);
+    e = this.main.values.childNodes;
+    for (let i = 0; i < t.length; i++) {
+      let l = !0;
+      for (let a = 0; a < e.length; a++)
+        t[i].id === String(e[a].dataset.id) && (l = !1);
+      l && (this.settings.keepOrder ? this.main.values.appendChild(this.multipleValue(t[i])) : e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[i])) : i === 0 ? this.main.values.insertBefore(this.multipleValue(t[i]), e[i]) : e[i - 1].insertAdjacentElement("afterend", this.multipleValue(t[i])));
+    }
+  }
+  multipleValue(e) {
+    const t = document.createElement("div");
+    t.classList.add(this.classes.value), t.dataset.id = e.id;
+    const s = document.createElement("div");
+    if (s.classList.add(this.classes.valueText), s.textContent = e.text, t.appendChild(s), !e.mandatory) {
+      const i = document.createElement("div");
+      i.classList.add(this.classes.valueDelete), i.setAttribute("tabindex", "0"), i.onclick = (n) => {
+        if (n.preventDefault(), n.stopPropagation(), this.settings.disabled)
+          return;
+        let o = !0;
+        const c = this.store.getSelectedOptions(), r = c.filter((h) => h.selected && h.id !== e.id, !0);
+        if (!(this.settings.minSelected && r.length < this.settings.minSelected) && (this.callbacks.beforeChange && (o = this.callbacks.beforeChange(r, c) === !0), o)) {
+          let h = [];
+          for (const f of r) {
+            if (f instanceof g)
+              for (const d of f.options)
+                d.id && h.push(d.id);
+            f instanceof u && h.push(f.id);
+          }
+          this.callbacks.setSelected(h, !1), this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(r), this.updateDeselectAll();
+        }
+      };
+      const l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      l.setAttribute("viewBox", "0 0 100 100");
+      const a = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      a.setAttribute("d", this.classes.optionDelete), l.appendChild(a), i.appendChild(l), t.appendChild(i), i.onkeydown = (n) => {
+        n.key === "Enter" && i.click();
+      };
+    }
+    return t;
+  }
+  contentDiv() {
+    const e = document.createElement("div");
+    e.dataset.id = this.settings.id;
+    const t = this.searchDiv();
+    e.appendChild(t.main);
+    const s = this.listDiv();
+    return e.appendChild(s), {
+      main: e,
+      search: t,
+      list: s
+    };
+  }
+  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;
+    }
+    this.putContent() === "up" ? this.moveContentAbove() : this.moveContentBelow();
+  }
+  searchDiv() {
+    const e = document.createElement("div"), t = document.createElement("input"), s = document.createElement("div");
+    e.classList.add(this.classes.search);
+    const i = {
+      main: e,
+      input: t
+    };
+    if (this.settings.showSearch || (e.classList.add(this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = C((l) => {
+      this.callbacks.search(l.target.value);
+    }, 100), t.onkeydown = (l) => {
+      switch (l.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+          return l.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
+        case "Tab":
+          return this.callbacks.close(), !0;
+        // Continue doing normal tabbing
+        case "Escape":
+          return this.callbacks.close(), !1;
+        case " ":
+          const a = this.content.list.querySelector("." + this.classes.highlighted);
+          return a ? (a.click(), !1) : !0;
+        case "Enter":
+          const n = this.content.list.querySelector("." + this.classes.highlighted);
+          return n ? (n.click(), !1) : this.callbacks.addable ? (s.click(), !1) : !0;
+      }
+      return !0;
+    }, e.appendChild(t), this.callbacks.addable) {
+      s.classList.add(this.classes.addable);
+      const l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      l.setAttribute("viewBox", "0 0 100 100");
+      const a = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      a.setAttribute("d", this.classes.addablePath), l.appendChild(a), s.appendChild(l), s.onclick = (n) => {
+        if (n.preventDefault(), n.stopPropagation(), !this.callbacks.addable)
+          return;
+        const o = this.content.search.input.value.trim();
+        if (o === "") {
+          this.content.search.input.focus();
+          return;
+        }
+        const c = (h) => {
+          let f = new u(h);
+          if (this.callbacks.addOption(f), this.settings.isMultiple) {
+            let d = this.store.getSelected();
+            d.push(f.id), this.callbacks.setSelected(d, !0);
+          } else
+            this.callbacks.setSelected([f.id], !0);
+          this.callbacks.search(""), this.settings.closeOnSelect && setTimeout(() => {
+            this.callbacks.close();
+          }, 100);
+        }, r = this.callbacks.addable(o);
+        r === !1 || r === void 0 || r === null || (r instanceof Promise ? r.then((h) => {
+          typeof h == "string" ? c({
+            text: h,
+            value: h
+          }) : r instanceof Error ? this.renderError(r.message) : c(h);
+        }) : typeof r == "string" ? c({
+          text: r,
+          value: r
+        }) : r instanceof Error ? this.renderError(r.message) : c(r));
+      }, e.appendChild(s), i.addable = {
+        main: s,
+        svg: l,
+        path: a
+      };
+    }
+    return i;
+  }
+  searchFocus() {
+    this.content.search.input.focus();
+  }
+  clearSearch() {
+    this.content.search.input.value = "";
+  }
+  getOptions(e = !1, t = !1, s = !1) {
+    let i = "." + this.classes.option;
+    return e && (i += ":not(." + this.classes.placeholder + ")"), t && (i += ":not(." + this.classes.disabled + ")"), s && (i += ":not(." + this.classes.hide + ")"), Array.from(this.content.list.querySelectorAll(i));
+  }
+  // highlightUp is used to highlight the previous option in the list
+  highlight(e) {
+    const t = this.getOptions(!0, !0, !0);
+    if (t.length === 0)
+      return;
+    if (t.length === 1 && !t[0].classList.contains(this.classes.highlighted)) {
+      t[0].classList.add(this.classes.highlighted);
+      return;
+    }
+    let s = !1;
+    for (const l of t)
+      l.classList.contains(this.classes.highlighted) && (s = !0);
+    if (!s) {
+      for (const l of t)
+        if (l.classList.contains(this.classes.selected)) {
+          l.classList.add(this.classes.highlighted);
+          break;
+        }
+    }
+    for (let l = 0; l < t.length; l++)
+      if (t[l].classList.contains(this.classes.highlighted)) {
+        const a = t[l];
+        a.classList.remove(this.classes.highlighted);
+        const n = a.parentElement;
+        if (n && n.classList.contains(this.classes.mainOpen)) {
+          const r = n.querySelector("." + this.classes.optgroupLabel);
+          r && r.click();
+        }
+        let o = t[e === "down" ? l + 1 < t.length ? l + 1 : 0 : l - 1 >= 0 ? l - 1 : t.length - 1];
+        o.classList.add(this.classes.highlighted), this.ensureElementInView(this.content.list, o), o.id && this.main.main.setAttribute("aria-activedescendant", o.id);
+        const c = o.parentElement;
+        if (c && c.classList.contains(this.classes.close)) {
+          const r = c.querySelector("." + this.classes.optgroupLabel);
+          r && r.click();
+        }
+        return;
+      }
+    const i = t[e === "down" ? 0 : t.length - 1];
+    i.classList.add(this.classes.highlighted), i.id && this.main.main.setAttribute("aria-activedescendant", i.id), this.ensureElementInView(this.content.list, i);
+  }
+  // Create main container that options will reside
+  listDiv() {
+    const e = document.createElement("div");
+    e.classList.add(this.classes.list);
+    const t = this.settings.id + "-list";
+    return e.id = t, e.dataset.id = t, e;
+  }
+  renderError(e) {
+    this.content.list.innerHTML = "";
+    const t = document.createElement("div");
+    t.classList.add(this.classes.error), t.textContent = e, this.content.list.appendChild(t);
+  }
+  renderSearching() {
+    this.content.list.innerHTML = "";
+    const e = document.createElement("div");
+    e.classList.add(this.classes.searching), e.textContent = this.settings.searchingText, this.content.list.appendChild(e);
+  }
+  // Take in data and add options to
+  renderOptions(e) {
+    if (this.content.list.innerHTML = "", e.length === 0) {
+      const s = document.createElement("div");
+      s.classList.add(this.classes.search), this.callbacks.addable ? s.innerHTML = this.settings.addableText.replace("{value}", this.content.search.input.value) : s.innerHTML = this.settings.searchText, this.content.list.appendChild(s);
+      return;
+    }
+    this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((i) => i.placeholder, !1).length || this.store.addOption(
+      new u({
+        text: "",
+        value: "",
+        selected: !1,
+        placeholder: !0
+      }),
+      !0
+    ));
+    const t = document.createDocumentFragment();
+    for (const s of e) {
+      if (s instanceof g) {
+        const i = document.createElement("div");
+        i.classList.add(this.classes.optgroup);
+        const l = document.createElement("div");
+        l.classList.add(this.classes.optgroupLabel), i.appendChild(l);
+        const a = document.createElement("div");
+        a.classList.add(this.classes.optgroupLabelText), a.textContent = s.label, l.appendChild(a);
+        const n = document.createElement("div");
+        if (n.classList.add(this.classes.optgroupActions), l.appendChild(n), this.settings.isMultiple && s.selectAll) {
+          const o = document.createElement("div");
+          o.classList.add(this.classes.optgroupSelectAll);
+          let c = !0;
+          for (const m of s.options)
+            if (!m.selected) {
+              c = !1;
+              break;
+            }
+          c && o.classList.add(this.classes.selected);
+          const r = document.createElement("span");
+          r.textContent = s.selectAllText, o.appendChild(r);
+          const h = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          h.setAttribute("viewBox", "0 0 100 100"), o.appendChild(h);
+          const f = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          f.setAttribute("d", this.classes.optgroupSelectAllBox), h.appendChild(f);
+          const d = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          d.setAttribute("d", this.classes.optgroupSelectAllCheck), h.appendChild(d), o.addEventListener("click", (m) => {
+            m.preventDefault(), m.stopPropagation();
+            const b = this.store.getSelected();
+            if (c) {
+              const w = b.filter((O) => {
+                for (const v of s.options)
+                  if (O === v.id)
+                    return !1;
+                return !0;
+              });
+              this.callbacks.setSelected(w, !0);
+              return;
+            } else {
+              let w = s.options.map((v) => v.id).filter((v) => v !== void 0);
+              const O = b.concat(w);
+              for (const v of s.options)
+                v.id && !this.store.getOptionByID(v.id) && this.callbacks.addOption(new u(v));
+              this.callbacks.setSelected(O, !0);
+              return;
+            }
+          }), n.appendChild(o);
+        }
+        if (s.closable !== "off") {
+          const o = document.createElement("div");
+          o.classList.add(this.classes.optgroupClosable);
+          const c = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          c.setAttribute("viewBox", "0 0 100 100"), c.classList.add(this.classes.arrow), o.appendChild(c);
+          const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          c.appendChild(r), s.options.some((h) => h.selected) || this.content.search.input.value.trim() !== "" ? (o.classList.add(this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : s.closable === "open" ? (i.classList.add(this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : s.closable === "close" && (i.classList.add(this.classes.close), r.setAttribute("d", this.classes.arrowClose)), l.addEventListener("click", (h) => {
+            h.preventDefault(), h.stopPropagation(), i.classList.contains(this.classes.close) ? (i.classList.remove(this.classes.close), i.classList.add(this.classes.mainOpen), r.setAttribute("d", this.classes.arrowOpen)) : (i.classList.remove(this.classes.mainOpen), i.classList.add(this.classes.close), r.setAttribute("d", this.classes.arrowClose));
+          }), n.appendChild(o);
+        }
+        i.appendChild(l);
+        for (const o of s.options)
+          i.appendChild(this.option(new u(o))), t.appendChild(i);
+      }
+      s instanceof u && t.appendChild(this.option(s));
+    }
+    this.content.list.appendChild(t);
+  }
+  // Create option div element
+  option(e) {
+    if (e.placeholder) {
+      const s = document.createElement("div");
+      return s.classList.add(this.classes.option), s.classList.add(this.classes.hide), s;
+    }
+    const t = document.createElement("div");
+    return t.dataset.id = e.id, t.id = this.settings.id + "-" + e.id, t.classList.add(this.classes.option), t.setAttribute("role", "option"), e.class && e.class.split(" ").forEach((s) => {
+      t.classList.add(s);
+    }), e.style && (t.style.cssText = e.style), this.settings.searchHighlight && this.content.search.input.value.trim() !== "" ? t.innerHTML = this.highlightText(
+      e.html !== "" ? e.html : e.text,
+      this.content.search.input.value,
+      this.classes.searchHighlighter
+    ) : e.html !== "" ? t.innerHTML = e.html : t.textContent = e.text, this.settings.showOptionTooltips && t.textContent && t.setAttribute("title", t.textContent), e.display || t.classList.add(this.classes.hide), e.disabled && t.classList.add(this.classes.disabled), e.selected && this.settings.hideSelected && t.classList.add(this.classes.hide), e.selected ? (t.classList.add(this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (t.classList.remove(this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (s) => {
+      s.preventDefault(), s.stopPropagation();
+      const i = this.store.getSelected(), l = s.currentTarget, a = String(l.dataset.id), n = s.ctrlKey || s.metaKey;
+      if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || this.settings.isMultiple && this.settings.maxSelected <= i.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= i.length && e.selected && !n)
+        return;
+      let o = !1;
+      const c = this.store.getSelectedOptions();
+      let r = [];
+      if (this.settings.isMultiple) {
+        const h = c.some((d) => d.id === a);
+        if (s.shiftKey && this.lastSelectedOption) {
+          const d = this.store.getDataOptions(), m = d.findIndex((w) => w.id === this.lastSelectedOption.id), b = d.findIndex((w) => w.id === e.id);
+          if (m >= 0 && b >= 0) {
+            const w = Math.min(m, b), O = Math.max(m, b), y = d.slice(w, O + 1).filter((x) => !c.find((A) => A.id === x.id));
+            c.length + y.length <= this.settings.maxSelected ? r = c.concat(y) : r = c;
+          } else
+            r = c;
+        } else n ? (h ? r = c.filter((d) => d.id !== a) : r = c.concat(e), this.lastSelectedOption = e) : (h ? r = c.filter((d) => d.id !== a) : r = c.concat(e), this.lastSelectedOption = e);
+      }
+      if (this.settings.isMultiple || (e.selected ? r = [] : r = [e]), this.callbacks.beforeChange || (o = !0), this.callbacks.beforeChange && (this.callbacks.beforeChange(r, c) === !1 ? o = !1 : o = !0), o) {
+        this.store.getOptionByID(a) || this.callbacks.addOption(e), this.callbacks.setSelected(
+          r.map((d) => d.id),
+          !1
+        );
+        const h = s.ctrlKey || s.metaKey || s.shiftKey;
+        this.settings.closeOnSelect && !(this.settings.isMultiple && h) && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(r);
+      }
+    }), t;
+  }
+  destroy() {
+    this.main.main.remove(), this.content.main.remove();
+  }
+  highlightText(e, t, s) {
+    const i = t.trim();
+    if (i === "")
+      return e;
+    const l = i.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), a = document.createElement("div");
+    a.innerHTML = e;
+    const n = (o) => {
+      if (o.nodeType === Node.TEXT_NODE) {
+        const c = o.textContent || "", r = new RegExp("(" + l + ")", "i");
+        if (r.test(c)) {
+          const h = document.createElement("span");
+          c.split(r).forEach((d, m) => {
+            if (d && r.test(d)) {
+              const b = document.createElement("mark");
+              b.className = s, b.textContent = d, h.appendChild(b);
+            } else d && h.appendChild(document.createTextNode(d));
+          }), o.parentNode?.replaceChild(h, o);
+        }
+      } else o.nodeType === Node.ELEMENT_NODE && Array.from(o.childNodes).forEach((c) => n(c));
+    };
+    return Array.from(a.childNodes).forEach((o) => n(o)), a.innerHTML;
+  }
+  moveContentAbove() {
+    const e = this.main.main.offsetHeight, t = this.content.main.offsetHeight;
+    this.main.main.classList.remove(this.classes.dirBelow), this.main.main.classList.add(this.classes.dirAbove), this.content.main.classList.remove(this.classes.dirBelow), this.content.main.classList.add(this.classes.dirAbove);
+    const s = this.main.main.getBoundingClientRect();
+    this.content.main.style.margin = "-" + (e + t - 1) + "px 0px 0px 0px", this.content.main.style.top = s.top + s.height + (this.settings.contentPosition === "fixed" ? 0 : window.scrollY) + "px", this.content.main.style.left = s.left + (this.settings.contentPosition === "fixed" ? 0 : window.scrollX) + "px", this.content.main.style.width = s.width + "px";
+  }
+  moveContentBelow() {
+    this.main.main.classList.remove(this.classes.dirAbove), this.main.main.classList.add(this.classes.dirBelow), this.content.main.classList.remove(this.classes.dirAbove), this.content.main.classList.add(this.classes.dirBelow);
+    const e = this.main.main.getBoundingClientRect();
+    this.content.main.style.margin = "-1px 0px 0px 0px", this.settings.contentPosition !== "relative" && (this.content.main.style.top = e.top + e.height + (this.settings.contentPosition === "fixed" ? 0 : window.scrollY) + "px", this.content.main.style.left = e.left + (this.settings.contentPosition === "fixed" ? 0 : window.scrollX) + "px", this.content.main.style.width = e.width + "px");
+  }
+  ensureElementInView(e, t) {
+    const s = e.scrollTop + e.offsetTop, i = s + e.clientHeight, l = t.offsetTop, a = l + t.clientHeight;
+    l < s ? e.scrollTop -= s - l : a > i && (e.scrollTop += a - i);
+  }
+  putContent() {
+    const e = this.main.main.offsetHeight, t = this.main.main.getBoundingClientRect(), s = this.content.main.offsetHeight;
+    return window.innerHeight - (t.top + e) <= s && t.top > s ? "up" : "down";
+  }
+  // Updates deselect based on item count and allowDeselect setting
+  updateDeselectAll() {
+    if (!this.store || !this.settings)
+      return;
+    const e = this.store.getSelectedOptions(), t = e && e.length > 0, s = this.settings.isMultiple, i = this.settings.allowDeselect, l = this.main.deselect.main, a = this.classes.hide;
+    i && !(s && !t) ? l.classList.remove(a) : l.classList.add(a);
+  }
 }
-
-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.getSelectedOptions());
-        }
-        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.type === 'childList') {
-                    for (const n of m.addedNodes) {
-                        if (n.nodeName === 'OPTION' && n.value === this.select.value) {
-                            this.select.dispatchEvent(new Event('change'));
-                            break;
-                        }
-                    }
-                    optgroupOptionChanged = 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 : '',
-            defaultSelected: option.defaultSelected,
-            selected: option.selected,
-            display: option.style.display !== 'none',
-            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
-        };
-    }
-    getSelectedOptions() {
-        let options = [];
-        const opts = this.select.childNodes;
-        for (const o of opts) {
-            if (o.nodeName === 'OPTGROUP') {
-                const optgroupOptions = o.childNodes;
-                for (const oo of optgroupOptions) {
-                    if (oo.nodeName === 'OPTION') {
-                        const option = oo;
-                        if (option.selected) {
-                            options.push(this.getDataFromOption(option));
-                        }
-                    }
-                }
-            }
-            if (o.nodeName === 'OPTION') {
-                const option = o;
-                if (option.selected) {
-                    options.push(this.getDataFromOption(option));
-                }
-            }
-        }
-        return options;
-    }
-    getSelectedValues() {
-        return this.getSelectedOptions().map((option) => option.value);
-    }
-    setSelected(ids) {
-        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 = ids.includes(option.id);
-                    }
-                }
-            }
-            if (o.nodeName === 'OPTION') {
-                const option = o;
-                option.selected = ids.includes(option.id);
-            }
-        }
-        this.changeListen(true);
-    }
-    setSelectedByValue(values) {
-        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 = values.includes(option.value);
-                    }
-                }
-            }
-            if (o.nodeName === 'OPTION') {
-                const option = o;
-                option.selected = values.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', { bubbles: true }));
-        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.textContent = info.text;
-        if (info.html !== '') {
-            optionEl.setAttribute('data-html', info.html);
-        }
-        optionEl.defaultSelected = info.defaultSelected;
-        optionEl.selected = info.selected;
-        if (info.disabled) {
-            optionEl.disabled = true;
-        }
-        if (!info.display) {
-            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 M {
+  select;
+  // Mutation observer fields
+  onValueChange;
+  onClassChange;
+  onDisabledChange;
+  onOptionsChange;
+  // Change observers
+  listen = !1;
+  observer = null;
+  constructor(e) {
+    this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, {
+      // allow bubbling of event
+      passive: !0
+    }), this.observer = new MutationObserver(this.observeCall.bind(this)), this.changeListen(!0);
+  }
+  enable() {
+    this.select.disabled = !1;
+  }
+  disable() {
+    this.select.disabled = !0;
+  }
+  hideUI() {
+    this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clip = "rect(0 0 0 0)", this.select.setAttribute("aria-hidden", "true");
+  }
+  showUI() {
+    this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clip = "", this.select.removeAttribute("aria-hidden");
+  }
+  changeListen(e) {
+    this.listen = e, e && this.observer && this.observer.observe(this.select, {
+      subtree: !0,
+      // subtree for optgroups options
+      childList: !0,
+      // children changes
+      attributes: !0
+      // attributes changes
+    }), e || this.observer && this.observer.disconnect();
+  }
+  // This function get triggers when the select value changes
+  // and will call the onValueChange function if it exists
+  valueChange(e) {
+    return this.listen && this.onValueChange && this.onValueChange(this.getSelectedOptions()), !0;
+  }
+  observeCall(e) {
+    if (!this.listen)
+      return;
+    let t = !1, s = !1, i = !1;
+    for (const l of e) {
+      if (l.target === this.select && (l.attributeName === "disabled" && (s = !0), l.attributeName === "class" && (t = !0), l.type === "childList")) {
+        for (const a of Array.from(l.addedNodes))
+          if (a.nodeName === "OPTION" && a.value === this.select.value) {
+            this.select.dispatchEvent(new Event("change"));
+            break;
+          }
+        i = !0;
+      }
+      (l.target.nodeName === "OPTGROUP" || l.target.nodeName === "OPTION") && (i = !0);
+    }
+    t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), s && this.onDisabledChange && (this.changeListen(!1), this.onDisabledChange(this.select.disabled), this.changeListen(!0)), i && this.onOptionsChange && (this.changeListen(!1), this.onOptionsChange(this.getData()), this.changeListen(!0));
+  }
+  // From the select element pull optgroup and options into data
+  getData() {
+    let e = [];
+    const t = this.select.childNodes;
+    for (const s of t)
+      s.nodeName === "OPTGROUP" && e.push(this.getDataFromOptgroup(s)), s.nodeName === "OPTION" && e.push(this.getDataFromOption(s));
+    return e;
+  }
+  getDataFromOptgroup(e) {
+    let t = {
+      id: e.id,
+      label: e.label,
+      selectAll: e.dataset ? e.dataset.selectall === "true" : !1,
+      selectAllText: e.dataset ? e.dataset.selectalltext : "Select all",
+      closable: e.dataset ? e.dataset.closable : "off",
+      options: []
+    };
+    const s = e.childNodes;
+    for (const i of s)
+      i.nodeName === "OPTION" && t.options.push(this.getDataFromOption(i));
+    return t;
+  }
+  // From passed in option pull pieces of usable information
+  getDataFromOption(e) {
+    return {
+      id: e.id,
+      value: e.value,
+      text: e.text,
+      html: e.dataset && e.dataset.html ? e.dataset.html : "",
+      defaultSelected: e.defaultSelected,
+      selected: e.selected,
+      display: e.style.display !== "none",
+      disabled: e.disabled,
+      mandatory: e.dataset ? e.dataset.mandatory === "true" : !1,
+      placeholder: e.dataset.placeholder === "true",
+      class: e.className,
+      style: e.style.cssText,
+      data: e.dataset
+    };
+  }
+  getSelectedOptions() {
+    let e = [];
+    const t = this.select.childNodes;
+    for (const s of t) {
+      if (s.nodeName === "OPTGROUP") {
+        const i = s.childNodes;
+        for (const l of i)
+          if (l.nodeName === "OPTION") {
+            const a = l;
+            a.selected && e.push(this.getDataFromOption(a));
+          }
+      }
+      if (s.nodeName === "OPTION") {
+        const i = s;
+        i.selected && e.push(this.getDataFromOption(i));
+      }
+    }
+    return e;
+  }
+  getSelectedValues() {
+    return this.getSelectedOptions().map((e) => e.value);
+  }
+  setSelected(e) {
+    this.changeListen(!1);
+    const t = this.select.childNodes;
+    for (const s of t) {
+      if (s.nodeName === "OPTGROUP") {
+        const l = s.childNodes;
+        for (const a of l)
+          if (a.nodeName === "OPTION") {
+            const n = a;
+            n.selected = e.includes(n.id);
+          }
+      }
+      if (s.nodeName === "OPTION") {
+        const i = s;
+        i.selected = e.includes(i.id);
+      }
+    }
+    this.changeListen(!0);
+  }
+  // Set selected options by value instead of id
+  // This is useful when the id is not known
+  // and only the value is known
+  // but the value is not unique and can be duplicated
+  setSelectedByValue(e) {
+    this.changeListen(!1);
+    const t = this.select.childNodes;
+    for (const s of t) {
+      if (s.nodeName === "OPTGROUP") {
+        const l = s.childNodes;
+        for (const a of l)
+          if (a.nodeName === "OPTION") {
+            const n = a;
+            n.selected = e.includes(n.value);
+          }
+      }
+      if (s.nodeName === "OPTION") {
+        const i = s;
+        i.selected = e.includes(i.value);
+      }
+    }
+    this.changeListen(!0);
+  }
+  updateSelect(e, t, s) {
+    this.changeListen(!1), e && (this.select.dataset.id = e), t && (this.select.style.cssText = t), s && (this.select.className = "", s.forEach((i) => {
+      i.trim() !== "" && this.select.classList.add(i.trim());
+    })), this.changeListen(!0);
+  }
+  updateOptions(e) {
+    this.changeListen(!1), this.select.innerHTML = "";
+    for (const t of e)
+      t instanceof g && this.select.appendChild(this.createOptgroup(t)), t instanceof u && this.select.appendChild(this.createOption(t));
+    this.select.dispatchEvent(new Event("change", { bubbles: !0 })), this.changeListen(!0);
+  }
+  createOptgroup(e) {
+    const t = document.createElement("optgroup");
+    if (t.id = e.id, t.label = e.label, e.selectAll && (t.dataset.selectAll = "true"), e.closable !== "off" && (t.dataset.closable = e.closable), e.options)
+      for (const s of e.options)
+        t.appendChild(this.createOption(s));
+    return t;
+  }
+  createOption(e) {
+    const t = document.createElement("option");
+    return t.id = e.id, t.value = e.value, t.textContent = e.text, e.html !== "" && t.setAttribute("data-html", e.html), t.defaultSelected = e.defaultSelected, t.selected = e.selected, e.disabled && (t.disabled = !0), e.display || (t.style.display = "none"), e.placeholder && t.setAttribute("data-placeholder", "true"), e.mandatory && t.setAttribute("data-mandatory", "true"), e.class && e.class.split(" ").forEach((s) => {
+      t.classList.add(s);
+    }), e.data && typeof e.data == "object" && Object.keys(e.data).forEach((s) => {
+      t.setAttribute("data-" + D(s), e.data[s]);
+    }), t;
+  }
+  destroy() {
+    this.changeListen(!1), this.select.removeEventListener("change", this.valueChange), 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.focusSearch = settings.focusSearch !== undefined ? settings.focusSearch : 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';
-        this.addableText = settings.addableText || 'Press "Enter" to add {value}';
-    }
+class P {
+  id = "";
+  // Primary ID for the select
+  style = "";
+  // Style attribute from the select element
+  class = [];
+  // Class attribute from the select element
+  // Dynamic settings
+  isMultiple = !1;
+  isOpen = !1;
+  isFullOpen = !1;
+  intervalMove = null;
+  // Fields set from constructor
+  disabled;
+  alwaysOpen;
+  showSearch;
+  focusSearch;
+  ariaLabel;
+  searchPlaceholder;
+  searchText;
+  searchingText;
+  searchHighlight;
+  closeOnSelect;
+  contentLocation;
+  contentPosition;
+  openPosition;
+  placeholderText;
+  allowDeselect;
+  hideSelected;
+  keepOrder;
+  showOptionTooltips;
+  minSelected;
+  maxSelected;
+  timeoutDelay;
+  maxValuesShown;
+  maxValuesMessage;
+  addableText;
+  constructor(e) {
+    e || (e = {}), this.id = "ss-" + L(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled !== void 0 ? e.disabled : !1, this.alwaysOpen = e.alwaysOpen !== void 0 ? e.alwaysOpen : !1, this.showSearch = e.showSearch !== void 0 ? e.showSearch : !0, this.focusSearch = e.focusSearch !== void 0 ? e.focusSearch : !0, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.searchHighlight = e.searchHighlight !== void 0 ? e.searchHighlight : !1, this.closeOnSelect = e.closeOnSelect !== void 0 ? e.closeOnSelect : !0, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText !== void 0 ? e.placeholderText : "Select Value", this.allowDeselect = e.allowDeselect !== void 0 ? e.allowDeselect : !1, this.hideSelected = e.hideSelected !== void 0 ? e.hideSelected : !1, this.keepOrder = e.keepOrder !== void 0 ? e.keepOrder : !1, this.showOptionTooltips = e.showOptionTooltips !== void 0 ? e.showOptionTooltips : !1, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || 'Press "Enter" to add {value}';
+  }
 }
-
-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);
-        this.cssClasses = new CssClasses(config.cssClasses);
-        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 = (options) => {
-            this.setSelected(options.map((option) => option.id));
-        };
-        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.cssClasses, 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() {
-        let options = this.store.getSelectedOptions();
-        if (this.settings.keepOrder) {
-            options = this.store.selectedOrderOptions(options);
-        }
-        return options.map((option) => option.value);
-    }
-    setSelected(values, runAfterChange = true) {
-        const selected = this.store.getSelected();
-        const options = this.store.getDataOptions();
-        values = Array.isArray(values) ? values : [values];
-        const ids = [];
-        for (const value of values) {
-            if (options.find((option) => option.id == value)) {
-                ids.push(value);
-                continue;
-            }
-            for (const option of options.filter((option) => option.value == value)) {
-                ids.push(option.id);
-            }
-        }
-        this.store.setSelectedBy('id', ids);
-        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.settings.focusSearch) {
-            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();
-    }
+class I {
+  selectEl;
+  // Classes
+  settings;
+  cssClasses;
+  select;
+  store;
+  render;
+  // Timeout tracking for cleanup
+  openTimeout = null;
+  closeTimeout = null;
+  // Events
+  events = {
+    search: void 0,
+    searchFilter: (e, t) => e.text.toLowerCase().indexOf(t.toLowerCase()) !== -1,
+    addable: void 0,
+    beforeChange: void 0,
+    afterChange: void 0,
+    beforeOpen: void 0,
+    afterOpen: void 0,
+    beforeClose: void 0,
+    afterClose: void 0
+  };
+  constructor(e) {
+    if (this.selectEl = typeof e.select == "string" ? document.querySelector(e.select) : e.select, !this.selectEl) {
+      e.events && e.events.error && e.events.error(new Error("Could not find select element"));
+      return;
+    }
+    if (this.selectEl.tagName !== "SELECT") {
+      e.events && e.events.error && e.events.error(new Error("Element isnt of type select"));
+      return;
+    }
+    this.selectEl.dataset.ssid && this.destroy(), this.settings = new P(e.settings), this.cssClasses = new E(e.cssClasses);
+    const t = ["beforeOpen", "afterOpen", "beforeClose", "afterClose"];
+    for (const n in e.events)
+      e.events.hasOwnProperty(n) && (t.indexOf(n) !== -1 ? this.events[n] = C(e.events[n], 100) : this.events[n] = e.events[n]);
+    this.settings.disabled = e.settings?.disabled ? e.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 M(this.selectEl), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onValueChange = (n) => {
+      this.setSelected(n.map((o) => o.id));
+    }, this.select.onClassChange = (n) => {
+      this.settings.class = n, this.render.updateClassStyles();
+    }, this.select.onDisabledChange = (n) => {
+      n ? this.disable() : this.enable();
+    }, this.select.onOptionsChange = (n) => {
+      this.setData(n);
+    };
+    const s = e.data ? e.data : this.select.getData();
+    this.store = new k(this.settings.isMultiple ? "multiple" : "single", s), e.data && this.select.updateOptions(this.store.getData());
+    const i = {
+      open: this.open.bind(this),
+      close: this.close.bind(this),
+      addable: this.events.addable ? this.events.addable : void 0,
+      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 N(this.settings, this.cssClasses, this.store, i), this.render.renderValues(), this.render.renderOptions(this.store.getData());
+    const l = this.selectEl.getAttribute("aria-label"), a = this.selectEl.getAttribute("aria-labelledby");
+    l ? this.render.main.main.setAttribute("aria-label", l) : a && this.render.main.main.setAttribute("aria-labelledby", a), this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), window.addEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.addEventListener("scroll", this.windowScroll, !1), document.addEventListener("visibilitychange", this.windowVisibilityChange), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.selectEl.slim = this;
+  }
+  // Set to enabled and remove disabled classes
+  enable() {
+    this.settings.disabled = !1, this.select.enable(), this.render.enable();
+  }
+  // Set to disabled and add disabled classes
+  disable() {
+    this.settings.disabled = !0, this.select.disable(), this.render.disable();
+  }
+  getData() {
+    return this.store.getData();
+  }
+  setData(e) {
+    const t = this.store.getSelected(), s = this.store.validateDataArray(e);
+    if (s) {
+      this.events.error && this.events.error(s);
+      return;
+    }
+    this.store.setData(e);
+    const i = this.store.getData();
+    this.select.updateOptions(i), this.render.renderValues(), this.render.renderOptions(i), this.events.afterChange && !S(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
+  }
+  getSelected() {
+    let e = this.store.getSelectedOptions();
+    return this.settings.keepOrder && (e = this.store.selectedOrderOptions(e)), e.map((t) => t.value);
+  }
+  // Will take in a string or array of strings and set the selected by either the id or value
+  setSelected(e, t = !0) {
+    const s = this.store.getSelected(), i = this.store.getDataOptions();
+    e = Array.isArray(e) ? e : [e];
+    const l = [];
+    for (const n of e) {
+      if (i.find((o) => o.id == n)) {
+        l.push(n);
+        continue;
+      }
+      for (const o of i.filter((c) => c.value == n))
+        l.push(o.id);
+    }
+    this.store.setSelectedBy("id", l);
+    const a = this.store.getData();
+    this.select.updateOptions(a), this.render.renderValues(), this.render.content.search.input.value !== "" ? this.search(this.render.content.search.input.value) : this.render.renderOptions(a), t && this.events.afterChange && !S(s, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
+  }
+  addOption(e) {
+    const t = this.store.getSelected();
+    this.store.getDataOptions().some((i) => i.value === (e.value ?? e.text)) || this.store.addOption(e);
+    const s = this.store.getData();
+    this.select.updateOptions(s), this.render.renderValues(), this.render.renderOptions(s), this.events.afterChange && !S(t, this.store.getSelected()) && this.events.afterChange(this.store.getSelectedOptions());
+  }
+  open() {
+    this.settings.disabled || this.settings.isOpen || (this.events.beforeOpen && this.events.beforeOpen(), this.render.open(), this.settings.showSearch && this.settings.focusSearch && this.render.searchFocus(), this.settings.isOpen = !0, this.openTimeout = setTimeout(() => {
+      this.events.afterOpen && this.events.afterOpen(), this.settings.isOpen && (this.settings.isFullOpen = !0), document.addEventListener("click", this.documentClick);
+    }, this.settings.timeoutDelay), this.settings.contentPosition === "absolute" && (this.settings.intervalMove && clearInterval(this.settings.intervalMove), this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500)));
+  }
+  close(e = null) {
+    !this.settings.isOpen || this.settings.alwaysOpen || (this.events.beforeClose && this.events.beforeClose(), this.render.close(), this.render.clearSearch(), this.render.mainFocus(e), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.closeTimeout = setTimeout(() => {
+      this.events.afterClose && this.events.afterClose(), document.removeEventListener("click", this.documentClick);
+    }, this.settings.timeoutDelay), this.settings.intervalMove && clearInterval(this.settings.intervalMove));
+  }
+  // Take in string value and search current options
+  search(e) {
+    if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e), !this.events.search) {
+      const s = e === "" ? this.store.getData() : this.store.search(e, this.events.searchFilter);
+      this.render.renderOptions(s);
+      return;
+    }
+    this.render.renderSearching();
+    const t = this.events.search(e, this.store.getSelectedOptions());
+    if (t instanceof Promise) {
+      t.then((s) => {
+        this.store.setData(s, !0), this.select.updateOptions(this.store.getData()), this.render.renderOptions(this.store.getData());
+      }).catch((s) => {
+        this.render.renderError(typeof s == "string" ? s : s.message);
+      });
+      return;
+    } else Array.isArray(t) ? (this.store.setData(t, !0), this.select.updateOptions(this.store.getData()), this.render.renderOptions(this.store.getData())) : this.render.renderError("Search event must return a promise or an array of data");
+  }
+  destroy() {
+    this.openTimeout && (clearTimeout(this.openTimeout), this.openTimeout = null), this.closeTimeout && (clearTimeout(this.closeTimeout), this.closeTimeout = null), this.settings.intervalMove && (clearInterval(this.settings.intervalMove), this.settings.intervalMove = null), document.removeEventListener("click", this.documentClick), window.removeEventListener("resize", this.windowResize, !1), this.settings.openPosition === "auto" && window.removeEventListener("scroll", this.windowScroll, !1), document.removeEventListener("visibilitychange", this.windowVisibilityChange), this.store.setData([]), this.render.destroy(), this.select.destroy();
+  }
+  windowResize = C(() => {
+    !this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
+  });
+  // Event listener for window scrolling
+  windowScroll = C(() => {
+    !this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
+  });
+  // Event listener for document click
+  documentClick = (e) => {
+    this.settings.isOpen && e.target && !T(e.target, this.settings.id) && this.close(e.type);
+  };
+  // Event Listener for window visibility change
+  windowVisibilityChange = () => {
+    document.hidden && this.close();
+  };
 }
-
-export { SlimSelect as default };
+export {
+  g as Optgroup,
+  u as Option,
+  N as Render,
+  M as Select,
+  P as Settings,
+  k as Store,
+  I as default
+};
+//# sourceMappingURL=slimselect.es.js.map