dual-listbox - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

dist/dual-listbox.js

@@ -1,1 +0,1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i=e();for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),a="dual-listbox",l="dual-listbox__container",o="dual-listbox__available",d="dual-listbox__selected",u="dual-listbox__title",c="dual-listbox__item",r="dual-listbox__buttons",h="dual-listbox__button",v="dual-listbox__search",b="dual-listbox__item--selected",f=function(){function t(e){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};i(this,t),this.setDefaults(),this.selected=[],this.available=[],t.isDomElement(e)?this.select=e:this.select=document.querySelector(e),this._initOptions(s),this._initReusableElements(),this._splitOptions(this.select.options),void 0!==s.options&&this._splitOptions(s.options),this._buildDualListbox(this.select.parentNode),this._addActions(),this.redraw()}return n(t,[{key:"setDefaults",value:function(){this.addEvent=null,this.removeEvent=null,this.availableTitle="Available options",this.selectedTitle="Selected options",this.addButtonText="add",this.removeButtonText="remove",this.addAllButtonText="add all",this.removeAllButtonText="remove all",this.searchPlaceholder="Search"}},{key:"addEventListener",value:function(t,e){this.dualListbox.addEventListener(t,e)}},{key:"addSelected",value:function(t){var e=this.available.indexOf(t);if(e>-1){this.available.splice(e,1),this.selected.push(t),this._selectOption(t.dataset.id),this.redraw();var i=document.createEvent("HTMLEvents");i.initEvent("added",!1,!0),i.addedElement=t,this.dualListbox.dispatchEvent(i)}}},{key:"redraw",value:function(){this.updateAvailableListbox(),this.updateSelectedListbox()}},{key:"removeSelected",value:function(t){var e=this.selected.indexOf(t);if(e>-1){this.selected.splice(e,1),this.available.push(t),this._deselectOption(t.dataset.id),this.redraw();var i=document.createEvent("HTMLEvents");i.initEvent("removed",!1,!0),i.removedElement=t,this.dualListbox.dispatchEvent(i)}}},{key:"searchLists",value:function(t,e){for(var i=e.querySelectorAll("."+c),s=t.toLowerCase(),n=0;n<i.length;n++){var a=i[n];a.textContent.toLowerCase().indexOf(s)===-1?a.style.display="none":a.style.display="list-item"}}},{key:"updateAvailableListbox",value:function(){this._updateListbox(this.availableList,this.available)}},{key:"updateSelectedListbox",value:function(){this._updateListbox(this.selectedList,this.selected)}},{key:"_actionAllSelected",value:function(t){for(t.preventDefault();this.available.length>0;)this.addSelected(this.available[0])}},{key:"_updateListbox",value:function(t,e){t.innerHTML="";for(var i=0;i<e.length;i++){var s=e[i];t.appendChild(s)}}},{key:"_actionItemSelected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector("."+b);e&&this.addSelected(e)}},{key:"_actionAllDeselected",value:function(t){for(t.preventDefault();this.selected.length>0;)this.removeSelected(this.selected[0])}},{key:"_actionItemDeselected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector("."+b);e&&this.removeSelected(e)}},{key:"_actionItemDoubleClick",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;e&&(e.preventDefault(),e.stopPropagation()),this.selected.indexOf(t)>-1?this.removeSelected(t):this.addSelected(t)}},{key:"_actionItemClick",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;i&&i.preventDefault();for(var s=e.querySelectorAll("."+c),n=0;n<s.length;n++){var a=s[n];a!==t&&a.classList.remove(b)}t.classList.contains(b)?t.classList.remove(b):t.classList.add(b)}},{key:"_addActions",value:function(){this._addButtonActions(),this._addSearchActions()}},{key:"_addButtonActions",value:function(){var t=this;this.add_all_button.addEventListener("click",function(e){return t._actionAllSelected(e)}),this.add_button.addEventListener("click",function(e){return t._actionItemSelected(e)}),this.remove_button.addEventListener("click",function(e){return t._actionItemDeselected(e)}),this.remove_all_button.addEventListener("click",function(e){return t._actionAllDeselected(e)})}},{key:"_addClickActions",value:function(t){var e=this;return t.addEventListener("dblclick",function(i){return e._actionItemDoubleClick(t,i)}),t.addEventListener("click",function(i){return e._actionItemClick(t,e.dualListbox,i)}),t}},{key:"_addSearchActions",value:function(){var t=this;this.search.addEventListener("change",function(e){return t.searchLists(e.target.value,t.dualListbox)}),this.search.addEventListener("keyup",function(e){return t.searchLists(e.target.value,t.dualListbox)})}},{key:"_buildDualListbox",value:function(t){this.select.style.display="none",this.dualListBoxContainer.appendChild(this._createList(this.availableListTitle,this.availableList)),this.dualListBoxContainer.appendChild(this.buttons),this.dualListBoxContainer.appendChild(this._createList(this.selectedListTitle,this.selectedList)),this.dualListbox.appendChild(this.search),this.dualListbox.appendChild(this.dualListBoxContainer),t.insertBefore(this.dualListbox,this.select)}},{key:"_createList",value:function(t,e){var i=document.createElement("div");return i.appendChild(t),i.appendChild(e),i}},{key:"_createButtons",value:function(){this.buttons=document.createElement("div"),this.buttons.classList.add(r),this.add_all_button=document.createElement("button"),this.add_all_button.classList.add(h),this.add_all_button.innerHTML=this.addAllButtonText,this.add_button=document.createElement("button"),this.add_button.classList.add(h),this.add_button.innerHTML=this.addButtonText,this.remove_button=document.createElement("button"),this.remove_button.classList.add(h),this.remove_button.innerHTML=this.removeButtonText,this.remove_all_button=document.createElement("button"),this.remove_all_button.classList.add(h),this.remove_all_button.innerHTML=this.removeAllButtonText,this.buttons.appendChild(this.add_all_button),this.buttons.appendChild(this.add_button),this.buttons.appendChild(this.remove_button),this.buttons.appendChild(this.remove_all_button)}},{key:"_createListItem",value:function(t){var e=document.createElement("li");return e.classList.add(c),e.innerHTML=t.text,e.dataset.id=t.value,this._addClickActions(e),e}},{key:"_createSearch",value:function(){this.search=document.createElement("input"),this.search.classList.add(v),this.search.placeholder=this.searchPlaceholder}},{key:"_deselectOption",value:function(t){for(var e=this.select.options,i=0;i<e.length;i++){var s=e[i];s.value===t&&(s.selected=!1)}this.removeEvent&&this.removeEvent(t)}},{key:"_initOptions",value:function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e])}},{key:"_initReusableElements",value:function(){this.dualListbox=document.createElement("div"),this.dualListbox.classList.add(a),this.select.id&&this.dualListbox.classList.add(this.select.id),this.dualListBoxContainer=document.createElement("div"),this.dualListBoxContainer.classList.add(l),this.availableList=document.createElement("ul"),this.availableList.classList.add(o),this.selectedList=document.createElement("ul"),this.selectedList.classList.add(d),this.availableListTitle=document.createElement("div"),this.availableListTitle.classList.add(u),this.availableListTitle.innerText=this.availableTitle,this.selectedListTitle=document.createElement("div"),this.selectedListTitle.classList.add(u),this.selectedListTitle.innerText=this.selectedTitle,this._createButtons(),this._createSearch()}},{key:"_selectOption",value:function(t){for(var e=this.select.options,i=0;i<e.length;i++){var s=e[i];s.value===t&&(s.selected=!0)}this.addEvent&&this.addEvent(t)}},{key:"_splitOptions",value:function(e){for(var i=0;i<e.length;i++){var s=e[i];t.isDomElement(s)?this._addOption({text:s.innerHTML,value:s.value,selected:s.attributes.selected}):this._addOption(s)}}},{key:"_addOption",value:function(t){var e=this._createListItem(t);t.selected?this.selected.push(e):this.available.push(e)}}],[{key:"isDomElement",value:function(t){return"object"===("undefined"==typeof HTMLElement?"undefined":s(HTMLElement))?t instanceof HTMLElement:t&&"object"===(void 0===t?"undefined":s(t))&&null!==t&&1===t.nodeType&&"string"==typeof t.nodeName}}]),t}();e.default=f,e.DualListbox=f}])});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i=e();for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),a="dual-listbox",l="dual-listbox__container",o="dual-listbox__available",d="dual-listbox__selected",u="dual-listbox__title",c="dual-listbox__item",r="dual-listbox__buttons",h="dual-listbox__button",v="dual-listbox__search",f="dual-listbox__item--selected",b=function(){function t(e){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};i(this,t),this.setDefaults(),this.selected=[],this.available=[],t.isDomElement(e)?this.select=e:this.select=document.querySelector(e),this._initOptions(s),this._initReusableElements(),this._splitOptions(this.select.options),void 0!==s.options&&this._splitOptions(s.options),this._buildDualListbox(this.select.parentNode),this._addActions(),this.redraw()}return n(t,[{key:"setDefaults",value:function(){this.addEvent=null,this.removeEvent=null,this.availableTitle="Available options",this.selectedTitle="Selected options",this.addButtonText="add",this.removeButtonText="remove",this.addAllButtonText="add all",this.removeAllButtonText="remove all",this.searchPlaceholder="Search"}},{key:"addEventListener",value:function(t,e){this.dualListbox.addEventListener(t,e)}},{key:"addSelected",value:function(t){var e=this,i=this.available.indexOf(t);i>-1&&(this.available.splice(i,1),this.selected.push(t),this._selectOption(t.dataset.id),this.redraw(),setTimeout(function(){var i=document.createEvent("HTMLEvents");i.initEvent("added",!1,!0),i.addedElement=t,e.dualListbox.dispatchEvent(i)},0))}},{key:"redraw",value:function(){this.updateAvailableListbox(),this.updateSelectedListbox()}},{key:"removeSelected",value:function(t){var e=this,i=this.selected.indexOf(t);i>-1&&(this.selected.splice(i,1),this.available.push(t),this._deselectOption(t.dataset.id),this.redraw(),setTimeout(function(){var i=document.createEvent("HTMLEvents");i.initEvent("removed",!1,!0),i.removedElement=t,e.dualListbox.dispatchEvent(i)},0))}},{key:"searchLists",value:function(t,e){for(var i=e.querySelectorAll("."+c),s=t.toLowerCase(),n=0;n<i.length;n++){var a=i[n];a.textContent.toLowerCase().indexOf(s)===-1?a.style.display="none":a.style.display="list-item"}}},{key:"updateAvailableListbox",value:function(){this._updateListbox(this.availableList,this.available)}},{key:"updateSelectedListbox",value:function(){this._updateListbox(this.selectedList,this.selected)}},{key:"_actionAllSelected",value:function(t){var e=this;t.preventDefault(),this.available.filter(function(t){return"none"!==t.style.display}).forEach(function(t){return e.addSelected(t)})}},{key:"_updateListbox",value:function(t,e){for(;t.firstChild;)t.removeChild(t.firstChild);for(var i=0;i<e.length;i++){var s=e[i];t.appendChild(s)}}},{key:"_actionItemSelected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector("."+f);e&&this.addSelected(e)}},{key:"_actionAllDeselected",value:function(t){var e=this;t.preventDefault(),this.selected.filter(function(t){return"none"!==t.style.display}).forEach(function(t){return e.removeSelected(t)})}},{key:"_actionItemDeselected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector("."+f);e&&this.removeSelected(e)}},{key:"_actionItemDoubleClick",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;e&&(e.preventDefault(),e.stopPropagation()),this.selected.indexOf(t)>-1?this.removeSelected(t):this.addSelected(t)}},{key:"_actionItemClick",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;i&&i.preventDefault();for(var s=e.querySelectorAll("."+c),n=0;n<s.length;n++){var a=s[n];a!==t&&a.classList.remove(f)}t.classList.contains(f)?t.classList.remove(f):t.classList.add(f)}},{key:"_addActions",value:function(){this._addButtonActions(),this._addSearchActions()}},{key:"_addButtonActions",value:function(){var t=this;this.add_all_button.addEventListener("click",function(e){return t._actionAllSelected(e)}),this.add_button.addEventListener("click",function(e){return t._actionItemSelected(e)}),this.remove_button.addEventListener("click",function(e){return t._actionItemDeselected(e)}),this.remove_all_button.addEventListener("click",function(e){return t._actionAllDeselected(e)})}},{key:"_addClickActions",value:function(t){var e=this;return t.addEventListener("dblclick",function(i){return e._actionItemDoubleClick(t,i)}),t.addEventListener("click",function(i){return e._actionItemClick(t,e.dualListbox,i)}),t}},{key:"_addSearchActions",value:function(){var t=this;this.search.addEventListener("change",function(e){return t.searchLists(e.target.value,t.dualListbox)}),this.search.addEventListener("keyup",function(e){return t.searchLists(e.target.value,t.dualListbox)})}},{key:"_buildDualListbox",value:function(t){this.select.style.display="none",this.dualListBoxContainer.appendChild(this._createList(this.availableListTitle,this.availableList)),this.dualListBoxContainer.appendChild(this.buttons),this.dualListBoxContainer.appendChild(this._createList(this.selectedListTitle,this.selectedList)),this.dualListbox.appendChild(this.search),this.dualListbox.appendChild(this.dualListBoxContainer),t.insertBefore(this.dualListbox,this.select)}},{key:"_createList",value:function(t,e){var i=document.createElement("div");return i.appendChild(t),i.appendChild(e),i}},{key:"_createButtons",value:function(){this.buttons=document.createElement("div"),this.buttons.classList.add(r),this.add_all_button=document.createElement("button"),this.add_all_button.classList.add(h),this.add_all_button.innerHTML=this.addAllButtonText,this.add_button=document.createElement("button"),this.add_button.classList.add(h),this.add_button.innerHTML=this.addButtonText,this.remove_button=document.createElement("button"),this.remove_button.classList.add(h),this.remove_button.innerHTML=this.removeButtonText,this.remove_all_button=document.createElement("button"),this.remove_all_button.classList.add(h),this.remove_all_button.innerHTML=this.removeAllButtonText,this.buttons.appendChild(this.add_all_button),this.buttons.appendChild(this.add_button),this.buttons.appendChild(this.remove_button),this.buttons.appendChild(this.remove_all_button)}},{key:"_createListItem",value:function(t){var e=document.createElement("li");return e.classList.add(c),e.innerHTML=t.text,e.dataset.id=t.value,this._addClickActions(e),e}},{key:"_createSearch",value:function(){this.search=document.createElement("input"),this.search.classList.add(v),this.search.placeholder=this.searchPlaceholder}},{key:"_deselectOption",value:function(t){for(var e=this.select.options,i=0;i<e.length;i++){var s=e[i];s.value===t&&(s.selected=!1)}this.removeEvent&&this.removeEvent(t)}},{key:"_initOptions",value:function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e])}},{key:"_initReusableElements",value:function(){this.dualListbox=document.createElement("div"),this.dualListbox.classList.add(a),this.select.id&&this.dualListbox.classList.add(this.select.id),this.dualListBoxContainer=document.createElement("div"),this.dualListBoxContainer.classList.add(l),this.availableList=document.createElement("ul"),this.availableList.classList.add(o),this.selectedList=document.createElement("ul"),this.selectedList.classList.add(d),this.availableListTitle=document.createElement("div"),this.availableListTitle.classList.add(u),this.availableListTitle.innerText=this.availableTitle,this.selectedListTitle=document.createElement("div"),this.selectedListTitle.classList.add(u),this.selectedListTitle.innerText=this.selectedTitle,this._createButtons(),this._createSearch()}},{key:"_selectOption",value:function(t){for(var e=this.select.options,i=0;i<e.length;i++){var s=e[i];s.value===t&&(s.selected=!0)}this.addEvent&&this.addEvent(t)}},{key:"_splitOptions",value:function(e){for(var i=0;i<e.length;i++){var s=e[i];t.isDomElement(s)?this._addOption({text:s.innerHTML,value:s.value,selected:s.attributes.selected}):this._addOption(s)}}},{key:"_addOption",value:function(t){var e=this._createListItem(t);t.selected?this.selected.push(e):this.available.push(e)}}],[{key:"isDomElement",value:function(t){return"object"===("undefined"==typeof HTMLElement?"undefined":s(HTMLElement))?t instanceof HTMLElement:t&&"object"===(void 0===t?"undefined":s(t))&&null!==t&&1===t.nodeType&&"string"==typeof t.nodeName}}]),t}();e.default=b,e.DualListbox=b}])});

package.json

 {
   "name": "dual-listbox",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Dual listbox for multi-select elements",
@@ -5,0 +5,0 @@ "main": "dist/dual-listbox.js",

README.md

@@ -39,4 +39,4 @@ [![Build Status](https://travis-ci.org/maykinmedia/dual-listbox.svg?branch=master)](https://travis-ci.org/maykinmedia/dual-listbox)
 <!-- for pinned version -->
-<script src="https://cdn.jsdelivr.net/npm/dual-listbox@1.0.8/dist/dual-listbox.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/dual-listbox@1.0.8/dist/dual-listbox.css">
+<script src="https://cdn.jsdelivr.net/npm/dual-listbox@1.0.9/dist/dual-listbox.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/dual-listbox@1.0.9/dist/dual-listbox.css">
 ```
@@ -43,0 +43,0 @@

src/dual-listbox.js

@@ -81,6 +81,8 @@ const MAIN_BLOCK = 'dual-listbox';
 
-            let event = document.createEvent("HTMLEvents");
-            event.initEvent("added", false, true);
-            event.addedElement = listItem;
-            this.dualListbox.dispatchEvent(event);
+            setTimeout(() => {
+                let event = document.createEvent("HTMLEvents");
+                event.initEvent("added", false, true);
+                event.addedElement = listItem;
+                this.dualListbox.dispatchEvent(event);
+            }, 0)
         }
@@ -110,6 +112,8 @@ }
 
-            let event = document.createEvent("HTMLEvents");
-            event.initEvent("removed", false, true);
-            event.removedElement = listItem;
-            this.dualListbox.dispatchEvent(event);
+            setTimeout(() => {
+                let event = document.createEvent("HTMLEvents");
+                event.initEvent("removed", false, true);
+                event.removedElement = listItem;
+                this.dualListbox.dispatchEvent(event);
+            }, 0);
         }
@@ -164,5 +168,4 @@ }
 
-        while (this.available.length > 0) {
-            this.addSelected(this.available[0]);
-        }
+        let selected = this.available.filter((item) => item.style.display !== "none");
+        selected.forEach((item) => this.addSelected(item));
     }
@@ -174,3 +177,6 @@
     _updateListbox(list, elements) {
-        list.innerHTML = '';
+        while (list.firstChild) {
+            list.removeChild(list.firstChild);
+        }
+
         for (let i = 0; i < elements.length; i++) {
@@ -200,5 +206,4 @@ let listItem = elements[i];
 
-        while (this.selected.length > 0) {
-            this.removeSelected(this.selected[0]);
-        }
+        let deselected = this.selected.filter((item) => item.style.display !== "none");
+        deselected.forEach((item) => this.removeSelected(item));
     }
@@ -205,0 +210,0 @@

test/dual-listbox.spec.js

@@ -59,2 +59,19 @@ import DualListbox, {DualListbox as DualListbox2} from '../src/dual-listbox.js';
 
+
+const FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE = `
+    <select class="${SELECT_CLASS}">
+        <option value="1">One</option>
+        <option value="2" selected>Two</option>
+        <option value="3" selected>Three</option>
+        <option value="4" selected>Four</option>
+        <option value="5">Five</option>
+        <option value="6">Six</option>
+        <option value="7">Seven</option>
+        <option value="8">Eight</option>
+        <option value="9">Nine</option>
+        <option value="10">Ten</option>
+    </select>
+`;
+
+
 const OPTIONS_WITH_SELECTED_VALUE = [
@@ -332,2 +349,106 @@ {
     });
+
+    it('should set the item to availeble.', () => {
+        let domParent = document.createElement("div");
+        domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED;
+
+        let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]);
+        expect(dlb.available.length).toBe(9);
+        expect(dlb.selected.length).toBe(1);
+
+        dlb.selected[0].classList.add('dual-listbox__item--selected');
+        let event = {};
+        event.preventDefault = () => {};
+        dlb._actionItemDeselected(event);
+        expect(dlb.available.length).toBe(10);
+        expect(dlb.selected.length).toBe(0);
+    });
+
+    it('should set the item to selected.', () => {
+        let domParent = document.createElement("div");
+        domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED;
+
+        let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]);
+        expect(dlb.available.length).toBe(9);
+        expect(dlb.selected.length).toBe(1);
+
+        dlb.available[0].classList.add('dual-listbox__item--selected');
+        let event = {};
+        event.preventDefault = () => {};
+        dlb._actionItemSelected(event);
+        expect(dlb.available.length).toBe(8);
+        expect(dlb.selected.length).toBe(2);
+    });
+
+    it('should only set the searched results to selected.', () => {
+        let domParent = document.createElement("div");
+        domParent.innerHTML = FIXTURE_FILLED_SELECT;
+
+        let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]);
+        expect(dlb.available.length).toBe(10);
+        expect(dlb.selected.length).toBe(0);
+
+        let event = {};
+        event.preventDefault = () => {};
+        dlb.searchLists('Four', dlb.dualListbox);
+        dlb._actionAllSelected(event);
+        expect(dlb.available.length).toBe(9);
+        expect(dlb.selected.length).toBe(1);
+    });
+
+    it('should only set the searched results to available.', () => {
+        let domParent = document.createElement("div");
+        domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE;
+
+        let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]);
+        expect(dlb.available.length).toBe(7);
+        expect(dlb.selected.length).toBe(3);
+
+        let event = {};
+        event.preventDefault = () => {};
+        dlb.searchLists('Four', dlb.dualListbox);
+        dlb._actionAllDeselected(event);
+        expect(dlb.available.length).toBe(8);
+        expect(dlb.selected.length).toBe(2);
+    });
+
+    it('should be able to add the removed eventListener', (done) => {
+        let domParent = document.createElement("div");
+        domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE;
+
+        let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]);
+        expect(dlb.available.length).toBe(7);
+        expect(dlb.selected.length).toBe(3);
+
+        dlb.addEventListener('removed', event => {
+            expect(event.removedElement).toBeTruthy();
+            expect(event.removedElement.textContent).toBe('Two');
+            done();
+        });
+
+        dlb.selected[0].classList.add('dual-listbox__item--selected');
+        let event = {};
+        event.preventDefault = () => {};
+        dlb._actionItemDeselected(event);
+    });
+
+    it('should be able to add the added eventListener', (done) => {
+        let domParent = document.createElement("div");
+        domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE;
+
+        let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]);
+        expect(dlb.available.length).toBe(7);
+        expect(dlb.selected.length).toBe(3);
+
+        dlb.addEventListener('added', event => {
+            expect(event.addedElement).toBeTruthy();
+            expect(event.addedElement.outerHTML).toBe('<li class="dual-listbox__item dual-listbox__item--selected" data-id="1">One</li>');
+            done();
+        });
+
+        dlb.available[0].classList.add('dual-listbox__item--selected');
+        let event = {};
+        event.preventDefault = () => {};
+        dlb._actionItemSelected(event);
+    });
 });

No alert changes

Improved metrics

Total package byte prevSize

99655

increased by5.53%

Lines of code

1170

increased by9.55%

No dependency changes