slim-select 2.0.2 → 2.2.0

package/README.md

@@ -7,6 +7,10 @@ Advanced select dropdown
 [![Build Status](https://travis-ci.org/brianvoe/slim-select.svg?branch=master)](https://travis-ci.org/brianvoe/slim-select)
 [![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)
 
+## Support
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/brianvoe)
+
 <a href="https://www.buymeacoffee.com/brianvoe" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
 
 For documentation and examples on all features see: http://slimselectjs.com
@@ -34,6 +38,10 @@ For documentation and examples on all features see: http://slimselectjs.com
 - Performant
 - Typescript
 
+## Frameworks
+
+- Vue
+
 ## Installation
 
 ```bash

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export interface Config {
 export interface Events {
     search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial;
     searchFilter?: (option: Option, search: string) => boolean;
-    addable?: (value: string) => OptionOptional | string;
+    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string;
     beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
     afterChange?: (newVal: Option[]) => void;
     beforeOpen?: () => void;

package/dist/render.d.ts

@@ -3,7 +3,7 @@ import Store, { DataArray, Option, OptionOptional } from './store';
 export interface Callbacks {
     open: () => void;
     close: () => void;
-    addable?: (value: string) => OptionOptional | string;
+    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string;
     setSelected: (value: string[]) => void;
     addOption: (option: Option) => void;
     search: (search: string) => void;
@@ -68,11 +68,18 @@ export default class Render {
         list: string;
         optgroup: string;
         optgroupLabel: string;
-        optgroupSelectable: string;
+        optgroupLabelText: string;
+        optgroupActions: string;
+        optgroupSelectAll: string;
+        optgroupSelectAllBox: string;
+        optgroupSelectAllCheck: string;
+        optgroupClosable: string;
         option: string;
-        optionSelected: string;
         optionDelete: string;
         highlighted: string;
+        open: string;
+        close: string;
+        selected: string;
         error: string;
         disabled: string;
         hide: string;

package/dist/select.d.ts

@@ -1,8 +1,8 @@
-import { DataArray, Optgroup, Option } from './store';
+import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
 export default class Select {
     select: HTMLSelectElement;
     listen: boolean;
-    onSelectChange?: (data: DataArray) => void;
+    onSelectChange?: (data: DataArrayPartial) => void;
     onValueChange?: (value: string[]) => void;
     private observer;
     constructor(select: HTMLSelectElement);
@@ -11,7 +11,7 @@ export default class Select {
     hideUI(): void;
     showUI(): void;
     changeListen(on: boolean): void;
-    addSelectChangeListener(func: (data: DataArray) => void): void;
+    addSelectChangeListener(func: (data: DataArrayPartial) => void): void;
     removeSelectChangeListener(): void;
     addValueChangeListener(func: (value: string[]) => void): void;
     removeValueChangeListener(): void;
@@ -20,10 +20,10 @@ export default class Select {
     private addObserver;
     private connectObserver;
     private disconnectObserver;
-    getData(): DataArray;
-    getDataFromOptgroup(optgroup: HTMLOptGroupElement): Optgroup;
-    getSelectedValues(): string[];
+    getData(): DataArrayPartial;
+    getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
     getDataFromOption(option: HTMLOptionElement): Option;
+    getSelectedValues(): string[];
     setSelected(value: string[]): void;
     updateSelect(id?: string, style?: string, classes?: string[]): void;
     updateOptions(data: DataArray): void;

package/dist/settings.d.ts

@@ -8,8 +8,6 @@ export default class Settings {
     isOpen: boolean;
     triggerFocus: boolean;
     intervalMove: NodeJS.Timeout | null;
-    mainHeight: number;
-    contentHeight: number;
     isEnabled: boolean;
     alwaysOpen: boolean;
     showSearch: boolean;
@@ -25,7 +23,6 @@ export default class Settings {
     allowDeselect: boolean;
     hideSelected: boolean;
     showOptionTooltips: boolean;
-    selectByGroup: boolean;
     minSelected: number;
     maxSelected: number;
     timeoutDelay: number;

package/dist/slimselect.cjs.js

@@ -53,6 +53,8 @@ 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.closable = optgroup.closable || 'off';
         this.options = [];
         if (optgroup.options) {
             for (const o of optgroup.options) {
@@ -199,6 +201,14 @@ class Store {
         });
         return selectedIDs;
     }
+    getOptgroupByID(id) {
+        for (let dataObj of this.data) {
+            if (dataObj instanceof Optgroup && dataObj.id === id) {
+                return dataObj;
+            }
+        }
+        return null;
+    }
     getOptionByID(id) {
         let options = this.filter((opt) => {
             return opt.id === id;
@@ -233,7 +243,7 @@ class Store {
                         }
                     });
                     if (optOptions.length > 0) {
-                        dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }));
+                        dataSearch.push(new Optgroup(dataObj));
                     }
                 }
             }
@@ -274,11 +284,18 @@ class Render {
             list: 'ss-list',
             optgroup: 'ss-optgroup',
             optgroupLabel: 'ss-optgroup-label',
-            optgroupSelectable: 'ss-optgroup-selectable',
+            optgroupLabelText: 'ss-optgroup-label-text',
+            optgroupActions: 'ss-optgroup-actions',
+            optgroupSelectAll: 'ss-selectall',
+            optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
+            optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
+            optgroupClosable: 'ss-closable',
             option: 'ss-option',
-            optionSelected: 'ss-option-selected',
             optionDelete: 'M10,10 L90,90 M10,90 L90,10',
             highlighted: 'ss-highlighted',
+            open: 'ss-open',
+            close: 'ss-close',
+            selected: 'ss-selected',
             error: 'ss-error',
             disabled: 'ss-disabled',
             hide: 'ss-hide',
@@ -288,8 +305,6 @@ class Render {
         this.callbacks = callbacks;
         this.main = this.mainDiv();
         this.content = this.contentDiv();
-        this.renderValues();
-        this.renderOptions(this.store.getData());
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -397,7 +412,21 @@ class Render {
             if (!this.settings.isEnabled) {
                 return;
             }
-            this.callbacks.setSelected(['']);
+            let shouldDelete = true;
+            const before = this.store.getSelectedOptions();
+            const after = [];
+            if (this.callbacks.beforeChange) {
+                shouldDelete = this.callbacks.beforeChange(after, before) === true;
+            }
+            if (shouldDelete) {
+                this.callbacks.setSelected(['']);
+                if (this.settings.closeOnSelect) {
+                    this.callbacks.close();
+                }
+                if (this.callbacks.afterChange) {
+                    this.callbacks.afterChange(after);
+                }
+            }
         };
         const deselectSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         deselectSvg.setAttribute('viewBox', '0 0 100 100');
@@ -703,23 +732,48 @@ class Render {
                     this.content.search.input.focus();
                     return;
                 }
+                const runFinish = (oo) => {
+                    let newOption = new Option(oo);
+                    this.callbacks.addOption(newOption);
+                    if (this.settings.isMultiple) {
+                        let values = this.store.getSelected();
+                        values.push(newOption.value);
+                        this.callbacks.setSelected(values);
+                    }
+                    else {
+                        this.callbacks.setSelected([newOption.value]);
+                    }
+                    this.callbacks.search('');
+                    if (this.settings.closeOnSelect) {
+                        setTimeout(() => {
+                            this.callbacks.close();
+                        }, 100);
+                    }
+                };
                 const addableValue = this.callbacks.addable(inputValue);
-                if (typeof addableValue === 'string') {
-                    this.callbacks.addOption(new Option({
+                if (addableValue instanceof Promise) {
+                    addableValue.then((value) => {
+                        if (typeof value === 'string') {
+                            runFinish({
+                                text: value,
+                                value: value,
+                            });
+                        }
+                        else {
+                            runFinish(value);
+                        }
+                    });
+                }
+                else if (typeof addableValue === 'string') {
+                    runFinish({
                         text: addableValue,
                         value: addableValue,
-                    }));
+                    });
                 }
                 else {
-                    this.callbacks.addOption(new Option(addableValue));
-                }
-                this.callbacks.setSelected([inputValue]);
-                this.callbacks.search('');
-                if (this.settings.closeOnSelect) {
-                    setTimeout(() => {
-                        this.callbacks.close();
-                    }, 100);
+                    runFinish(addableValue);
                 }
+                return;
             };
             main.appendChild(addable);
             searchReturn.addable = {
@@ -763,25 +817,23 @@ class Render {
         }
         for (let i = 0; i < options.length; i++) {
             if (options[i].classList.contains(this.classes.highlighted)) {
-                options[i].classList.remove(this.classes.highlighted);
-                if (dir === 'down') {
-                    if (i + 1 < options.length) {
-                        options[i + 1].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[i + 1]);
-                    }
-                    else {
-                        options[0].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[0]);
+                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();
                     }
                 }
-                else {
-                    if (i - 1 >= 0) {
-                        options[i - 1].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[i - 1]);
-                    }
-                    else {
-                        options[options.length - 1].classList.add(this.classes.highlighted);
-                        this.ensureElementInView(this.content.list, options[options.length - 1]);
+                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;
@@ -826,18 +878,95 @@ class Render {
                 optgroupEl.classList.add(this.classes.optgroup);
                 const optgroupLabel = document.createElement('div');
                 optgroupLabel.classList.add(this.classes.optgroupLabel);
-                optgroupLabel.innerHTML = d.label;
-                if (this.settings.selectByGroup && this.settings.isMultiple) {
-                    optgroupLabel.classList.add(this.classes.optgroupSelectable);
+                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 = 'Select All';
+                    selectAll.appendChild(selectAllText);
+                    const selectAllSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    selectAllSvg.setAttribute('viewBox', '0 0 100 100');
+                    selectAll.appendChild(selectAllSvg);
+                    const selectAllBox = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    selectAllBox.setAttribute('d', this.classes.optgroupSelectAllBox);
+                    selectAllSvg.appendChild(selectAllBox);
+                    const selectAllCheck = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    selectAllCheck.setAttribute('d', this.classes.optgroupSelectAllCheck);
+                    selectAllSvg.appendChild(selectAllCheck);
+                    selectAll.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const currentSelected = this.store.getSelected();
+                        if (allSelected) {
+                            const newSelected = currentSelected.filter((s) => {
+                                for (const o of d.options) {
+                                    if (s === o.value) {
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            });
+                            this.callbacks.setSelected(newSelected);
+                            return;
+                        }
+                        else {
+                            const newSelected = currentSelected.concat(d.options.map((o) => o.value));
+                            this.callbacks.setSelected(newSelected);
+                        }
+                    });
+                    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');
+                    optgroupClosableArrow.setAttribute('d', this.classes.arrow);
+                    optgroupClosableSvg.appendChild(optgroupClosableArrow);
+                    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();
-                        for (const childEl of optgroupEl.children) {
-                            if (childEl.className.indexOf(this.classes.option) !== -1) {
-                                childEl.click();
-                            }
+                        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) {
@@ -889,10 +1018,10 @@ class Render {
             optionEl.classList.add(this.classes.hide);
         }
         if (option.selected) {
-            optionEl.classList.add(this.classes.optionSelected);
+            optionEl.classList.add(this.classes.selected);
         }
         else {
-            optionEl.classList.remove(this.classes.optionSelected);
+            optionEl.classList.remove(this.classes.selected);
         }
         optionEl.addEventListener('click', (e) => {
             e.preventDefault();
@@ -1075,7 +1204,9 @@ class Select {
     }
     observeWrapper(mutations) {
         if (this.onSelectChange) {
+            this.changeListen(false);
             this.onSelectChange(this.getData());
+            this.changeListen(true);
         }
     }
     addObserver() {
@@ -1083,15 +1214,12 @@ class Select {
             this.disconnectObserver();
             this.observer = null;
         }
-        this.observer = new MutationObserver(this.observeWrapper);
+        this.observer = new MutationObserver(this.observeWrapper.bind(this));
     }
     connectObserver() {
         if (this.observer) {
             this.observer.observe(this.select, {
-                attributes: true,
                 childList: true,
-                characterData: true,
-                subtree: true,
             });
         }
     }
@@ -1115,8 +1243,10 @@ class Select {
     }
     getDataFromOptgroup(optgroup) {
         let data = {
-            id: '',
+            id: (optgroup.dataset ? optgroup.dataset.id : false) || '',
             label: optgroup.label,
+            selectAll: optgroup.dataset ? optgroup.dataset.selectall === 'true' : false,
+            closable: optgroup.dataset ? optgroup.dataset.closable : 'off',
             options: [],
         };
         const options = optgroup.childNodes;
@@ -1127,6 +1257,22 @@ class Select {
         }
         return data;
     }
+    getDataFromOption(option) {
+        return {
+            id: (option.dataset ? option.dataset.id : false) || '',
+            value: option.value,
+            text: option.text,
+            html: option.innerHTML,
+            selected: option.selected,
+            display: option.style.display === 'none' ? false : true,
+            disabled: option.disabled,
+            mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
+            placeholder: option.dataset.placeholder === 'true',
+            class: option.className,
+            style: option.style.cssText,
+            data: option.dataset,
+        };
+    }
     getSelectedValues() {
         let values = [];
         const options = this.select.childNodes;
@@ -1151,22 +1297,6 @@ class Select {
         }
         return values;
     }
-    getDataFromOption(option) {
-        return {
-            id: (option.dataset ? option.dataset.id : false) || generateID(),
-            value: option.value,
-            text: option.text,
-            html: option.innerHTML,
-            selected: option.selected,
-            display: option.style.display === 'none' ? false : true,
-            disabled: option.disabled,
-            mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
-            placeholder: option.dataset.placeholder === 'true',
-            class: option.className,
-            style: option.style.cssText,
-            data: option.dataset,
-        };
-    }
     setSelected(value) {
         const options = this.select.childNodes;
         for (const o of options) {
@@ -1221,6 +1351,12 @@ class Select {
         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));
@@ -1277,8 +1413,6 @@ class Settings {
         this.isOpen = false;
         this.triggerFocus = true;
         this.intervalMove = null;
-        this.mainHeight = 30;
-        this.contentHeight = 0;
         if (!settings) {
             settings = {};
         }
@@ -1300,7 +1434,6 @@ class Settings {
         this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
         this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
         this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-        this.selectByGroup = settings.selectByGroup !== undefined ? settings.selectByGroup : false;
         this.minSelected = settings.minSelected || 0;
         this.maxSelected = settings.maxSelected || 1000;
         this.timeoutDelay = settings.timeoutDelay || 200;
@@ -1407,6 +1540,8 @@ class SlimSelect {
             afterChange: this.events.afterChange,
         };
         this.render = new Render(this.settings, this.store, callbacks);
+        this.render.renderValues();
+        this.render.renderOptions(this.store.getData());
         if (this.selectEl.parentNode) {
             this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
         }

package/dist/slimselect.css

@@ -1 +1 @@
-:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #8a8a8a;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-border-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color)}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);font-weight:bold}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-optgroup-selectable{cursor:pointer}.ss-content .ss-list .ss-optgroup-selectable:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option{padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--ss-disabled-color);background-color:var(--ss-bg-color)}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:var(--ss-font-color);background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
+:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #8a8a8a;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing)}.ss-main:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-main.ss-disabled{background-color:var(--ss-border-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color)}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{display:flex;align-self:center;justify-content:flex-end;flex:0 1 auto;width:8px;height:8px;margin:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-open-above{opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-primary-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--ss-disabled-color);background-color:var(--ss-bg-color)}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-font-color);background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */

package/dist/slimselect.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,qCACA,6BACA,2BACA,8BACA,0BAGA,uBACA,2BAGA,oBACA,oBACA,oBAGA,4BACA,wBAIF,sBACE,GACE,mBACA,UAEF,KACE,mBACA,WAGJ,uBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,SACE,wBAIF,SACE,aACA,mBACA,kBACA,iBACA,2BACA,iCACA,WACA,4BACA,eACA,wCACA,sCACA,oCACA,UACA,sBACA,uDAEA,eACE,2CAGF,qBACE,wCACA,mBAGE,6CACE,2BAIA,2DACE,mBAMR,uBACE,2BACA,4BAEF,uBACE,8BACA,+BAGF,oBACE,oBACA,eACA,wBACA,cAEA,oCACE,aACA,wFACA,yBACA,gBACA,mBACA,WACA,uCACA,gBACA,uBACA,mBAGF,+BACE,aACA,yCAGF,8BACE,aACA,iBACA,mBACA,kBACA,yCACA,sCACA,0BACA,8CACA,mCACA,yBAEA,2CACE,2BACA,8CACA,mCAGF,6CACE,eACA,yBACA,cACA,gDAGF,+CACE,aACA,mBACA,2BACA,0BACA,gDACA,eACA,yCAEA,mDACE,2BACA,0BAEA,wDACE,UACA,0BACA,gBACA,qBACA,sBAOV,sBACE,aACA,kBACA,yBACA,cACA,UACA,WACA,mDAEA,0BACE,UACA,WAEA,+BACE,UACA,4BACA,gBACA,qBACA,sBAKN,mBACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,wBACE,UACA,4BACA,gBACA,qBACA,sBACA,oCACA,sCAMN,YACE,kBACA,aACA,YACA,sBACA,WACA,oCACA,sBACA,wCACA,oCACA,mFACA,UACA,oBACA,gBACA,cAEA,wBACE,kBACA,YAGF,0BACE,UACA,oBACA,+BACA,+CACA,gDAGF,0BACE,UACA,oBACA,4BACA,kDACA,mDAGF,uBACE,cACA,aACA,mBACA,wFAEA,6BACE,oBACA,kBACA,oBACA,cACA,WACA,cACA,gDACA,SACA,wCACA,sCACA,oCACA,UACA,gBACA,sBAEA,0CACE,uCACA,sBAGF,mCACE,2CAIJ,mCACE,oBACA,uBACA,mBACA,eACA,cACA,YACA,iCACA,wCACA,sCAEA,uCACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,4CACE,UACA,4BACA,gBACA,qBACA,sBAMR,qBACE,cACA,YACA,kBACA,gBAEA,+BACE,4BACA,4BAGF,mCACE,2BACA,4BAIA,qDACE,wFACA,iBAGF,6CACE,gGAIJ,6CACE,eAEA,mDACE,yBACA,yCAIJ,gCACE,wFACA,eACA,iBAEA,qFAEE,yBACA,yCAGF,4CACE,mBACA,+BACA,oCAGF,qEACE,2BACA,2CAGF,qDACE","file":"slimselect.css"}
+{"version":3,"sourceRoot":"","sources":["../src/slim-select/slimselect.scss"],"names":[],"mappings":"AAAA,MAEE,4BACA,uBACA,yBACA,qCACA,6BACA,2BACA,8BACA,4BACA,0BAGA,uBACA,2BAGA,oBACA,oBACA,oBAGA,4BACA,wBAIF,sBACE,GACE,mBACA,UAEF,KACE,mBACA,WAGJ,uBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,SACE,wBAIF,SACE,aACA,mBACA,kBACA,iBACA,2BACA,iCACA,WACA,4BACA,eACA,wCACA,sCACA,oCACA,UACA,sBACA,uDAEA,eACE,2CAGF,qBACE,wCACA,mBAGE,6CACE,2BAIA,2DACE,mBAMR,uBACE,2BACA,4BAEF,uBACE,8BACA,+BAGF,oBACE,oBACA,eACA,wBACA,cAEA,oCACE,aACA,wFACA,yBACA,gBACA,mBACA,WACA,uCACA,gBACA,uBACA,mBAGF,+BACE,aACA,yCAGF,8BACE,aACA,iBACA,mBACA,kBACA,yCACA,sCACA,0BACA,8CACA,mCACA,yBAEA,2CACE,2BACA,8CACA,mCAGF,6CACE,eACA,yBACA,cACA,gDAGF,+CACE,aACA,mBACA,2BACA,0BACA,gDACA,eACA,yCAEA,mDACE,2BACA,0BAEA,wDACE,UACA,0BACA,gBACA,qBACA,sBAOV,sBACE,aACA,kBACA,yBACA,cACA,UACA,WACA,mDAEA,0BACE,UACA,WAEA,+BACE,UACA,4BACA,gBACA,qBACA,sBAKN,mBACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,wBACE,UACA,4BACA,gBACA,qBACA,sBACA,oCACA,sCAMN,YACE,kBACA,aACA,YACA,sBACA,WACA,oCACA,sBACA,wCACA,oCACA,mFACA,UACA,oBACA,gBACA,cAEA,wBACE,kBACA,YAGF,0BACE,UACA,oBACA,+BACA,+CACA,gDAGF,0BACE,UACA,oBACA,4BACA,kDACA,mDAGF,uBACE,cACA,aACA,mBACA,wFAEA,6BACE,oBACA,kBACA,oBACA,cACA,WACA,cACA,gDACA,SACA,wCACA,sCACA,oCACA,UACA,gBACA,sBAEA,0CACE,uCACA,sBAGF,mCACE,2CAIJ,mCACE,oBACA,uBACA,mBACA,eACA,cACA,YACA,iCACA,wCACA,sCAEA,uCACE,aACA,mBACA,yBACA,cACA,WACA,YACA,yDAEA,4CACE,UACA,4BACA,gBACA,qBACA,sBAMR,qBACE,cACA,YACA,kBACA,gBAEA,+BACE,4BACA,4BAGF,mCACE,2BACA,4BAYE,sDACE,wBAIJ,qDACE,aACA,mBACA,mBACA,8BACA,wFAEA,6EACE,cACA,iBACA,2BAIF,oEACE,eAGF,0EACE,cACA,aACA,mBACA,mBACA,uBACA,wBAEA,wFACE,cACA,aACA,mBACA,eAEA,8FACE,WAKE,6GACE,6BAKN,6FACE,cACA,aACA,mBACA,uBACA,cACA,kBACA,kCAGF,4FACE,cACA,WACA,YAEA,iGACE,UACA,+BACA,qBACA,sBAGF,wGACE,eAEF,uGACE,gBAKN,uFACE,cACA,aACA,mBACA,eAEA,iGACE,cACA,WACA,YAEA,sGACE,UACA,4BACA,gBACA,qBACA,sBACA,oCACA,sCAOV,6CACE,gGAIJ,gCACE,aACA,wFACA,eACA,iBAEA,qFAEE,yBACA,yCAGF,4CACE,mBACA,+BACA,oCAGF,8DACE,2BACA,2CAGF,qDACE","file":"slimselect.css"}