From 66feebc1ee0f4f6f689cdd8f9037bf9676f31789 Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Sat, 20 Aug 2016 12:39:37 +0100 Subject: [PATCH] Ensure placeholder option is respected --- README.md | 284 +++++++++++++++-------------- assets/scripts/dist/choices.min.js | 6 +- assets/scripts/src/choices.js | 14 +- index.html | 5 +- tests/spec/choices_spec.js | 2 +- 5 files changed, 166 insertions(+), 145 deletions(-) diff --git a/README.md b/README.md index 96199fd..f186360 100644 --- a/README.md +++ b/README.md @@ -99,11 +99,11 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input ## Configuration options ### items -Type: `Array` Default: `[]` +**Type:** `Array` **Default:** `[]` -Input types affected: `text` +**Input types affected:** `text` -Usage: Add pre-selected items (see terminology) to text input. +**Usage:** Add pre-selected items (see terminology) to text input. Pass an array of strings: @@ -125,11 +125,11 @@ Pass an array of objects: ``` ### choices -Type: `Array` Default: `[]` +**Type:** `Array` **Default:** `[]` -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: Add choices (see terminology) to select input. +**Usage:** Add choices (see terminology) to select input. Pass an array of objects: @@ -149,90 +149,90 @@ Pass an array of objects: ``` ### maxItemCount -Type: `Number` Default: `-1` +**Type:** `Number` **Default:** `-1` -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: The amount of items a user can input/select ("-1" indicates no limit). +**Usage:** The amount of items a user can input/select ("-1" indicates no limit). ### addItems -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `text` +**Input types affected:** `text` -Usage: Whether a user can add items to the passed input's value. +**Usage:** Whether a user can add items to the passed input's value. ### removeItems -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Whether a user can remove items. +**Usage:** Whether a user can remove items. ### removeItemButton -Type: `Boolean` Default: `false` +**Type:** `Boolean` **Default:** `false` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Whether a button should show that, when clicked, will remove an item. +**Usage:** Whether a button should show that, when clicked, will remove an item. ### editItems -Type: `Boolean` Default: `false` +**Type:** `Boolean` **Default:** `false` -Input types affected: `text` +**Input types affected:** `text` -Usage: Whether a user can edit items. An items value can be edited by pressing the backspace. +**Usage:** Whether a user can edit items. An items value can be edited by pressing the backspace. ### duplicateItems -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Whether a user can input/choose a duplicate item. +**Usage:** Whether a user can input/choose a duplicate item. ### delimiter -Type: `String` Default: `,` +**Type:** `String` **Default:** `,` -Input types affected: `text` +**Input types affected:** `text` -Usage: What divides each value. By default the delimited value would be `"Value 1, Value 2, Value 3"`. +**Usage:** What divides each value. By default the delimited value would be `"Value 1, Value 2, Value 3"`. ### paste -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Whether a user can paste into the input. +**Usage:** Whether a user can paste into the input. ### search -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `select-one` +**Input types affected:** `select-one` -Usage: Whether a user should be allowed to search avaiable choices. Note that multiple select boxes will always show search inputs. +**Usage:** Whether a user should be allowed to search avaiable choices. Note that multiple select boxes will always show search inputs. ### flip -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: Whether the dropdown should appear above the input if there is not enough space within the window. +**Usage:** Whether the dropdown should appear above the input if there is not enough space within the window. ### regexFilter -Type: `Regex` Default: `null` +**Type:** `Regex` **Default:** `null` -Input types affected: `text` +**Input types affected:** `text` -Usage: A filter that will need to pass for a user to successfully add an item. +**Usage:** A filter that will need to pass for a user to successfully add an item. ### sortFilter -Type: `Function` Default: sortByAlpha +**Type:** `Function` **Default:** sortByAlpha -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: The function that will sort choices before they are displayed (unless a user is searching). By default choices are sorted by alphabetical order. +**Usage:** The function that will sort choices before they are displayed (unless a user is searching). By default choices are sorted by alphabetical order. -Example: +**Example:** ```js // Sorting via length of label from largest to smallest @@ -244,63 +244,63 @@ const example = new Choices(element, { ``` ### sortFields -Type: `Array/String` Default: `['label', 'value']` +**Type:** `Array/String` **Default:** `['label', 'value']` -Input types affected:`select-one`, `select-multiple` +**Input types affected:**`select-one`, `select-multiple` -Usage: Specify which fields should be used for sorting. +**Usage:** Specify which fields should be used for sorting. ### placeholder -Type: `Boolean` Default: `true` +**Type:** `Boolean` **Default:** `true` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value. +**Usage:** Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value. ### placeholderValue -Type: `String` Default: `null` +**Type:** `String` **Default:** `null` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: The value of the inputs placeholder. +**Usage:** The value of the inputs placeholder. ### prependValue -Type: `String` Default: `null` +**Type:** `String` **Default:** `null` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Prepend a value to each item added/selected. +**Usage:** Prepend a value to each item added/selected. ### appendValue -Type: `String` Default: `null` +**Type:** `String` **Default:** `null` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Append a value to each item added/selected. +**Usage:** Append a value to each item added/selected. ### loadingText -Type: `String` Default: `Loading...` +**Type:** `String` **Default:** `Loading...` -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: The text that is shown whilst choices are being populated via AJAX. +**Usage:** The text that is shown whilst choices are being populated via AJAX. ### noResultsText -Type: `String` Default: `No results round` +**Type:** `String` **Default:** `No results round` -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: The text that is shown when a user's search has returned no results. +**Usage:** The text that is shown when a user's search has returned no results. ### noChoicesText -Type: `String` Default: `No choices to choose from` +**Type:** `String` **Default:** `No choices to choose from` -Input types affected: `select-multiple` +**Input types affected:** `select-multiple` -Usage: The text that is shown when a user has selected all possible choices. +**Usage:** The text that is shown when a user has selected all possible choices. ### classNames -Type: `Object` Default: +**Type:** `Object` **Default:** ``` classNames: { @@ -330,51 +330,51 @@ classNames: { } ``` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation. +**Usage:** Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation. ### callbackOnInit -Type: `Function` Default: `() => {}` +**Type:** `Function` **Default:** `() => {}` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Function to run once Choices initialises. +**Usage:** Function to run once Choices initialises. ### callbackOnAddItem -Type: `Function` Default: `(id, value, passedInput) => {}` +**Type:** `Function` **Default:** `(id, value, passedInput) => {}` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Function to run each time an item is added (programmatically or by the user). +**Usage:** Function to run each time an item is added (programmatically or by the user). ### callbackOnRemoveItem -Type: `Function` Default: `(id, value, passedInput) => {}` +**Type:** `Function` **Default:** `(id, value, passedInput) => {}` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Function to run each time an item is removed (programmatically or by the user). +**Usage:** Function to run each time an item is removed (programmatically or by the user). ### callbackOnHighlightItem -Type: `Function` Default: `(id, value, passedInput) => {}` +**Type:** `Function` **Default:** `(id, value, passedInput) => {}` -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Function to run each time an item is highlighted. +**Usage:** Function to run each time an item is highlighted. ### callbackOnUnhighlightItem -Type: `Function` Default: `(id, value, passedInput) => {}` +**Type:** `Function` **Default:** `(id, value, passedInput) => {}` -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Function to run each time an item is unhighlighted. +**Usage:** Function to run each time an item is unhighlighted. ### callbackOnChange -Type: `Function` Default: `(value, passedInput) => {}` +**Type:** `Function` **Default:** `(value, passedInput) => {}` -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Function to run each time an item is added/removed by a user. +**Usage:** Function to run each time an item is added/removed by a user. ## Methods @@ -398,70 +398,70 @@ choices.disable(); ``` ### destroy(); -Input types affected: `text`, `select-multiple`, `select-one` +**Input types affected:** `text`, `select-multiple`, `select-one` -Usage: Kills the instance of Choices, removes all event listeners and returns passed input to its initial state. +**Usage:** Kills the instance of Choices, removes all event listeners and returns passed input to its initial state. ### init(); -Input types affected: `text`, `select-multiple`, `select-one` +**Input types affected:** `text`, `select-multiple`, `select-one` -Usage: Creates a new instance of Choices, adds event listeners, creates templates and renders a Choices element to the DOM. +**Usage:** Creates a new instance of Choices, adds event listeners, creates templates and renders a Choices element to the DOM. -Note: This is called implicitly when a new instance of Choices is created. This would be used after a Choices instance had already been destroyed (using `destroy()`). +**Note:** This is called implicitly when a new instance of Choices is created. This would be used after a Choices instance had already been destroyed (using `destroy()`). ### highlightAll(); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Highlight each chosen item (selected items can be removed). +**Usage:** Highlight each chosen item (selected items can be removed). ### unhighlightAll(); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Un-highlight each chosen item. +**Usage:** Un-highlight each chosen item. ### removeItemsByValue(value); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Remove each item by a given value. +**Usage:** Remove each item by a given value. ### removeActiveItems(excludedId); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Remove each selectable item. +**Usage:** Remove each selectable item. ### removeHighlightedItems(); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Remove each item the user has selected. +**Usage:** Remove each item the user has selected. ### showDropdown(); -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: Show option list dropdown (only affects select inputs). +**Usage:** Show option list dropdown (only affects select inputs). ### hideDropdown(); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Hide option list dropdown (only affects select inputs). +**Usage:** Hide option list dropdown (only affects select inputs). ### toggleDropdown(); -Input types affected: `text`, `select-multiple` +**Input types affected:** `text`, `select-multiple` -Usage: Toggle dropdown between showing/hidden. +**Usage:** Toggle dropdown between showing/hidden. ### setChoices(choices, value, label); -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: Set choices of select input via an array of objects, a value name and a label name. This behaves the same as passing items via the `choices` option but can be called after initialising Choices. This can also be used to add groups of choices (see example 2); +**Usage:** Set choices of select input via an array of objects, a value name and a label name. This behaves the same as passing items via the `choices` option but can be called after initialising Choices. This can also be used to add groups of choices (see example 2); -Example 1: +**Example 1:** ```js const example = new Choices(element); @@ -473,7 +473,7 @@ example.setChoices([ ], 'value', 'label'); ``` -Example 2: +**Example 2:** ```js const example = new Choices(element); @@ -501,11 +501,11 @@ example.setChoices([{ ``` ### getValue(valueOnly) -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Get value(s) of input (i.e. inputted items (text) or selected choices (select)). Optionally pass an argument of `true` to only return values rather than value objects. +**Usage:** Get value(s) of input (i.e. inputted items (text) or selected choices (select)). Optionally pass an argument of `true` to only return values rather than value objects. -Example: +**Example:** ```js const example = new Choices(element); @@ -514,11 +514,11 @@ const valueArray = example.getValue(); // returns [{ active: true, choiceId: 1, ``` ### setValue(args); -Input types affected: `text` +**Input types affected:** `text` -Usage: Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the `items` option but can be called after initialising Choices. +**Usage:** Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the `items` option but can be called after initialising Choices. -Example: +**Example:** ```js const example = new Choices(element); @@ -535,11 +535,11 @@ example.setValue(['Four','Five','Six']); ``` ### setValueByChoice(value); -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: Set value of input based on existing Choice. +**Usage:** Set value of input based on existing Choice. -Example: +**Example:** ```js const example = new Choices(element, { @@ -554,34 +554,34 @@ example.setValueByChoice('Two'); // Choice with value of 'Two' has now been sele ``` ### clearStore(); -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Removes all items, choices and groups. Use with caution. +**Usage:** Removes all items, choices and groups. Use with caution. ### clearInput(); -Input types affected: `text` +**Input types affected:** `text` -Usage: Clear input of any user inputted text. +**Usage:** Clear input of any user inputted text. ### disable(); -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Disables input from accepting new value/sselecting further choices. +**Usage:** Disables input from accepting new value/sselecting further choices. ### enable(); -Input types affected: `text`, `select-one`, `select-multiple` +**Input types affected:** `text`, `select-one`, `select-multiple` -Usage: Enables input to accept new values/select further choices. +**Usage:** Enables input to accept new values/select further choices. ### ajax(fn); -Input types affected: `select-one`, `select-multiple` +**Input types affected:** `select-one`, `select-multiple` -Usage: Populate options via a callback. +**Usage:** Populate options via a callback. -Example: +**Example:** ```js var example = new Choices(element); @@ -601,7 +601,23 @@ example.ajax(function(callback) { ## Browser compatibility -ES5 browsers and above (http://caniuse.com/#feat=es5). +Choices is compiled using [Babel](https://babeljs.io/) to enable support for [ES5 browsers](http://caniuse.com/#feat=es5). If you need to support a browser that does not support one of the features listed below, I suggest including a polyfill from the very good [polyfill.io](https://cdn.polyfill.io/v2/docs/): + +**Polyfill example used for the demo:** + +```html + +``` + +**Features used in Choices:** + +* Array.prototype.forEach +* Array.prototype.map +* Array.prototype.find +* Array.prototype.some +* Array.prototype.reduce +* Array.prototype.indexOf +* Element.prototype.classList ## Development To setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command: diff --git a/assets/scripts/dist/choices.min.js b/assets/scripts/dist/choices.min.js index f4379a7..cd45a82 100644 --- a/assets/scripts/dist/choices.min.js +++ b/assets/scripts/dist/choices.min.js @@ -1,4 +1,4 @@ -/*! choices.js v1.1.4 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return e[n].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var i={};return t.m=e,t.c=i,t.p="/assets/scripts/dist/",t(0)}([function(e,t,i){e.exports=i(1)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function s(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t1)for(var r=1;r=n;return r?this.containerOuter.classList.add(this.config.classNames.flippedState):this.containerOuter.classList.remove(this.config.classNames.flippedState),e&&this.canSearch&&document.activeElement!==this.input&&this.input.focus(),this}},{key:"hideDropdown",value:function(){var e=this.containerOuter.classList.contains(this.config.classNames.flippedState);return this.containerOuter.classList.remove(this.config.classNames.openState),this.containerOuter.setAttribute("aria-expanded","false"),this.dropdown.classList.remove(this.config.classNames.activeState),e&&this.containerOuter.classList.remove(this.config.classNames.flippedState),this}},{key:"toggleDropdown",value:function(){var e=this.dropdown.classList.contains(this.config.classNames.activeState);return e?this.hideDropdown(!0):this.showDropdown(!0),this}},{key:"getValue",value:function(){var e=this,t=!(arguments.length<=0||void 0===arguments[0])&&arguments[0],i=this.store.getItemsFilteredByActive(),n=[];return i.forEach(function(i){"text"===e.passedElement.type?n.push(t?i.value:i):i.active&&n.push(t?i.value:i)}),"select-one"===this.passedElement.type?n[0]:n}},{key:"setValue",value:function(e){var t=this;if(this.initialised===!0){var i=[].concat(s(e));i.forEach(function(e){if((0,d.isType)("Object",e)){if(!e.value)return;"text"!==t.passedElement.type?t._addChoice(!0,!1,e.value,e.label,-1):t._addItem(e.value,e.label,e.id)}else(0,d.isType)("String",e)&&("text"!==t.passedElement.type?t._addChoice(!0,!1,e,e,-1):t._addItem(e))})}return this}},{key:"setValueByChoice",value:function(e){var t=this;return"text"!==this.passedElement.type&&!function(){var i=t.store.getChoices(),n=(0,d.isType)("Array",e)?e:[e];n.forEach(function(e){var n=i.find(function(t){return t.value===e});n?n.selected?console.warn("Attempting to select choice already selected"):t._addItem(n.value,n.label,n.id):console.warn("Attempting to select choice that does not exist")})}(),this}},{key:"setChoices",value:function(e,t,i){var n=this;if(this.initialised===!0&&("select-one"===this.passedElement.type||"select-multiple"===this.passedElement.type)){if(!(0,d.isType)("Array",e)||!t)return;e&&e.length&&(this.containerOuter.classList.remove(this.config.classNames.loadingState),e.forEach(function(e,s){e.choices?n._addGroup(e,s):n._addChoice(!!e.selected&&e.selected,!!e.disabled&&e.disabled,e[t],e[i])}))}return this}},{key:"clearStore",value:function(){return this.store.dispatch((0,u.clearAll)()),this}},{key:"clearInput",value:function(){return this.input.value&&(this.input.value=""),"select-one"!==this.passedElement.type&&(this.input.style.width=(0,d.getWidthOfInput)(this.input)),this}},{key:"disable",value:function(){return this.passedElement.disabled=!0,this.initialised&&(this.containerOuter.classList.contains(this.config.classNames.disabledState)||(this._removeEventListeners(),this.passedElement.setAttribute("disabled",""),this.input.setAttribute("disabled",""),this.containerOuter.classList.add(this.config.classNames.disabledState),this.containerOuter.setAttribute("aria-disabled","true"))),this}},{key:"enable",value:function(){return this.passedElement.disabled=!1,this.initialised&&this.containerOuter.classList.contains(this.config.classNames.disabledState)&&(this._addEventListeners(),this.passedElement.removeAttribute("disabled"),this.input.removeAttribute("disabled"),this.containerOuter.classList.remove(this.config.classNames.disabledState),this.containerOuter.removeAttribute("aria-disabled")),this}},{key:"ajax",value:function(e){var t=this;if(this.initialised===!0&&("select-one"===this.passedElement.type||"select-multiple"===this.passedElement.type)){if(this.containerOuter.classList.add(this.config.classNames.loadingState),this.containerOuter.setAttribute("aria-busy","true"),"select-one"===this.passedElement.type){var i=this._getTemplate("placeholder",this.config.loadingText);this.itemList.appendChild(i)}else this.input.placeholder=this.config.loadingText;var n=function(e,i,n){if((0,d.isType)("Array",e)&&i){if(e&&e.length){if(t.containerOuter.classList.remove(t.config.classNames.loadingState),"select-multiple"===t.passedElement.type){var s=t.config.placeholderValue||t.passedElement.getAttribute("placeholder");t.input.placeholder=s}e.forEach(function(e,s){0===s&&"select-one"===t.passedElement.type?t._addChoice(!0,!1,e[i],e[n]):t._addChoice(!1,!1,e[i],e[n])})}t.containerOuter.removeAttribute("aria-busy")}};e(n)}return this}},{key:"_triggerChange",value:function(e){if(e){if(this.config.callbackOnChange){var t=this.config.callbackOnChange;(0,d.isType)("Function",t)?t(e,this.passedElement):console.error("callbackOnChange: Callback is not a function")}"select-one"===this.passedElement.type&&(this.focusAndHideDropdown=!0,this.containerOuter.focus())}}},{key:"_handleButtonAction",value:function(e,t){var i=this;e&&t&&this.config.removeItems&&this.config.removeItemButton&&!function(){var n=t.parentNode.getAttribute("data-id"),s=e.find(function(e){return e.id===parseInt(n,10)});if(i._removeItem(s),i._triggerChange(s.value),"select-one"===i.passedElement.type){var o=i.config.placeholderValue||i.passedElement.getAttribute("placeholder");if(o){var r=i._getTemplate("placeholder",o);i.itemList.appendChild(r)}}}()}},{key:"_handleItemAction",value:function(e,t){var i=this,n=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];e&&t&&this.config.removeItems&&"select-one"!==this.passedElement.type&&!function(){var s=t.getAttribute("data-id");e.forEach(function(e){e.id!==parseInt(s,10)||e.highlighted?n||e.highlighted&&i.unhighlightItem(e):i.highlightItem(e)}),document.activeElement!==i.input&&i.input.focus()}()}},{key:"_handleChoiceAction",value:function(e,t){if(e&&t){var i=t.getAttribute("data-id"),n=this.store.getChoiceById(i);if(n&&!n.selected&&!n.disabled){var s=this._canAddItem(e,n.value);s.response&&(this._addItem(n.value,n.label,n.id),this._triggerChange(n.value),this.clearInput(this.passedElement),this.isSearching=!1,this.store.dispatch((0,u.activateChoices)(!0)),"select-one"===this.passedElement.type&&this.hideDropdown())}}}},{key:"_handleBackspace",value:function(e){if(this.config.removeItems&&e){var t=e[e.length-1],i=e.some(function(e){return e.highlighted===!0});this.config.editItems&&!i&&t?(this.input.value=t.value,this._removeItem(t),this._triggerChange(t.value)):(i||this.highlightItem(t),this.removeHighlightedItems())}}},{key:"_canAddItem",value:function(e,t){var i=!0,n='Press Enter to add "'+t+'"';if("select-multiple"!==this.passedElement.type&&"text"!==this.passedElement.type||this.config.maxItemCount>0&&this.config.maxItemCount<=this.itemList.children.length&&(i=!1,n="Only "+this.config.maxItemCount+" values can be added."),"text"===this.passedElement.type&&this.config.addItems){var s=!e.some(function(e){return e.value===t});this.config.regexFilter&&(i=this._regexFilter(t)),this.config.duplicateItems!==!1||s||(i=!1,n="Only unique values can be added.")}return{response:i,notice:n}}},{key:"_searchChoices",value:function(e){var t=this;if(e&&this.input===document.activeElement){var i=this.store.getChoices(),n=i.some(function(e){return e.active!==!0});if(e&&e.length>1){var s=function(){var i=(0,d.isType)("String",e)?e.trim():e,n=(0,d.isType)("String",t.currentValue)?t.currentValue.trim():t.currentValue;if(i.length>=1&&i!==n+" "){var s=t.store.getChoicesFilteredBySelectable(),o=i,r=(0,d.isType)("Array",t.config.sortFields)?t.config.sortFields:[t.config.sortFields],a=new c.default(s,{keys:r,shouldSort:!0,include:"score"}),l=a.search(o);t.currentValue=i,t.highlightPosition=0,t.isSearching=!0,t.store.dispatch((0,u.filterChoices)(l))}};s()}else n&&(this.isSearching=!1,this.store.dispatch((0,u.activateChoices)(!0)))}}},{key:"_addEventListeners",value:function(){document.addEventListener("keyup",this._onKeyUp),document.addEventListener("keydown",this._onKeyDown),document.addEventListener("click",this._onClick),document.addEventListener("touchmove",this._onTouchMove),document.addEventListener("touchend",this._onTouchEnd),document.addEventListener("mousedown",this._onMouseDown),document.addEventListener("mouseover",this._onMouseOver),this.passedElement.type&&"select-one"===this.passedElement.type&&(this.containerOuter.addEventListener("focus",this._onFocus),this.containerOuter.addEventListener("blur",this._onBlur)),this.input.addEventListener("input",this._onInput),this.input.addEventListener("paste",this._onPaste),this.input.addEventListener("focus",this._onFocus),this.input.addEventListener("blur",this._onBlur)}},{key:"_removeEventListeners",value:function(){document.removeEventListener("keyup",this._onKeyUp),document.removeEventListener("keydown",this._onKeyDown),document.removeEventListener("click",this._onClick),document.removeEventListener("touchmove",this._onTouchMove),document.removeEventListener("touchend",this._onTouchEnd),document.removeEventListener("mousedown",this._onMouseDown),document.removeEventListener("mouseover",this._onMouseOver),this.passedElement.type&&"select-one"===this.passedElement.type&&(this.containerOuter.removeEventListener("focus",this._onFocus),this.containerOuter.removeEventListener("blur",this._onBlur)),this.input.removeEventListener("input",this._onInput),this.input.removeEventListener("paste",this._onPaste),this.input.removeEventListener("focus",this._onFocus),this.input.removeEventListener("blur",this._onBlur)}},{key:"_onKeyDown",value:function(e){if(e.target===this.input||this.containerOuter.contains(e.target)){var t=e.target,i=e.ctrlKey||e.metaKey,n=46,s=8,o=13,r=65,a=27,c=38,l=40,h=this.store.getItemsFilteredByActive(),u=this.input===document.activeElement,p=this.dropdown.classList.contains(this.config.classNames.activeState),f=this.itemList&&this.itemList.children,v=String.fromCharCode(e.keyCode);switch("text"!==this.passedElement.type&&/[a-zA-Z0-9-_ ]/.test(v)&&!p&&this.showDropdown(),this.canSearch=this.config.search,e.keyCode){case r:i&&f&&(this.canSearch=!1,this.config.removeItems&&!this.input.value&&this.input===document.activeElement&&this.highlightAll(this.itemList.children));break;case o:if("text"===this.passedElement.type&&t.value){var m=this.input.value,g=this._canAddItem(h,m);g.response&&(this.toggleDropdown(),this._addItem(m),this._triggerChange(m),this.clearInput(this.passedElement))}if(t.hasAttribute("data-button")&&(e.preventDefault(),this._handleButtonAction(h,t)),p){var y=this.dropdown.querySelector("."+this.config.classNames.highlightedState);y&&this._handleChoiceAction(h,y)}else"select-one"===this.passedElement.type&&(e.preventDefault(),this.showDropdown(!0));break;case a:p&&this.toggleDropdown();break;case l:case c:if(p||"select-one"===this.passedElement.type){p||this.showDropdown(!0);var b=this.dropdown.querySelector("."+this.config.classNames.highlightedState),E=e.keyCode===l?1:-1,_=void 0;this.canSearch=!1,_=b?(0,d.getAdjacentEl)(b,"[data-choice-selectable]",E):this.dropdown.querySelector("[data-choice-selectable]"),_&&((0,d.isScrolledIntoView)(_,this.choiceList,E)||this._scrollToChoice(_,E),this._highlightChoice(_)),e.preventDefault()}break;case n:case s:u&&!e.target.value&&"select-one"!==this.passedElement.type&&(this._handleBackspace(h),e.preventDefault())}}}},{key:"_onKeyUp",value:function(e){if(e.target===this.input)if("text"===this.passedElement.type){var t=this.dropdown.classList.contains(this.config.classNames.activeState),i=this.input.value;if(i){var n=this.store.getItemsFilteredByActive(),s=this._canAddItem(n,i);if(s.notice){var o=this._getTemplate("notice",s.notice);this.dropdown.innerHTML=o.outerHTML}s.response===!0?t||this.showDropdown():!s.notice&&t&&this.hideDropdown()}else t&&this.hideDropdown()}else{var r=46,a=8;e.keyCode!==r&&e.keyCode!==a||e.target.value?this.canSearch&&this._searchChoices(this.input.value):"text"!==this.passedElement.type&&this.isSearching&&(this.isSearching=!1,this.store.dispatch((0,u.activateChoices)(!0)))}}},{key:"_onInput",value:function(){if("select-one"!==this.passedElement.type)if(this.config.placeholder&&(this.config.placeholderValue||this.passedElement.getAttribute("placeholder"))){var e=this.config.placeholderValue||this.passedElement.getAttribute("placeholder");this.input.value&&this.input.value.length>=e.length/1.25&&(this.input.style.width=(0,d.getWidthOfInput)(this.input))}else this.input.style.width=(0,d.getWidthOfInput)(this.input)}},{key:"_onTouchMove",value:function(){this.wasTap===!0&&(this.wasTap=!1)}},{key:"_onTouchEnd",value:function(e){var t=e.target||e.touches[0].target;this.wasTap===!0&&this.containerOuter.contains(t)&&(t!==this.containerOuter&&t!==this.containerInner||"select-one"===this.passedElement.type||("text"===this.passedElement.type?document.activeElement!==this.input&&this.input.focus():this.showDropdown(!0)),e.stopPropagation()),this.wasTap=!0}},{key:"_onMouseDown",value:function(e){var t=e.target;if(this.containerOuter.contains(t)&&t!==this.input){var i=this.store.getItemsFilteredByActive(),n=e.shiftKey;t.hasAttribute("data-item")?this._handleItemAction(i,t,n):t.hasAttribute("data-choice")&&this._handleChoiceAction(i,t),e.preventDefault()}}},{key:"_onClick",value:function(e){var t=e.target,i=this.dropdown.classList.contains(this.config.classNames.activeState),n=this.store.getItemsFilteredByActive();if(this.containerOuter.contains(t))t.hasAttribute("data-button")&&this._handleButtonAction(n,t),i?"select-one"!==this.passedElement.type||t===this.input||this.dropdown.contains(t)||this.hideDropdown():"text"===this.passedElement.type?document.activeElement!==this.input&&this.input.focus():this.canSearch?this.showDropdown(!0):this.showDropdown();else{var s=n.some(function(e){return e.highlighted===!0});s&&this.unhighlightAll(),this.containerOuter.classList.remove(this.config.classNames.focusState),i&&this.hideDropdown()}}},{key:"_onMouseOver",value:function(e){(e.target===this.dropdown||this.dropdown.contains(e.target))&&e.target.hasAttribute("data-choice")&&this._highlightChoice(e.target)}},{key:"_onPaste",value:function(e){e.target!==this.input||this.config.paste||e.preventDefault()}},{key:"_onFocus",value:function(e){var t=e.target;if(this.containerOuter.contains(t)){var i=this.dropdown.classList.contains(this.config.classNames.activeState);if(!i)switch(this.passedElement.type){case"text":t===this.input&&this.containerOuter.classList.add(this.config.classNames.focusState);break;case"select-one":t===this.containerOuter&&(this.containerOuter.classList.add(this.config.classNames.focusState),!this.focusAndHideDropdown&&this.canSearch&&document.activeElement!==this.input?this.showDropdown(!0):this.showDropdown(),this.focusAndHideDropdown=!1),t===this.input&&(this.containerOuter.classList.add(this.config.classNames.focusState),this.showDropdown());break;case"select-multiple":t===this.input&&(this.containerOuter.classList.add(this.config.classNames.focusState),this.showDropdown(!0))}}}},{key:"_onBlur",value:function(e){var t=e.target;if(this.containerOuter.contains(t)){var i=this.store.getItemsFilteredByActive(),n=this.dropdown.classList.contains(this.config.classNames.activeState),s=i.some(function(e){return e.highlighted===!0});switch(this.passedElement.type){case"text":t===this.input&&(this.containerOuter.classList.remove(this.config.classNames.focusState),s&&this.unhighlightAll(),n&&this.hideDropdown());break;case"select-one":t===this.containerOuter&&(this.containerOuter.classList.remove(this.config.classNames.focusState),n&&!this.canSearch&&this.hideDropdown()),t===this.input&&(this.containerOuter.classList.remove(this.config.classNames.focusState),n&&this.hideDropdown());break;case"select-multiple":t===this.input&&(this.containerOuter.classList.remove(this.config.classNames.focusState),n&&this.hideDropdown(),s&&this.unhighlightAll())}}}},{key:"_regexFilter",value:function(e){if(e){var t=this.config.regexFilter,i=new RegExp(t.source,"i");return i.test(e)}}},{key:"_scrollToChoice",value:function(e,t){var i=this;if(e){var n=this.choiceList.offsetHeight,s=e.offsetHeight,o=e.offsetTop+s,r=this.choiceList.scrollTop+n,a=t>0?this.choiceList.scrollTop+o-r:e.offsetTop,c=function l(){var e=4,n=!1,s=void 0,o=void 0;t>0?(s=(a-i.choiceList.scrollTop)/e,o=s>1?s:1,i.choiceList.scrollTop=i.choiceList.scrollTop+o,i.choiceList.scrollTop1?s:1,i.choiceList.scrollTop=i.choiceList.scrollTop-o,i.choiceList.scrollTop>a&&(n=!0)),n&&requestAnimationFrame(function(e){l(e,a,t)})};requestAnimationFrame(function(e){c(e,a,t)})}}},{key:"_highlightChoice",value:function(e){var t=this,i=Array.from(this.dropdown.querySelectorAll("[data-choice-selectable]"));if(i&&i.length){var n=Array.from(this.dropdown.querySelectorAll("."+this.config.classNames.highlightedState));if(n.forEach(function(e){e.classList.remove(t.config.classNames.highlightedState),e.setAttribute("aria-selected","false")}),e)e.classList.add(this.config.classNames.highlightedState),this.highlightPosition=i.indexOf(e);else{var s=void 0;s=i.length>this.highlightPosition?i[this.highlightPosition]:i[i.length-1],s||(s=i[0]),s.classList.add(this.config.classNames.highlightedState),s.setAttribute("aria-selected","true")}}}},{key:"_addItem",value:function(e,t){var i=arguments.length<=2||void 0===arguments[2]?-1:arguments[2],n=(0,d.isType)("String",e)?e.trim():e,s=this.store.getItems(),o=t||n,r=parseInt(i,10)||-1;this.config.prependValue&&(n=this.config.prependValue+n.toString()),this.config.appendValue&&(n+=this.config.appendValue.toString());var a=s?s.length+1:1;if(this.store.dispatch((0,u.addItem)(n,o,a,r)),"select-one"===this.passedElement.type&&this.removeActiveItems(a),this.config.callbackOnAddItem){var c=this.config.callbackOnAddItem;(0,d.isType)("Function",c)?c(a,n,this.passedElement):console.error("callbackOnAddItem: Callback is not a function")}return this}},{key:"_removeItem",value:function(e){var t=arguments.length<=1||void 0===arguments[1]?this.config.callbackOnRemoveItem:arguments[1];if(!e||!(0,d.isType)("Object",e))return void console.error("removeItem: No item object was passed to be removed");var i=e.id,n=e.value,s=e.choiceId;if(this.store.dispatch((0,u.removeItem)(i,s)),t){if(!(0,d.isType)("Function",t))return void console.error("callbackOnRemoveItem: Callback is not a function");t(i,n,this.passedElement)}return this}},{key:"_addChoice",value:function(e,t,i,n){var s=arguments.length<=4||void 0===arguments[4]?-1:arguments[4];if(i){var o=this.store.getChoices(),r=n||i,a=o?o.length+1:1;this.store.dispatch((0,u.addChoice)(i,r,a,s,t)),e&&!t&&this._addItem(i,r,a)}}},{key:"_addGroup",value:function(e,t){var i=this,n=(0,d.isType)("Object",e)?e.choices:Array.from(e.getElementsByTagName("OPTION")),s=t,o=!!e.disabled&&e.disabled;n?(this.store.dispatch((0,u.addGroup)(e.label,s,!0,o)),n.forEach(function(e){var t=e.disabled||e.parentNode&&e.parentNode.disabled||!1,n=!!e.selected&&e.selected,o=void 0;o=(0,d.isType)("Object",e)?e.label||e.value:e.innerHTML,i._addChoice(n,t,e.value,o,s)})):this.store.dispatch((0,u.addGroup)(e.label,e.id,!1,e.disabled))}},{key:"_getTemplate",value:function(e){if(e){for(var t=this.config.templates,i=arguments.length,n=Array(i>1?i-1:0),s=1;s