slim-select 2.0.2 → 2.2.0

package/dist/slimselect.global.js

@@ -54,6 +54,8 @@ var SlimSelect = (function () {
         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) {
@@ -200,6 +202,14 @@ var SlimSelect = (function () {
             });
             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;
@@ -234,7 +244,7 @@ var SlimSelect = (function () {
                             }
                         });
                         if (optOptions.length > 0) {
-                            dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }));
+                            dataSearch.push(new Optgroup(dataObj));
                         }
                     }
                 }
@@ -275,11 +285,18 @@ var SlimSelect = (function () {
                 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',
@@ -289,8 +306,6 @@ var SlimSelect = (function () {
             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() {
@@ -398,7 +413,21 @@ var SlimSelect = (function () {
                 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');
@@ -704,23 +733,48 @@ var SlimSelect = (function () {
                         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 = {
@@ -764,25 +818,23 @@ var SlimSelect = (function () {
             }
             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;
@@ -827,18 +879,95 @@ var SlimSelect = (function () {
                     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) {
@@ -890,10 +1019,10 @@ var SlimSelect = (function () {
                 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();
@@ -1076,7 +1205,9 @@ var SlimSelect = (function () {
         }
         observeWrapper(mutations) {
             if (this.onSelectChange) {
+                this.changeListen(false);
                 this.onSelectChange(this.getData());
+                this.changeListen(true);
             }
         }
         addObserver() {
@@ -1084,15 +1215,12 @@ var SlimSelect = (function () {
                 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,
                 });
             }
         }
@@ -1116,8 +1244,10 @@ var SlimSelect = (function () {
         }
         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;
@@ -1128,6 +1258,22 @@ var SlimSelect = (function () {
             }
             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;
@@ -1152,22 +1298,6 @@ var SlimSelect = (function () {
             }
             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) {
@@ -1222,6 +1352,12 @@ var SlimSelect = (function () {
             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));
@@ -1278,8 +1414,6 @@ var SlimSelect = (function () {
             this.isOpen = false;
             this.triggerFocus = true;
             this.intervalMove = null;
-            this.mainHeight = 30;
-            this.contentHeight = 0;
             if (!settings) {
                 settings = {};
             }
@@ -1301,7 +1435,6 @@ var SlimSelect = (function () {
             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;
@@ -1408,6 +1541,8 @@ var SlimSelect = (function () {
                 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);
             }