slim-select 2.4.4 → 2.5.0

package/dist/render.d.ts

@@ -116,4 +116,5 @@ export default class Render {
     moveContentBelow(): void;
     ensureElementInView(container: HTMLElement, element: HTMLElement): void;
     putContent(): 'up' | 'down';
+    updateDeselectAll(): void;
 }

package/dist/slimselect.cjs.js

@@ -294,6 +294,9 @@ class Store {
         });
         return dataSearch;
     }
+    getSelectType() {
+        return this.selectType;
+    }
 }
 
 class Render {
@@ -410,6 +413,7 @@ class Render {
         this.content.main.setAttribute('role', 'listbox');
     }
     mainDiv() {
+        var _a;
         const main = document.createElement('div');
         main.dataset.id = this.settings.id;
         main.id = this.settings.id;
@@ -448,9 +452,13 @@ class Render {
         main.appendChild(values);
         const deselect = document.createElement('div');
         deselect.classList.add(this.classes.deselect);
-        if (!this.settings.allowDeselect || this.settings.isMultiple) {
+        const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
+        if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
             deselect.classList.add(this.classes.hide);
         }
+        else {
+            deselect.classList.remove(this.classes.hide);
+        }
         deselect.onclick = (e) => {
             e.stopPropagation();
             if (this.settings.disabled) {
@@ -463,7 +471,13 @@ class Render {
                 shouldDelete = this.callbacks.beforeChange(after, before) === true;
             }
             if (shouldDelete) {
-                this.callbacks.setSelected([''], false);
+                if (this.settings.isMultiple) {
+                    this.callbacks.setSelected([], false);
+                    this.updateDeselectAll();
+                }
+                else {
+                    this.callbacks.setSelected([''], false);
+                }
                 if (this.settings.closeOnSelect) {
                     this.callbacks.close();
                 }
@@ -542,7 +556,12 @@ class Render {
         else {
             const singleValue = document.createElement('div');
             singleValue.classList.add(this.classes.single);
-            singleValue.innerHTML = selectedSingle.html ? selectedSingle.html : selectedSingle.text;
+            if (selectedSingle.html) {
+                singleValue.innerHTML = selectedSingle.html;
+            }
+            else {
+                singleValue.innerText = selectedSingle.text;
+            }
             this.main.values.innerHTML = singleValue.outerHTML;
         }
         if (!this.settings.allowDeselect || !selected.length) {
@@ -596,7 +615,9 @@ class Render {
         for (const n of removeNodes) {
             n.classList.add(this.classes.valueOut);
             setTimeout(() => {
-                this.main.values.removeChild(n);
+                if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
+                    this.main.values.removeChild(n);
+                }
             }, 100);
         }
         currentNodes = this.main.values.childNodes;
@@ -619,6 +640,7 @@ class Render {
                 }
             }
         }
+        this.updateDeselectAll();
     }
     multipleValue(option) {
         const value = document.createElement('div');
@@ -626,7 +648,7 @@ class Render {
         value.dataset.id = option.id;
         const text = document.createElement('div');
         text.classList.add(this.classes.valueText);
-        text.innerHTML = option.text;
+        text.innerText = option.text;
         value.appendChild(text);
         if (!option.mandatory) {
             const deleteDiv = document.createElement('div');
@@ -667,6 +689,7 @@ class Render {
                     if (this.callbacks.afterChange) {
                         this.callbacks.afterChange(after);
                     }
+                    this.updateDeselectAll();
                 }
             };
             const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -1208,6 +1231,23 @@ class Render {
         }
         return 'down';
     }
+    updateDeselectAll() {
+        if (!this.store || !this.settings) {
+            return;
+        }
+        const selected = this.store.getSelectedOptions();
+        const hasSelectedItems = selected && selected.length > 0;
+        const isMultiple = this.settings.isMultiple;
+        const allowDeselect = this.settings.allowDeselect;
+        const deselectButton = this.main.deselect.main;
+        const hideClass = this.classes.hide;
+        if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
+            deselectButton.classList.remove(hideClass);
+        }
+        else {
+            deselectButton.classList.add(hideClass);
+        }
+    }
 }
 
 class Select {

package/dist/slimselect.es.js

@@ -292,6 +292,9 @@ class Store {
         });
         return dataSearch;
     }
+    getSelectType() {
+        return this.selectType;
+    }
 }
 
 class Render {
@@ -408,6 +411,7 @@ class Render {
         this.content.main.setAttribute('role', 'listbox');
     }
     mainDiv() {
+        var _a;
         const main = document.createElement('div');
         main.dataset.id = this.settings.id;
         main.id = this.settings.id;
@@ -446,9 +450,13 @@ class Render {
         main.appendChild(values);
         const deselect = document.createElement('div');
         deselect.classList.add(this.classes.deselect);
-        if (!this.settings.allowDeselect || this.settings.isMultiple) {
+        const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
+        if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
             deselect.classList.add(this.classes.hide);
         }
+        else {
+            deselect.classList.remove(this.classes.hide);
+        }
         deselect.onclick = (e) => {
             e.stopPropagation();
             if (this.settings.disabled) {
@@ -461,7 +469,13 @@ class Render {
                 shouldDelete = this.callbacks.beforeChange(after, before) === true;
             }
             if (shouldDelete) {
-                this.callbacks.setSelected([''], false);
+                if (this.settings.isMultiple) {
+                    this.callbacks.setSelected([], false);
+                    this.updateDeselectAll();
+                }
+                else {
+                    this.callbacks.setSelected([''], false);
+                }
                 if (this.settings.closeOnSelect) {
                     this.callbacks.close();
                 }
@@ -540,7 +554,12 @@ class Render {
         else {
             const singleValue = document.createElement('div');
             singleValue.classList.add(this.classes.single);
-            singleValue.innerHTML = selectedSingle.html ? selectedSingle.html : selectedSingle.text;
+            if (selectedSingle.html) {
+                singleValue.innerHTML = selectedSingle.html;
+            }
+            else {
+                singleValue.innerText = selectedSingle.text;
+            }
             this.main.values.innerHTML = singleValue.outerHTML;
         }
         if (!this.settings.allowDeselect || !selected.length) {
@@ -594,7 +613,9 @@ class Render {
         for (const n of removeNodes) {
             n.classList.add(this.classes.valueOut);
             setTimeout(() => {
-                this.main.values.removeChild(n);
+                if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
+                    this.main.values.removeChild(n);
+                }
             }, 100);
         }
         currentNodes = this.main.values.childNodes;
@@ -617,6 +638,7 @@ class Render {
                 }
             }
         }
+        this.updateDeselectAll();
     }
     multipleValue(option) {
         const value = document.createElement('div');
@@ -624,7 +646,7 @@ class Render {
         value.dataset.id = option.id;
         const text = document.createElement('div');
         text.classList.add(this.classes.valueText);
-        text.innerHTML = option.text;
+        text.innerText = option.text;
         value.appendChild(text);
         if (!option.mandatory) {
             const deleteDiv = document.createElement('div');
@@ -665,6 +687,7 @@ class Render {
                     if (this.callbacks.afterChange) {
                         this.callbacks.afterChange(after);
                     }
+                    this.updateDeselectAll();
                 }
             };
             const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -1206,6 +1229,23 @@ class Render {
         }
         return 'down';
     }
+    updateDeselectAll() {
+        if (!this.store || !this.settings) {
+            return;
+        }
+        const selected = this.store.getSelectedOptions();
+        const hasSelectedItems = selected && selected.length > 0;
+        const isMultiple = this.settings.isMultiple;
+        const allowDeselect = this.settings.allowDeselect;
+        const deselectButton = this.main.deselect.main;
+        const hideClass = this.classes.hide;
+        if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
+            deselectButton.classList.remove(hideClass);
+        }
+        else {
+            deselectButton.classList.add(hideClass);
+        }
+    }
 }
 
 class Select {

package/dist/slimselect.global.js

@@ -295,6 +295,9 @@ var SlimSelect = (function () {
             });
             return dataSearch;
         }
+        getSelectType() {
+            return this.selectType;
+        }
     }
 
     class Render {
@@ -411,6 +414,7 @@ var SlimSelect = (function () {
             this.content.main.setAttribute('role', 'listbox');
         }
         mainDiv() {
+            var _a;
             const main = document.createElement('div');
             main.dataset.id = this.settings.id;
             main.id = this.settings.id;
@@ -449,9 +453,13 @@ var SlimSelect = (function () {
             main.appendChild(values);
             const deselect = document.createElement('div');
             deselect.classList.add(this.classes.deselect);
-            if (!this.settings.allowDeselect || this.settings.isMultiple) {
+            const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
+            if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
                 deselect.classList.add(this.classes.hide);
             }
+            else {
+                deselect.classList.remove(this.classes.hide);
+            }
             deselect.onclick = (e) => {
                 e.stopPropagation();
                 if (this.settings.disabled) {
@@ -464,7 +472,13 @@ var SlimSelect = (function () {
                     shouldDelete = this.callbacks.beforeChange(after, before) === true;
                 }
                 if (shouldDelete) {
-                    this.callbacks.setSelected([''], false);
+                    if (this.settings.isMultiple) {
+                        this.callbacks.setSelected([], false);
+                        this.updateDeselectAll();
+                    }
+                    else {
+                        this.callbacks.setSelected([''], false);
+                    }
                     if (this.settings.closeOnSelect) {
                         this.callbacks.close();
                     }
@@ -543,7 +557,12 @@ var SlimSelect = (function () {
             else {
                 const singleValue = document.createElement('div');
                 singleValue.classList.add(this.classes.single);
-                singleValue.innerHTML = selectedSingle.html ? selectedSingle.html : selectedSingle.text;
+                if (selectedSingle.html) {
+                    singleValue.innerHTML = selectedSingle.html;
+                }
+                else {
+                    singleValue.innerText = selectedSingle.text;
+                }
                 this.main.values.innerHTML = singleValue.outerHTML;
             }
             if (!this.settings.allowDeselect || !selected.length) {
@@ -597,7 +616,9 @@ var SlimSelect = (function () {
             for (const n of removeNodes) {
                 n.classList.add(this.classes.valueOut);
                 setTimeout(() => {
-                    this.main.values.removeChild(n);
+                    if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
+                        this.main.values.removeChild(n);
+                    }
                 }, 100);
             }
             currentNodes = this.main.values.childNodes;
@@ -620,6 +641,7 @@ var SlimSelect = (function () {
                     }
                 }
             }
+            this.updateDeselectAll();
         }
         multipleValue(option) {
             const value = document.createElement('div');
@@ -627,7 +649,7 @@ var SlimSelect = (function () {
             value.dataset.id = option.id;
             const text = document.createElement('div');
             text.classList.add(this.classes.valueText);
-            text.innerHTML = option.text;
+            text.innerText = option.text;
             value.appendChild(text);
             if (!option.mandatory) {
                 const deleteDiv = document.createElement('div');
@@ -668,6 +690,7 @@ var SlimSelect = (function () {
                         if (this.callbacks.afterChange) {
                             this.callbacks.afterChange(after);
                         }
+                        this.updateDeselectAll();
                     }
                 };
                 const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -1209,6 +1232,23 @@ var SlimSelect = (function () {
             }
             return 'down';
         }
+        updateDeselectAll() {
+            if (!this.store || !this.settings) {
+                return;
+            }
+            const selected = this.store.getSelectedOptions();
+            const hasSelectedItems = selected && selected.length > 0;
+            const isMultiple = this.settings.isMultiple;
+            const allowDeselect = this.settings.allowDeselect;
+            const deselectButton = this.main.deselect.main;
+            const hideClass = this.classes.hide;
+            if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
+                deselectButton.classList.remove(hideClass);
+            }
+            else {
+                deselectButton.classList.add(hideClass);
+            }
+        }
     }
 
     class Select {

package/dist/slimselect.js

@@ -298,6 +298,9 @@
             });
             return dataSearch;
         }
+        getSelectType() {
+            return this.selectType;
+        }
     }
 
     class Render {
@@ -414,6 +417,7 @@
             this.content.main.setAttribute('role', 'listbox');
         }
         mainDiv() {
+            var _a;
             const main = document.createElement('div');
             main.dataset.id = this.settings.id;
             main.id = this.settings.id;
@@ -452,9 +456,13 @@
             main.appendChild(values);
             const deselect = document.createElement('div');
             deselect.classList.add(this.classes.deselect);
-            if (!this.settings.allowDeselect || this.settings.isMultiple) {
+            const selectedOptions = (_a = this.store) === null || _a === void 0 ? void 0 : _a.getSelectedOptions();
+            if (!this.settings.allowDeselect || (this.settings.isMultiple && selectedOptions && selectedOptions.length <= 0)) {
                 deselect.classList.add(this.classes.hide);
             }
+            else {
+                deselect.classList.remove(this.classes.hide);
+            }
             deselect.onclick = (e) => {
                 e.stopPropagation();
                 if (this.settings.disabled) {
@@ -467,7 +475,13 @@
                     shouldDelete = this.callbacks.beforeChange(after, before) === true;
                 }
                 if (shouldDelete) {
-                    this.callbacks.setSelected([''], false);
+                    if (this.settings.isMultiple) {
+                        this.callbacks.setSelected([], false);
+                        this.updateDeselectAll();
+                    }
+                    else {
+                        this.callbacks.setSelected([''], false);
+                    }
                     if (this.settings.closeOnSelect) {
                         this.callbacks.close();
                     }
@@ -546,7 +560,12 @@
             else {
                 const singleValue = document.createElement('div');
                 singleValue.classList.add(this.classes.single);
-                singleValue.innerHTML = selectedSingle.html ? selectedSingle.html : selectedSingle.text;
+                if (selectedSingle.html) {
+                    singleValue.innerHTML = selectedSingle.html;
+                }
+                else {
+                    singleValue.innerText = selectedSingle.text;
+                }
                 this.main.values.innerHTML = singleValue.outerHTML;
             }
             if (!this.settings.allowDeselect || !selected.length) {
@@ -600,7 +619,9 @@
             for (const n of removeNodes) {
                 n.classList.add(this.classes.valueOut);
                 setTimeout(() => {
-                    this.main.values.removeChild(n);
+                    if (this.main.values.hasChildNodes() && this.main.values.contains(n)) {
+                        this.main.values.removeChild(n);
+                    }
                 }, 100);
             }
             currentNodes = this.main.values.childNodes;
@@ -623,6 +644,7 @@
                     }
                 }
             }
+            this.updateDeselectAll();
         }
         multipleValue(option) {
             const value = document.createElement('div');
@@ -630,7 +652,7 @@
             value.dataset.id = option.id;
             const text = document.createElement('div');
             text.classList.add(this.classes.valueText);
-            text.innerHTML = option.text;
+            text.innerText = option.text;
             value.appendChild(text);
             if (!option.mandatory) {
                 const deleteDiv = document.createElement('div');
@@ -671,6 +693,7 @@
                         if (this.callbacks.afterChange) {
                             this.callbacks.afterChange(after);
                         }
+                        this.updateDeselectAll();
                     }
                 };
                 const deleteSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -1212,6 +1235,23 @@
             }
             return 'down';
         }
+        updateDeselectAll() {
+            if (!this.store || !this.settings) {
+                return;
+            }
+            const selected = this.store.getSelectedOptions();
+            const hasSelectedItems = selected && selected.length > 0;
+            const isMultiple = this.settings.isMultiple;
+            const allowDeselect = this.settings.allowDeselect;
+            const deselectButton = this.main.deselect.main;
+            const hideClass = this.classes.hide;
+            if (allowDeselect && !(isMultiple && !hasSelectedItems)) {
+                deselectButton.classList.remove(hideClass);
+            }
+            else {
+                deselectButton.classList.add(hideClass);
+            }
+        }
     }
 
     class Select {