slim-select 2.13.1 → 3.0.0

package/dist/slimselect.umd.js

@@ -1,2036 +1 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.SlimSelect = factory());
-})(this, (function () { 'use strict';
-
-    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';
-        }
-    }
-
-    function generateID() {
-        return Math.random().toString(36).substring(2, 10);
-    }
-    function hasClassInTree(element, className) {
-        function hasClass(e, c) {
-            if (c && e && e.classList && e.classList.contains(c)) {
-                return e;
-            }
-            if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
-                return e;
-            }
-            return null;
-        }
-        function parentByClass(e, c) {
-            if (!e || e === document) {
-                return null;
-            }
-            else if (hasClass(e, c)) {
-                return e;
-            }
-            else {
-                return parentByClass(e.parentNode, c);
-            }
-        }
-        return hasClass(element, className) || parentByClass(element, className);
-    }
-    function debounce(func, wait = 50, immediate = false) {
-        let timeout;
-        return function (...args) {
-            const context = self;
-            const later = () => {
-                timeout = null;
-                if (!immediate) {
-                    func.apply(context, args);
-                }
-            };
-            const callNow = immediate && !timeout;
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-            if (callNow) {
-                func.apply(context, args);
-            }
-        };
-    }
-    function isEqual(a, b) {
-        return JSON.stringify(a) === JSON.stringify(b);
-    }
-    function kebabCase(str) {
-        const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
-        return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
-    }
-
-    class Optgroup {
-        constructor(optgroup) {
-            this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
-            this.label = optgroup.label || '';
-            this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll;
-            this.selectAllText = optgroup.selectAllText || 'Select All';
-            this.closable = optgroup.closable || 'off';
-            this.options = [];
-            if (optgroup.options) {
-                for (const o of optgroup.options) {
-                    this.options.push(new Option(o));
-                }
-            }
-        }
-    }
-    class Option {
-        constructor(option) {
-            this.id = !option.id || option.id === '' ? generateID() : option.id;
-            this.value = option.value === undefined ? option.text : option.value;
-            this.text = option.text || '';
-            this.html = option.html || '';
-            this.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 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) {
-                    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;
-        }
-    }
-
-    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);
-            }
-            else {
-                deselectButton.classList.add(hideClass);
-            }
-        }
-    }
-
-    class Select {
-        constructor(select) {
-            this.listen = false;
-            this.observer = null;
-            this.select = select;
-            this.valueChange = this.valueChange.bind(this);
-            this.select.addEventListener('change', this.valueChange, {
-                passive: true
-            });
-            this.observer = new MutationObserver(this.observeCall.bind(this));
-            this.changeListen(true);
-        }
-        enable() {
-            this.select.disabled = false;
-        }
-        disable() {
-            this.select.disabled = true;
-        }
-        hideUI() {
-            this.select.tabIndex = -1;
-            this.select.style.display = 'none';
-            this.select.setAttribute('aria-hidden', 'true');
-        }
-        showUI() {
-            this.select.removeAttribute('tabindex');
-            this.select.style.display = '';
-            this.select.removeAttribute('aria-hidden');
-        }
-        changeListen(listen) {
-            this.listen = listen;
-            if (listen) {
-                if (this.observer) {
-                    this.observer.observe(this.select, {
-                        subtree: true,
-                        childList: true,
-                        attributes: true
-                    });
-                }
-            }
-            if (!listen) {
-                if (this.observer) {
-                    this.observer.disconnect();
-                }
-            }
-        }
-        valueChange(ev) {
-            if (this.listen && this.onValueChange) {
-                this.onValueChange(this.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 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 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();
-        }
-    }
-
-    return SlimSelect;
-
-}));
+(function(m,S){typeof exports=="object"&&typeof module<"u"?S(exports):typeof define=="function"&&define.amd?define(["exports"],S):(m=typeof globalThis<"u"?globalThis:m||self,S(m.SlimSelect={}))})(this,function(m){"use strict";class S{main;placeholder;values;single;max;value;valueText;valueDelete;valueOut;deselect;deselectPath;arrow;arrowClose;arrowOpen;content;contentOpen;dirAbove;dirBelow;search;searchHighlighter;searching;addable;addablePath;list;optgroup;optgroupLabel;optgroupLabelText;optgroupActions;optgroupSelectAll;optgroupSelectAllBox;optgroupSelectAllCheck;optgroupClosable;option;optionDelete;highlighted;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 y(){return Math.random().toString(36).substring(2,10)}function N(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 L(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 x(p,e){return JSON.stringify(p)===JSON.stringify(e)}function M(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 u{id;value;text;html;defaultSelected;selected;display;disabled;placeholder;class;style;data;mandatory;constructor(e){this.id=!e.id||e.id===""?y():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 g{id;label;selectAll;selectAllText;closable;options;constructor(e){if(this.id=!e.id||e.id===""?y():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 A{selectType="single";data=[];selectedOrder=[];constructor(e,t){this.selectType=e,this.setData(t)}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}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}}}n||l.push(a)}),this.data=[...l,...s]}else this.data=s;this.selectType==="single"&&this.setSelectedBy("id",this.getSelected())}getData(){return this.filter(null,!0)}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)))}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}search(e,t){return e=e.trim(),e===""?this.getData():this.filter(s=>t(s,e),!0)}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}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 E{settings;store;callbacks;lastSelectedOption;main;content;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)}enable(){this.main.main.classList.remove(this.classes.disabled),this.main.main.setAttribute("aria-disabled","false"),this.content.search.input.disabled=!1}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;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{const d=this.store.getFirstOption(),b=d?d.id:"";this.callbacks.setSelected(b,!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}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=L(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;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))}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)}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)}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 b of s.options)if(!b.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",b=>{b.preventDefault(),b.stopPropagation();const v=this.store.getSelected();if(c){const O=v.filter(C=>{for(const w of s.options)if(C===w.id)return!1;return!0});this.callbacks.setSelected(O,!0);return}else{let O=s.options.map(w=>w.id).filter(w=>w!==void 0);const C=v.concat(O);for(const w of s.options)w.id&&!this.store.getOptionByID(w.id)&&this.callbacks.addOption(new u(w));this.callbacks.setSelected(C,!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)}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(),b=d.findIndex(O=>O.id===this.lastSelectedOption.id),v=d.findIndex(O=>O.id===e.id);if(b>=0&&v>=0){const O=Math.min(b,v),C=Math.max(b,v),k=d.slice(O,C+1).filter(I=>!c.find(B=>B.id===I.id));c.length+k.length<=this.settings.maxSelected?r=c.concat(k):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,b)=>{if(d&&r.test(d)){const v=document.createElement("mark");v.className=s,v.textContent=d,h.appendChild(v)}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"}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 T{select;onValueChange;onClassChange;onDisabledChange;onOptionsChange;listen=!1;observer=null;constructor(e){this.select=e,this.valueChange=this.valueChange.bind(this),this.select.addEventListener("change",this.valueChange,{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,childList:!0,attributes:!0}),e||this.observer&&this.observer.disconnect()}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))}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}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)}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-"+M(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 D{id="";style="";class=[];isMultiple=!1;isOpen=!1;isFullOpen=!1;intervalMove=null;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-"+y(),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 P{selectEl;settings;cssClasses;select;store;render;openTimeout=null;closeTimeout=null;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 D(e.settings),this.cssClasses=new S(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]=L(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 T(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 A(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 E(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}enable(){this.settings.disabled=!1,this.select.enable(),this.render.enable()}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&&!x(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)}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&&!x(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&&!x(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))}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=L(()=>{!this.settings.isOpen&&!this.settings.isFullOpen||this.render.moveContent()});windowScroll=L(()=>{!this.settings.isOpen&&!this.settings.isFullOpen||this.render.moveContent()});documentClick=e=>{this.settings.isOpen&&e.target&&!N(e.target,this.settings.id)&&this.close(e.type)};windowVisibilityChange=()=>{document.hidden&&this.close()}}m.Optgroup=g,m.Option=u,m.Render=E,m.Select=T,m.Settings=D,m.Store=A,m.default=P,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});