slim-select 2.2.0 → 2.2.2

package/dist/helpers.d.ts

@@ -1,4 +1,5 @@
 export declare function generateID(): string;
 export declare function hasClassInTree(element: HTMLElement, className: string): any;
 export declare function debounce(func: (...params: any[]) => void, wait?: number, immediate?: boolean): () => void;
+export declare function isEqual(a: any, b: any): boolean;
 export declare function kebabCase(str: string): string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import Settings, { SettingsPartial } from './settings';
 import Render from './render';
 import Select from './select';
-import Settings, { SettingsPartial } from './settings';
 import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store';
 export interface Config {
     select: string | Element;

package/dist/select.d.ts

@@ -15,7 +15,7 @@ export default class Select {
     removeSelectChangeListener(): void;
     addValueChangeListener(func: (value: string[]) => void): void;
     removeValueChangeListener(): void;
-    valueChange(ev: Event): any;
+    valueChange(ev: Event): boolean;
     private observeWrapper;
     private addObserver;
     private connectObserver;

package/dist/slimselect.cjs.js

@@ -44,11 +44,50 @@ function debounce(func, wait = 50, immediate = false) {
         }
     };
 }
+function isEqual(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
 function kebabCase(str) {
     const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
     return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
 }
 
+class Settings {
+    constructor(settings) {
+        this.id = '';
+        this.style = '';
+        this.class = [];
+        this.isMultiple = false;
+        this.isOpen = false;
+        this.triggerFocus = true;
+        this.intervalMove = null;
+        if (!settings) {
+            settings = {};
+        }
+        this.id = 'ss-' + generateID();
+        this.style = settings.style || '';
+        this.class = settings.class || [];
+        this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
+        this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
+        this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
+        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 || 'Select Value';
+        this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
+        this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
+        this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
+        this.minSelected = settings.minSelected || 0;
+        this.maxSelected = settings.maxSelected || 1000;
+        this.timeoutDelay = settings.timeoutDelay || 200;
+    }
+}
+
 class Optgroup {
     constructor(optgroup) {
         this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
@@ -942,9 +981,12 @@ class Render {
                     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') {
+                    if (d.options.some((o) => o.selected)) {
+                        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);
                     }
@@ -1191,16 +1233,19 @@ class Select {
     }
     addValueChangeListener(func) {
         this.onValueChange = func;
-        this.select.addEventListener('change', this.valueChange.bind(this));
+        this.select.addEventListener('change', this.valueChange.bind(this), {
+            passive: true,
+        });
     }
     removeValueChangeListener() {
         this.onValueChange = undefined;
         this.select.removeEventListener('change', this.valueChange.bind(this));
     }
     valueChange(ev) {
-        if (this.onValueChange) {
+        if (this.listen && this.onValueChange) {
             this.onValueChange(this.getSelectedValues());
         }
+        return true;
     }
     observeWrapper(mutations) {
         if (this.onSelectChange) {
@@ -1345,6 +1390,7 @@ class Select {
                 this.select.appendChild(this.createOption(d));
             }
         }
+        this.select.dispatchEvent(new Event('change'));
         this.changeListen(true);
     }
     createOptgroup(optgroup) {
@@ -1404,42 +1450,6 @@ class Select {
     }
 }
 
-class Settings {
-    constructor(settings) {
-        this.id = '';
-        this.style = '';
-        this.class = [];
-        this.isMultiple = false;
-        this.isOpen = false;
-        this.triggerFocus = true;
-        this.intervalMove = null;
-        if (!settings) {
-            settings = {};
-        }
-        this.id = 'ss-' + generateID();
-        this.style = settings.style || '';
-        this.class = settings.class || [];
-        this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
-        this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
-        this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
-        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 || 'Select Value';
-        this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
-        this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
-        this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-        this.minSelected = settings.minSelected || 0;
-        this.maxSelected = settings.maxSelected || 1000;
-        this.timeoutDelay = settings.timeoutDelay || 200;
-    }
-}
-
 class SlimSelect {
     constructor(config) {
         this.events = {
@@ -1572,6 +1582,7 @@ class SlimSelect {
         return this.store.getData();
     }
     setData(data) {
+        const selected = this.store.getSelected();
         const err = this.store.validateDataArray(data);
         if (err) {
             if (this.events.error) {
@@ -1584,23 +1595,34 @@ class SlimSelect {
         this.select.updateOptions(dataClean);
         this.render.renderValues();
         this.render.renderOptions(dataClean);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     getSelected() {
         return this.store.getSelected();
     }
     setSelected(value) {
+        const selected = this.store.getSelected();
         this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
         this.render.renderOptions(data);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     addOption(option) {
+        const selected = this.store.getSelected();
         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.isEnabled || this.settings.isOpen) {

package/dist/slimselect.es.js

@@ -42,11 +42,50 @@ function debounce(func, wait = 50, immediate = false) {
         }
     };
 }
+function isEqual(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
 function kebabCase(str) {
     const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
     return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
 }
 
+class Settings {
+    constructor(settings) {
+        this.id = '';
+        this.style = '';
+        this.class = [];
+        this.isMultiple = false;
+        this.isOpen = false;
+        this.triggerFocus = true;
+        this.intervalMove = null;
+        if (!settings) {
+            settings = {};
+        }
+        this.id = 'ss-' + generateID();
+        this.style = settings.style || '';
+        this.class = settings.class || [];
+        this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
+        this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
+        this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
+        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 || 'Select Value';
+        this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
+        this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
+        this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
+        this.minSelected = settings.minSelected || 0;
+        this.maxSelected = settings.maxSelected || 1000;
+        this.timeoutDelay = settings.timeoutDelay || 200;
+    }
+}
+
 class Optgroup {
     constructor(optgroup) {
         this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
@@ -940,9 +979,12 @@ class Render {
                     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') {
+                    if (d.options.some((o) => o.selected)) {
+                        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);
                     }
@@ -1189,16 +1231,19 @@ class Select {
     }
     addValueChangeListener(func) {
         this.onValueChange = func;
-        this.select.addEventListener('change', this.valueChange.bind(this));
+        this.select.addEventListener('change', this.valueChange.bind(this), {
+            passive: true,
+        });
     }
     removeValueChangeListener() {
         this.onValueChange = undefined;
         this.select.removeEventListener('change', this.valueChange.bind(this));
     }
     valueChange(ev) {
-        if (this.onValueChange) {
+        if (this.listen && this.onValueChange) {
             this.onValueChange(this.getSelectedValues());
         }
+        return true;
     }
     observeWrapper(mutations) {
         if (this.onSelectChange) {
@@ -1343,6 +1388,7 @@ class Select {
                 this.select.appendChild(this.createOption(d));
             }
         }
+        this.select.dispatchEvent(new Event('change'));
         this.changeListen(true);
     }
     createOptgroup(optgroup) {
@@ -1402,42 +1448,6 @@ class Select {
     }
 }
 
-class Settings {
-    constructor(settings) {
-        this.id = '';
-        this.style = '';
-        this.class = [];
-        this.isMultiple = false;
-        this.isOpen = false;
-        this.triggerFocus = true;
-        this.intervalMove = null;
-        if (!settings) {
-            settings = {};
-        }
-        this.id = 'ss-' + generateID();
-        this.style = settings.style || '';
-        this.class = settings.class || [];
-        this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
-        this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
-        this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
-        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 || 'Select Value';
-        this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
-        this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
-        this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-        this.minSelected = settings.minSelected || 0;
-        this.maxSelected = settings.maxSelected || 1000;
-        this.timeoutDelay = settings.timeoutDelay || 200;
-    }
-}
-
 class SlimSelect {
     constructor(config) {
         this.events = {
@@ -1570,6 +1580,7 @@ class SlimSelect {
         return this.store.getData();
     }
     setData(data) {
+        const selected = this.store.getSelected();
         const err = this.store.validateDataArray(data);
         if (err) {
             if (this.events.error) {
@@ -1582,23 +1593,34 @@ class SlimSelect {
         this.select.updateOptions(dataClean);
         this.render.renderValues();
         this.render.renderOptions(dataClean);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     getSelected() {
         return this.store.getSelected();
     }
     setSelected(value) {
+        const selected = this.store.getSelected();
         this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
         this.render.renderOptions(data);
+        if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+            this.events.afterChange(this.store.getSelectedOptions());
+        }
     }
     addOption(option) {
+        const selected = this.store.getSelected();
         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.isEnabled || this.settings.isOpen) {

package/dist/slimselect.global.js

@@ -45,11 +45,50 @@ var SlimSelect = (function () {
             }
         };
     }
+    function isEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
     function kebabCase(str) {
         const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
         return str[0] === str[0].toUpperCase() ? result.substring(1) : result;
     }
 
+    class Settings {
+        constructor(settings) {
+            this.id = '';
+            this.style = '';
+            this.class = [];
+            this.isMultiple = false;
+            this.isOpen = false;
+            this.triggerFocus = true;
+            this.intervalMove = null;
+            if (!settings) {
+                settings = {};
+            }
+            this.id = 'ss-' + generateID();
+            this.style = settings.style || '';
+            this.class = settings.class || [];
+            this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
+            this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
+            this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
+            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 || 'Select Value';
+            this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
+            this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
+            this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
+            this.minSelected = settings.minSelected || 0;
+            this.maxSelected = settings.maxSelected || 1000;
+            this.timeoutDelay = settings.timeoutDelay || 200;
+        }
+    }
+
     class Optgroup {
         constructor(optgroup) {
             this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id;
@@ -943,9 +982,12 @@ var SlimSelect = (function () {
                         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') {
+                        if (d.options.some((o) => o.selected)) {
+                            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);
                         }
@@ -1192,16 +1234,19 @@ var SlimSelect = (function () {
         }
         addValueChangeListener(func) {
             this.onValueChange = func;
-            this.select.addEventListener('change', this.valueChange.bind(this));
+            this.select.addEventListener('change', this.valueChange.bind(this), {
+                passive: true,
+            });
         }
         removeValueChangeListener() {
             this.onValueChange = undefined;
             this.select.removeEventListener('change', this.valueChange.bind(this));
         }
         valueChange(ev) {
-            if (this.onValueChange) {
+            if (this.listen && this.onValueChange) {
                 this.onValueChange(this.getSelectedValues());
             }
+            return true;
         }
         observeWrapper(mutations) {
             if (this.onSelectChange) {
@@ -1346,6 +1391,7 @@ var SlimSelect = (function () {
                     this.select.appendChild(this.createOption(d));
                 }
             }
+            this.select.dispatchEvent(new Event('change'));
             this.changeListen(true);
         }
         createOptgroup(optgroup) {
@@ -1405,42 +1451,6 @@ var SlimSelect = (function () {
         }
     }
 
-    class Settings {
-        constructor(settings) {
-            this.id = '';
-            this.style = '';
-            this.class = [];
-            this.isMultiple = false;
-            this.isOpen = false;
-            this.triggerFocus = true;
-            this.intervalMove = null;
-            if (!settings) {
-                settings = {};
-            }
-            this.id = 'ss-' + generateID();
-            this.style = settings.style || '';
-            this.class = settings.class || [];
-            this.isEnabled = settings.isEnabled !== undefined ? settings.isEnabled : true;
-            this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false;
-            this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true;
-            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 || 'Select Value';
-            this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false;
-            this.hideSelected = settings.hideSelected !== undefined ? settings.hideSelected : false;
-            this.showOptionTooltips = settings.showOptionTooltips !== undefined ? settings.showOptionTooltips : false;
-            this.minSelected = settings.minSelected || 0;
-            this.maxSelected = settings.maxSelected || 1000;
-            this.timeoutDelay = settings.timeoutDelay || 200;
-        }
-    }
-
     class SlimSelect {
         constructor(config) {
             this.events = {
@@ -1573,6 +1583,7 @@ var SlimSelect = (function () {
             return this.store.getData();
         }
         setData(data) {
+            const selected = this.store.getSelected();
             const err = this.store.validateDataArray(data);
             if (err) {
                 if (this.events.error) {
@@ -1585,23 +1596,34 @@ var SlimSelect = (function () {
             this.select.updateOptions(dataClean);
             this.render.renderValues();
             this.render.renderOptions(dataClean);
+            if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+                this.events.afterChange(this.store.getSelectedOptions());
+            }
         }
         getSelected() {
             return this.store.getSelected();
         }
         setSelected(value) {
+            const selected = this.store.getSelected();
             this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
             const data = this.store.getData();
             this.select.updateOptions(data);
             this.render.renderValues();
             this.render.renderOptions(data);
+            if (this.events.afterChange && !isEqual(selected, this.store.getSelected())) {
+                this.events.afterChange(this.store.getSelectedOptions());
+            }
         }
         addOption(option) {
+            const selected = this.store.getSelected();
             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.isEnabled || this.settings.isOpen) {