From bf52b7313cbb587e6459ea00c00301bc138d171a Mon Sep 17 00:00:00 2001 From: gbnm Date: Fri, 12 May 2023 22:50:17 +0100 Subject: [PATCH 1/4] Accessibility improvements with new options Added new 'searchFormLabel' option. This option will the used to enhance accessibility when using search functionality on the dropdowns. Added new 'ariaLabelText' option. This option will the used to enhance accessibility when focusing the dropdown wrapper making it verbose. --- src/sass/partials/virtual-select.scss | 12 ++++++++++++ src/virtual-select.js | 14 +++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/sass/partials/virtual-select.scss b/src/sass/partials/virtual-select.scss index aa0c6c0..cb2bfc4 100755 --- a/src/sass/partials/virtual-select.scss +++ b/src/sass/partials/virtual-select.scss @@ -271,6 +271,18 @@ position: relative; } +.vscomp-search-label { + border:0; + clip:rect(0 0 0 0); + height:1px; + margin:-1px; + overflow:hidden; + padding:0; + position:absolute; + white-space:nowrap; + width:1px; +} + .vscomp-search-input { background-color: transparent; border: 0; diff --git a/src/virtual-select.js b/src/virtual-select.js index 57ea35c..7d2fe1d 100755 --- a/src/virtual-select.js +++ b/src/virtual-select.js @@ -24,6 +24,7 @@ const dataProps = [ 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', + 'ariaLabelText', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', @@ -59,6 +60,7 @@ const dataProps = [ 'search', 'searchByStartsWith', 'searchDelay', + 'searchFormLabel', 'searchGroup', 'searchPlaceholderText', 'selectAllOnlyVisible', @@ -110,6 +112,7 @@ export class VirtualSelect { const valueTooltip = this.getTooltipAttrText(this.placeholder, true, true); const clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText); const ariaLabelledbyText = this.ariaLabelledby ? `aria-labelledby="${this.ariaLabelledby}"` : ''; + const ariaLabelText = this.ariaLabelText ? `aria-label="${this.ariaLabelText}"` : ''; let isExpanded = false; if (this.additionalClasses) { @@ -157,7 +160,7 @@ export class VirtualSelect { const html = `
@@ -330,7 +333,7 @@ export class VirtualSelect { } html += `
${leftSection} @@ -364,7 +367,8 @@ export class VirtualSelect { } if (this.hasSearch) { - searchInput = ` + searchInput = ` + ×`; } @@ -763,6 +767,7 @@ export class VirtualSelect { this.noSearchResultsText = options.noSearchResultsText; this.selectAllText = options.selectAllText; this.searchPlaceholderText = options.searchPlaceholderText; + this.searchFormLabel = options.searchFormLabel; this.optionsSelectedText = options.optionsSelectedText; this.optionSelectedText = options.optionSelectedText; this.allOptionsSelectedText = options.allOptionsSelectedText; @@ -789,6 +794,7 @@ export class VirtualSelect { this.initialSelectedValue = options.selectedValue === 0 ? '0' : options.selectedValue; this.emptyValue = options.emptyValue; this.ariaLabelledby = options.ariaLabelledby; + this.ariaLabelText = options.ariaLabelText; this.maxWidth = options.maxWidth; this.searchDelay = options.searchDelay; @@ -837,6 +843,7 @@ export class VirtualSelect { labelKey: 'label', descriptionKey: 'description', aliasKey: 'alias', + ariaLabelText: 'Options list', optionsCount: 5, noOfDisplayValues: 50, optionHeight: '40px', @@ -844,6 +851,7 @@ export class VirtualSelect { noSearchResultsText: 'No results found', selectAllText: 'Select All', searchPlaceholderText: 'Search...', + searchFormLabel: 'Search', clearButtonText: 'Clear', moreText: 'more...', optionsSelectedText: 'options selected', From c3294ba74c5df2d4ac715aecaa2396533cd213bf Mon Sep 17 00:00:00 2001 From: gbnm Date: Mon, 15 May 2023 11:08:34 +0100 Subject: [PATCH 2/4] Update virtual-select.js --- src/virtual-select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/virtual-select.js b/src/virtual-select.js index 7d2fe1d..8c6c853 100755 --- a/src/virtual-select.js +++ b/src/virtual-select.js @@ -158,7 +158,7 @@ export class VirtualSelect { wrapperClasses += ` popup-position-${this.popupPosition.toLowerCase()}`; } - const html = `
From 2aec9be29a8bac5bbf558bd1262bbd3100f85419 Mon Sep 17 00:00:00 2001 From: gbnm Date: Mon, 15 May 2023 13:50:22 +0100 Subject: [PATCH 3/4] Added tabIndex control on the dropdown wrapper --- src/utils/dom-utils.js | 25 +++++++++++++++++++++++++ src/virtual-select.js | 6 +++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/utils/dom-utils.js b/src/utils/dom-utils.js index fbcdcf5..15ffd44 100644 --- a/src/utils/dom-utils.js +++ b/src/utils/dom-utils.js @@ -281,4 +281,29 @@ export class DomUtils { static convertPropToDataAttr(prop) { return prop ? `data-${prop}`.replace(/([A-Z])/g, '-$1').toLowerCase() : ''; } + + /** + * Changes the tab index of an element passed as an input + * @static + * @param {HTMLElement | NodeListOf} $ele + * @param {number} newTabIndex + * @memberof DomUtils + */ + static changeTabIndex($ele, newTabIndex) { + if (!$ele) { + console.log($ele,'Invalid element provided.'); + return; + } + + DomUtils.getElements($ele).forEach(($this) => { + $this.tabIndex = newTabIndex + }); + } + } + + + + + + diff --git a/src/virtual-select.js b/src/virtual-select.js index 8c6c853..ba8e39d 100755 --- a/src/virtual-select.js +++ b/src/virtual-select.js @@ -114,6 +114,7 @@ export class VirtualSelect { const ariaLabelledbyText = this.ariaLabelledby ? `aria-labelledby="${this.ariaLabelledby}"` : ''; const ariaLabelText = this.ariaLabelText ? `aria-label="${this.ariaLabelText}"` : ''; let isExpanded = false; + let tabIndexVal = -1; if (this.additionalClasses) { wrapperClasses += ` ${this.additionalClasses}`; @@ -134,6 +135,7 @@ export class VirtualSelect { if (this.keepAlwaysOpen) { wrapperClasses += ' keep-always-open'; isExpanded = true; + tabIndexVal = 0; } else { wrapperClasses += ' closed'; } @@ -158,7 +160,7 @@ export class VirtualSelect { wrapperClasses += ` popup-position-${this.popupPosition.toLowerCase()}`; } - const html = `
@@ -2129,6 +2131,7 @@ export class VirtualSelect { this.setDropboxWrapperWidth(); DomUtils.removeClass(this.$allWrappers, 'closed'); + DomUtils.changeTabIndex(this.$allWrappers, 0); if (this.dropboxPopover && !isSilent) { this.dropboxPopover.show(); @@ -2193,6 +2196,7 @@ export class VirtualSelect { } DomUtils.addClass(this.$allWrappers, 'closed'); + DomUtils.changeTabIndex(this.$allWrappers, -1); if (!isSilent) { DomUtils.dispatchEvent(this.$ele, 'afterClose'); From 654da1a97ab977c00ef84a83c81ff062088ac52b Mon Sep 17 00:00:00 2001 From: gbnm Date: Mon, 15 May 2023 13:51:46 +0100 Subject: [PATCH 4/4] Update dom utils --- dist/virtual-select.js | 761 +++++++++++++++++++++++++++++------- dist/virtual-select.min.css | 2 +- dist/virtual-select.min.js | 2 +- src/utils/dom-utils.js | 8 +- 4 files changed, 614 insertions(+), 159 deletions(-) diff --git a/dist/virtual-select.js b/dist/virtual-select.js index 736550b..45ba7fb 100644 --- a/dist/virtual-select.js +++ b/dist/virtual-select.js @@ -12,21 +12,30 @@ var __webpack_exports__ = {}; ;// CONCATENATED MODULE: ./src/utils/utils.js function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } + function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } + function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } + function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } -function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); } -function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } + var Utils = /*#__PURE__*/function () { function Utils() { _classCallCheck(this, Utils); } + _createClass(Utils, null, [{ key: "getString", value: @@ -37,17 +46,18 @@ var Utils = /*#__PURE__*/function () { function getString(text) { return text || text === 0 ? text.toString() : ''; } - /** * @param {any} value * @param {boolean} defaultValue * @returns {boolean} */ + }, { key: "convertToBoolean", value: function convertToBoolean(value) { var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var result; + if (value === true || value === 'true') { result = true; } else if (value === false || value === 'false') { @@ -55,17 +65,19 @@ var Utils = /*#__PURE__*/function () { } else { result = defaultValue; } + return result; } - /** * @param {any} value * @returns {boolean} */ + }, { key: "isEmpty", value: function isEmpty(value) { var result = false; + if (!value) { result = true; } else if (Array.isArray(value)) { @@ -75,60 +87,66 @@ var Utils = /*#__PURE__*/function () { } else if (_typeof(value) === 'object' && Object.keys(value).length === 0) { result = true; } + return result; } - /** * @param {any} value * @returns {boolean} */ + }, { key: "isNotEmpty", value: function isNotEmpty(value) { return !this.isEmpty(value); } - /** * @param {any[]} array * @param {any} value * @param {boolean} cloneArray * @returns {any[]} */ + }, { key: "removeItemFromArray", value: function removeItemFromArray(array, value) { var cloneArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + if (!Array.isArray(array) || !array.length) { return array; } + var inputArr = cloneArray ? _toConsumableArray(array) : array; var index = inputArr.indexOf(value); + if (index !== -1) { inputArr.splice(index, 1); } + return inputArr; } - /** * @param {any[]} array * @returns {any[]} */ + }, { key: "removeArrayEmpty", value: function removeArrayEmpty(array) { if (!Array.isArray(array) || !array.length) { return []; } + return array.filter(function (d) { return !!d; }); } - /** * @param {number} max * @param {number} max * @returns {number} */ + }, { key: "getRandomInt", value: function getRandomInt(max) { @@ -137,43 +155,53 @@ var Utils = /*#__PURE__*/function () { var maxN = Math.floor(max); return Math.floor(Math.random() * (maxN - minN - 1)) + minN; } - /** - * @static * @param {string} text * @return {string} - * @memberof Utils */ + }, { key: "regexEscape", value: function regexEscape(text) { return text.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); } }]); + return Utils; }(); ;// CONCATENATED MODULE: ./src/utils/dom-utils.js -function dom_utils_typeof(obj) { "@babel/helpers - typeof"; return dom_utils_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, dom_utils_typeof(obj); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || dom_utils_unsupportedIterableToArray(arr, i) || _nonIterableRest(); } + function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } } + +function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } + function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + function dom_utils_toConsumableArray(arr) { return dom_utils_arrayWithoutHoles(arr) || dom_utils_iterableToArray(arr) || dom_utils_unsupportedIterableToArray(arr) || dom_utils_nonIterableSpread(); } + function dom_utils_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + function dom_utils_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return dom_utils_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return dom_utils_arrayLikeToArray(o, minLen); } + function dom_utils_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } + function dom_utils_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return dom_utils_arrayLikeToArray(arr); } + function dom_utils_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + function dom_utils_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function dom_utils_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, dom_utils_toPropertyKey(descriptor.key), descriptor); } } + +function dom_utils_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + function dom_utils_createClass(Constructor, protoProps, staticProps) { if (protoProps) dom_utils_defineProperties(Constructor.prototype, protoProps); if (staticProps) dom_utils_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } -function dom_utils_toPropertyKey(arg) { var key = dom_utils_toPrimitive(arg, "string"); return dom_utils_typeof(key) === "symbol" ? key : String(key); } -function dom_utils_toPrimitive(input, hint) { if (dom_utils_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (dom_utils_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } + var DomUtils = /*#__PURE__*/function () { function DomUtils() { dom_utils_classCallCheck(this, DomUtils); } + dom_utils_createClass(DomUtils, null, [{ key: "addClass", value: @@ -185,94 +213,105 @@ var DomUtils = /*#__PURE__*/function () { if (!$ele) { return; } + var classNamesArr = classNames.split(' '); DomUtils.getElements($ele).forEach(function ($this) { var _$this$classList; + (_$this$classList = $this.classList).add.apply(_$this$classList, dom_utils_toConsumableArray(classNamesArr)); }); } - /** * @param {HTMLElement | NodeListOf} $ele * @param {string} classNames */ + }, { key: "removeClass", value: function removeClass($ele, classNames) { if (!$ele) { return; } + var classNamesArr = classNames.split(' '); DomUtils.getElements($ele).forEach(function ($this) { var _$this$classList2; + (_$this$classList2 = $this.classList).remove.apply(_$this$classList2, dom_utils_toConsumableArray(classNamesArr)); }); } - /** * @param {HTMLElement | NodeListOf} $ele * @param {string} classNames * @param {boolean} [isAdd] */ + }, { key: "toggleClass", value: function toggleClass($ele, classNames, isAdd) { if (!$ele) { return; } - /** @type {boolean | undefined} */ + + var isAdding; + if (isAdd !== undefined) { isAdding = Boolean(isAdd); } + DomUtils.getElements($ele).forEach(function ($this) { $this.classList.toggle(classNames, isAdding); }); } - /** * @param {HTMLElement} $ele * @param {string} className * @returns {boolean} */ + }, { key: "hasClass", value: function hasClass($ele, className) { if (!$ele) { return false; } + return $ele.classList.contains(className); } - /** * @param {HTMLElement} $ele * @returns {boolean} */ + }, { key: "hasEllipsis", value: function hasEllipsis($ele) { if (!$ele) { return false; } + return $ele.scrollWidth > $ele.offsetWidth; } - /** * @param {HTMLElement} $ele * @param {string} name * @param {string} [type] * @returns {any} */ + }, { key: "getData", value: function getData($ele, name, type) { if (!$ele) { return undefined; } - /** @type {any} */ + + var value = $ele ? $ele.dataset[name] : ''; + if (type === 'number') { value = parseFloat(value) || 0; } else if (value === 'true') { @@ -280,45 +319,47 @@ var DomUtils = /*#__PURE__*/function () { } else if (value === 'false') { value = false; } + return value; } - /** * @param {HTMLElement} $ele * @param {string} name * @param {string} value */ + }, { key: "setData", value: function setData($ele, name, value) { if (!$ele) { return; - } + } // eslint-disable-next-line no-param-reassign + - // eslint-disable-next-line no-param-reassign $ele.dataset[name] = value; } - /** * @param {HTMLElement} $ele * @param {string} name * @param {string} value */ + }, { key: "setAttr", value: function setAttr($ele, name, value) { if (!$ele) { return; } + $ele.setAttribute(name, value); } - /** * @param {HTMLElement} $from * @param {HTMLElement} $to * @param {string[]} attrList * @param {string[]} valueLessProps */ + }, { key: "setAttrFromEle", value: function setAttrFromEle($from, $to, attrList, valueLessProps) { @@ -329,85 +370,91 @@ var DomUtils = /*#__PURE__*/function () { }); attrList.forEach(function (attr) { var value = values[attr]; + if (value || valueLessProps.indexOf(attr) !== -1 && value === '') { $to.setAttribute(attr, value); } }); } - /** * @param {HTMLElement} $ele * @param {string} name * @param {string} value */ + }, { key: "setStyle", value: function setStyle($ele, name, value) { if (!$ele) { return; - } - - // @ts-ignore + } // @ts-ignore // eslint-disable-next-line no-param-reassign + + $ele.style[name] = value; } - /** * @param {HTMLElement} $ele * @param {any} props */ + }, { key: "setStyles", value: function setStyles($ele, props) { if (!$ele || !props) { return; } + Object.keys(props).forEach(function (name) { // @ts-ignore // eslint-disable-next-line no-param-reassign $ele.style[name] = props[name]; }); } - /** * @param {HTMLElement} $ele * @param {string} name * @param {string} value */ + }, { key: "setAria", value: function setAria($ele, name, value) { var attrName = name; + if (attrName !== 'role') { attrName = "aria-".concat(attrName); } + $ele.setAttribute(attrName, value); } - /** * @param {any} $ele * @returns {any[]} */ + }, { key: "getElements", value: function getElements($ele) { if (!$ele) { return []; } + return $ele.forEach === undefined ? [$ele] : $ele; } - /** * @param {HTMLElement} $ele * @param {string} events * @param {Function} callback */ + }, { key: "addEvent", value: function addEvent($ele, events, callback) { if (!$ele) { return; } + var eventsArray = Utils.removeArrayEmpty(events.split(' ')); eventsArray.forEach(function (event) { var $eleArray = DomUtils.getElements($ele); @@ -416,22 +463,24 @@ var DomUtils = /*#__PURE__*/function () { }); }); } - /** * @param {HTMLElement} $ele * @param {string} eventName * @param {boolean} [bubbles] */ + }, { key: "dispatchEvent", value: function dispatchEvent($ele, eventName) { var bubbles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + if (!$ele) { return; } - var $eleArray = DomUtils.getElements($ele); + var $eleArray = DomUtils.getElements($ele); /** using setTimeout to trigger asynchronous event */ + setTimeout(function () { $eleArray.forEach(function ($this) { $this.dispatchEvent(new CustomEvent(eventName, { @@ -440,62 +489,102 @@ var DomUtils = /*#__PURE__*/function () { }); }, 0); } - /** * convert object to dom attributes * @param {any} data */ + }, { key: "getAttributesText", value: function getAttributesText(data) { var html = ''; + if (!data) { return html; } + Object.entries(data).forEach(function (_ref) { var _ref2 = _slicedToArray(_ref, 2), - k = _ref2[0], - v = _ref2[1]; + k = _ref2[0], + v = _ref2[1]; + if (v !== undefined) { html += " ".concat(k, "=\"").concat(v, "\" "); } }); return html; } - /** * convert "maxValue" to "data-max-value" * @param {string} prop */ + }, { key: "convertPropToDataAttr", value: function convertPropToDataAttr(prop) { return prop ? "data-".concat(prop).replace(/([A-Z])/g, '-$1').toLowerCase() : ''; } + /** + * Changes the tab index of an element passed as an input + * @static + * @param {HTMLElement | NodeListOf} $ele + * @param {number} newTabIndex + * @memberof DomUtils + */ + + }, { + key: "changeTabIndex", + value: function changeTabIndex($ele, newTabIndex) { + if (!$ele) { + console.log($ele, 'Invalid element provided.'); + return; + } + + DomUtils.getElements($ele).forEach(function ($this) { + $this.tabIndex = newTabIndex; + }); + } }]); + return DomUtils; }(); ;// CONCATENATED MODULE: ./src/virtual-select.js function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } + function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } -function _defineProperty(obj, key, value) { key = virtual_select_toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + function virtual_select_typeof(obj) { "@babel/helpers - typeof"; return virtual_select_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, virtual_select_typeof(obj); } + function virtual_select_slicedToArray(arr, i) { return virtual_select_arrayWithHoles(arr) || virtual_select_iterableToArrayLimit(arr, i) || virtual_select_unsupportedIterableToArray(arr, i) || virtual_select_nonIterableRest(); } + function virtual_select_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function virtual_select_iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } } + +function virtual_select_iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } + function virtual_select_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + function virtual_select_toConsumableArray(arr) { return virtual_select_arrayWithoutHoles(arr) || virtual_select_iterableToArray(arr) || virtual_select_unsupportedIterableToArray(arr) || virtual_select_nonIterableSpread(); } + function virtual_select_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + function virtual_select_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return virtual_select_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return virtual_select_arrayLikeToArray(o, minLen); } + function virtual_select_iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } + function virtual_select_arrayWithoutHoles(arr) { if (Array.isArray(arr)) return virtual_select_arrayLikeToArray(arr); } + function virtual_select_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + function virtual_select_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function virtual_select_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, virtual_select_toPropertyKey(descriptor.key), descriptor); } } + +function virtual_select_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + function virtual_select_createClass(Constructor, protoProps, staticProps) { if (protoProps) virtual_select_defineProperties(Constructor.prototype, protoProps); if (staticProps) virtual_select_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } -function virtual_select_toPropertyKey(arg) { var key = virtual_select_toPrimitive(arg, "string"); return virtual_select_typeof(key) === "symbol" ? key : String(key); } -function virtual_select_toPrimitive(input, hint) { if (virtual_select_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (virtual_select_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } + /** cSpell:ignore nocheck, Labelledby, vscomp, tabindex, combobox, haspopup, listbox, activedescendant */ + /* eslint-disable class-methods-use-this */ // @ts-nocheck @@ -509,15 +598,16 @@ var keyDownMethodMapping = { var valueLessProps = ['autofocus', 'disabled', 'multiple', 'required']; var nativeProps = ['autofocus', 'class', 'disabled', 'id', 'multiple', 'name', 'placeholder', 'required']; var attrPropsMapping; -var dataProps = ['additionalClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', 'disableAllOptionsSelectedText', 'disableOptionGroupCheckbox', 'disableSelectAll', 'disableValidation', 'dropboxWidth', 'dropboxWrapper', 'emptyValue', 'enableSecureText', 'focusSelectedOptionOnOpen', 'hasOptionDescription', 'hideClearButton', 'hideValueTooltipOnSelectAll', 'keepAlwaysOpen', 'labelKey', 'markSearchResults', 'maxValues', 'maxWidth', 'minValues', 'moreText', 'noOfDisplayValues', 'noOptionsText', 'noSearchResultsText', 'optionHeight', 'optionSelectedText', 'optionsCount', 'optionsSelectedText', 'popupDropboxBreakpoint', 'popupPosition', 'position', 'search', 'searchByStartsWith', 'searchDelay', 'searchGroup', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex']; - +var dataProps = ['additionalClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', 'disableAllOptionsSelectedText', 'disableOptionGroupCheckbox', 'disableSelectAll', 'disableValidation', 'dropboxWidth', 'dropboxWrapper', 'emptyValue', 'enableSecureText', 'focusSelectedOptionOnOpen', 'hasOptionDescription', 'hideClearButton', 'hideValueTooltipOnSelectAll', 'keepAlwaysOpen', 'labelKey', 'markSearchResults', 'maxValues', 'maxWidth', 'minValues', 'moreText', 'noOfDisplayValues', 'noOptionsText', 'noSearchResultsText', 'optionHeight', 'optionSelectedText', 'optionsCount', 'optionsSelectedText', 'popupDropboxBreakpoint', 'popupPosition', 'position', 'search', 'searchByStartsWith', 'searchDelay', 'searchFormLabel', 'searchGroup', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex']; /** Class representing VirtualSelect */ + var VirtualSelect = /*#__PURE__*/function () { /** * @param {virtualSelectOptions} options */ function VirtualSelect(options) { virtual_select_classCallCheck(this, VirtualSelect); + try { this.createSecureTextElements(); this.setProps(options); @@ -526,64 +616,81 @@ var VirtualSelect = /*#__PURE__*/function () { this.render(); } catch (e) { // eslint-disable-next-line no-console - console.warn("Couldn't initiate Virtual Select"); - // eslint-disable-next-line no-console + console.warn("Couldn't initiate Virtual Select"); // eslint-disable-next-line no-console + console.error(e); } } - /** render methods - start */ + + virtual_select_createClass(VirtualSelect, [{ key: "render", value: function render() { if (!this.$ele) { return; } + var uniqueId = this.uniqueId; var wrapperClasses = 'vscomp-wrapper'; var valueTooltip = this.getTooltipAttrText(this.placeholder, true, true); var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText); var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : ''; + var ariaLabelText = this.ariaLabelText ? "aria-label=\"".concat(this.ariaLabelText, "\"") : ''; var isExpanded = false; + var tabIndexVal = -1; + if (this.additionalClasses) { wrapperClasses += " ".concat(this.additionalClasses); } + if (this.multiple) { wrapperClasses += ' multiple'; + if (!this.disableSelectAll) { wrapperClasses += ' has-select-all'; } } + if (!this.hideClearButton) { wrapperClasses += ' has-clear-button'; } + if (this.keepAlwaysOpen) { wrapperClasses += ' keep-always-open'; isExpanded = true; + tabIndexVal = 0; } else { wrapperClasses += ' closed'; } + if (this.showAsPopup) { wrapperClasses += ' show-as-popup'; } + if (this.hasSearch) { wrapperClasses += ' has-search-input'; } + if (this.showValueAsTags) { wrapperClasses += ' show-value-as-tags'; } + if (this.textDirection) { wrapperClasses += " text-direction-".concat(this.textDirection); } + if (this.popupPosition) { wrapperClasses += " popup-position-".concat(this.popupPosition.toLowerCase()); } - var html = "
\n \n\n
\n
\n ").concat(this.placeholder, "\n
\n\n
\n\n
\n \n
\n
\n\n ").concat(this.renderDropbox({ + + var html = "
\n \n\n
\n
\n ").concat(this.placeholder, "\n
\n\n
\n\n
\n \n
\n
\n\n ").concat(this.renderDropbox({ wrapperClasses: wrapperClasses }), "\n
"); this.$ele.innerHTML = html; this.$body = document.querySelector('body'); this.$wrapper = this.$ele.querySelector('.vscomp-wrapper'); + if (this.hasDropboxWrapper) { this.$allWrappers = [this.$wrapper, this.$dropboxWrapper]; this.$dropboxContainer = this.$dropboxWrapper.querySelector('.vscomp-dropbox-container'); @@ -592,6 +699,7 @@ var VirtualSelect = /*#__PURE__*/function () { this.$allWrappers = [this.$wrapper]; this.$dropboxContainer = this.$wrapper.querySelector('.vscomp-dropbox-container'); } + this.$toggleButton = this.$ele.querySelector('.vscomp-toggle-button'); this.$clearButton = this.$ele.querySelector('.vscomp-clear-button'); this.$valueText = this.$ele.querySelector('.vscomp-value'); @@ -612,6 +720,7 @@ var VirtualSelect = /*#__PURE__*/function () { var wrapperClasses = _ref.wrapperClasses; var $wrapper = this.dropboxWrapper !== 'self' ? document.querySelector(this.dropboxWrapper) : null; var html = "
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
").concat(this.noOptionsText, "
\n
").concat(this.noSearchResultsText, "
\n\n \n
\n
"); + if ($wrapper) { var $dropboxWrapper = document.createElement('div'); this.$dropboxWrapper = $dropboxWrapper; @@ -621,6 +730,7 @@ var VirtualSelect = /*#__PURE__*/function () { DomUtils.addClass($dropboxWrapper, "vscomp-dropbox-wrapper ".concat(wrapperClasses)); return ''; } + this.hasDropboxWrapper = false; return html; } @@ -628,6 +738,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "renderOptions", value: function renderOptions() { var _this = this; + var html = ''; var visibleOptions = this.getVisibleOptions(); var checkboxHtml = ''; @@ -635,70 +746,87 @@ var VirtualSelect = /*#__PURE__*/function () { var markSearchResults = !!(this.markSearchResults && this.searchValue); var searchRegex; var labelRenderer = this.labelRenderer, - disableOptionGroupCheckbox = this.disableOptionGroupCheckbox, - uniqueId = this.uniqueId, - searchGroup = this.searchGroup; + disableOptionGroupCheckbox = this.disableOptionGroupCheckbox, + uniqueId = this.uniqueId, + searchGroup = this.searchGroup; var hasLabelRenderer = typeof labelRenderer === 'function'; var convertToBoolean = Utils.convertToBoolean; + if (markSearchResults) { searchRegex = new RegExp("(".concat(Utils.regexEscape(this.searchValue), ")"), 'gi'); } + if (this.multiple) { checkboxHtml = ''; } + if (this.allowNewOption) { var newOptionTooltip = this.getTooltipAttrText('New Option'); newOptionIconHtml = ""); } + visibleOptions.forEach(function (d) { var index = d.index; var optionLabel; var optionClasses = 'vscomp-option'; + var optionTooltip = _this.getTooltipAttrText('', true, true); + var leftSection = checkboxHtml; var rightSection = ''; var description = ''; var groupIndexText = ''; var isSelected = convertToBoolean(d.isSelected); var ariaDisabledText = ''; + if (d.classNames) { optionClasses += " ".concat(d.classNames); } + if (d.isFocused) { optionClasses += ' focused'; } + if (d.isDisabled) { optionClasses += ' disabled'; ariaDisabledText = 'aria-disabled="true"'; } + if (d.isGroupTitle) { optionClasses += ' group-title'; + if (disableOptionGroupCheckbox) { leftSection = ''; } } + if (isSelected) { optionClasses += ' selected'; } + if (d.isGroupOption) { optionClasses += ' group-option'; groupIndexText = "data-group-index=\"".concat(d.groupIndex, "\""); } + if (hasLabelRenderer) { optionLabel = labelRenderer(d); } else { optionLabel = d.label; } + if (d.description) { description = "
").concat(d.description, "
"); } + if (d.isCurrentNew) { optionClasses += ' current-new'; rightSection += newOptionIconHtml; } else if (markSearchResults && (!d.isGroupTitle || searchGroup)) { optionLabel = optionLabel.replace(searchRegex, '$1'); } - html += "
\n ").concat(leftSection, "\n \n ").concat(optionLabel, "\n \n ").concat(description, "\n ").concat(rightSection, "\n
"); + + html += "
\n ").concat(leftSection, "\n \n ").concat(optionLabel, "\n \n ").concat(description, "\n ").concat(rightSection, "\n
"); }); this.$options.innerHTML = html; this.$visibleOptions = this.$options.querySelectorAll('.vscomp-option'); @@ -710,14 +838,18 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.hasSearchContainer) { return; } + var checkboxHtml = ''; var searchInput = ''; + if (this.multiple && !this.disableSelectAll) { checkboxHtml = "\n \n ".concat(this.selectAllText, "\n "); } + if (this.hasSearch) { - searchInput = "\n ×"); + searchInput = "\n \n ×"); } + var html = "
\n ".concat(checkboxHtml, "\n ").concat(searchInput, "\n
"); this.$search.innerHTML = html; this.$searchInput = this.$dropboxContainer.querySelector('.vscomp-search-input'); @@ -731,6 +863,7 @@ var VirtualSelect = /*#__PURE__*/function () { /** render methods - end */ /** dom event methods - start */ + }, { key: "addEvents", value: function addEvents() { @@ -750,17 +883,21 @@ var VirtualSelect = /*#__PURE__*/function () { key: "addEvent", value: function addEvent($ele, events, method) { var _this2 = this; + if (!$ele) { return; } + var eventsArray = Utils.removeArrayEmpty(events.split(' ')); eventsArray.forEach(function (event) { var eventsKey = "".concat(method, "-").concat(event); var callback = _this2.events[eventsKey]; + if (!callback) { callback = _this2[method].bind(_this2); _this2.events[eventsKey] = callback; } + DomUtils.addEvent($ele, event, callback); }); } @@ -768,6 +905,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onDocumentClick", value: function onDocumentClick(e) { var $eleToKeepOpen = e.target.closest('.vscomp-wrapper'); + if ($eleToKeepOpen !== this.$wrapper && $eleToKeepOpen !== this.$dropboxWrapper && this.isOpened()) { this.closeDropbox(); } @@ -777,6 +915,7 @@ var VirtualSelect = /*#__PURE__*/function () { value: function onKeyDown(e) { var key = e.which || e.keyCode; var method = keyDownMethodMapping[key]; + if (method) { this[method](e); } @@ -785,6 +924,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onEnterPress", value: function onEnterPress(e) { e.preventDefault(); + if (this.isOpened()) { this.selectFocusedOption(); } else { @@ -795,6 +935,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onDownArrowPress", value: function onDownArrowPress(e) { e.preventDefault(); + if (this.isOpened()) { this.focusOption({ direction: 'next' @@ -807,6 +948,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onUpArrowPress", value: function onUpArrowPress(e) { e.preventDefault(); + if (this.isOpened()) { this.focusOption({ direction: 'previous' @@ -819,6 +961,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onToggleButtonClick", value: function onToggleButtonClick(e) { var $target = e.target; + if ($target.closest('.vscomp-value-tag-clear-button')) { this.removeValue($target.closest('.vscomp-value-tag')); } else if (!$target.closest('.toggle-button-child')) { @@ -839,6 +982,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onOptionsClick", value: function onOptionsClick(e) { var $option = e.target.closest('.vscomp-option'); + if ($option && !DomUtils.hasClass($option, 'disabled')) { if (DomUtils.hasClass($option, 'group-title')) { this.onGroupTitleClick($option); @@ -855,6 +999,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!$ele || !this.multiple || this.disableOptionGroupCheckbox) { return; } + var isAdding = !DomUtils.hasClass($ele, 'selected'); this.toggleGroupTitleCheckbox($ele, isAdding); this.toggleGroupOptions($ele, isAdding); @@ -875,6 +1020,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "onOptionsMouseOver", value: function onOptionsMouseOver(e) { var $ele = e.target.closest('.vscomp-option'); + if ($ele && this.isOpened()) { if (DomUtils.hasClass($ele, 'disabled') || DomUtils.hasClass($ele, 'group-title')) { this.removeOptionFocus(); @@ -912,15 +1058,17 @@ var VirtualSelect = /*#__PURE__*/function () { value: function onResize() { this.setOptionsContainerHeight(true); } - /** to remove dropboxWrapper on removing vscomp-ele when it is rendered outside of vscomp-ele */ + }, { key: "addMutationObserver", value: function addMutationObserver() { var _this3 = this; + if (!this.hasDropboxWrapper) { return; } + var $vscompEle = this.$ele; this.mutationObserver = new MutationObserver(function (mutations) { var isAdded = false; @@ -931,12 +1079,14 @@ var VirtualSelect = /*#__PURE__*/function () { return !!($ele === $vscompEle || $ele.contains($vscompEle)); }); } + if (!isRemoved) { isRemoved = virtual_select_toConsumableArray(mutation.removedNodes).some(function ($ele) { return !!($ele === $vscompEle || $ele.contains($vscompEle)); }); } }); + if (isRemoved && !isAdded) { _this3.destroy(); } @@ -949,6 +1099,7 @@ var VirtualSelect = /*#__PURE__*/function () { /** dom event methods - end */ /** before event methods - start */ + }, { key: "beforeValueSet", value: function beforeValueSet(isReset) { @@ -958,21 +1109,24 @@ var VirtualSelect = /*#__PURE__*/function () { key: "beforeSelectNewValue", value: function beforeSelectNewValue() { var _this4 = this; + var newOption = this.getNewOption(); var newIndex = newOption.index; this.newValues.push(newOption.value); this.setOptionProp(newIndex, 'isCurrentNew', false); this.setOptionProp(newIndex, 'isNew', true); - /** using setTimeout to fix the issue of dropbox getting closed on select */ + setTimeout(function () { _this4.setSearchValue(''); + _this4.focusSearchInput(); }, 0); } /** before event methods - end */ /** after event methods - start */ + }, { key: "afterRenderWrapper", value: function afterRenderWrapper() { @@ -985,20 +1139,25 @@ var VirtualSelect = /*#__PURE__*/function () { this.setOptionsContainerHeight(); this.addEvents(); this.setEleProps(); + if (!this.keepAlwaysOpen && !this.showAsPopup) { this.initDropboxPopover(); } + if (this.initialSelectedValue) { this.setValueMethod(this.initialSelectedValue, this.silentInitialValueSet); } else if (this.autoSelectFirstOption && this.visibleOptions.length) { this.setValueMethod(this.visibleOptions[0].value, this.silentInitialValueSet); } + if (this.showOptionsOnlyOnSearch) { this.setSearchValue('', false, true); } + if (this.initialDisabled) { this.disable(); } + if (this.autofocus) { this.focus(); } @@ -1009,9 +1168,11 @@ var VirtualSelect = /*#__PURE__*/function () { var visibleOptions = this.getVisibleOptions(); var hasNoOptions = !this.options.length && !this.hasServerSearch; var hasNoSearchResults = !hasNoOptions && !visibleOptions.length; + if (!this.allowNewOption || this.hasServerSearch || this.showOptionsOnlyOnSearch) { DomUtils.toggleClass(this.$allWrappers, 'has-no-search-results', hasNoSearchResults); } + DomUtils.toggleClass(this.$allWrappers, 'has-no-options', hasNoOptions); this.setOptionAttr(); this.setOptionsPosition(); @@ -1028,6 +1189,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "afterSetSearchValue", value: function afterSetSearchValue() { var _this5 = this; + if (this.hasServerSearch) { clearInterval(this.serverSearchTimeout); this.serverSearchTimeout = setTimeout(function () { @@ -1036,9 +1198,11 @@ var VirtualSelect = /*#__PURE__*/function () { } else { this.setVisibleOptionsCount(); } + if (this.selectAllOnlyVisible) { this.toggleAllOptionsClass(); } + this.focusOption({ focusFirst: true }); @@ -1064,11 +1228,14 @@ var VirtualSelect = /*#__PURE__*/function () { if (keepValue) { this.setSelectedProp(); } + this.setOptionsHeight(); this.setVisibleOptions(); + if (this.showOptionsOnlyOnSearch) { this.setSearchValue('', false, true); } + if (!keepValue) { this.reset(); } @@ -1076,9 +1243,11 @@ var VirtualSelect = /*#__PURE__*/function () { /** after event methods - end */ /** set methods - start */ + /** * @param {virtualSelectOptions} params */ + }, { key: "setProps", value: function setProps(params) { @@ -1127,6 +1296,7 @@ var VirtualSelect = /*#__PURE__*/function () { this.noSearchResultsText = options.noSearchResultsText; this.selectAllText = options.selectAllText; this.searchPlaceholderText = options.searchPlaceholderText; + this.searchFormLabel = options.searchFormLabel; this.optionsSelectedText = options.optionsSelectedText; this.optionSelectedText = options.optionSelectedText; this.allOptionsSelectedText = options.allOptionsSelectedText; @@ -1153,12 +1323,14 @@ var VirtualSelect = /*#__PURE__*/function () { this.initialSelectedValue = options.selectedValue === 0 ? '0' : options.selectedValue; this.emptyValue = options.emptyValue; this.ariaLabelledby = options.ariaLabelledby; + this.ariaLabelText = options.ariaLabelText; this.maxWidth = options.maxWidth; this.searchDelay = options.searchDelay; - /** @type {string[]} */ + this.selectedValues = []; /** @type {virtualSelectOption[]} */ + this.selectedOptions = []; this.newValues = []; this.events = {}; @@ -1166,17 +1338,22 @@ var VirtualSelect = /*#__PURE__*/function () { this.searchValue = ''; this.searchValueOriginal = ''; this.isAllSelected = false; + if (options.search === undefined && this.multiple || this.allowNewOption || this.showOptionsOnlyOnSearch) { this.hasSearch = true; } + this.hasServerSearch = typeof this.onServerSearch === 'function'; + if (this.maxValues || this.hasServerSearch || this.showOptionsOnlyOnSearch) { this.disableSelectAll = true; this.disableOptionGroupCheckbox = true; } + if (this.keepAlwaysOpen) { this.dropboxWrapper = 'self'; } + this.showAsPopup = this.showDropboxAsPopup && !this.keepAlwaysOpen && window.innerWidth <= parseFloat(this.popupDropboxBreakpoint); this.hasSearchContainer = this.hasSearch || this.multiple && !this.disableSelectAll; this.optionsCount = this.getOptionsCount(options.optionsCount); @@ -1184,10 +1361,10 @@ var VirtualSelect = /*#__PURE__*/function () { this.optionsHeight = this.getOptionsHeight(); this.uniqueId = this.getUniqueId(); } - /** * @param {virtualSelectOptions} options */ + }, { key: "setDefaultProps", value: function setDefaultProps(options) { @@ -1197,6 +1374,7 @@ var VirtualSelect = /*#__PURE__*/function () { labelKey: 'label', descriptionKey: 'description', aliasKey: 'alias', + ariaLabelText: 'Options list', optionsCount: 5, noOfDisplayValues: 50, optionHeight: '40px', @@ -1204,6 +1382,7 @@ var VirtualSelect = /*#__PURE__*/function () { noSearchResultsText: 'No results found', selectAllText: 'Select All', searchPlaceholderText: 'Search...', + searchFormLabel: 'Search', clearButtonText: 'Clear', moreText: 'more...', optionsSelectedText: 'options selected', @@ -1227,10 +1406,12 @@ var VirtualSelect = /*#__PURE__*/function () { searchDelay: 300, focusSelectedOptionOnOpen: true }; + if (options.hasOptionDescription) { defaultOptions.optionsCount = 4; defaultOptions.optionHeight = '50px'; } + return Object.assign(defaultOptions, options); } }, { @@ -1239,9 +1420,11 @@ var VirtualSelect = /*#__PURE__*/function () { var $ele = options.ele; Object.keys(attrPropsMapping).forEach(function (k) { var value = $ele.getAttribute(k); + if (valueLessProps.indexOf(k) !== -1 && (value === '' || value === 'true')) { value = true; } + if (value) { // eslint-disable-next-line no-param-reassign options[attrPropsMapping[k]] = value; @@ -1280,6 +1463,7 @@ var VirtualSelect = /*#__PURE__*/function () { $ele.destroy = VirtualSelect.destroyMethod; $ele.validate = VirtualSelect.validateMethod; $ele.toggleRequired = VirtualSelect.toggleRequiredMethod; + if (this.hasDropboxWrapper) { this.$dropboxWrapper.virtualSelect = this; } @@ -1292,34 +1476,42 @@ var VirtualSelect = /*#__PURE__*/function () { var validValues = []; var isMultiSelect = this.multiple; var value = newValue; + if (value) { if (!Array.isArray(value)) { value = [value]; } + if (isMultiSelect) { var maxValues = this.maxValues; + if (maxValues && value.length > maxValues) { value.splice(maxValues); } } else if (value.length > 1) { value = [value[0]]; } - /** converting value to string */ + + value = value.map(function (v) { return v || v === 0 ? v.toString() : ''; }); + if (this.useGroupValue) { value = this.setGroupOptionsValue(value); } + value.forEach(function (d, i) { valuesMapping[d] = true; valuesOrder[d] = i; }); + if (this.allowNewOption && value) { this.setNewOptionsFromValue(value); } } + this.options.forEach(function (d) { if (valuesMapping[d.value] === true && !d.isDisabled && !d.isGroupTitle) { // eslint-disable-next-line no-param-reassign @@ -1330,21 +1522,26 @@ var VirtualSelect = /*#__PURE__*/function () { d.isSelected = false; } }); + if (isMultiSelect) { if (this.hasOptionGroup) { this.setGroupsSelectedProp(); } - /** sorting validValues in the given values order */ + + validValues.sort(function (a, b) { return valuesOrder[a] - valuesOrder[b]; }); } else { /** taking first value for single select */ var _validValues = validValues; + var _validValues2 = virtual_select_slicedToArray(_validValues, 1); + validValues = _validValues2[0]; } + this.beforeValueSet(); this.setValue(validValues, { disableEvent: silentChange @@ -1363,6 +1560,7 @@ var VirtualSelect = /*#__PURE__*/function () { this.options.forEach(function (d) { var value = d.value; var isSelected = valuesMapping[value] === true; + if (d.isGroupTitle) { if (isSelected) { selectedGroups[d.index] = true; @@ -1395,10 +1593,12 @@ var VirtualSelect = /*#__PURE__*/function () { value: function setDisabledOptionsMethod(disabledOptions) { var keepValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; this.setDisabledOptions(disabledOptions, true); + if (!keepValue) { this.setValueMethod(null); this.toggleAllOptionsClass(); } + this.setVisibleOptions(); } }, { @@ -1406,6 +1606,7 @@ var VirtualSelect = /*#__PURE__*/function () { value: function setDisabledOptions(disabledOptions) { var setOptionsProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var disabledOptionsArr = []; + if (!disabledOptions) { if (setOptionsProp) { this.options.forEach(function (d) { @@ -1431,6 +1632,7 @@ var VirtualSelect = /*#__PURE__*/function () { disabledOptionsArr.forEach(function (d) { disabledOptionsMapping[d] = true; }); + if (setOptionsProp) { this.options.forEach(function (d) { // eslint-disable-next-line no-param-reassign @@ -1439,6 +1641,7 @@ var VirtualSelect = /*#__PURE__*/function () { }); } } + this.disabledOptions = disabledOptionsArr; } }, { @@ -1446,10 +1649,12 @@ var VirtualSelect = /*#__PURE__*/function () { value: function setEnabledOptionsMethod(disabledOptions) { var keepValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; this.setEnabledOptions(disabledOptions); + if (!keepValue) { this.setValueMethod(null); this.toggleAllOptionsClass(); } + this.setVisibleOptions(); } }, { @@ -1458,7 +1663,9 @@ var VirtualSelect = /*#__PURE__*/function () { if (enabledOptions === undefined) { return; } + var disabledOptionsArr = []; + if (enabledOptions === true) { this.options.forEach(function (d) { // eslint-disable-next-line no-param-reassign @@ -1471,16 +1678,18 @@ var VirtualSelect = /*#__PURE__*/function () { enabledOptionsMapping[d] = true; }); this.options.forEach(function (d) { - var isDisabled = enabledOptionsMapping[d.value] !== true; + var isDisabled = enabledOptionsMapping[d.value] !== true; // eslint-disable-next-line no-param-reassign - // eslint-disable-next-line no-param-reassign d.isDisabled = isDisabled; + if (isDisabled) { disabledOptionsArr.push(d.value); } + return d; }); } + this.disabledOptions = disabledOptionsArr; } }, { @@ -1490,12 +1699,12 @@ var VirtualSelect = /*#__PURE__*/function () { var preparedOptions = []; var hasDisabledOptions = this.disabledOptions.length; var valueKey = this.valueKey, - labelKey = this.labelKey, - descriptionKey = this.descriptionKey, - aliasKey = this.aliasKey, - hasOptionDescription = this.hasOptionDescription; + labelKey = this.labelKey, + descriptionKey = this.descriptionKey, + aliasKey = this.aliasKey, + hasOptionDescription = this.hasOptionDescription; var getString = Utils.getString, - convertToBoolean = Utils.convertToBoolean; + convertToBoolean = Utils.convertToBoolean; var secureText = this.secureText.bind(this); var getAlias = this.getAlias.bind(this); var index = 0; @@ -1505,12 +1714,15 @@ var VirtualSelect = /*#__PURE__*/function () { this.disabledOptions.forEach(function (d) { disabledOptionsMapping[d] = true; }); + var prepareOption = function prepareOption(d) { if (virtual_select_typeof(d) !== 'object') { var _d2; + // eslint-disable-next-line no-param-reassign d = (_d2 = {}, _defineProperty(_d2, valueKey, d), _defineProperty(_d2, labelKey, d), _d2); } + var value = secureText(getString(d[valueKey])); var childOptions = d.options; var isGroupTitle = !!childOptions; @@ -1524,39 +1736,48 @@ var VirtualSelect = /*#__PURE__*/function () { isGroupTitle: isGroupTitle, classNames: d.classNames }; + if (!hasEmptyValueOption && value === '') { hasEmptyValueOption = true; } + if (hasDisabledOptions) { option.isDisabled = disabledOptionsMapping[value] === true; } + if (d.isGroupOption) { option.isGroupOption = true; option.groupIndex = d.groupIndex; } + if (hasOptionDescription) { option.description = secureText(getString(d[descriptionKey])); } + if (d.customData) { option.customData = d.customData; } + preparedOptions.push(option); index += 1; + if (isGroupTitle) { var groupIndex = option.index; hasOptionGroup = true; childOptions.forEach(function (childData) { // eslint-disable-next-line no-param-reassign - childData.isGroupOption = true; - // eslint-disable-next-line no-param-reassign + childData.isGroupOption = true; // eslint-disable-next-line no-param-reassign + childData.groupIndex = groupIndex; prepareOption(childData); }); } }; + if (Array.isArray(options)) { options.forEach(prepareOption); } + var optionsLength = preparedOptions.length; var $ele = this.$ele; $ele.options = preparedOptions; @@ -1573,13 +1794,14 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setServerOptions", value: function setServerOptions() { var _this6 = this; + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; this.setOptionsMethod(options, true); var selectedOptions = this.selectedOptions; var newOptions = this.options; var optionsUpdated = false; - /** merging already selected options details with new options */ + if (selectedOptions.length) { var newOptionsValueMapping = {}; optionsUpdated = true; @@ -1595,26 +1817,32 @@ var VirtualSelect = /*#__PURE__*/function () { }); this.setOptionsMethod(newOptions, true); } - /** merging new search option */ + + if (this.allowNewOption && this.searchValue) { var hasExactOption = newOptions.some(function (d) { return d.label.toLowerCase() === _this6.searchValue; }); + if (!hasExactOption) { optionsUpdated = true; this.setNewOption(); } } + if (optionsUpdated) { this.setVisibleOptionsCount(); + if (this.multiple) { this.toggleAllOptionsClass(); } + this.setValueText(); } else { this.updatePosition(); } + DomUtils.removeClass(this.$allWrappers, 'server-searching'); } }, { @@ -1628,6 +1856,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setSortedOptions", value: function setSortedOptions() { var sortedOptions = virtual_select_toConsumableArray(this.options); + if (this.showSelectedOptionsFirst && this.selectedValues.length) { if (this.hasOptionGroup) { sortedOptions = this.sortOptionsGroup(sortedOptions); @@ -1635,34 +1864,42 @@ var VirtualSelect = /*#__PURE__*/function () { sortedOptions = this.sortOptions(sortedOptions); } } + this.sortedOptions = sortedOptions; } }, { key: "setVisibleOptions", value: function setVisibleOptions() { var visibleOptions = virtual_select_toConsumableArray(this.sortedOptions); + var maxOptionsToShow = this.optionsCount * 2; var startIndex = this.getVisibleStartIndex(); var newOption = this.getNewOption(); var endIndex = startIndex + maxOptionsToShow - 1; var i = 0; + if (newOption) { newOption.visibleIndex = i; i += 1; } + visibleOptions = visibleOptions.filter(function (d) { var inView = false; + if (d.isVisible && !d.isCurrentNew) { - inView = i >= startIndex && i <= endIndex; - // eslint-disable-next-line no-param-reassign + inView = i >= startIndex && i <= endIndex; // eslint-disable-next-line no-param-reassign + d.visibleIndex = i; i += 1; } + return inView; }); + if (newOption) { visibleOptions = [newOption].concat(virtual_select_toConsumableArray(visibleOptions)); } + this.visibleOptions = visibleOptions; this.renderOptions(); } @@ -1677,11 +1914,14 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setOptionsTooltip", value: function setOptionsTooltip() { var _this7 = this; + var visibleOptions = this.getVisibleOptions(); var hasOptionDescription = this.hasOptionDescription; visibleOptions.forEach(function (d) { var $optionEle = _this7.$dropboxContainer.querySelector(".vscomp-option[data-index=\"".concat(d.index, "\"]")); + DomUtils.setData($optionEle.querySelector('.vscomp-option-text'), 'tooltip', d.label); + if (hasOptionDescription) { DomUtils.setData($optionEle.querySelector('.vscomp-option-description'), 'tooltip', d.description); } @@ -1691,11 +1931,13 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setValue", value: function setValue(value) { var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, - _ref2$disableEvent = _ref2.disableEvent, - disableEvent = _ref2$disableEvent === void 0 ? false : _ref2$disableEvent, - _ref2$disableValidati = _ref2.disableValidation, - disableValidation = _ref2$disableValidati === void 0 ? false : _ref2$disableValidati; + _ref2$disableEvent = _ref2.disableEvent, + disableEvent = _ref2$disableEvent === void 0 ? false : _ref2$disableEvent, + _ref2$disableValidati = _ref2.disableValidation, + disableValidation = _ref2$disableValidati === void 0 ? false : _ref2$disableValidati; + var isValidValue = this.hasEmptyValueOption && value === '' || value; + if (!isValidValue) { this.selectedValues = []; } else if (Array.isArray(value)) { @@ -1703,6 +1945,7 @@ var VirtualSelect = /*#__PURE__*/function () { } else { this.selectedValues = [value]; } + var newValue = this.getValue(); this.$ele.value = newValue; this.$hiddenInput.value = this.getInputValue(newValue); @@ -1711,9 +1954,11 @@ var VirtualSelect = /*#__PURE__*/function () { this.setValueText(); DomUtils.toggleClass(this.$allWrappers, 'has-value', Utils.isNotEmpty(this.selectedValues)); DomUtils.toggleClass(this.$allWrappers, 'max-value-selected', this.isMaxValuesSelected); + if (!disableValidation) { this.validate(); } + if (!disableEvent) { DomUtils.dispatchEvent(this.$ele, 'change', true); } @@ -1722,17 +1967,17 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setValueText", value: function setValueText() { var multiple = this.multiple, - selectedValues = this.selectedValues, - noOfDisplayValues = this.noOfDisplayValues, - showValueAsTags = this.showValueAsTags, - $valueText = this.$valueText; + selectedValues = this.selectedValues, + noOfDisplayValues = this.noOfDisplayValues, + showValueAsTags = this.showValueAsTags, + $valueText = this.$valueText; var valueText = []; var valueTooltip = []; var selectedLength = selectedValues.length; var selectedValuesCount = 0; var showAllText = this.isAllSelected && !this.hasServerSearch && !this.disableAllOptionsSelectedText && !showValueAsTags; - /** show all values selected text without tooltip text */ + if (showAllText && this.hideValueTooltipOnSelectAll) { $valueText.innerHTML = "".concat(this.allOptionsSelectedText, " (").concat(selectedLength, ")"); } else { @@ -1744,39 +1989,50 @@ var VirtualSelect = /*#__PURE__*/function () { if (d.isCurrentNew) { return false; } + if (selectedValuesCount >= noOfDisplayValues) { return true; } + var label = d.label; valueText.push(label); selectedValuesCount += 1; + if (showValueAsTags) { var valueTagHtml = "\n ").concat(label, "\n \n \n \n "); valueTooltip.push(valueTagHtml); } else { valueTooltip.push(label); } + return false; }); var moreSelectedOptions = selectedLength - noOfDisplayValues; + if (moreSelectedOptions > 0) { valueTooltip.push("+ ".concat(moreSelectedOptions, " ").concat(this.moreText, "")); } + var aggregatedValueText = valueText.join(', '); + if (aggregatedValueText === '') { $valueText.innerHTML = this.placeholder; } else { $valueText.innerHTML = aggregatedValueText; + if (multiple) { var maxValues = this.maxValues; var showSelectedCount = this.alwaysShowSelectedOptionsCount || DomUtils.hasEllipsis($valueText); + if (showSelectedCount || maxValues || showValueAsTags) { var countText = "".concat(selectedLength, ""); + if (maxValues) { countText += " / ".concat(maxValues, ""); } - /** show all values selected text with tooltip text */ + + if (showAllText) { $valueText.innerHTML = "".concat(this.allOptionsSelectedText, " (").concat(selectedLength, ")"); } else if (showValueAsTags) { @@ -1795,15 +2051,20 @@ var VirtualSelect = /*#__PURE__*/function () { } } } + var tooltipText = ''; + if (selectedLength === 0) { tooltipText = this.placeholder; } else if (!showValueAsTags) { tooltipText = valueTooltip.join(', '); } + DomUtils.setData($valueText, 'tooltip', tooltipText); + if (multiple) { DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0); + if (showValueAsTags) { this.updatePosition(); } @@ -1814,12 +2075,15 @@ var VirtualSelect = /*#__PURE__*/function () { value: function setSearchValue(value) { var skipInputSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var forceSet = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + if (value === this.searchValueOriginal && !forceSet) { return; } + if (!skipInputSet) { this.$searchInput.value = value; } + var searchValue = value.replace(/\\/g, '').toLowerCase().trim(); this.searchValue = searchValue; this.searchValueOriginal = value; @@ -1833,18 +2097,22 @@ var VirtualSelect = /*#__PURE__*/function () { var hasExactOption = false; var visibleOptionGroupsMapping; var searchValue = this.searchValue, - searchGroup = this.searchGroup, - showOptionsOnlyOnSearch = this.showOptionsOnlyOnSearch, - searchByStartsWith = this.searchByStartsWith; + searchGroup = this.searchGroup, + showOptionsOnlyOnSearch = this.showOptionsOnlyOnSearch, + searchByStartsWith = this.searchByStartsWith; var isOptionVisible = this.isOptionVisible.bind(this); + if (this.hasOptionGroup) { visibleOptionGroupsMapping = this.getVisibleOptionGroupsMapping(searchValue); } + this.options.forEach(function (d) { if (d.isCurrentNew) { return; } + var result; + if (showOptionsOnlyOnSearch && !searchValue) { // eslint-disable-next-line no-param-reassign d.isVisible = false; @@ -1862,13 +2130,16 @@ var VirtualSelect = /*#__PURE__*/function () { searchByStartsWith: searchByStartsWith }); } + if (result.isVisible) { visibleOptionsCount += 1; } + if (!hasExactOption) { hasExactOption = result.hasExactOption; } }); + if (this.allowNewOption) { if (searchValue && !hasExactOption) { this.setNewOption(); @@ -1877,6 +2148,7 @@ var VirtualSelect = /*#__PURE__*/function () { this.removeNewOption(); } } + this.visibleOptionsCount = visibleOptionsCount; this.afterSetVisibleOptionsCount(); } @@ -1886,6 +2158,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.options[index]) { return; } + this.options[index][key] = value; } }, { @@ -1897,6 +2170,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setOptionsContainerHeight", value: function setOptionsContainerHeight(reset) { var optionsHeight; + if (reset) { if (this.showAsPopup) { this.optionsCount = this.getOptionsCount(); @@ -1906,11 +2180,13 @@ var VirtualSelect = /*#__PURE__*/function () { } } else { optionsHeight = this.optionsHeight; + if (this.keepAlwaysOpen) { DomUtils.setStyle(this.$noOptions, 'height', optionsHeight); DomUtils.setStyle(this.$noSearchResults, 'height', optionsHeight); } } + DomUtils.setStyle(this.$optionsContainer, 'max-height', optionsHeight); this.afterSetOptionsContainerHeight(reset); } @@ -1918,10 +2194,13 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setNewOption", value: function setNewOption(newValue) { var value = newValue || this.searchValueOriginal.trim(); + if (!value) { return; } + var newOption = this.getNewOption(); + if (newOption) { var newIndex = newOption.index; this.setOptionProp(newIndex, 'value', this.secureText(value)); @@ -1931,12 +2210,14 @@ var VirtualSelect = /*#__PURE__*/function () { value: value, label: value }; + if (newValue) { data.isNew = true; this.newValues.push(value); } else { data.isCurrentNew = true; } + this.addOption(data); } } @@ -1960,6 +2241,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!values) { return; } + var setNewOption = this.setNewOption.bind(this); var availableValuesMapping = {}; this.options.forEach(function (d) { @@ -1977,6 +2259,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (this.showAsPopup) { return; } + var width = this.dropboxWidth || "".concat(this.$wrapper.offsetWidth, "px"); DomUtils.setStyle(this.$dropboxContainer, 'max-width', width); } @@ -1985,9 +2268,11 @@ var VirtualSelect = /*#__PURE__*/function () { value: function setEleStyles() { var maxWidth = this.maxWidth; var styles = {}; + if (maxWidth) { styles['max-width'] = maxWidth; } + DomUtils.setStyles(this.$ele, styles); } }, { @@ -1998,6 +2283,7 @@ var VirtualSelect = /*#__PURE__*/function () { var containerStyles = { 'z-index': this.zIndex }; + if (dropboxWidth) { if (this.showAsPopup) { styles['max-width'] = dropboxWidth; @@ -2005,6 +2291,7 @@ var VirtualSelect = /*#__PURE__*/function () { containerStyles.width = dropboxWidth; } } + DomUtils.setStyles(this.$dropboxContainer, containerStyles); DomUtils.setStyles(this.$dropbox, styles); } @@ -2015,8 +2302,9 @@ var VirtualSelect = /*#__PURE__*/function () { var options = this.options; var optionHeight = "".concat(this.optionHeight, "px"); var setStyle = DomUtils.setStyle, - getData = DomUtils.getData, - setData = DomUtils.setData; + getData = DomUtils.getData, + setData = DomUtils.setData; + if ($visibleOptions && $visibleOptions.length) { $visibleOptions.forEach(function ($option) { var optionDetails = options[getData($option, 'index')]; @@ -2029,14 +2317,17 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setValueTagAttr", value: function setValueTagAttr() { var $valueTags = this.$valueTags; + if (!$valueTags || !$valueTags.length) { return; } + var getData = DomUtils.getData, - setData = DomUtils.setData; + setData = DomUtils.setData; var options = this.options; $valueTags.forEach(function ($valueTag) { var index = getData($valueTag, 'index'); + if (typeof index !== 'undefined') { var optionDetails = options[index]; setData($valueTag, 'value', optionDetails.value); @@ -2047,9 +2338,11 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setScrollTop", value: function setScrollTop() { var selectedValues = this.selectedValues; + if (this.showSelectedOptionsFirst || !this.focusSelectedOptionOnOpen || selectedValues.length === 0) { return; } + var valuesMapping = {}; var selectedOptionIndex; selectedValues.forEach(function (d) { @@ -2060,8 +2353,10 @@ var VirtualSelect = /*#__PURE__*/function () { selectedOptionIndex = d.visibleIndex; return true; } + return false; }); + if (selectedOptionIndex) { this.$optionsContainer.scrollTop = this.optionHeight * selectedOptionIndex; } @@ -2069,6 +2364,7 @@ var VirtualSelect = /*#__PURE__*/function () { /** set methods - end */ /** get methods - start */ + }, { key: "getVisibleOptions", value: function getVisibleOptions() { @@ -2078,6 +2374,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "getValue", value: function getValue() { var value; + if (this.multiple) { if (this.useGroupValue) { value = this.getGroupValue(); @@ -2087,6 +2384,7 @@ var VirtualSelect = /*#__PURE__*/function () { } else { value = this.selectedValues[0] || ''; } + return value; } }, { @@ -2098,7 +2396,9 @@ var VirtualSelect = /*#__PURE__*/function () { if (!d.isSelected) { return; } + var value = d.value; + if (d.isGroupTitle) { if (value) { selectedGroups[d.index] = true; @@ -2114,6 +2414,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "getInputValue", value: function getInputValue(preparedValue) { var value = preparedValue; + if (value && value.length) { if (this.setValueAsArray && this.multiple) { value = JSON.stringify(value); @@ -2121,6 +2422,7 @@ var VirtualSelect = /*#__PURE__*/function () { } else { value = this.emptyValue; } + return value; } }, { @@ -2133,9 +2435,11 @@ var VirtualSelect = /*#__PURE__*/function () { value: function getVisibleStartIndex() { var firstVisibleOptionIndex = this.getFirstVisibleOptionIndex(); var startIndex = firstVisibleOptionIndex - this.halfOptionsCount; + if (startIndex < 0) { startIndex = 0; } + return startIndex; } }, { @@ -2155,17 +2459,18 @@ var VirtualSelect = /*#__PURE__*/function () { }; return DomUtils.getAttributesText(data); } - /** * @param {any} data * @returns {any} */ + }, { key: "getOptionObj", value: function getOptionObj(data) { if (!data) { return undefined; } + var getString = Utils.getString; var secureText = this.secureText.bind(this); return { @@ -2183,9 +2488,11 @@ var VirtualSelect = /*#__PURE__*/function () { key: "getNewOption", value: function getNewOption() { var lastOption = this.options[this.lastOptionIndex]; + if (!lastOption || !lastOption.isCurrentNew) { return undefined; } + return lastOption; } }, { @@ -2197,6 +2504,7 @@ var VirtualSelect = /*#__PURE__*/function () { index = d.index; return true; } + return false; }); return index; @@ -2217,14 +2525,17 @@ var VirtualSelect = /*#__PURE__*/function () { key: "getAlias", value: function getAlias(alias) { var result = alias; + if (result) { if (Array.isArray(result)) { result = result.join(','); } else { result = result.toString().trim(); } + result = result.toLowerCase(); } + return result || ''; } }, { @@ -2242,13 +2553,14 @@ var VirtualSelect = /*#__PURE__*/function () { key: "getSelectedOptions", value: function getSelectedOptions() { var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref3$fullDetails = _ref3.fullDetails, - fullDetails = _ref3$fullDetails === void 0 ? false : _ref3$fullDetails, - _ref3$keepSelectionOr = _ref3.keepSelectionOrder, - keepSelectionOrder = _ref3$keepSelectionOr === void 0 ? false : _ref3$keepSelectionOr; + _ref3$fullDetails = _ref3.fullDetails, + fullDetails = _ref3$fullDetails === void 0 ? false : _ref3$fullDetails, + _ref3$keepSelectionOr = _ref3.keepSelectionOrder, + keepSelectionOrder = _ref3$keepSelectionOr === void 0 ? false : _ref3$keepSelectionOr; + var valueKey = this.valueKey, - labelKey = this.labelKey, - selectedValues = this.selectedValues; + labelKey = this.labelKey, + selectedValues = this.selectedValues; var selectedOptions = []; this.options.forEach(function (d) { if (d.isSelected && !d.isGroupTitle) { @@ -2256,17 +2568,22 @@ var VirtualSelect = /*#__PURE__*/function () { selectedOptions.push(d); } else { var _data; + var data = (_data = {}, _defineProperty(_data, valueKey, d.value), _defineProperty(_data, labelKey, d.label), _data); + if (d.isNew) { data.isNew = true; } + if (d.customData) { data.customData = d.customData; } + selectedOptions.push(data); } } }); + if (keepSelectionOrder) { var valuesOrder = {}; selectedValues.forEach(function (d, i) { @@ -2276,14 +2593,15 @@ var VirtualSelect = /*#__PURE__*/function () { return valuesOrder[a.value] - valuesOrder[b.value]; }); } + return this.multiple || fullDetails ? selectedOptions : selectedOptions[0]; } }, { key: "getDisabledOptions", value: function getDisabledOptions() { var valueKey = this.valueKey, - labelKey = this.labelKey, - disabledOptions = this.disabledOptions; + labelKey = this.labelKey, + disabledOptions = this.disabledOptions; var disabledOptionsValueMapping = {}; var result = []; disabledOptions.forEach(function (value) { @@ -2291,9 +2609,11 @@ var VirtualSelect = /*#__PURE__*/function () { }); this.options.forEach(function (_ref4) { var value = _ref4.value, - label = _ref4.label; + label = _ref4.label; + if (disabledOptionsValueMapping[value]) { var _result$push; + result.push((_result$push = {}, _defineProperty(_result$push, valueKey, value), _defineProperty(_result$push, labelKey, label), _result$push)); } }); @@ -2320,15 +2640,19 @@ var VirtualSelect = /*#__PURE__*/function () { key: "getOptionsCount", value: function getOptionsCount(count) { var result; + if (this.showAsPopup) { var availableHeight = window.innerHeight * 80 / 100 - dropboxCloseButtonFullHeight; + if (this.hasSearchContainer) { availableHeight -= searchHeight; } + result = Math.floor(availableHeight / this.optionHeight); } else { result = parseInt(count); } + return result; } }, { @@ -2336,18 +2660,20 @@ var VirtualSelect = /*#__PURE__*/function () { value: function getOptionsHeight() { return "".concat(this.optionsCount * this.optionHeight, "px"); } - /** getting next/prev valid option element */ + }, { key: "getSibling", value: function getSibling($ele, direction) { var propName = direction === 'next' ? 'nextElementSibling' : 'previousElementSibling'; var $sibling = $ele; + do { if ($sibling) { $sibling = $sibling[propName]; } } while (DomUtils.hasClass($sibling, 'disabled') || DomUtils.hasClass($sibling, 'group-title')); + return $sibling; } }, { @@ -2355,12 +2681,15 @@ var VirtualSelect = /*#__PURE__*/function () { value: function getUniqueId() { var uniqueId = Utils.getRandomInt(10000); var isAlreadyUsed = document.querySelector("#vscomp-ele-wrapper-".concat(uniqueId)); + if (isAlreadyUsed) { return this.getUniqueId(); } + return uniqueId; } /** get methods - end */ + }, { key: "initDropboxPopover", value: function initDropboxPopover() { @@ -2384,14 +2713,18 @@ var VirtualSelect = /*#__PURE__*/function () { key: "openDropbox", value: function openDropbox(isSilent) { this.isSilentOpen = isSilent; + if (isSilent) { DomUtils.setStyle(this.$dropboxContainer, 'display', 'inline-flex'); } else { DomUtils.dispatchEvent(this.$ele, 'beforeOpen'); DomUtils.setAria(this.$wrapper, 'expanded', true); } + this.setDropboxWrapperWidth(); DomUtils.removeClass(this.$allWrappers, 'closed'); + DomUtils.changeTabIndex(this.$allWrappers, 0); + if (this.dropboxPopover && !isSilent) { this.dropboxPopover.show(); } else { @@ -2403,16 +2736,19 @@ var VirtualSelect = /*#__PURE__*/function () { value: function afterShowPopper() { var isSilent = this.isSilentOpen; this.isSilentOpen = false; + if (!isSilent) { this.moveSelectedOptionsFirst(); this.setScrollTop(); DomUtils.addClass(this.$allWrappers, 'focused'); + if (this.showAsPopup) { DomUtils.addClass(this.$body, 'vscomp-popup-active'); this.isPopupActive = true; } else { this.focusSearchInput(); } + DomUtils.dispatchEvent(this.$ele, 'afterOpen'); } } @@ -2420,10 +2756,12 @@ var VirtualSelect = /*#__PURE__*/function () { key: "closeDropbox", value: function closeDropbox(isSilent) { this.isSilentClose = isSilent; + if (this.keepAlwaysOpen) { this.removeOptionFocus(); return; } + if (isSilent) { DomUtils.setStyle(this.$dropboxContainer, 'display', ''); } else { @@ -2431,6 +2769,7 @@ var VirtualSelect = /*#__PURE__*/function () { DomUtils.setAria(this.$wrapper, 'expanded', false); DomUtils.setAria(this.$wrapper, 'activedescendant', ''); } + if (this.dropboxPopover && !isSilent) { this.dropboxPopover.hide(); } else { @@ -2444,11 +2783,15 @@ var VirtualSelect = /*#__PURE__*/function () { this.isSilentClose = false; DomUtils.removeClass(this.$allWrappers, 'focused'); this.removeOptionFocus(); + if (!isSilent && this.isPopupActive) { DomUtils.removeClass(this.$body, 'vscomp-popup-active'); this.isPopupActive = false; } + DomUtils.addClass(this.$allWrappers, 'closed'); + DomUtils.changeTabIndex(this.$allWrappers, -1); + if (!isSilent) { DomUtils.dispatchEvent(this.$ele, 'afterClose'); } @@ -2459,7 +2802,9 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.showSelectedOptionsFirst) { return; } + this.setSortedOptions(); + if (!this.$optionsContainer.scrollTop || !this.selectedValues.length) { this.setVisibleOptions(); } else { @@ -2481,6 +2826,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.dropboxPopover || !this.isOpened()) { return; } + this.$ele.updatePosition(); } }, { @@ -2492,6 +2838,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "focusSearchInput", value: function focusSearchInput() { var $ele = this.$searchInput; + if ($ele) { $ele.focus(); } @@ -2500,27 +2847,32 @@ var VirtualSelect = /*#__PURE__*/function () { key: "focusOption", value: function focusOption() { var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - direction = _ref5.direction, - $option = _ref5.$option, - focusFirst = _ref5.focusFirst; + direction = _ref5.direction, + $option = _ref5.$option, + focusFirst = _ref5.focusFirst; + var $focusedEle = this.$dropboxContainer.querySelector('.vscomp-option.focused'); var $newFocusedEle; + if ($option) { $newFocusedEle = $option; } else if (!$focusedEle || focusFirst) { /* if no element on focus choose first visible one */ var firstVisibleOptionIndex = this.getFirstVisibleOptionIndex(); $newFocusedEle = this.$dropboxContainer.querySelector(".vscomp-option[data-visible-index=\"".concat(firstVisibleOptionIndex, "\"]")); + if (DomUtils.hasClass($newFocusedEle, 'disabled') || DomUtils.hasClass($newFocusedEle, 'group-title')) { $newFocusedEle = this.getSibling($newFocusedEle, 'next'); } } else { $newFocusedEle = this.getSibling($focusedEle, direction); } + if ($newFocusedEle && $newFocusedEle !== $focusedEle) { if ($focusedEle) { this.toggleOptionFocusedState($focusedEle, false); } + this.toggleOptionFocusedState($newFocusedEle, true); this.toggleFocusedProp(DomUtils.getData($newFocusedEle, 'index'), true); this.moveFocusedOptionToView($newFocusedEle); @@ -2530,9 +2882,11 @@ var VirtualSelect = /*#__PURE__*/function () { key: "moveFocusedOptionToView", value: function moveFocusedOptionToView($ele) { var $focusedEle = $ele || this.$dropboxContainer.querySelector('.vscomp-option.focused'); + if (!$focusedEle) { return; } + var newScrollTop; var containerRect = this.$optionsContainer.getBoundingClientRect(); var optionRect = $focusedEle.getBoundingClientRect(); @@ -2544,14 +2898,15 @@ var VirtualSelect = /*#__PURE__*/function () { var optionHeight = optionRect.height; var optionOffsetTop = $focusedEle.offsetTop; var optionsTop = DomUtils.getData(this.$options, 'top', 'number'); - /* if option hidden on top */ + if (containerTop > optionTop) { newScrollTop = optionOffsetTop + optionsTop; } else if (containerBottom < optionBottom) { /* if option hidden on bottom */ newScrollTop = optionOffsetTop - containerHeight + optionHeight + optionsTop; } + if (newScrollTop !== undefined) { this.$optionsContainer.scrollTop = newScrollTop; } @@ -2560,9 +2915,11 @@ var VirtualSelect = /*#__PURE__*/function () { key: "removeOptionFocus", value: function removeOptionFocus() { var $focusedEle = this.$dropboxContainer.querySelector('.vscomp-option.focused'); + if (!$focusedEle) { return; } + this.toggleOptionFocusedState($focusedEle, false); this.toggleFocusedProp(null); } @@ -2570,11 +2927,14 @@ var VirtualSelect = /*#__PURE__*/function () { key: "selectOption", value: function selectOption($ele) { var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, - event = _ref6.event; + event = _ref6.event; + if (!$ele) { return; } + var isAdding = !DomUtils.hasClass($ele, 'selected'); + if (isAdding) { if (this.multiple && this.isMaxValuesSelected) { return; @@ -2584,6 +2944,7 @@ var VirtualSelect = /*#__PURE__*/function () { this.closeDropbox(); return; } + var selectedValues = this.selectedValues; var selectedValue = DomUtils.getData($ele, 'value'); var selectedIndex = DomUtils.getData($ele, 'index', 'number'); @@ -2592,11 +2953,13 @@ var VirtualSelect = /*#__PURE__*/function () { var lastSelectedOptionIndex = this.lastSelectedOptionIndex; this.lastSelectedOptionIndex = null; this.toggleSelectedProp(selectedIndex, isAdding); + if (isAdding) { if (this.multiple) { selectedValues.push(selectedValue); this.toggleAllOptionsClass(); this.toggleGroupOptionsParent($ele); + if (event && event.shiftKey) { shouldSelectRange = true; } @@ -2604,16 +2967,21 @@ var VirtualSelect = /*#__PURE__*/function () { if (selectedValues.length) { this.toggleSelectedProp(this.getOptionIndex(selectedValues[0]), false); } + selectedValues = [selectedValue]; var $prevSelectedOption = this.$dropboxContainer.querySelector('.vscomp-option.selected'); + if ($prevSelectedOption) { this.toggleOptionSelectedState($prevSelectedOption, false); } + this.closeDropbox(); + if (!isNewOption) { this.setSearchValue(''); } } + this.lastSelectedOptionIndex = selectedIndex; this.toggleOptionSelectedState($ele); } else if (this.multiple) { @@ -2622,10 +2990,13 @@ var VirtualSelect = /*#__PURE__*/function () { this.toggleAllOptionsClass(false); this.toggleGroupOptionsParent($ele, false); } + if (isNewOption) { this.beforeSelectNewValue(); } + this.setValue(selectedValues); + if (shouldSelectRange) { this.selectRangeOptions(lastSelectedOptionIndex, selectedIndex); } @@ -2639,14 +3010,17 @@ var VirtualSelect = /*#__PURE__*/function () { key: "selectRangeOptions", value: function selectRangeOptions(lastSelectedOptionIndex, selectedIndex) { var _this8 = this; + if (typeof lastSelectedOptionIndex !== 'number' || this.maxValues) { return; } + var selectedValues = this.selectedValues, - hasOptionGroup = this.hasOptionGroup; + hasOptionGroup = this.hasOptionGroup; var groupIndexes = {}; var startIndex; var endIndex; + if (lastSelectedOptionIndex < selectedIndex) { startIndex = lastSelectedOptionIndex; endIndex = selectedIndex; @@ -2654,20 +3028,24 @@ var VirtualSelect = /*#__PURE__*/function () { startIndex = selectedIndex; endIndex = lastSelectedOptionIndex; } + this.options.forEach(function (d) { if (d.isDisabled || d.isGroupTitle || !d.isVisible || d.isSelected) { return; } + var index = d.index; + if (index > startIndex && index < endIndex) { if (hasOptionGroup) { var groupIndex = d.groupIndex; + if (typeof groupIndex === 'number') { groupIndexes[groupIndex] = true; } - } + } // eslint-disable-next-line no-param-reassign + - // eslint-disable-next-line no-param-reassign d.isSelected = true; selectedValues.push(d.value); } @@ -2675,14 +3053,16 @@ var VirtualSelect = /*#__PURE__*/function () { this.toggleAllOptionsClass(); this.setValue(selectedValues); groupIndexes = Object.keys(groupIndexes); + if (groupIndexes.length) { var toggleGroupTitleProp = this.toggleGroupTitleProp.bind(this); groupIndexes.forEach(function (i) { toggleGroupTitleProp(parseInt(i)); }); } - /** using setTimeout to fix the issue of dropbox getting closed on select */ + + setTimeout(function () { _this8.renderOptions(); }, 0); @@ -2693,24 +3073,30 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.multiple || this.disableSelectAll) { return; } + var selectingAll = typeof isSelected === 'boolean' ? selectAll : !DomUtils.hasClass(this.$toggleAllCheckbox, 'checked'); var selectedValues = []; var selectAllOnlyVisible = this.selectAllOnlyVisible; this.options.forEach(function (d) { var option = d; + if (option.isDisabled || option.isCurrentNew) { return; } - var isVisible = option.isVisible, - isSelected = option.isSelected; + var isVisible = option.isVisible, + isSelected = option.isSelected; /** unselected items are */ - if ( /** when unselecting all, selectAllOnlyVisible feature disabled or visible items or already unselected items */ - !selectingAll && (!selectAllOnlyVisible || isVisible || !isSelected) || /** when selecting all, selectAllOnlyVisible feature enabled and hidden items those are not already selected */ + + if ( + /** when unselecting all, selectAllOnlyVisible feature disabled or visible items or already unselected items */ + !selectingAll && (!selectAllOnlyVisible || isVisible || !isSelected) || + /** when selecting all, selectAllOnlyVisible feature enabled and hidden items those are not already selected */ selectingAll && selectAllOnlyVisible && !isVisible && !isSelected) { option.isSelected = false; } else { option.isSelected = true; + if (!option.isGroupTitle) { selectedValues.push(option.value); } @@ -2726,17 +3112,21 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.multiple) { return; } + var valuePassed = typeof isAllSelected === 'boolean'; var isAllVisibleSelected = false; + if (!valuePassed) { // eslint-disable-next-line no-param-reassign isAllSelected = this.isAllOptionsSelected(); } - /** when all options not selected, checking if all visible options selected */ + + if (!isAllSelected && this.selectAllOnlyVisible) { isAllVisibleSelected = this.isAllOptionsSelected(true); } + DomUtils.toggleClass(this.$toggleAllCheckbox, 'checked', isAllSelected || isAllVisibleSelected); this.isAllSelected = isAllSelected; } @@ -2744,6 +3134,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "isAllOptionsSelected", value: function isAllOptionsSelected(visibleOnly) { var isAllSelected = false; + if (this.options.length && this.selectedValues.length) { isAllSelected = !this.options.some( /** @@ -2754,17 +3145,20 @@ var VirtualSelect = /*#__PURE__*/function () { return !d.isSelected && !d.isDisabled && !d.isGroupTitle && (!visibleOnly || d.isVisible); }); } + return isAllSelected; } }, { key: "isAllGroupOptionsSelected", value: function isAllGroupOptionsSelected(groupIndex) { var isAllSelected = false; + if (this.options.length) { isAllSelected = !this.options.some(function (d) { return !d.isSelected && !d.isDisabled && !d.isGroupTitle && d.groupIndex === groupIndex; }); } + return isAllSelected; } }, { @@ -2773,10 +3167,13 @@ var VirtualSelect = /*#__PURE__*/function () { if (!this.hasOptionGroup || this.disableOptionGroupCheckbox || !$option) { return; } + var groupIndex = DomUtils.getData($option, 'groupIndex'); + if (groupIndex !== undefined) { groupIndex = parseInt(groupIndex); } + var $group = this.$options.querySelector(".vscomp-option[data-index=\"".concat(groupIndex, "\"]")); var isAllSelected = typeof isSelected === 'boolean' ? isSelected : this.isAllGroupOptionsSelected(groupIndex); this.toggleGroupTitleCheckbox($group, isAllSelected); @@ -2792,12 +3189,14 @@ var VirtualSelect = /*#__PURE__*/function () { key: "toggleGroupOptions", value: function toggleGroupOptions($ele, isSelected) { var _this9 = this; + if (!this.hasOptionGroup || this.disableOptionGroupCheckbox || !$ele) { return; } + var groupIndex = DomUtils.getData($ele, 'index', 'number'); var selectedValues = this.selectedValues, - selectAllOnlyVisible = this.selectAllOnlyVisible; + selectAllOnlyVisible = this.selectAllOnlyVisible; var valuesMapping = {}; var removeItemFromArray = Utils.removeItemFromArray; selectedValues.forEach(function (d) { @@ -2807,16 +3206,20 @@ var VirtualSelect = /*#__PURE__*/function () { if (d.isDisabled || d.groupIndex !== groupIndex) { return; } + var value = d.value; + if (!isSelected || selectAllOnlyVisible && !d.isVisible) { // eslint-disable-next-line no-param-reassign d.isSelected = false; + if (valuesMapping[value]) { removeItemFromArray(selectedValues, value); } } else { // eslint-disable-next-line no-param-reassign d.isSelected = true; + if (!valuesMapping[value]) { selectedValues.push(value); } @@ -2824,8 +3227,8 @@ var VirtualSelect = /*#__PURE__*/function () { }); this.toggleAllOptionsClass(isSelected ? null : false); this.setValue(selectedValues); - /** using setTimeout to fix the issue of dropbox getting closed on select */ + setTimeout(function () { _this9.renderOptions(); }, 0); @@ -2836,6 +3239,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!$ele) { return; } + var selectedIndex = DomUtils.getData($ele, 'index', 'number'); this.toggleSelectedProp(selectedIndex, isSelected); this.toggleOptionSelectedState($ele, isSelected); @@ -2844,9 +3248,11 @@ var VirtualSelect = /*#__PURE__*/function () { key: "toggleFocusedProp", value: function toggleFocusedProp(index) { var isFocused = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + if (this.focusedOptionIndex) { this.setOptionProp(this.focusedOptionIndex, 'isFocused', false); } + this.setOptionProp(index, 'isFocused', isFocused); this.focusedOptionIndex = index; } @@ -2860,13 +3266,17 @@ var VirtualSelect = /*#__PURE__*/function () { key: "scrollToTop", value: function scrollToTop() { var isClosed = !this.isOpened(); + if (isClosed) { this.openDropbox(true); } + var scrollTop = this.$optionsContainer.scrollTop; + if (scrollTop > 0) { this.$optionsContainer.scrollTop = 0; } + if (isClosed) { this.closeDropbox(true); } @@ -2884,9 +3294,11 @@ var VirtualSelect = /*#__PURE__*/function () { disableValidation: formReset }); this.afterValueSet(); + if (formReset) { DomUtils.removeClass(this.$allWrappers, 'has-error'); } + DomUtils.dispatchEvent(this.$ele, 'reset'); } }, { @@ -2895,12 +3307,14 @@ var VirtualSelect = /*#__PURE__*/function () { if (!data) { return; } + this.lastOptionIndex += 1; var newOption = this.getOptionObj(_objectSpread(_objectSpread({}, data), {}, { index: this.lastOptionIndex })); this.options.push(newOption); this.sortedOptions.push(newOption); + if (rerender) { this.visibleOptionsCount += 1; this.afterSetOptions(); @@ -2912,6 +3326,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!index && index !== 0) { return; } + this.options.splice(index, 1); this.lastOptionIndex -= 1; } @@ -2919,6 +3334,7 @@ var VirtualSelect = /*#__PURE__*/function () { key: "removeNewOption", value: function removeNewOption() { var newOption = this.getNewOption(); + if (newOption) { this.removeOption(newOption.index); } @@ -2929,12 +3345,15 @@ var VirtualSelect = /*#__PURE__*/function () { return options.sort(function (a, b) { var aIsSelected = a.isSelected || a.isAnySelected; var bIsSelected = b.isSelected || b.isAnySelected; + if (!aIsSelected && !bIsSelected) { return 0; } + if (aIsSelected && (!bIsSelected || a.index < b.index)) { return -1; } + return 1; }); } @@ -2944,11 +3363,12 @@ var VirtualSelect = /*#__PURE__*/function () { var sortOptions = this.sortOptions.bind(this); var structuredOptions = this.structureOptionGroup(options); structuredOptions.forEach(function (d) { - var childOptions = d.options; - // eslint-disable-next-line no-param-reassign + var childOptions = d.options; // eslint-disable-next-line no-param-reassign + d.isAnySelected = childOptions.some(function (e) { return e.isSelected; }); + if (d.isAnySelected) { sortOptions(childOptions); } @@ -2960,32 +3380,37 @@ var VirtualSelect = /*#__PURE__*/function () { key: "isOptionVisible", value: function isOptionVisible(_ref7) { var data = _ref7.data, - searchValue = _ref7.searchValue, - hasExactOption = _ref7.hasExactOption, - visibleOptionGroupsMapping = _ref7.visibleOptionGroupsMapping, - searchGroup = _ref7.searchGroup, - searchByStartsWith = _ref7.searchByStartsWith; + searchValue = _ref7.searchValue, + hasExactOption = _ref7.hasExactOption, + visibleOptionGroupsMapping = _ref7.visibleOptionGroupsMapping, + searchGroup = _ref7.searchGroup, + searchByStartsWith = _ref7.searchByStartsWith; var value = data.value.toLowerCase(); var label = data.label.toLowerCase(); var description = data.description, - alias = data.alias; + alias = data.alias; var isVisible = searchByStartsWith ? label.startsWith(searchValue) : label.indexOf(searchValue) !== -1; + if (data.isGroupTitle && (!searchGroup || !isVisible)) { isVisible = visibleOptionGroupsMapping[data.index]; } + if (!searchByStartsWith && alias && !isVisible) { isVisible = alias.indexOf(searchValue) !== -1; } + if (!searchByStartsWith && description && !isVisible) { isVisible = description.toLowerCase().indexOf(searchValue) !== -1; - } + } // eslint-disable-next-line no-param-reassign + - // eslint-disable-next-line no-param-reassign data.isVisible = isVisible; + if (!hasExactOption) { // eslint-disable-next-line no-param-reassign hasExactOption = label === searchValue || value === searchValue; } + return { isVisible: isVisible, hasExactOption: hasExactOption @@ -2996,19 +3421,19 @@ var VirtualSelect = /*#__PURE__*/function () { value: function structureOptionGroup(options) { var result = []; var childOptions = {}; - /** getting all group title */ + options.forEach(function (d) { if (d.isGroupTitle) { - var childArray = []; - // eslint-disable-next-line no-param-reassign + var childArray = []; // eslint-disable-next-line no-param-reassign + d.options = childArray; childOptions[d.index] = childArray; result.push(d); } }); - /** getting all group options */ + options.forEach(function (d) { if (d.isGroupOption) { childOptions[d.groupIndex].push(d); @@ -3069,13 +3494,17 @@ var VirtualSelect = /*#__PURE__*/function () { if (this.disableValidation) { return true; } + var hasError = false; var selectedValues = this.selectedValues, - minValues = this.minValues; - if (this.required && (Utils.isEmpty(selectedValues) || /** required minium options not selected */ + minValues = this.minValues; + + if (this.required && (Utils.isEmpty(selectedValues) || + /** required minium options not selected */ this.multiple && minValues && selectedValues.length < minValues)) { hasError = true; } + DomUtils.toggleClass(this.$allWrappers, 'has-error', hasError); return !hasError; } @@ -3086,13 +3515,16 @@ var VirtualSelect = /*#__PURE__*/function () { $ele.virtualSelect = undefined; $ele.value = undefined; $ele.innerHTML = ''; + if (this.hasDropboxWrapper) { this.$dropboxWrapper.remove(); this.mutationObserver.disconnect(); } + if (this.dropboxPopover) { this.dropboxPopover.destroy(); } + DomUtils.removeClass($ele, 'vscomp-ele'); } }, { @@ -3108,6 +3540,7 @@ var VirtualSelect = /*#__PURE__*/function () { if (!text || !this.enableSecureText) { return text; } + this.$secureText.nodeValue = text; return this.$secureDiv.innerHTML; } @@ -3121,9 +3554,11 @@ var VirtualSelect = /*#__PURE__*/function () { key: "toggleOptionSelectedState", value: function toggleOptionSelectedState($ele, value) { var isSelected = value; + if (typeof isSelected === 'undefined') { isSelected = !DomUtils.hasClass($ele, 'selected'); } + DomUtils.toggleClass($ele, 'selected', isSelected); DomUtils.setAria($ele, 'selected', isSelected); } @@ -3133,48 +3568,59 @@ var VirtualSelect = /*#__PURE__*/function () { if (!$ele) { return; } + DomUtils.toggleClass($ele, 'focused', isFocused); + if (isFocused) { DomUtils.setAria(this.$wrapper, 'activedescendant', $ele.id); } } - /** static methods - start */ + }], [{ key: "init", value: function init(options) { var $eleArray = options.ele; + if (!$eleArray) { return undefined; } + var singleEle = false; + if (typeof $eleArray === 'string') { $eleArray = document.querySelectorAll($eleArray); var eleLength = $eleArray.length; + if (eleLength === 0) { return undefined; } + if (eleLength === 1) { singleEle = true; } } + if ($eleArray.length === undefined || $eleArray.forEach === undefined) { $eleArray = [$eleArray]; singleEle = true; } + var instances = []; $eleArray.forEach(function ($ele) { /** skipping initialization on calling init method multiple times */ if ($ele.virtualSelect) { instances.push($ele.virtualSelect); return; - } + } // eslint-disable-next-line no-param-reassign + - // eslint-disable-next-line no-param-reassign options.ele = $ele; + if ($ele.tagName === 'SELECT') { VirtualSelect.setPropsFromSelect(options); } + instances.push(new VirtualSelect(options)); }); return singleEle ? instances[0] : instances; @@ -3198,6 +3644,7 @@ var VirtualSelect = /*#__PURE__*/function () { var $ele = props.ele; var disabledOptions = []; var selectedValue = []; + var getNativeOptions = function getNativeOptions($container) { var options = []; var $options = Array.from($container.children); @@ -3206,46 +3653,52 @@ var VirtualSelect = /*#__PURE__*/function () { var option = { value: value }; + if ($option.tagName === 'OPTGROUP') { option.label = $option.getAttribute('label'); option.options = getNativeOptions($option); } else { option.label = $option.innerHTML; } + options.push(option); + if ($option.disabled) { disabledOptions.push(value); } + if ($option.selected) { selectedValue.push(value); } }); return options; }; - var optionsList = getNativeOptions($ele); + var optionsList = getNativeOptions($ele); /** creating div element to initiate plugin and removing native element */ + var $newEle = document.createElement('div'); DomUtils.setAttrFromEle($ele, $newEle, Object.keys(attrPropsMapping), valueLessProps); $ele.parentNode.insertBefore($newEle, $ele); - $ele.remove(); + $ele.remove(); // eslint-disable-next-line no-param-reassign + + props.ele = $newEle; // eslint-disable-next-line no-param-reassign + + props.options = optionsList; // eslint-disable-next-line no-param-reassign + + props.disabledOptions = disabledOptions; // eslint-disable-next-line no-param-reassign - // eslint-disable-next-line no-param-reassign - props.ele = $newEle; - // eslint-disable-next-line no-param-reassign - props.options = optionsList; - // eslint-disable-next-line no-param-reassign - props.disabledOptions = disabledOptions; - // eslint-disable-next-line no-param-reassign props.selectedValue = selectedValue; } }, { key: "onFormReset", value: function onFormReset(e) { var $form = e.target.closest('form'); + if (!$form) { return; } + $form.querySelectorAll('.vscomp-ele-wrapper').forEach(function ($ele) { $ele.parentElement.virtualSelect.reset(true); }); @@ -3263,9 +3716,11 @@ var VirtualSelect = /*#__PURE__*/function () { if (!$container) { return true; } + var hasError = false; $container.querySelectorAll('.vscomp-ele-wrapper').forEach(function ($ele) { var result = $ele.parentElement.virtualSelect.validate(); + if (!hasError && !result) { hasError = true; } @@ -3281,24 +3736,28 @@ var VirtualSelect = /*#__PURE__*/function () { key: "setValueMethod", value: function setValueMethod() { var _this$virtualSelect; + (_this$virtualSelect = this.virtualSelect).setValueMethod.apply(_this$virtualSelect, arguments); } }, { key: "setOptionsMethod", value: function setOptionsMethod() { var _this$virtualSelect2; + (_this$virtualSelect2 = this.virtualSelect).setOptionsMethod.apply(_this$virtualSelect2, arguments); } }, { key: "setDisabledOptionsMethod", value: function setDisabledOptionsMethod() { var _this$virtualSelect3; + (_this$virtualSelect3 = this.virtualSelect).setDisabledOptionsMethod.apply(_this$virtualSelect3, arguments); } }, { key: "setEnabledOptionsMethod", value: function setEnabledOptionsMethod() { var _this$virtualSelect4; + (_this$virtualSelect4 = this.virtualSelect).setEnabledOptionsMethod.apply(_this$virtualSelect4, arguments); } }, { @@ -3384,7 +3843,9 @@ var VirtualSelect = /*#__PURE__*/function () { }); } /** static methods - end */ + }]); + return VirtualSelect; }(); document.addEventListener('reset', VirtualSelect.onFormReset); @@ -3392,8 +3853,8 @@ document.addEventListener('submit', VirtualSelect.onFormSubmit); window.addEventListener('resize', VirtualSelect.onResizeMethod); attrPropsMapping = VirtualSelect.getAttrProps(); window.VirtualSelect = VirtualSelect; - /** polyfill to fix an issue in ie browser */ + if (typeof NodeList !== 'undefined' && NodeList.prototype && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } diff --git a/dist/virtual-select.min.css b/dist/virtual-select.min.css index aa7ab71..e3b7975 100644 --- a/dist/virtual-select.min.css +++ b/dist/virtual-select.min.css @@ -3,7 +3,7 @@ * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) */ -@keyframes vscomp-animation-spin{to{transform:rotateZ(360deg)}}.vscomp-popup-active{overflow:hidden !important}.vscomp-ele{display:inline-block;max-width:250px;width:100%}.vscomp-wrapper{color:#333;display:inline-flex;flex-wrap:wrap;font-family:sans-serif;font-size:14px;position:relative;text-align:left;width:100%}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-dropbox-wrapper{left:0;position:absolute;top:0}.vscomp-toggle-button{align-items:center;background-color:#fff;border:1px solid #ddd;cursor:pointer;display:flex;padding:7px 30px 7px 10px;position:relative;width:100%}.vscomp-value{height:20px;line-height:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vscomp-arrow{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:30px}.vscomp-arrow::after{transform:rotate(45deg);border:1px solid rgba(0,0,0,0);border-bottom-color:#111;border-right-color:#111;content:"";height:8px;margin-top:-6px;width:8px}.vscomp-clear-icon{height:12px;position:relative;width:12px}.vscomp-clear-icon::before,.vscomp-clear-icon::after{background-color:#999;content:"";height:12px;left:5px;position:absolute;top:0;width:2px}.vscomp-clear-icon::before{transform:rotate(45deg)}.vscomp-clear-icon::after{transform:rotate(-45deg)}.vscomp-clear-icon:hover::before,.vscomp-clear-icon:hover::after{background:#333}.vscomp-clear-button{align-items:center;border-radius:50%;display:none;height:24px;justify-content:center;margin-top:-12px;position:absolute;right:30px;top:50%;width:24px}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover .vscomp-clear-icon::before,.vscomp-clear-button:hover .vscomp-clear-icon::after{background-color:#333}.vscomp-dropbox-close-button{align-items:center;background-color:#fff;border-radius:50%;bottom:-48px;cursor:pointer;display:none;height:40px;justify-content:center;left:50%;margin-left:-20px;position:absolute;width:40px}.vscomp-value-tag.more-value-count{white-space:nowrap}.vscomp-dropbox-container{width:100%;z-index:2}.vscomp-dropbox{background-color:#fff;width:100%}.vscomp-options-container{max-height:210px;overflow:auto;position:relative}.vscomp-options-bottom-freezer{bottom:0;height:2px;left:0;position:absolute;right:0}.vscomp-option{align-items:center;cursor:pointer;display:flex;flex-wrap:wrap;height:40px;padding:0 15px;position:relative}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{cursor:default;opacity:.5}.vscomp-option.group-title .vscomp-option-text{cursor:default;opacity:.6}.vscomp-option.group-title.selected{background-color:rgba(0,0,0,0)}.vscomp-option.group-option{padding-left:30px}.vscomp-new-option-icon{height:30px;position:absolute;right:0;top:0;width:30px}.vscomp-new-option-icon::before{border:15px solid #512da8;border-bottom-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0);content:"";position:absolute;right:0;top:0}.vscomp-new-option-icon::after{align-items:center;color:#fff;content:"+";display:flex;font-size:18px;height:15px;justify-content:center;position:absolute;right:1px;top:0;width:15px}.vscomp-option-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.vscomp-option-description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:13px;line-height:15px;width:100%}.vscomp-search-container{align-items:center;border-bottom:1px solid #ddd;display:flex;height:40px;padding:0 5px 0 15px;position:relative}.vscomp-search-input{background-color:rgba(0,0,0,0);border:0;color:inherit;font-size:15px;height:38px;padding:10px 0;width:calc(100% - 30px)}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{align-items:center;color:#999;cursor:pointer;display:flex;font-size:25px;height:30px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:hidden;width:30px}.vscomp-search-clear:hover{color:inherit}.vscomp-no-options,.vscomp-no-search-results{align-items:center;display:none;justify-content:center;padding:20px 10px}.vscomp-options-loader{display:none;padding:20px 0;text-align:center}.vscomp-options-loader::before{animation:vscomp-animation-spin .8s infinite linear;background-color:#fff;border-radius:50%;box-shadow:-4px -5px 3px -3px rgba(0,0,0,.3);content:"";display:inline-block;height:40px;opacity:.7;width:40px}.vscomp-ele[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vscomp-ele[disabled] .vscomp-wrapper{opacity:.7;pointer-events:none}.vscomp-wrapper .checkbox-icon{display:inline-flex;height:15px;margin-right:10px;position:relative;width:15px}.vscomp-wrapper .checkbox-icon::after{transition-duration:.2s;border:2px solid #888;content:"";display:inline-block;height:100%;width:100%}.vscomp-wrapper .checkbox-icon.checked::after{transform:rotate(45deg) translate(1px, -4px);border-color:#512da8;border-left-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);width:50%}.vscomp-wrapper.show-as-popup .vscomp-dropbox-container{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;left:0;opacity:1;overflow:auto;padding:0 10px;position:fixed;top:0;width:100vw}.vscomp-wrapper.show-as-popup .vscomp-dropbox{margin-top:-24px;max-height:calc(80% - 48px);max-width:500px;position:relative;width:80%}.vscomp-wrapper.show-as-popup .vscomp-dropbox-close-button{display:flex}.vscomp-wrapper.popup-position-left .vscomp-dropbox-container{justify-content:flex-start}.vscomp-wrapper.popup-position-right .vscomp-dropbox-container{justify-content:flex-end}.vscomp-wrapper.has-select-all .vscomp-toggle-all-button{align-items:center;cursor:pointer;display:flex}.vscomp-wrapper.has-select-all .vscomp-search-input,.vscomp-wrapper.has-select-all .vscomp-toggle-all-label{width:calc(100% - 55px)}.vscomp-wrapper.has-select-all .vscomp-toggle-all-label{display:none}.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-button{width:100%}.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-label{display:inline-block}.vscomp-wrapper.multiple .vscomp-option .vscomp-option-text{width:calc(100% - 25px)}.vscomp-wrapper.multiple .vscomp-option .vscomp-option-description{padding-left:25px}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{transform:rotate(45deg) translate(1px, -4px);border-color:#512da8;border-left-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);width:50%}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.vscomp-wrapper.closed .vscomp-dropbox-container,.vscomp-wrapper.closed.vscomp-dropbox-wrapper{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container,.vscomp-wrapper.has-no-search-results .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:flex}.vscomp-wrapper.has-no-search-results .vscomp-no-search-results{display:flex}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible}.vscomp-wrapper.has-no-options .vscomp-toggle-all-button{opacity:.5;pointer-events:none}.vscomp-wrapper.keep-always-open .vscomp-toggle-button{padding-right:24px}.vscomp-wrapper.keep-always-open .vscomp-clear-button{right:5px}.vscomp-wrapper.keep-always-open .vscomp-arrow{display:none}.vscomp-wrapper.keep-always-open .vscomp-dropbox-container{position:relative;z-index:1}.vscomp-wrapper.keep-always-open .vscomp-dropbox{transition-duration:0s;border:1px solid #ddd;box-shadow:none}.vscomp-wrapper.keep-always-open.focused,.vscomp-wrapper.keep-always-open:focus,.vscomp-wrapper.keep-always-open:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.vscomp-wrapper.server-searching .vscomp-options-list{display:none}.vscomp-wrapper.server-searching .vscomp-options-loader{display:block}.vscomp-wrapper.has-error .vscomp-toggle-button{border-color:#b00020}.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button{padding:4px 22px 0 10px}.vscomp-wrapper.show-value-as-tags .vscomp-value{display:flex;flex-wrap:wrap;height:auto;min-height:28px;overflow:auto;text-overflow:unset;white-space:normal}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;border:1px solid #ddd;border-radius:20px;display:inline-flex;font-size:12px;line-height:16px;margin:0 4px 4px 0;max-width:100%;padding:2px 3px 2px 8px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag.more-value-count{padding-right:8px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button{align-items:center;display:flex;height:20px;justify-content:center;width:20px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button .vscomp-clear-icon{transform:scale(0.8)}.vscomp-wrapper.show-value-as-tags .vscomp-arrow{height:34px}.vscomp-wrapper.show-value-as-tags .vscomp-clear-button{margin-top:0;top:5px}.vscomp-wrapper.show-value-as-tags.has-value .vscomp-arrow{display:none}.vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button{right:2px}.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-toggle-button{padding-bottom:2px}.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value{align-items:center;padding-bottom:3px}.vscomp-wrapper.text-direction-rtl{direction:rtl}.vscomp-wrapper.text-direction-rtl .vscomp-toggle-button{padding:7px 10px 7px 30px}.vscomp-wrapper.text-direction-rtl .vscomp-arrow{left:0;right:auto}.vscomp-wrapper.text-direction-rtl .vscomp-clear-button{left:30px;right:auto !important}.vscomp-wrapper.text-direction-rtl .checkbox-icon{margin-left:10px;margin-right:0}.vscomp-wrapper.text-direction-rtl .checkbox-icon.checked::after{transform:rotate(45deg) translate(-4px, 1px)}.vscomp-wrapper.text-direction-rtl .vscomp-search-container{padding:0 15px 0 5px}.vscomp-wrapper.text-direction-rtl .vscomp-toggle-all-label{text-align:right}.vscomp-wrapper.text-direction-rtl .vscomp-option{text-align:right}.vscomp-wrapper.text-direction-rtl .vscomp-option.group-option{padding-right:30px}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon{left:0;right:auto}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::before{border-left-color:#512da8;border-right-color:rgba(0,0,0,0)}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::after{left:1px;right:auto}.vscomp-wrapper.text-direction-rtl.multiple .vscomp-option.selected .checkbox-icon::after{transform:rotate(45deg) translate(-4px, 1px)}.vscomp-wrapper.text-direction-rtl.has-clear-button .vscomp-toggle-button{padding-left:54px}.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-toggle-button{padding-left:24px}.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-clear-button{left:5px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-toggle-button{padding:4px 10px 0 22px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag{margin:0 0 4px 4px;padding:2px 8px 2px 3px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag.more-value-count{padding-left:8px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags.has-value .vscomp-clear-button{left:2px} +@-webkit-keyframes vscomp-animation-spin{to{transform:rotateZ(360deg)}}@keyframes vscomp-animation-spin{to{transform:rotateZ(360deg)}}.vscomp-popup-active{overflow:hidden !important}.vscomp-ele{display:inline-block;max-width:250px;width:100%}.vscomp-wrapper{color:#333;display:inline-flex;flex-wrap:wrap;font-family:sans-serif;font-size:14px;position:relative;text-align:left;width:100%}.vscomp-wrapper *,.vscomp-wrapper *::before,.vscomp-wrapper *::after{box-sizing:border-box}.vscomp-wrapper:focus{outline:none}.vscomp-dropbox-wrapper{left:0;position:absolute;top:0}.vscomp-toggle-button{align-items:center;background-color:#fff;border:1px solid #ddd;cursor:pointer;display:flex;padding:7px 30px 7px 10px;position:relative;width:100%}.vscomp-value{height:20px;line-height:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vscomp-arrow{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:30px}.vscomp-arrow::after{transform:rotate(45deg);border:1px solid rgba(0,0,0,0);border-bottom-color:#111;border-right-color:#111;content:"";height:8px;margin-top:-6px;width:8px}.vscomp-clear-icon{height:12px;position:relative;width:12px}.vscomp-clear-icon::before,.vscomp-clear-icon::after{background-color:#999;content:"";height:12px;left:5px;position:absolute;top:0;width:2px}.vscomp-clear-icon::before{transform:rotate(45deg)}.vscomp-clear-icon::after{transform:rotate(-45deg)}.vscomp-clear-icon:hover::before,.vscomp-clear-icon:hover::after{background:#333}.vscomp-clear-button{align-items:center;border-radius:50%;display:none;height:24px;justify-content:center;margin-top:-12px;position:absolute;right:30px;top:50%;width:24px}.vscomp-clear-button:hover{background:#ccc}.vscomp-clear-button:hover .vscomp-clear-icon::before,.vscomp-clear-button:hover .vscomp-clear-icon::after{background-color:#333}.vscomp-dropbox-close-button{align-items:center;background-color:#fff;border-radius:50%;bottom:-48px;cursor:pointer;display:none;height:40px;justify-content:center;left:50%;margin-left:-20px;position:absolute;width:40px}.vscomp-value-tag.more-value-count{white-space:nowrap}.vscomp-dropbox-container{width:100%;z-index:2}.vscomp-dropbox{background-color:#fff;width:100%}.vscomp-options-container{max-height:210px;overflow:auto;position:relative}.vscomp-options-bottom-freezer{bottom:0;height:2px;left:0;position:absolute;right:0}.vscomp-option{align-items:center;cursor:pointer;display:flex;flex-wrap:wrap;height:40px;padding:0 15px;position:relative}.vscomp-option.selected{background-color:#eee}.vscomp-option.focused{background-color:#ccc}.vscomp-option.disabled{cursor:default;opacity:.5}.vscomp-option.group-title .vscomp-option-text{cursor:default;opacity:.6}.vscomp-option.group-title.selected{background-color:rgba(0,0,0,0)}.vscomp-option.group-option{padding-left:30px}.vscomp-new-option-icon{height:30px;position:absolute;right:0;top:0;width:30px}.vscomp-new-option-icon::before{border:15px solid #512da8;border-bottom-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0);content:"";position:absolute;right:0;top:0}.vscomp-new-option-icon::after{align-items:center;color:#fff;content:"+";display:flex;font-size:18px;height:15px;justify-content:center;position:absolute;right:1px;top:0;width:15px}.vscomp-option-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vscomp-option-description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:13px;line-height:15px;width:100%}.vscomp-search-container{align-items:center;border-bottom:1px solid #ddd;display:flex;height:40px;padding:0 5px 0 15px;position:relative}.vscomp-search-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.vscomp-search-input{background-color:rgba(0,0,0,0);border:0;color:inherit;font-size:15px;height:38px;padding:10px 0;width:calc(100% - 30px)}.vscomp-search-input:focus{outline:none}.vscomp-search-clear{align-items:center;color:#999;cursor:pointer;display:flex;font-size:25px;height:30px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;width:30px}.vscomp-search-clear:hover{color:inherit}.vscomp-no-options,.vscomp-no-search-results{align-items:center;display:none;justify-content:center;padding:20px 10px}.vscomp-options-loader{display:none;padding:20px 0;text-align:center}.vscomp-options-loader::before{-webkit-animation:vscomp-animation-spin .8s infinite linear;animation:vscomp-animation-spin .8s infinite linear;background-color:#fff;border-radius:50%;box-shadow:-4px -5px 3px -3px rgba(0,0,0,.3);content:"";display:inline-block;height:40px;opacity:.7;width:40px}.vscomp-ele[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vscomp-ele[disabled] .vscomp-wrapper{opacity:.7;pointer-events:none}.vscomp-wrapper .checkbox-icon{display:inline-flex;height:15px;margin-right:10px;position:relative;width:15px}.vscomp-wrapper .checkbox-icon::after{transition-duration:.2s;border:2px solid #888;content:"";display:inline-block;height:100%;width:100%}.vscomp-wrapper .checkbox-icon.checked::after{transform:rotate(45deg) translate(1px, -4px);border-color:#512da8;border-left-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);width:50%}.vscomp-wrapper.show-as-popup .vscomp-dropbox-container{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;left:0;opacity:1;overflow:auto;padding:0 10px;position:fixed;top:0;width:100vw}.vscomp-wrapper.show-as-popup .vscomp-dropbox{margin-top:-24px;max-height:calc(80% - 48px);max-width:500px;position:relative;width:80%}.vscomp-wrapper.show-as-popup .vscomp-dropbox-close-button{display:flex}.vscomp-wrapper.popup-position-left .vscomp-dropbox-container{justify-content:flex-start}.vscomp-wrapper.popup-position-right .vscomp-dropbox-container{justify-content:flex-end}.vscomp-wrapper.has-select-all .vscomp-toggle-all-button{align-items:center;cursor:pointer;display:flex}.vscomp-wrapper.has-select-all .vscomp-search-input,.vscomp-wrapper.has-select-all .vscomp-toggle-all-label{width:calc(100% - 55px)}.vscomp-wrapper.has-select-all .vscomp-toggle-all-label{display:none}.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-button{width:100%}.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-label{display:inline-block}.vscomp-wrapper.multiple .vscomp-option .vscomp-option-text{width:calc(100% - 25px)}.vscomp-wrapper.multiple .vscomp-option .vscomp-option-description{padding-left:25px}.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{transform:rotate(45deg) translate(1px, -4px);border-color:#512da8;border-left-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);width:50%}.vscomp-wrapper.focused .vscomp-toggle-button,.vscomp-wrapper:focus .vscomp-toggle-button{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.vscomp-wrapper.closed .vscomp-dropbox-container,.vscomp-wrapper.closed.vscomp-dropbox-wrapper{display:none}.vscomp-wrapper:not(.has-value) .vscomp-value{opacity:.5}.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button{display:flex}.vscomp-wrapper.has-clear-button .vscomp-toggle-button{padding-right:54px}.vscomp-wrapper.has-no-options .vscomp-options-container,.vscomp-wrapper.has-no-search-results .vscomp-options-container{display:none}.vscomp-wrapper.has-no-options .vscomp-no-options{display:flex}.vscomp-wrapper.has-no-search-results .vscomp-no-search-results{display:flex}.vscomp-wrapper.has-search-value .vscomp-search-clear{visibility:visible}.vscomp-wrapper.has-no-options .vscomp-toggle-all-button{opacity:.5;pointer-events:none}.vscomp-wrapper.keep-always-open .vscomp-toggle-button{padding-right:24px}.vscomp-wrapper.keep-always-open .vscomp-clear-button{right:5px}.vscomp-wrapper.keep-always-open .vscomp-arrow{display:none}.vscomp-wrapper.keep-always-open .vscomp-dropbox-container{position:relative;z-index:1}.vscomp-wrapper.keep-always-open .vscomp-dropbox{transition-duration:0s;border:1px solid #ddd;box-shadow:none}.vscomp-wrapper.keep-always-open.focused,.vscomp-wrapper.keep-always-open:focus,.vscomp-wrapper.keep-always-open:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.vscomp-wrapper.server-searching .vscomp-options-list{display:none}.vscomp-wrapper.server-searching .vscomp-options-loader{display:block}.vscomp-wrapper.has-error .vscomp-toggle-button{border-color:#b00020}.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button{padding:4px 22px 0 10px}.vscomp-wrapper.show-value-as-tags .vscomp-value{display:flex;flex-wrap:wrap;height:auto;min-height:28px;overflow:auto;text-overflow:unset;white-space:normal}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;border:1px solid #ddd;border-radius:20px;display:inline-flex;font-size:12px;line-height:16px;margin:0 4px 4px 0;max-width:100%;padding:2px 3px 2px 8px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag.more-value-count{padding-right:8px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 20px)}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button{align-items:center;display:flex;height:20px;justify-content:center;width:20px}.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button .vscomp-clear-icon{transform:scale(0.8)}.vscomp-wrapper.show-value-as-tags .vscomp-arrow{height:34px}.vscomp-wrapper.show-value-as-tags .vscomp-clear-button{margin-top:0;top:5px}.vscomp-wrapper.show-value-as-tags.has-value .vscomp-arrow{display:none}.vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button{right:2px}.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-toggle-button{padding-bottom:2px}.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value{align-items:center;padding-bottom:3px}.vscomp-wrapper.text-direction-rtl{direction:rtl}.vscomp-wrapper.text-direction-rtl .vscomp-toggle-button{padding:7px 10px 7px 30px}.vscomp-wrapper.text-direction-rtl .vscomp-arrow{left:0;right:auto}.vscomp-wrapper.text-direction-rtl .vscomp-clear-button{left:30px;right:auto !important}.vscomp-wrapper.text-direction-rtl .checkbox-icon{margin-left:10px;margin-right:0}.vscomp-wrapper.text-direction-rtl .checkbox-icon.checked::after{transform:rotate(45deg) translate(-4px, 1px)}.vscomp-wrapper.text-direction-rtl .vscomp-search-container{padding:0 15px 0 5px}.vscomp-wrapper.text-direction-rtl .vscomp-toggle-all-label{text-align:right}.vscomp-wrapper.text-direction-rtl .vscomp-option{text-align:right}.vscomp-wrapper.text-direction-rtl .vscomp-option.group-option{padding-right:30px}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon{left:0;right:auto}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::before{border-left-color:#512da8;border-right-color:rgba(0,0,0,0)}.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::after{left:1px;right:auto}.vscomp-wrapper.text-direction-rtl.multiple .vscomp-option.selected .checkbox-icon::after{transform:rotate(45deg) translate(-4px, 1px)}.vscomp-wrapper.text-direction-rtl.has-clear-button .vscomp-toggle-button{padding-left:54px}.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-toggle-button{padding-left:24px}.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-clear-button{left:5px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-toggle-button{padding:4px 10px 0 22px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag{margin:0 0 4px 4px;padding:2px 8px 2px 3px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag.more-value-count{padding-left:8px}.vscomp-wrapper.text-direction-rtl.show-value-as-tags.has-value .vscomp-clear-button{left:2px} /*! * Popover v1.0.12 * https://sa-si-dev.github.io/popover diff --git a/dist/virtual-select.min.js b/dist/virtual-select.min.js index dbb37ee..4409d5c 100644 --- a/dist/virtual-select.min.js +++ b/dist/virtual-select.min.js @@ -2,4 +2,4 @@ * Virtual Select v1.0.37 * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) - */!function(){"use strict";function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,i){if(e){if("string"==typeof e)return t(e,i);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,i):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i1&&void 0!==arguments[1]&&arguments[1];return!0===e||"true"===e||!1!==e&&"false"!==e&&t}},{key:"isEmpty",value:function(e){var t=!1;return e?Array.isArray(e)?0===e.length&&(t=!0):"object"===i(e)&&0===Object.keys(e).length&&(t=!0):t=!0,t}},{key:"isNotEmpty",value:function(e){return!this.isEmpty(e)}},{key:"removeItemFromArray",value:function(t,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!Array.isArray(t)||!t.length)return t;var s=o?e(t):t,n=s.indexOf(i);return-1!==n&&s.splice(n,1),s}},{key:"removeArrayEmpty",value:function(e){return Array.isArray(e)&&e.length?e.filter((function(e){return!!e})):[]}},{key:"getRandomInt",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),o=Math.floor(e);return Math.floor(Math.random()*(o-i-1))+i}},{key:"regexEscape",value:function(e){return e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")}}],(n=null)&&o(s.prototype,n),r&&o(s,r),Object.defineProperty(s,"prototype",{writable:!1}),t}();function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=i){var o,s,n,r,a=[],l=!0,u=!1;try{if(n=(i=i.call(e)).next,0===t){if(Object(i)!==i)return;l=!1}else for(;!(l=(o=n.call(i)).done)&&(a.push(o.value),a.length!==t);l=!0);}catch(e){u=!0,s=e}finally{try{if(!l&&null!=i.return&&(r=i.return(),Object(r)!==r))return}finally{if(u)throw s}}return a}}(e,t)||l(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||l(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){if(e){if("string"==typeof e)return u(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?u(e,t):void 0}}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);ie.offsetWidth}},{key:"getData",value:function(e,t,i){if(e){var o=e?e.dataset[t]:"";return"number"===i?o=parseFloat(o)||0:"true"===o?o=!0:"false"===o&&(o=!1),o}}},{key:"setData",value:function(e,t,i){e&&(e.dataset[t]=i)}},{key:"setAttr",value:function(e,t,i){e&&e.setAttribute(t,i)}},{key:"setAttrFromEle",value:function(e,t,i,o){var s={};i.forEach((function(t){s[t]=e.getAttribute(t)})),i.forEach((function(e){var i=s[e];(i||-1!==o.indexOf(e)&&""===i)&&t.setAttribute(e,i)}))}},{key:"setStyle",value:function(e,t,i){e&&(e.style[t]=i)}},{key:"setStyles",value:function(e,t){e&&t&&Object.keys(t).forEach((function(i){e.style[i]=t[i]}))}},{key:"setAria",value:function(e,t,i){var o=t;"role"!==o&&(o="aria-".concat(o)),e.setAttribute(o,i)}},{key:"getElements",value:function(e){return e?void 0===e.forEach?[e]:e:[]}},{key:"addEvent",value:function(t,i,o){t&&s.removeArrayEmpty(i.split(" ")).forEach((function(i){e.getElements(t).forEach((function(e){e.addEventListener(i,o)}))}))}},{key:"dispatchEvent",value:function(t,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t){var s=e.getElements(t);setTimeout((function(){s.forEach((function(e){e.dispatchEvent(new CustomEvent(i,{bubbles:o}))}))}),0)}}},{key:"getAttributesText",value:function(e){var t="";return e?(Object.entries(e).forEach((function(e){var i=r(e,2),o=i[0],s=i[1];void 0!==s&&(t+=" ".concat(o,'="').concat(s,'" '))})),t):t}},{key:"convertPropToDataAttr",value:function(e){return e?"data-".concat(e).replace(/([A-Z])/g,"-$1").toLowerCase():""}}],(i=null)&&p(t.prototype,i),o&&p(t,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();function c(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,o)}return i}function d(e){for(var t=1;te.length)&&(t=e.length);for(var i=0,o=new Array(t);i\n \n\n
\n
\n ").concat(this.placeholder,'\n
\n\n
\n\n
\n \n
\n
\n\n ').concat(this.renderDropbox({wrapperClasses:t}),"\n
");this.$ele.innerHTML=r,this.$body=document.querySelector("body"),this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.hasDropboxWrapper?(this.$allWrappers=[this.$wrapper,this.$dropboxWrapper],this.$dropboxContainer=this.$dropboxWrapper.querySelector(".vscomp-dropbox-container"),h.addClass(this.$dropboxContainer,"pop-comp-wrapper")):(this.$allWrappers=[this.$wrapper],this.$dropboxContainer=this.$wrapper.querySelector(".vscomp-dropbox-container")),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.$hiddenInput=this.$ele.querySelector(".vscomp-hidden-input"),this.$dropbox=this.$dropboxContainer.querySelector(".vscomp-dropbox"),this.$dropboxCloseButton=this.$dropboxContainer.querySelector(".vscomp-dropbox-close-button"),this.$search=this.$dropboxContainer.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$dropboxContainer.querySelector(".vscomp-options-container"),this.$optionsList=this.$dropboxContainer.querySelector(".vscomp-options-list"),this.$options=this.$dropboxContainer.querySelector(".vscomp-options"),this.$noOptions=this.$dropboxContainer.querySelector(".vscomp-no-options"),this.$noSearchResults=this.$dropboxContainer.querySelector(".vscomp-no-search-results"),this.afterRenderWrapper()}}},{key:"renderDropbox",value:function(e){var t=e.wrapperClasses,i="self"!==this.dropboxWrapper?document.querySelector(this.dropboxWrapper):null,o='
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
').concat(this.noOptionsText,'
\n
').concat(this.noSearchResultsText,'
\n\n \n
\n
');if(i){var s=document.createElement("div");return this.$dropboxWrapper=s,this.hasDropboxWrapper=!0,s.innerHTML=o,i.appendChild(s),h.addClass(s,"vscomp-dropbox-wrapper ".concat(t)),""}return this.hasDropboxWrapper=!1,o}},{key:"renderOptions",value:function(){var e,t=this,i="",o=this.getVisibleOptions(),n="",r="",a=!(!this.markSearchResults||!this.searchValue),l=this.labelRenderer,u=this.disableOptionGroupCheckbox,p=this.uniqueId,h=this.searchGroup,c="function"==typeof l,d=s.convertToBoolean;if(a&&(e=new RegExp("(".concat(s.regexEscape(this.searchValue),")"),"gi")),this.multiple&&(n=''),this.allowNewOption){var v=this.getTooltipAttrText("New Option");r='")}o.forEach((function(o){var s,v=o.index,f="vscomp-option",y=t.getTooltipAttrText("",!0,!0),b=n,g="",m="",O="",S=d(o.isSelected),x="";o.classNames&&(f+=" ".concat(o.classNames)),o.isFocused&&(f+=" focused"),o.isDisabled&&(f+=" disabled",x='aria-disabled="true"'),o.isGroupTitle&&(f+=" group-title",u&&(b="")),S&&(f+=" selected"),o.isGroupOption&&(f+=" group-option",O='data-group-index="'.concat(o.groupIndex,'"')),s=c?l(o):o.label,o.description&&(m='
").concat(o.description,"
")),o.isCurrentNew?(f+=" current-new",g+=r):!a||o.isGroupTitle&&!h||(s=s.replace(e,"$1")),i+='
\n ").concat(b,'\n \n ").concat(s,"\n \n ").concat(m,"\n ").concat(g,"\n
")})),this.$options.innerHTML=i,this.$visibleOptions=this.$options.querySelectorAll(".vscomp-option"),this.afterRenderOptions()}},{key:"renderSearch",value:function(){if(this.hasSearchContainer){var e="",t="";this.multiple&&!this.disableSelectAll&&(e='\n \n '.concat(this.selectAllText,"\n ")),this.hasSearch&&(t='\n ×'));var i='
\n '.concat(e,"\n ").concat(t,"\n
");this.$search.innerHTML=i,this.$searchInput=this.$dropboxContainer.querySelector(".vscomp-search-input"),this.$searchClear=this.$dropboxContainer.querySelector(".vscomp-search-clear"),this.$toggleAllButton=this.$dropboxContainer.querySelector(".vscomp-toggle-all-button"),this.$toggleAllCheckbox=this.$dropboxContainer.querySelector(".vscomp-toggle-all-checkbox"),this.addEvent(this.$searchInput,"input","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllButton,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$allWrappers,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$dropboxContainer,"click","onDropboxContainerClick"),this.addEvent(this.$dropboxCloseButton,"click","onDropboxCloseButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove"),this.addMutationObserver()}},{key:"addEvent",value:function(e,t,i){var o=this;e&&s.removeArrayEmpty(t.split(" ")).forEach((function(t){var s="".concat(i,"-").concat(t),n=o.events[s];n||(n=o[i].bind(o),o.events[s]=n),h.addEvent(e,t,n)}))}},{key:"onDocumentClick",value:function(e){var t=e.target.closest(".vscomp-wrapper");t!==this.$wrapper&&t!==this.$dropboxWrapper&&this.isOpened()&&this.closeDropbox()}},{key:"onKeyDown",value:function(e){var t=e.which||e.keyCode,i=w[t];i&&this[i](e)}},{key:"onEnterPress",value:function(e){e.preventDefault(),this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onDownArrowPress",value:function(e){e.preventDefault(),this.isOpened()?this.focusOption({direction:"next"}):this.openDropbox()}},{key:"onUpArrowPress",value:function(e){e.preventDefault(),this.isOpened()?this.focusOption({direction:"previous"}):this.openDropbox()}},{key:"onToggleButtonClick",value:function(e){var t=e.target;t.closest(".vscomp-value-tag-clear-button")?this.removeValue(t.closest(".vscomp-value-tag")):t.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(e){var t=e.target.closest(".vscomp-option");t&&!h.hasClass(t,"disabled")&&(h.hasClass(t,"group-title")?this.onGroupTitleClick(t):this.selectOption(t,{event:e}))}},{key:"onGroupTitleClick",value:function(e){if(e&&this.multiple&&!this.disableOptionGroupCheckbox){var t=!h.hasClass(e,"selected");this.toggleGroupTitleCheckbox(e,t),this.toggleGroupOptions(e,t)}}},{key:"onDropboxContainerClick",value:function(e){e.target.closest(".vscomp-dropbox")||this.closeDropbox()}},{key:"onDropboxCloseButtonClick",value:function(){this.closeDropbox()}},{key:"onOptionsMouseOver",value:function(e){var t=e.target.closest(".vscomp-option");t&&this.isOpened()&&(h.hasClass(t,"disabled")||h.hasClass(t,"group-title")?this.removeOptionFocus():this.focusOption({$option:t}))}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(e){e.stopPropagation(),this.setSearchValue(e.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"onResize",value:function(){this.setOptionsContainerHeight(!0)}},{key:"addMutationObserver",value:function(){var e=this;if(this.hasDropboxWrapper){var t=this.$ele;this.mutationObserver=new MutationObserver((function(i){var o=!1,s=!1;i.forEach((function(e){o||(o=b(e.addedNodes).some((function(e){return!(e!==t&&!e.contains(t))}))),s||(s=b(e.removedNodes).some((function(e){return!(e!==t&&!e.contains(t))})))})),s&&!o&&e.destroy()})),this.mutationObserver.observe(document.querySelector("body"),{childList:!0,subtree:!0})}}},{key:"beforeValueSet",value:function(e){this.toggleAllOptionsClass(!e&&void 0)}},{key:"beforeSelectNewValue",value:function(){var e=this,t=this.getNewOption(),i=t.index;this.newValues.push(t.value),this.setOptionProp(i,"isCurrentNew",!1),this.setOptionProp(i,"isNew",!0),setTimeout((function(){e.setSearchValue(""),e.focusSearchInput()}),0)}},{key:"afterRenderWrapper",value:function(){h.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setEleStyles(),this.setDropboxStyles(),this.setOptionsHeight(),this.setVisibleOptions(),this.setOptionsContainerHeight(),this.addEvents(),this.setEleProps(),this.keepAlwaysOpen||this.showAsPopup||this.initDropboxPopover(),this.initialSelectedValue?this.setValueMethod(this.initialSelectedValue,this.silentInitialValueSet):this.autoSelectFirstOption&&this.visibleOptions.length&&this.setValueMethod(this.visibleOptions[0].value,this.silentInitialValueSet),this.showOptionsOnlyOnSearch&&this.setSearchValue("",!1,!0),this.initialDisabled&&this.disable(),this.autofocus&&this.focus()}},{key:"afterRenderOptions",value:function(){var e=this.getVisibleOptions(),t=!this.options.length&&!this.hasServerSearch,i=!t&&!e.length;(!this.allowNewOption||this.hasServerSearch||this.showOptionsOnlyOnSearch)&&h.toggleClass(this.$allWrappers,"has-no-search-results",i),h.toggleClass(this.$allWrappers,"has-no-options",t),this.setOptionAttr(),this.setOptionsPosition(),this.setOptionsTooltip()}},{key:"afterSetOptionsContainerHeight",value:function(e){e&&this.showAsPopup&&this.setVisibleOptions()}},{key:"afterSetSearchValue",value:function(){var e=this;this.hasServerSearch?(clearInterval(this.serverSearchTimeout),this.serverSearchTimeout=setTimeout((function(){e.serverSearch()}),this.searchDelay)):this.setVisibleOptionsCount(),this.selectAllOnlyVisible&&this.toggleAllOptionsClass(),this.focusOption({focusFirst:!0})}},{key:"afterSetVisibleOptionsCount",value:function(){this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions(),this.updatePosition()}},{key:"afterValueSet",value:function(){this.scrollToTop(),this.setSearchValue(""),this.renderOptions()}},{key:"afterSetOptions",value:function(e){e&&this.setSelectedProp(),this.setOptionsHeight(),this.setVisibleOptions(),this.showOptionsOnlyOnSearch&&this.setSearchValue("",!1,!0),e||this.reset()}},{key:"setProps",value:function(e){var t=this.setDefaultProps(e);this.setPropsFromElementAttr(t);var i=s.convertToBoolean;this.$ele=t.ele,this.dropboxWrapper=t.dropboxWrapper,this.valueKey=t.valueKey,this.labelKey=t.labelKey,this.descriptionKey=t.descriptionKey,this.aliasKey=t.aliasKey,this.optionHeightText=t.optionHeight,this.optionHeight=parseFloat(this.optionHeightText),this.multiple=i(t.multiple),this.hasSearch=i(t.search),this.searchByStartsWith=i(t.searchByStartsWith),this.searchGroup=i(t.searchGroup),this.hideClearButton=i(t.hideClearButton),this.autoSelectFirstOption=i(t.autoSelectFirstOption),this.hasOptionDescription=i(t.hasOptionDescription),this.silentInitialValueSet=i(t.silentInitialValueSet),this.allowNewOption=i(t.allowNewOption),this.markSearchResults=i(t.markSearchResults),this.showSelectedOptionsFirst=i(t.showSelectedOptionsFirst),this.disableSelectAll=i(t.disableSelectAll),this.keepAlwaysOpen=i(t.keepAlwaysOpen),this.showDropboxAsPopup=i(t.showDropboxAsPopup),this.hideValueTooltipOnSelectAll=i(t.hideValueTooltipOnSelectAll),this.showOptionsOnlyOnSearch=i(t.showOptionsOnlyOnSearch),this.selectAllOnlyVisible=i(t.selectAllOnlyVisible),this.alwaysShowSelectedOptionsCount=i(t.alwaysShowSelectedOptionsCount),this.alwaysShowSelectedOptionsLabel=i(t.alwaysShowSelectedOptionsLabel),this.disableAllOptionsSelectedText=i(t.disableAllOptionsSelectedText),this.showValueAsTags=i(t.showValueAsTags),this.disableOptionGroupCheckbox=i(t.disableOptionGroupCheckbox),this.enableSecureText=i(t.enableSecureText),this.setValueAsArray=i(t.setValueAsArray),this.disableValidation=i(t.disableValidation),this.initialDisabled=i(t.disabled),this.required=i(t.required),this.autofocus=i(t.autofocus),this.useGroupValue=i(t.useGroupValue),this.focusSelectedOptionOnOpen=i(t.focusSelectedOptionOnOpen),this.noOptionsText=t.noOptionsText,this.noSearchResultsText=t.noSearchResultsText,this.selectAllText=t.selectAllText,this.searchPlaceholderText=t.searchPlaceholderText,this.optionsSelectedText=t.optionsSelectedText,this.optionSelectedText=t.optionSelectedText,this.allOptionsSelectedText=t.allOptionsSelectedText,this.clearButtonText=t.clearButtonText,this.moreText=t.moreText,this.placeholder=t.placeholder,this.position=t.position,this.textDirection=t.textDirection,this.dropboxWidth=t.dropboxWidth,this.tooltipFontSize=t.tooltipFontSize,this.tooltipAlignment=t.tooltipAlignment,this.tooltipMaxWidth=t.tooltipMaxWidth,this.updatePositionThrottle=t.updatePositionThrottle,this.noOfDisplayValues=parseInt(t.noOfDisplayValues),this.zIndex=parseInt(t.zIndex),this.maxValues=parseInt(t.maxValues),this.minValues=parseInt(t.minValues),this.name=this.secureText(t.name),this.additionalClasses=t.additionalClasses,this.popupDropboxBreakpoint=t.popupDropboxBreakpoint,this.popupPosition=t.popupPosition,this.onServerSearch=t.onServerSearch,this.labelRenderer=t.labelRenderer,this.initialSelectedValue=0===t.selectedValue?"0":t.selectedValue,this.emptyValue=t.emptyValue,this.ariaLabelledby=t.ariaLabelledby,this.maxWidth=t.maxWidth,this.searchDelay=t.searchDelay,this.selectedValues=[],this.selectedOptions=[],this.newValues=[],this.events={},this.tooltipEnterDelay=200,this.searchValue="",this.searchValueOriginal="",this.isAllSelected=!1,(void 0===t.search&&this.multiple||this.allowNewOption||this.showOptionsOnlyOnSearch)&&(this.hasSearch=!0),this.hasServerSearch="function"==typeof this.onServerSearch,(this.maxValues||this.hasServerSearch||this.showOptionsOnlyOnSearch)&&(this.disableSelectAll=!0,this.disableOptionGroupCheckbox=!0),this.keepAlwaysOpen&&(this.dropboxWrapper="self"),this.showAsPopup=this.showDropboxAsPopup&&!this.keepAlwaysOpen&&window.innerWidth<=parseFloat(this.popupDropboxBreakpoint),this.hasSearchContainer=this.hasSearch||this.multiple&&!this.disableSelectAll,this.optionsCount=this.getOptionsCount(t.optionsCount),this.halfOptionsCount=Math.ceil(this.optionsCount/2),this.optionsHeight=this.getOptionsHeight(),this.uniqueId=this.getUniqueId()}},{key:"setDefaultProps",value:function(e){var t={dropboxWrapper:"self",valueKey:"value",labelKey:"label",descriptionKey:"description",aliasKey:"alias",optionsCount:5,noOfDisplayValues:50,optionHeight:"40px",noOptionsText:"No options found",noSearchResultsText:"No results found",selectAllText:"Select All",searchPlaceholderText:"Search...",clearButtonText:"Clear",moreText:"more...",optionsSelectedText:"options selected",optionSelectedText:"option selected",allOptionsSelectedText:"All",placeholder:"Select",position:"bottom left",zIndex:e.keepAlwaysOpen?1:2,tooltipFontSize:"14px",tooltipAlignment:"center",tooltipMaxWidth:"300px",updatePositionThrottle:100,name:"",additionalClasses:"",maxValues:0,showDropboxAsPopup:!0,popupDropboxBreakpoint:"576px",popupPosition:"center",hideValueTooltipOnSelectAll:!0,emptyValue:"",searchDelay:300,focusSelectedOptionOnOpen:!0};return e.hasOptionDescription&&(t.optionsCount=4,t.optionHeight="50px"),Object.assign(t,e)}},{key:"setPropsFromElementAttr",value:function(e){var t=e.ele;Object.keys(x).forEach((function(i){var o=t.getAttribute(i);-1===k.indexOf(i)||""!==o&&"true"!==o||(o=!0),o&&(e[x[i]]=o)}))}},{key:"setEleProps",value:function(){var t=this.$ele;t.virtualSelect=this,t.value=this.multiple?[]:"",t.name=this.name,t.disabled=!1,t.required=this.required,t.autofocus=this.autofocus,t.multiple=this.multiple,t.form=t.closest("form"),t.reset=e.reset,t.setValue=e.setValueMethod,t.setOptions=e.setOptionsMethod,t.setDisabledOptions=e.setDisabledOptionsMethod,t.setEnabledOptions=e.setEnabledOptionsMethod,t.toggleSelectAll=e.toggleSelectAll,t.isAllSelected=e.isAllSelected,t.addOption=e.addOptionMethod,t.getNewValue=e.getNewValueMethod,t.getDisplayValue=e.getDisplayValueMethod,t.getSelectedOptions=e.getSelectedOptionsMethod,t.getDisabledOptions=e.getDisabledOptionsMethod,t.open=e.openMethod,t.close=e.closeMethod,t.focus=e.focusMethod,t.enable=e.enableMethod,t.disable=e.disableMethod,t.destroy=e.destroyMethod,t.validate=e.validateMethod,t.toggleRequired=e.toggleRequiredMethod,this.hasDropboxWrapper&&(this.$dropboxWrapper.virtualSelect=this)}},{key:"setValueMethod",value:function(e,t){var i={},o={},s=[],n=this.multiple,r=e;if(r){if(Array.isArray(r)||(r=[r]),n){var a=this.maxValues;a&&r.length>a&&r.splice(a)}else r.length>1&&(r=[r[0]]);r=r.map((function(e){return e||0===e?e.toString():""})),this.useGroupValue&&(r=this.setGroupOptionsValue(r)),r.forEach((function(e,t){i[e]=!0,o[e]=t})),this.allowNewOption&&r&&this.setNewOptionsFromValue(r)}if(this.options.forEach((function(e){!0!==i[e.value]||e.isDisabled||e.isGroupTitle?e.isSelected=!1:(e.isSelected=!0,s.push(e.value))})),n)this.hasOptionGroup&&this.setGroupsSelectedProp(),s.sort((function(e,t){return o[e]-o[t]}));else{var l=y(s,1);s=l[0]}this.beforeValueSet(),this.setValue(s,{disableEvent:t}),this.afterValueSet()}},{key:"setGroupOptionsValue",value:function(e){var t=[],i={},o={};return e.forEach((function(e){o[e]=!0})),this.options.forEach((function(e){var s=e.value,n=!0===o[s];e.isGroupTitle?n&&(i[e.index]=!0):(n||i[e.groupIndex])&&t.push(s)})),t}},{key:"setGroupsSelectedProp",value:function(){var e=this.isAllGroupOptionsSelected.bind(this);this.options.forEach((function(t){t.isGroupTitle&&(t.isSelected=e(t.index))}))}},{key:"setOptionsMethod",value:function(e,t){this.setOptions(e),this.afterSetOptions(t)}},{key:"setDisabledOptionsMethod",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setDisabledOptions(e,!0),t||(this.setValueMethod(null),this.toggleAllOptionsClass()),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=[];if(e)if(!0===e)t&&this.options.forEach((function(e){return e.isDisabled=!0,i.push(e.value),e}));else{i=e.map((function(e){return e.toString()}));var o={};i.forEach((function(e){o[e]=!0})),t&&this.options.forEach((function(e){return e.isDisabled=!0===o[e.value],e}))}else t&&this.options.forEach((function(e){return e.isDisabled=!1,e}));this.disabledOptions=i}},{key:"setEnabledOptionsMethod",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setEnabledOptions(e),t||(this.setValueMethod(null),this.toggleAllOptionsClass()),this.setVisibleOptions()}},{key:"setEnabledOptions",value:function(e){if(void 0!==e){var t=[];if(!0===e)this.options.forEach((function(e){return e.isDisabled=!1,e}));else{var i={};e.forEach((function(e){i[e]=!0})),this.options.forEach((function(e){var o=!0!==i[e.value];return e.isDisabled=o,o&&t.push(e.value),e}))}this.disabledOptions=t}}},{key:"setOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=[],i=this.disabledOptions.length,o=this.valueKey,n=this.labelKey,r=this.descriptionKey,a=this.aliasKey,l=this.hasOptionDescription,u=s.getString,p=s.convertToBoolean,h=this.secureText.bind(this),c=this.getAlias.bind(this),d=0,y=!1,b={},g=!1;this.disabledOptions.forEach((function(e){b[e]=!0}));var m=function e(s){var m;"object"!==f(s)&&(v(m={},o,s),v(m,n,s),s=m);var O=h(u(s[o])),S=s.options,x=!!S,w={index:d,value:O,label:h(u(s[n])),alias:c(s[a]),isVisible:p(s.isVisible,!0),isNew:s.isNew||!1,isGroupTitle:x,classNames:s.classNames};if(g||""!==O||(g=!0),i&&(w.isDisabled=!0===b[O]),s.isGroupOption&&(w.isGroupOption=!0,w.groupIndex=s.groupIndex),l&&(w.description=h(u(s[r]))),s.customData&&(w.customData=s.customData),t.push(w),d+=1,x){var k=w.index;y=!0,S.forEach((function(t){t.isGroupOption=!0,t.groupIndex=k,e(t)}))}};Array.isArray(e)&&e.forEach(m);var O=t.length,S=this.$ele;S.options=t,S.length=O,this.options=t,this.visibleOptionsCount=O,this.lastOptionIndex=O-1,this.newValues=[],this.hasOptionGroup=y,this.hasEmptyValueOption=g,this.setSortedOptions()}},{key:"setServerOptions",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.setOptionsMethod(t,!0);var i=this.selectedOptions,o=this.options,s=!1;if(i.length){var n={};s=!0,o.forEach((function(e){n[e.value]=!0})),i.forEach((function(e){!0!==n[e.value]&&(e.isVisible=!1,o.push(e))})),this.setOptionsMethod(o,!0)}if(this.allowNewOption&&this.searchValue){var r=o.some((function(t){return t.label.toLowerCase()===e.searchValue}));r||(s=!0,this.setNewOption())}s?(this.setVisibleOptionsCount(),this.multiple&&this.toggleAllOptionsClass(),this.setValueText()):this.updatePosition(),h.removeClass(this.$allWrappers,"server-searching")}},{key:"setSelectedOptions",value:function(){this.selectedOptions=this.options.filter((function(e){return e.isSelected}))}},{key:"setSortedOptions",value:function(){var e=b(this.options);this.showSelectedOptionsFirst&&this.selectedValues.length&&(e=this.hasOptionGroup?this.sortOptionsGroup(e):this.sortOptions(e)),this.sortedOptions=e}},{key:"setVisibleOptions",value:function(){var e=b(this.sortedOptions),t=2*this.optionsCount,i=this.getVisibleStartIndex(),o=this.getNewOption(),s=i+t-1,n=0;o&&(o.visibleIndex=n,n+=1),e=e.filter((function(e){var t=!1;return e.isVisible&&!e.isCurrentNew&&(t=n>=i&&n<=s,e.visibleIndex=n,n+=1),t})),o&&(e=[o].concat(b(e))),this.visibleOptions=e,this.renderOptions()}},{key:"setOptionsPosition",value:function(e){var t=(e||this.getVisibleStartIndex())*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(t,"px, 0)"),h.setData(this.$options,"top",t)}},{key:"setOptionsTooltip",value:function(){var e=this,t=this.getVisibleOptions(),i=this.hasOptionDescription;t.forEach((function(t){var o=e.$dropboxContainer.querySelector('.vscomp-option[data-index="'.concat(t.index,'"]'));h.setData(o.querySelector(".vscomp-option-text"),"tooltip",t.label),i&&h.setData(o.querySelector(".vscomp-option-description"),"tooltip",t.description)}))}},{key:"setValue",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.disableEvent,o=void 0!==i&&i,n=t.disableValidation,r=void 0!==n&&n,a=this.hasEmptyValueOption&&""===e||e;a?Array.isArray(e)?this.selectedValues=b(e):this.selectedValues=[e]:this.selectedValues=[];var l=this.getValue();this.$ele.value=l,this.$hiddenInput.value=this.getInputValue(l),this.isMaxValuesSelected=!!(this.maxValues&&this.maxValues<=this.selectedValues.length),this.toggleAllOptionsClass(),this.setValueText(),h.toggleClass(this.$allWrappers,"has-value",s.isNotEmpty(this.selectedValues)),h.toggleClass(this.$allWrappers,"max-value-selected",this.isMaxValuesSelected),r||this.validate(),o||h.dispatchEvent(this.$ele,"change",!0)}},{key:"setValueText",value:function(){var e=this.multiple,t=this.selectedValues,i=this.noOfDisplayValues,o=this.showValueAsTags,s=this.$valueText,n=[],r=[],a=t.length,l=0,u=this.isAllSelected&&!this.hasServerSearch&&!this.disableAllOptionsSelectedText&&!o;if(u&&this.hideValueTooltipOnSelectAll)s.innerHTML="".concat(this.allOptionsSelectedText," (").concat(a,")");else{this.getSelectedOptions({fullDetails:!0,keepSelectionOrder:!0}).some((function(e){if(e.isCurrentNew)return!1;if(l>=i)return!0;var t=e.label;if(n.push(t),l+=1,o){var s='\n ').concat(t,'\n \n \n \n ');r.push(s)}else r.push(t);return!1}));var p=a-i;p>0&&r.push('+ '.concat(p," ").concat(this.moreText,""));var c=n.join(", ");if(""===c)s.innerHTML=this.placeholder;else if(s.innerHTML=c,e){var d=this.maxValues;if(this.alwaysShowSelectedOptionsCount||h.hasEllipsis(s)||d||o){var v=''.concat(a,"");if(d&&(v+=' / '.concat(d,"")),u)s.innerHTML="".concat(this.allOptionsSelectedText," (").concat(a,")");else if(o)s.innerHTML=r.join(""),this.$valueTags=s.querySelectorAll(".vscomp-value-tag"),this.setValueTagAttr();else if(!this.alwaysShowSelectedOptionsLabel){var f=1===a?this.optionSelectedText:this.optionsSelectedText;s.innerHTML="".concat(v," ").concat(f)}}else r=[]}}var y="";0===a?y=this.placeholder:o||(y=r.join(", ")),h.setData(s,"tooltip",y),e&&(h.setData(s,"tooltipEllipsisOnly",0===a),o&&this.updatePosition())}},{key:"setSearchValue",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e!==this.searchValueOriginal||i){t||(this.$searchInput.value=e);var o=e.replace(/\\/g,"").toLowerCase().trim();this.searchValue=o,this.searchValueOriginal=e,h.toggleClass(this.$allWrappers,"has-search-value",e),this.afterSetSearchValue()}}},{key:"setVisibleOptionsCount",value:function(){var e,t=0,i=!1,o=this.searchValue,s=this.searchGroup,n=this.showOptionsOnlyOnSearch,r=this.searchByStartsWith,a=this.isOptionVisible.bind(this);this.hasOptionGroup&&(e=this.getVisibleOptionGroupsMapping(o)),this.options.forEach((function(l){var u;l.isCurrentNew||(n&&!o?(l.isVisible=!1,u={isVisible:!1,hasExactOption:!1}):u=a({data:l,searchValue:o,hasExactOption:i,visibleOptionGroupsMapping:e,searchGroup:s,searchByStartsWith:r}),u.isVisible&&(t+=1),i||(i=u.hasExactOption))})),this.allowNewOption&&(o&&!i?(this.setNewOption(),t+=1):this.removeNewOption()),this.visibleOptionsCount=t,this.afterSetVisibleOptionsCount()}},{key:"setOptionProp",value:function(e,t,i){this.options[e]&&(this.options[e][t]=i)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height="".concat(this.optionHeight*this.visibleOptionsCount,"px")}},{key:"setOptionsContainerHeight",value:function(e){var t;e?this.showAsPopup&&(this.optionsCount=this.getOptionsCount(),this.halfOptionsCount=Math.ceil(this.optionsCount/2),t=this.getOptionsHeight(),this.optionsHeight=t):(t=this.optionsHeight,this.keepAlwaysOpen&&(h.setStyle(this.$noOptions,"height",t),h.setStyle(this.$noSearchResults,"height",t))),h.setStyle(this.$optionsContainer,"max-height",t),this.afterSetOptionsContainerHeight(e)}},{key:"setNewOption",value:function(e){var t=e||this.searchValueOriginal.trim();if(t){var i=this.getNewOption();if(i){var o=i.index;this.setOptionProp(o,"value",this.secureText(t)),this.setOptionProp(o,"label",this.secureText(t))}else{var s={value:t,label:t};e?(s.isNew=!0,this.newValues.push(t)):s.isCurrentNew=!0,this.addOption(s)}}}},{key:"setSelectedProp",value:function(){var e={};this.selectedValues.forEach((function(t){e[t]=!0})),this.options.forEach((function(t){!0===e[t.value]&&(t.isSelected=!0)}))}},{key:"setNewOptionsFromValue",value:function(e){if(e){var t=this.setNewOption.bind(this),i={};this.options.forEach((function(e){i[e.value]=!0})),e.forEach((function(e){e&&!0!==i[e]&&t(e)}))}}},{key:"setDropboxWrapperWidth",value:function(){if(!this.showAsPopup){var e=this.dropboxWidth||"".concat(this.$wrapper.offsetWidth,"px");h.setStyle(this.$dropboxContainer,"max-width",e)}}},{key:"setEleStyles",value:function(){var e=this.maxWidth,t={};e&&(t["max-width"]=e),h.setStyles(this.$ele,t)}},{key:"setDropboxStyles",value:function(){var e=this.dropboxWidth,t={},i={"z-index":this.zIndex};e&&(this.showAsPopup?t["max-width"]=e:i.width=e),h.setStyles(this.$dropboxContainer,i),h.setStyles(this.$dropbox,t)}},{key:"setOptionAttr",value:function(){var e=this.$visibleOptions,t=this.options,i="".concat(this.optionHeight,"px"),o=h.setStyle,s=h.getData,n=h.setData;e&&e.length&&e.forEach((function(e){var r=t[s(e,"index")];o(e,"height",i),n(e,"value",r.value)}))}},{key:"setValueTagAttr",value:function(){var e=this.$valueTags;if(e&&e.length){var t=h.getData,i=h.setData,o=this.options;e.forEach((function(e){var s=t(e,"index");if(void 0!==s){var n=o[s];i(e,"value",n.value)}}))}}},{key:"setScrollTop",value:function(){var e=this.selectedValues;if(!this.showSelectedOptionsFirst&&this.focusSelectedOptionOnOpen&&0!==e.length){var t,i={};e.forEach((function(e){i[e]=!0})),this.options.some((function(e){return!!i[e.value]&&(t=e.visibleIndex,!0)})),t&&(this.$optionsContainer.scrollTop=this.optionHeight*t)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.useGroupValue?this.getGroupValue():this.selectedValues:this.selectedValues[0]||""}},{key:"getGroupValue",value:function(){var e=[],t={};return this.options.forEach((function(i){if(i.isSelected){var o=i.value;i.isGroupTitle?o&&(t[i.index]=!0,e.push(o)):!0!==t[i.groupIndex]&&e.push(o)}})),e}},{key:"getInputValue",value:function(e){var t=e;return t&&t.length?this.setValueAsArray&&this.multiple&&(t=JSON.stringify(t)):t=this.emptyValue,t}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var e=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return e<0&&(e=0),e}},{key:"getTooltipAttrText",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o={"data-tooltip":e||"","data-tooltip-enter-delay":this.tooltipEnterDelay,"data-tooltip-z-index":this.zIndex,"data-tooltip-font-size":this.tooltipFontSize,"data-tooltip-alignment":this.tooltipAlignment,"data-tooltip-max-width":this.tooltipMaxWidth,"data-tooltip-ellipsis-only":t,"data-tooltip-allow-html":i};return h.getAttributesText(o)}},{key:"getOptionObj",value:function(e){if(e){var t=s.getString,i=this.secureText.bind(this);return{index:e.index,value:i(t(e.value)),label:i(t(e.label)),description:i(t(e.description)),alias:this.getAlias(e.alias),isCurrentNew:e.isCurrentNew||!1,isNew:e.isNew||!1,isVisible:!0}}}},{key:"getNewOption",value:function(){var e=this.options[this.lastOptionIndex];if(e&&e.isCurrentNew)return e}},{key:"getOptionIndex",value:function(e){var t;return this.options.some((function(i){return i.value===e&&(t=i.index,!0)})),t}},{key:"getNewValue",value:function(){var e={};this.newValues.forEach((function(t){e[t]=!0}));var t=this.selectedValues.filter((function(t){return!0===e[t]}));return this.multiple?t:t[0]}},{key:"getAlias",value:function(e){var t=e;return t&&(t=(t=Array.isArray(t)?t.join(","):t.toString().trim()).toLowerCase()),t||""}},{key:"getDisplayValue",value:function(){var e=[];return this.options.forEach((function(t){t.isSelected&&e.push(t.label)})),this.multiple?e:e[0]||""}},{key:"getSelectedOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.fullDetails,i=void 0!==t&&t,o=e.keepSelectionOrder,s=void 0!==o&&o,n=this.valueKey,r=this.labelKey,a=this.selectedValues,l=[];if(this.options.forEach((function(e){if(e.isSelected&&!e.isGroupTitle)if(i)l.push(e);else{var t,o=(v(t={},n,e.value),v(t,r,e.label),t);e.isNew&&(o.isNew=!0),e.customData&&(o.customData=e.customData),l.push(o)}})),s){var u={};a.forEach((function(e,t){u[e]=t})),l.sort((function(e,t){return u[e.value]-u[t.value]}))}return this.multiple||i?l:l[0]}},{key:"getDisabledOptions",value:function(){var e=this.valueKey,t=this.labelKey,i=this.disabledOptions,o={},s=[];return i.forEach((function(e){o[e]=!0})),this.options.forEach((function(i){var n,r=i.value,a=i.label;o[r]&&s.push((v(n={},e,r),v(n,t,a),n))})),s}},{key:"getVisibleOptionGroupsMapping",value:function(e){var t=this.options,i={},o=this.isOptionVisible.bind(this);return(t=this.structureOptionGroup(t)).forEach((function(t){i[t.index]=t.options.some((function(t){return o({data:t,searchValue:e}).isVisible}))})),i}},{key:"getOptionsCount",value:function(e){var t;if(this.showAsPopup){var i=80*window.innerHeight/100-48;this.hasSearchContainer&&(i-=40),t=Math.floor(i/this.optionHeight)}else t=parseInt(e);return t}},{key:"getOptionsHeight",value:function(){return"".concat(this.optionsCount*this.optionHeight,"px")}},{key:"getSibling",value:function(e,t){var i="next"===t?"nextElementSibling":"previousElementSibling",o=e;do{o&&(o=o[i])}while(h.hasClass(o,"disabled")||h.hasClass(o,"group-title"));return o}},{key:"getUniqueId",value:function(){var e=s.getRandomInt(1e4);return document.querySelector("#vscomp-ele-wrapper-".concat(e))?this.getUniqueId():e}},{key:"initDropboxPopover",value:function(){var e={ele:this.$ele,target:this.$dropboxContainer,position:this.position,zIndex:this.zIndex,margin:4,transitionDistance:30,hideArrowIcon:!0,disableManualAction:!0,disableUpdatePosition:!this.hasDropboxWrapper,updatePositionThrottle:this.updatePositionThrottle,afterShow:this.afterShowPopper.bind(this),afterHide:this.afterHidePopper.bind(this)};this.dropboxPopover=new PopoverComponent(e)}},{key:"openDropbox",value:function(e){this.isSilentOpen=e,e?h.setStyle(this.$dropboxContainer,"display","inline-flex"):(h.dispatchEvent(this.$ele,"beforeOpen"),h.setAria(this.$wrapper,"expanded",!0)),this.setDropboxWrapperWidth(),h.removeClass(this.$allWrappers,"closed"),this.dropboxPopover&&!e?this.dropboxPopover.show():this.afterShowPopper()}},{key:"afterShowPopper",value:function(){var e=this.isSilentOpen;this.isSilentOpen=!1,e||(this.moveSelectedOptionsFirst(),this.setScrollTop(),h.addClass(this.$allWrappers,"focused"),this.showAsPopup?(h.addClass(this.$body,"vscomp-popup-active"),this.isPopupActive=!0):this.focusSearchInput(),h.dispatchEvent(this.$ele,"afterOpen"))}},{key:"closeDropbox",value:function(e){this.isSilentClose=e,this.keepAlwaysOpen?this.removeOptionFocus():(e?h.setStyle(this.$dropboxContainer,"display",""):(h.dispatchEvent(this.$ele,"beforeClose"),h.setAria(this.$wrapper,"expanded",!1),h.setAria(this.$wrapper,"activedescendant","")),this.dropboxPopover&&!e?this.dropboxPopover.hide():this.afterHidePopper())}},{key:"afterHidePopper",value:function(){var e=this.isSilentClose;this.isSilentClose=!1,h.removeClass(this.$allWrappers,"focused"),this.removeOptionFocus(),!e&&this.isPopupActive&&(h.removeClass(this.$body,"vscomp-popup-active"),this.isPopupActive=!1),h.addClass(this.$allWrappers,"closed"),e||h.dispatchEvent(this.$ele,"afterClose")}},{key:"moveSelectedOptionsFirst",value:function(){this.showSelectedOptionsFirst&&(this.setSortedOptions(),this.$optionsContainer.scrollTop&&this.selectedValues.length?this.scrollToTop():this.setVisibleOptions())}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"updatePosition",value:function(){this.dropboxPopover&&this.isOpened()&&this.$ele.updatePosition()}},{key:"isOpened",value:function(){return!h.hasClass(this.$wrapper,"closed")}},{key:"focusSearchInput",value:function(){var e=this.$searchInput;e&&e.focus()}},{key:"focusOption",value:function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=t.direction,o=t.$option,s=t.focusFirst,n=this.$dropboxContainer.querySelector(".vscomp-option.focused");if(o)e=o;else if(!n||s){var r=this.getFirstVisibleOptionIndex();e=this.$dropboxContainer.querySelector('.vscomp-option[data-visible-index="'.concat(r,'"]')),(h.hasClass(e,"disabled")||h.hasClass(e,"group-title"))&&(e=this.getSibling(e,"next"))}else e=this.getSibling(n,i);e&&e!==n&&(n&&this.toggleOptionFocusedState(n,!1),this.toggleOptionFocusedState(e,!0),this.toggleFocusedProp(h.getData(e,"index"),!0),this.moveFocusedOptionToView(e))}},{key:"moveFocusedOptionToView",value:function(e){var t=e||this.$dropboxContainer.querySelector(".vscomp-option.focused");if(t){var i,o=this.$optionsContainer.getBoundingClientRect(),s=t.getBoundingClientRect(),n=o.top,r=o.bottom,a=o.height,l=s.top,u=s.bottom,p=s.height,c=t.offsetTop,d=h.getData(this.$options,"top","number");n>l?i=c+d:r1&&void 0!==arguments[1]?arguments[1]:{},i=t.event;if(e){var o=!h.hasClass(e,"selected");if(o){if(this.multiple&&this.isMaxValuesSelected)return}else if(!this.multiple)return void this.closeDropbox();var n=this.selectedValues,r=h.getData(e,"value"),a=h.getData(e,"index","number"),l=h.hasClass(e,"current-new"),u=!1,p=this.lastSelectedOptionIndex;if(this.lastSelectedOptionIndex=null,this.toggleSelectedProp(a,o),o){if(this.multiple)n.push(r),this.toggleAllOptionsClass(),this.toggleGroupOptionsParent(e),i&&i.shiftKey&&(u=!0);else{n.length&&this.toggleSelectedProp(this.getOptionIndex(n[0]),!1),n=[r];var c=this.$dropboxContainer.querySelector(".vscomp-option.selected");c&&this.toggleOptionSelectedState(c,!1),this.closeDropbox(),l||this.setSearchValue("")}this.lastSelectedOptionIndex=a,this.toggleOptionSelectedState(e)}else this.multiple&&(this.toggleOptionSelectedState(e),s.removeItemFromArray(n,r),this.toggleAllOptionsClass(!1),this.toggleGroupOptionsParent(e,!1));l&&this.beforeSelectNewValue(),this.setValue(n),u&&this.selectRangeOptions(p,a)}}},{key:"selectFocusedOption",value:function(){this.selectOption(this.$dropboxContainer.querySelector(".vscomp-option.focused"))}},{key:"selectRangeOptions",value:function(e,t){var i=this;if("number"==typeof e&&!this.maxValues){var o,s,n=this.selectedValues,r=this.hasOptionGroup,a={};if(eo&&t1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(e,"isFocused",t),this.focusedOptionIndex=e}},{key:"toggleSelectedProp",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(e,"isSelected",t)}},{key:"scrollToTop",value:function(){var e=!this.isOpened();e&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),e&&this.closeDropbox(!0)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.options.forEach((function(e){e.isSelected=!1})),this.beforeValueSet(!0),this.setValue(null,{disableValidation:e}),this.afterValueSet(),e&&h.removeClass(this.$allWrappers,"has-error"),h.dispatchEvent(this.$ele,"reset")}},{key:"addOption",value:function(e,t){if(e){this.lastOptionIndex+=1;var i=this.getOptionObj(d(d({},e),{},{index:this.lastOptionIndex}));this.options.push(i),this.sortedOptions.push(i),t&&(this.visibleOptionsCount+=1,this.afterSetOptions())}}},{key:"removeOption",value:function(e){(e||0===e)&&(this.options.splice(e,1),this.lastOptionIndex-=1)}},{key:"removeNewOption",value:function(){var e=this.getNewOption();e&&this.removeOption(e.index)}},{key:"sortOptions",value:function(e){return e.sort((function(e,t){var i=e.isSelected||e.isAnySelected,o=t.isSelected||t.isAnySelected;return i||o?i&&(!o||e.indexe.length)&&(t=e.length);for(var i=0,o=new Array(t);ii-s-t.width?"left":"right",vertical:n>o-n-t.height?"top":"bottom"}}},{key:"getAbsoluteCoords",value:function(e){if(e){var t=e.getBoundingClientRect(),i=window.pageXOffset,o=window.pageYOffset;return{width:t.width,height:t.height,top:t.top+o,right:t.right+i,bottom:t.bottom+o,left:t.left+i}}}},{key:"getCoords",value:function(e){return e?e.getBoundingClientRect():{}}},{key:"getData",value:function(e,t,i){if(e){var o=e?e.dataset[t]:"";return"number"===i?o=parseFloat(o)||0:"true"===o?o=!0:"false"===o&&(o=!1),o}}},{key:"setData",value:function(e,t,i){e&&(e.dataset[t]=i)}},{key:"setStyle",value:function(e,t,i){e&&(e.style[t]=i)}},{key:"show",value:function(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"block";t.setStyle(e,"display",i)}},{key:"hide",value:function(e){t.setStyle(e,"display","none")}},{key:"getHideableParent",value:function(e){for(var t,i=e.parentElement;i;){var o=getComputedStyle(i).overflow;if(-1!==o.indexOf("scroll")||-1!==o.indexOf("auto")){t=i;break}i=i.parentElement}return t}}])&&function(e,t){for(var i=0;im?m-f:M:k+p>F&&("right"===C?n="left":k=F+fO?O-c:P:E+h>I&&("bottom"===C?n="top":E=I+cp-z&&(N=p-z):"left"!==C&&"right"!==C||((q=b/2+g-B)h-z&&(q=h-z)),i.setStyle(this.$arrowEle,"transform","translate3d(".concat(N,"px, ").concat(q,"px, 0) ").concat(K))}i.hide(this.$popperEle)}},{key:"resetPosition",value:function(){i.setStyle(this.$popperEle,"transform","none"),this.setPosition()}},{key:"show",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.resetPosition,s=t.data;clearTimeout(this.exitDelayTimeout),clearTimeout(this.hideDurationTimeout),o&&this.resetPosition(),this.enterDelayTimeout=setTimeout((function(){var t=i.getData(e.$popperEle,"left"),o=i.getData(e.$popperEle,"top"),n="translate3d(".concat(t,"px, ").concat(o,"px, 0)"),r=e.showDuration;i.show(e.$popperEle,"inline-flex"),i.getCoords(e.$popperEle),i.setStyle(e.$popperEle,"transitionDuration",r+"ms"),i.setStyle(e.$popperEle,"transform",n),i.setStyle(e.$popperEle,"opacity",1),e.showDurationTimeout=setTimeout((function(){"function"==typeof e.afterShowCallback&&e.afterShowCallback(s)}),r)}),this.enterDelay)}},{key:"hide",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.data;clearTimeout(this.enterDelayTimeout),clearTimeout(this.showDurationTimeout),this.exitDelayTimeout=setTimeout((function(){if(e.$popperEle){var t=i.getData(e.$popperEle,"fromLeft"),s=i.getData(e.$popperEle,"fromTop"),n="translate3d(".concat(t,"px, ").concat(s,"px, 0)"),r=e.hideDuration;i.setStyle(e.$popperEle,"transitionDuration",r+"ms"),i.setStyle(e.$popperEle,"transform",n),i.setStyle(e.$popperEle,"opacity",0),e.hideDurationTimeout=setTimeout((function(){i.hide(e.$popperEle),"function"==typeof e.afterHideCallback&&e.afterHideCallback(o)}),r)}}),this.exitDelay)}},{key:"updatePosition",value:function(){i.setStyle(this.$popperEle,"transitionDuration","0ms"),this.resetPosition();var e=i.getData(this.$popperEle,"left"),t=i.getData(this.$popperEle,"top");i.show(this.$popperEle,"inline-flex"),i.setStyle(this.$popperEle,"transform","translate3d(".concat(e,"px, ").concat(t,"px, 0)"))}}])&&function(e,t){for(var i=0;i1&&void 0!==arguments[1]&&arguments[1];return!0===e||"true"===e||!1!==e&&"false"!==e&&t}},{key:"removeArrayEmpty",value:function(e){return Array.isArray(e)&&e.length?e.filter((function(e){return!!e})):[]}},{key:"throttle",value:function(e,t){var i,o=0;return function(){for(var s=arguments.length,n=new Array(s),r=0;re.length)&&(t=e.length);for(var i=0,o=new Array(t);i'),e=this.$popover.querySelector(".pop-comp-arrow")),this.$arrowEle=e}}},{key:"destroy",value:function(){this.removeEvents()}}])&&r(i.prototype,o),s&&r(i,s),Object.defineProperty(i,"prototype",{writable:!1}),e}();a=p.getAttrProps(),window.PopoverComponent=p}(); \ No newline at end of file + */!function(){"use strict";function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,i){if(e){if("string"==typeof e)return t(e,i);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,i):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);i1&&void 0!==arguments[1]&&arguments[1];return!0===e||"true"===e||!1!==e&&"false"!==e&&t}},{key:"isEmpty",value:function(e){var t=!1;return e?Array.isArray(e)?0===e.length&&(t=!0):"object"===i(e)&&0===Object.keys(e).length&&(t=!0):t=!0,t}},{key:"isNotEmpty",value:function(e){return!this.isEmpty(e)}},{key:"removeItemFromArray",value:function(t,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(!Array.isArray(t)||!t.length)return t;var s=o?e(t):t,n=s.indexOf(i);return-1!==n&&s.splice(n,1),s}},{key:"removeArrayEmpty",value:function(e){return Array.isArray(e)&&e.length?e.filter((function(e){return!!e})):[]}},{key:"getRandomInt",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=Math.ceil(t),o=Math.floor(e);return Math.floor(Math.random()*(o-i-1))+i}},{key:"regexEscape",value:function(e){return e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")}}],(n=null)&&o(s.prototype,n),r&&o(s,r),Object.defineProperty(s,"prototype",{writable:!1}),t}();function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=i){var o,s,n=[],r=!0,a=!1;try{for(i=i.call(e);!(r=(o=i.next()).done)&&(n.push(o.value),!t||n.length!==t);r=!0);}catch(e){a=!0,s=e}finally{try{r||null==i.return||i.return()}finally{if(a)throw s}}return n}}(e,t)||a(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||a(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){if(e){if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?l(e,t):void 0}}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,o=new Array(t);ie.offsetWidth}},{key:"getData",value:function(e,t,i){if(e){var o=e?e.dataset[t]:"";return"number"===i?o=parseFloat(o)||0:"true"===o?o=!0:"false"===o&&(o=!1),o}}},{key:"setData",value:function(e,t,i){e&&(e.dataset[t]=i)}},{key:"setAttr",value:function(e,t,i){e&&e.setAttribute(t,i)}},{key:"setAttrFromEle",value:function(e,t,i,o){var s={};i.forEach((function(t){s[t]=e.getAttribute(t)})),i.forEach((function(e){var i=s[e];(i||-1!==o.indexOf(e)&&""===i)&&t.setAttribute(e,i)}))}},{key:"setStyle",value:function(e,t,i){e&&(e.style[t]=i)}},{key:"setStyles",value:function(e,t){e&&t&&Object.keys(t).forEach((function(i){e.style[i]=t[i]}))}},{key:"setAria",value:function(e,t,i){var o=t;"role"!==o&&(o="aria-".concat(o)),e.setAttribute(o,i)}},{key:"getElements",value:function(e){return e?void 0===e.forEach?[e]:e:[]}},{key:"addEvent",value:function(t,i,o){t&&s.removeArrayEmpty(i.split(" ")).forEach((function(i){e.getElements(t).forEach((function(e){e.addEventListener(i,o)}))}))}},{key:"dispatchEvent",value:function(t,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t){var s=e.getElements(t);setTimeout((function(){s.forEach((function(e){e.dispatchEvent(new CustomEvent(i,{bubbles:o}))}))}),0)}}},{key:"getAttributesText",value:function(e){var t="";return e?(Object.entries(e).forEach((function(e){var i=n(e,2),o=i[0],s=i[1];void 0!==s&&(t+=" ".concat(o,'="').concat(s,'" '))})),t):t}},{key:"convertPropToDataAttr",value:function(e){return e?"data-".concat(e).replace(/([A-Z])/g,"-$1").toLowerCase():""}},{key:"changeTabIndex",value:function(t,i){t?e.getElements(t).forEach((function(e){e.tabIndex=i})):console.log(t,"Invalid element provided.")}}],(i=null)&&u(t.prototype,i),o&&u(t,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();function h(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,o)}return i}function c(e){for(var t=1;te.length)&&(t=e.length);for(var i=0,o=new Array(t);i\n \n\n
\n
\n ").concat(this.placeholder,'\n
\n\n
\n\n
\n \n
\n
\n\n ').concat(this.renderDropbox({wrapperClasses:t}),"\n
");this.$ele.innerHTML=l,this.$body=document.querySelector("body"),this.$wrapper=this.$ele.querySelector(".vscomp-wrapper"),this.hasDropboxWrapper?(this.$allWrappers=[this.$wrapper,this.$dropboxWrapper],this.$dropboxContainer=this.$dropboxWrapper.querySelector(".vscomp-dropbox-container"),p.addClass(this.$dropboxContainer,"pop-comp-wrapper")):(this.$allWrappers=[this.$wrapper],this.$dropboxContainer=this.$wrapper.querySelector(".vscomp-dropbox-container")),this.$toggleButton=this.$ele.querySelector(".vscomp-toggle-button"),this.$clearButton=this.$ele.querySelector(".vscomp-clear-button"),this.$valueText=this.$ele.querySelector(".vscomp-value"),this.$hiddenInput=this.$ele.querySelector(".vscomp-hidden-input"),this.$dropbox=this.$dropboxContainer.querySelector(".vscomp-dropbox"),this.$dropboxCloseButton=this.$dropboxContainer.querySelector(".vscomp-dropbox-close-button"),this.$search=this.$dropboxContainer.querySelector(".vscomp-search-wrapper"),this.$optionsContainer=this.$dropboxContainer.querySelector(".vscomp-options-container"),this.$optionsList=this.$dropboxContainer.querySelector(".vscomp-options-list"),this.$options=this.$dropboxContainer.querySelector(".vscomp-options"),this.$noOptions=this.$dropboxContainer.querySelector(".vscomp-no-options"),this.$noSearchResults=this.$dropboxContainer.querySelector(".vscomp-no-search-results"),this.afterRenderWrapper()}}},{key:"renderDropbox",value:function(e){var t=e.wrapperClasses,i="self"!==this.dropboxWrapper?document.querySelector(this.dropboxWrapper):null,o='
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
').concat(this.noOptionsText,'
\n
').concat(this.noSearchResultsText,'
\n\n \n
\n
');if(i){var s=document.createElement("div");return this.$dropboxWrapper=s,this.hasDropboxWrapper=!0,s.innerHTML=o,i.appendChild(s),p.addClass(s,"vscomp-dropbox-wrapper ".concat(t)),""}return this.hasDropboxWrapper=!1,o}},{key:"renderOptions",value:function(){var e,t=this,i="",o=this.getVisibleOptions(),n="",r="",a=!(!this.markSearchResults||!this.searchValue),l=this.labelRenderer,u=this.disableOptionGroupCheckbox,p=this.uniqueId,h=this.searchGroup,c="function"==typeof l,d=s.convertToBoolean;if(a&&(e=new RegExp("(".concat(s.regexEscape(this.searchValue),")"),"gi")),this.multiple&&(n=''),this.allowNewOption){var v=this.getTooltipAttrText("New Option");r='")}o.forEach((function(o){var s,v=o.index,f="vscomp-option",y=t.getTooltipAttrText("",!0,!0),b=n,g="",m="",O="",S=d(o.isSelected),x="";o.classNames&&(f+=" ".concat(o.classNames)),o.isFocused&&(f+=" focused"),o.isDisabled&&(f+=" disabled",x='aria-disabled="true"'),o.isGroupTitle&&(f+=" group-title",u&&(b="")),S&&(f+=" selected"),o.isGroupOption&&(f+=" group-option",O='data-group-index="'.concat(o.groupIndex,'"')),s=c?l(o):o.label,o.description&&(m='
").concat(o.description,"
")),o.isCurrentNew?(f+=" current-new",g+=r):!a||o.isGroupTitle&&!h||(s=s.replace(e,"$1")),i+='
\n ").concat(b,'\n \n ").concat(s,"\n \n ").concat(m,"\n ").concat(g,"\n
")})),this.$options.innerHTML=i,this.$visibleOptions=this.$options.querySelectorAll(".vscomp-option"),this.afterRenderOptions()}},{key:"renderSearch",value:function(){if(this.hasSearchContainer){var e="",t="";this.multiple&&!this.disableSelectAll&&(e='\n \n '.concat(this.selectAllText,"\n ")),this.hasSearch&&(t='\n \n ×'));var i='
\n '.concat(e,"\n ").concat(t,"\n
");this.$search.innerHTML=i,this.$searchInput=this.$dropboxContainer.querySelector(".vscomp-search-input"),this.$searchClear=this.$dropboxContainer.querySelector(".vscomp-search-clear"),this.$toggleAllButton=this.$dropboxContainer.querySelector(".vscomp-toggle-all-button"),this.$toggleAllCheckbox=this.$dropboxContainer.querySelector(".vscomp-toggle-all-checkbox"),this.addEvent(this.$searchInput,"input","onSearch"),this.addEvent(this.$searchClear,"click","onSearchClear"),this.addEvent(this.$toggleAllButton,"click","onToggleAllOptions")}}},{key:"addEvents",value:function(){this.addEvent(document,"click","onDocumentClick"),this.addEvent(this.$allWrappers,"keydown","onKeyDown"),this.addEvent(this.$toggleButton,"click","onToggleButtonClick"),this.addEvent(this.$clearButton,"click","onClearButtonClick"),this.addEvent(this.$dropboxContainer,"click","onDropboxContainerClick"),this.addEvent(this.$dropboxCloseButton,"click","onDropboxCloseButtonClick"),this.addEvent(this.$optionsContainer,"scroll","onOptionsScroll"),this.addEvent(this.$options,"click","onOptionsClick"),this.addEvent(this.$options,"mouseover","onOptionsMouseOver"),this.addEvent(this.$options,"touchmove","onOptionsTouchMove"),this.addMutationObserver()}},{key:"addEvent",value:function(e,t,i){var o=this;e&&s.removeArrayEmpty(t.split(" ")).forEach((function(t){var s="".concat(i,"-").concat(t),n=o.events[s];n||(n=o[i].bind(o),o.events[s]=n),p.addEvent(e,t,n)}))}},{key:"onDocumentClick",value:function(e){var t=e.target.closest(".vscomp-wrapper");t!==this.$wrapper&&t!==this.$dropboxWrapper&&this.isOpened()&&this.closeDropbox()}},{key:"onKeyDown",value:function(e){var t=e.which||e.keyCode,i=S[t];i&&this[i](e)}},{key:"onEnterPress",value:function(e){e.preventDefault(),this.isOpened()?this.selectFocusedOption():this.openDropbox()}},{key:"onDownArrowPress",value:function(e){e.preventDefault(),this.isOpened()?this.focusOption({direction:"next"}):this.openDropbox()}},{key:"onUpArrowPress",value:function(e){e.preventDefault(),this.isOpened()?this.focusOption({direction:"previous"}):this.openDropbox()}},{key:"onToggleButtonClick",value:function(e){var t=e.target;t.closest(".vscomp-value-tag-clear-button")?this.removeValue(t.closest(".vscomp-value-tag")):t.closest(".toggle-button-child")||this.toggleDropbox()}},{key:"onClearButtonClick",value:function(){this.reset()}},{key:"onOptionsScroll",value:function(){this.setVisibleOptions()}},{key:"onOptionsClick",value:function(e){var t=e.target.closest(".vscomp-option");t&&!p.hasClass(t,"disabled")&&(p.hasClass(t,"group-title")?this.onGroupTitleClick(t):this.selectOption(t,{event:e}))}},{key:"onGroupTitleClick",value:function(e){if(e&&this.multiple&&!this.disableOptionGroupCheckbox){var t=!p.hasClass(e,"selected");this.toggleGroupTitleCheckbox(e,t),this.toggleGroupOptions(e,t)}}},{key:"onDropboxContainerClick",value:function(e){e.target.closest(".vscomp-dropbox")||this.closeDropbox()}},{key:"onDropboxCloseButtonClick",value:function(){this.closeDropbox()}},{key:"onOptionsMouseOver",value:function(e){var t=e.target.closest(".vscomp-option");t&&this.isOpened()&&(p.hasClass(t,"disabled")||p.hasClass(t,"group-title")?this.removeOptionFocus():this.focusOption({$option:t}))}},{key:"onOptionsTouchMove",value:function(){this.removeOptionFocus()}},{key:"onSearch",value:function(e){e.stopPropagation(),this.setSearchValue(e.target.value,!0)}},{key:"onSearchClear",value:function(){this.setSearchValue(""),this.focusSearchInput()}},{key:"onToggleAllOptions",value:function(){this.toggleAllOptions()}},{key:"onResize",value:function(){this.setOptionsContainerHeight(!0)}},{key:"addMutationObserver",value:function(){var e=this;if(this.hasDropboxWrapper){var t=this.$ele;this.mutationObserver=new MutationObserver((function(i){var o=!1,s=!1;i.forEach((function(e){o||(o=y(e.addedNodes).some((function(e){return!(e!==t&&!e.contains(t))}))),s||(s=y(e.removedNodes).some((function(e){return!(e!==t&&!e.contains(t))})))})),s&&!o&&e.destroy()})),this.mutationObserver.observe(document.querySelector("body"),{childList:!0,subtree:!0})}}},{key:"beforeValueSet",value:function(e){this.toggleAllOptionsClass(!e&&void 0)}},{key:"beforeSelectNewValue",value:function(){var e=this,t=this.getNewOption(),i=t.index;this.newValues.push(t.value),this.setOptionProp(i,"isCurrentNew",!1),this.setOptionProp(i,"isNew",!0),setTimeout((function(){e.setSearchValue(""),e.focusSearchInput()}),0)}},{key:"afterRenderWrapper",value:function(){p.addClass(this.$ele,"vscomp-ele"),this.renderSearch(),this.setEleStyles(),this.setDropboxStyles(),this.setOptionsHeight(),this.setVisibleOptions(),this.setOptionsContainerHeight(),this.addEvents(),this.setEleProps(),this.keepAlwaysOpen||this.showAsPopup||this.initDropboxPopover(),this.initialSelectedValue?this.setValueMethod(this.initialSelectedValue,this.silentInitialValueSet):this.autoSelectFirstOption&&this.visibleOptions.length&&this.setValueMethod(this.visibleOptions[0].value,this.silentInitialValueSet),this.showOptionsOnlyOnSearch&&this.setSearchValue("",!1,!0),this.initialDisabled&&this.disable(),this.autofocus&&this.focus()}},{key:"afterRenderOptions",value:function(){var e=this.getVisibleOptions(),t=!this.options.length&&!this.hasServerSearch,i=!t&&!e.length;(!this.allowNewOption||this.hasServerSearch||this.showOptionsOnlyOnSearch)&&p.toggleClass(this.$allWrappers,"has-no-search-results",i),p.toggleClass(this.$allWrappers,"has-no-options",t),this.setOptionAttr(),this.setOptionsPosition(),this.setOptionsTooltip()}},{key:"afterSetOptionsContainerHeight",value:function(e){e&&this.showAsPopup&&this.setVisibleOptions()}},{key:"afterSetSearchValue",value:function(){var e=this;this.hasServerSearch?(clearInterval(this.serverSearchTimeout),this.serverSearchTimeout=setTimeout((function(){e.serverSearch()}),this.searchDelay)):this.setVisibleOptionsCount(),this.selectAllOnlyVisible&&this.toggleAllOptionsClass(),this.focusOption({focusFirst:!0})}},{key:"afterSetVisibleOptionsCount",value:function(){this.scrollToTop(),this.setOptionsHeight(),this.setVisibleOptions(),this.updatePosition()}},{key:"afterValueSet",value:function(){this.scrollToTop(),this.setSearchValue(""),this.renderOptions()}},{key:"afterSetOptions",value:function(e){e&&this.setSelectedProp(),this.setOptionsHeight(),this.setVisibleOptions(),this.showOptionsOnlyOnSearch&&this.setSearchValue("",!1,!0),e||this.reset()}},{key:"setProps",value:function(e){var t=this.setDefaultProps(e);this.setPropsFromElementAttr(t);var i=s.convertToBoolean;this.$ele=t.ele,this.dropboxWrapper=t.dropboxWrapper,this.valueKey=t.valueKey,this.labelKey=t.labelKey,this.descriptionKey=t.descriptionKey,this.aliasKey=t.aliasKey,this.optionHeightText=t.optionHeight,this.optionHeight=parseFloat(this.optionHeightText),this.multiple=i(t.multiple),this.hasSearch=i(t.search),this.searchByStartsWith=i(t.searchByStartsWith),this.searchGroup=i(t.searchGroup),this.hideClearButton=i(t.hideClearButton),this.autoSelectFirstOption=i(t.autoSelectFirstOption),this.hasOptionDescription=i(t.hasOptionDescription),this.silentInitialValueSet=i(t.silentInitialValueSet),this.allowNewOption=i(t.allowNewOption),this.markSearchResults=i(t.markSearchResults),this.showSelectedOptionsFirst=i(t.showSelectedOptionsFirst),this.disableSelectAll=i(t.disableSelectAll),this.keepAlwaysOpen=i(t.keepAlwaysOpen),this.showDropboxAsPopup=i(t.showDropboxAsPopup),this.hideValueTooltipOnSelectAll=i(t.hideValueTooltipOnSelectAll),this.showOptionsOnlyOnSearch=i(t.showOptionsOnlyOnSearch),this.selectAllOnlyVisible=i(t.selectAllOnlyVisible),this.alwaysShowSelectedOptionsCount=i(t.alwaysShowSelectedOptionsCount),this.alwaysShowSelectedOptionsLabel=i(t.alwaysShowSelectedOptionsLabel),this.disableAllOptionsSelectedText=i(t.disableAllOptionsSelectedText),this.showValueAsTags=i(t.showValueAsTags),this.disableOptionGroupCheckbox=i(t.disableOptionGroupCheckbox),this.enableSecureText=i(t.enableSecureText),this.setValueAsArray=i(t.setValueAsArray),this.disableValidation=i(t.disableValidation),this.initialDisabled=i(t.disabled),this.required=i(t.required),this.autofocus=i(t.autofocus),this.useGroupValue=i(t.useGroupValue),this.focusSelectedOptionOnOpen=i(t.focusSelectedOptionOnOpen),this.noOptionsText=t.noOptionsText,this.noSearchResultsText=t.noSearchResultsText,this.selectAllText=t.selectAllText,this.searchPlaceholderText=t.searchPlaceholderText,this.searchFormLabel=t.searchFormLabel,this.optionsSelectedText=t.optionsSelectedText,this.optionSelectedText=t.optionSelectedText,this.allOptionsSelectedText=t.allOptionsSelectedText,this.clearButtonText=t.clearButtonText,this.moreText=t.moreText,this.placeholder=t.placeholder,this.position=t.position,this.textDirection=t.textDirection,this.dropboxWidth=t.dropboxWidth,this.tooltipFontSize=t.tooltipFontSize,this.tooltipAlignment=t.tooltipAlignment,this.tooltipMaxWidth=t.tooltipMaxWidth,this.updatePositionThrottle=t.updatePositionThrottle,this.noOfDisplayValues=parseInt(t.noOfDisplayValues),this.zIndex=parseInt(t.zIndex),this.maxValues=parseInt(t.maxValues),this.minValues=parseInt(t.minValues),this.name=this.secureText(t.name),this.additionalClasses=t.additionalClasses,this.popupDropboxBreakpoint=t.popupDropboxBreakpoint,this.popupPosition=t.popupPosition,this.onServerSearch=t.onServerSearch,this.labelRenderer=t.labelRenderer,this.initialSelectedValue=0===t.selectedValue?"0":t.selectedValue,this.emptyValue=t.emptyValue,this.ariaLabelledby=t.ariaLabelledby,this.ariaLabelText=t.ariaLabelText,this.maxWidth=t.maxWidth,this.searchDelay=t.searchDelay,this.selectedValues=[],this.selectedOptions=[],this.newValues=[],this.events={},this.tooltipEnterDelay=200,this.searchValue="",this.searchValueOriginal="",this.isAllSelected=!1,(void 0===t.search&&this.multiple||this.allowNewOption||this.showOptionsOnlyOnSearch)&&(this.hasSearch=!0),this.hasServerSearch="function"==typeof this.onServerSearch,(this.maxValues||this.hasServerSearch||this.showOptionsOnlyOnSearch)&&(this.disableSelectAll=!0,this.disableOptionGroupCheckbox=!0),this.keepAlwaysOpen&&(this.dropboxWrapper="self"),this.showAsPopup=this.showDropboxAsPopup&&!this.keepAlwaysOpen&&window.innerWidth<=parseFloat(this.popupDropboxBreakpoint),this.hasSearchContainer=this.hasSearch||this.multiple&&!this.disableSelectAll,this.optionsCount=this.getOptionsCount(t.optionsCount),this.halfOptionsCount=Math.ceil(this.optionsCount/2),this.optionsHeight=this.getOptionsHeight(),this.uniqueId=this.getUniqueId()}},{key:"setDefaultProps",value:function(e){var t={dropboxWrapper:"self",valueKey:"value",labelKey:"label",descriptionKey:"description",aliasKey:"alias",ariaLabelText:"Options list",optionsCount:5,noOfDisplayValues:50,optionHeight:"40px",noOptionsText:"No options found",noSearchResultsText:"No results found",selectAllText:"Select All",searchPlaceholderText:"Search...",searchFormLabel:"Search",clearButtonText:"Clear",moreText:"more...",optionsSelectedText:"options selected",optionSelectedText:"option selected",allOptionsSelectedText:"All",placeholder:"Select",position:"bottom left",zIndex:e.keepAlwaysOpen?1:2,tooltipFontSize:"14px",tooltipAlignment:"center",tooltipMaxWidth:"300px",updatePositionThrottle:100,name:"",additionalClasses:"",maxValues:0,showDropboxAsPopup:!0,popupDropboxBreakpoint:"576px",popupPosition:"center",hideValueTooltipOnSelectAll:!0,emptyValue:"",searchDelay:300,focusSelectedOptionOnOpen:!0};return e.hasOptionDescription&&(t.optionsCount=4,t.optionHeight="50px"),Object.assign(t,e)}},{key:"setPropsFromElementAttr",value:function(e){var t=e.ele;Object.keys(O).forEach((function(i){var o=t.getAttribute(i);-1===x.indexOf(i)||""!==o&&"true"!==o||(o=!0),o&&(e[O[i]]=o)}))}},{key:"setEleProps",value:function(){var t=this.$ele;t.virtualSelect=this,t.value=this.multiple?[]:"",t.name=this.name,t.disabled=!1,t.required=this.required,t.autofocus=this.autofocus,t.multiple=this.multiple,t.form=t.closest("form"),t.reset=e.reset,t.setValue=e.setValueMethod,t.setOptions=e.setOptionsMethod,t.setDisabledOptions=e.setDisabledOptionsMethod,t.setEnabledOptions=e.setEnabledOptionsMethod,t.toggleSelectAll=e.toggleSelectAll,t.isAllSelected=e.isAllSelected,t.addOption=e.addOptionMethod,t.getNewValue=e.getNewValueMethod,t.getDisplayValue=e.getDisplayValueMethod,t.getSelectedOptions=e.getSelectedOptionsMethod,t.getDisabledOptions=e.getDisabledOptionsMethod,t.open=e.openMethod,t.close=e.closeMethod,t.focus=e.focusMethod,t.enable=e.enableMethod,t.disable=e.disableMethod,t.destroy=e.destroyMethod,t.validate=e.validateMethod,t.toggleRequired=e.toggleRequiredMethod,this.hasDropboxWrapper&&(this.$dropboxWrapper.virtualSelect=this)}},{key:"setValueMethod",value:function(e,t){var i={},o={},s=[],n=this.multiple,r=e;if(r){if(Array.isArray(r)||(r=[r]),n){var a=this.maxValues;a&&r.length>a&&r.splice(a)}else r.length>1&&(r=[r[0]]);r=r.map((function(e){return e||0===e?e.toString():""})),this.useGroupValue&&(r=this.setGroupOptionsValue(r)),r.forEach((function(e,t){i[e]=!0,o[e]=t})),this.allowNewOption&&r&&this.setNewOptionsFromValue(r)}if(this.options.forEach((function(e){!0!==i[e.value]||e.isDisabled||e.isGroupTitle?e.isSelected=!1:(e.isSelected=!0,s.push(e.value))})),n)this.hasOptionGroup&&this.setGroupsSelectedProp(),s.sort((function(e,t){return o[e]-o[t]}));else{var l=f(s,1);s=l[0]}this.beforeValueSet(),this.setValue(s,{disableEvent:t}),this.afterValueSet()}},{key:"setGroupOptionsValue",value:function(e){var t=[],i={},o={};return e.forEach((function(e){o[e]=!0})),this.options.forEach((function(e){var s=e.value,n=!0===o[s];e.isGroupTitle?n&&(i[e.index]=!0):(n||i[e.groupIndex])&&t.push(s)})),t}},{key:"setGroupsSelectedProp",value:function(){var e=this.isAllGroupOptionsSelected.bind(this);this.options.forEach((function(t){t.isGroupTitle&&(t.isSelected=e(t.index))}))}},{key:"setOptionsMethod",value:function(e,t){this.setOptions(e),this.afterSetOptions(t)}},{key:"setDisabledOptionsMethod",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setDisabledOptions(e,!0),t||(this.setValueMethod(null),this.toggleAllOptionsClass()),this.setVisibleOptions()}},{key:"setDisabledOptions",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=[];if(e)if(!0===e)t&&this.options.forEach((function(e){return e.isDisabled=!0,i.push(e.value),e}));else{i=e.map((function(e){return e.toString()}));var o={};i.forEach((function(e){o[e]=!0})),t&&this.options.forEach((function(e){return e.isDisabled=!0===o[e.value],e}))}else t&&this.options.forEach((function(e){return e.isDisabled=!1,e}));this.disabledOptions=i}},{key:"setEnabledOptionsMethod",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setEnabledOptions(e),t||(this.setValueMethod(null),this.toggleAllOptionsClass()),this.setVisibleOptions()}},{key:"setEnabledOptions",value:function(e){if(void 0!==e){var t=[];if(!0===e)this.options.forEach((function(e){return e.isDisabled=!1,e}));else{var i={};e.forEach((function(e){i[e]=!0})),this.options.forEach((function(e){var o=!0!==i[e.value];return e.isDisabled=o,o&&t.push(e.value),e}))}this.disabledOptions=t}}},{key:"setOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=[],i=this.disabledOptions.length,o=this.valueKey,n=this.labelKey,r=this.descriptionKey,a=this.aliasKey,l=this.hasOptionDescription,u=s.getString,p=s.convertToBoolean,h=this.secureText.bind(this),c=this.getAlias.bind(this),f=0,y=!1,b={},g=!1;this.disabledOptions.forEach((function(e){b[e]=!0}));var m=function e(s){var m;"object"!==v(s)&&(d(m={},o,s),d(m,n,s),s=m);var O=h(u(s[o])),S=s.options,x=!!S,w={index:f,value:O,label:h(u(s[n])),alias:c(s[a]),isVisible:p(s.isVisible,!0),isNew:s.isNew||!1,isGroupTitle:x,classNames:s.classNames};if(g||""!==O||(g=!0),i&&(w.isDisabled=!0===b[O]),s.isGroupOption&&(w.isGroupOption=!0,w.groupIndex=s.groupIndex),l&&(w.description=h(u(s[r]))),s.customData&&(w.customData=s.customData),t.push(w),f+=1,x){var k=w.index;y=!0,S.forEach((function(t){t.isGroupOption=!0,t.groupIndex=k,e(t)}))}};Array.isArray(e)&&e.forEach(m);var O=t.length,S=this.$ele;S.options=t,S.length=O,this.options=t,this.visibleOptionsCount=O,this.lastOptionIndex=O-1,this.newValues=[],this.hasOptionGroup=y,this.hasEmptyValueOption=g,this.setSortedOptions()}},{key:"setServerOptions",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.setOptionsMethod(t,!0);var i=this.selectedOptions,o=this.options,s=!1;if(i.length){var n={};s=!0,o.forEach((function(e){n[e.value]=!0})),i.forEach((function(e){!0!==n[e.value]&&(e.isVisible=!1,o.push(e))})),this.setOptionsMethod(o,!0)}if(this.allowNewOption&&this.searchValue){var r=o.some((function(t){return t.label.toLowerCase()===e.searchValue}));r||(s=!0,this.setNewOption())}s?(this.setVisibleOptionsCount(),this.multiple&&this.toggleAllOptionsClass(),this.setValueText()):this.updatePosition(),p.removeClass(this.$allWrappers,"server-searching")}},{key:"setSelectedOptions",value:function(){this.selectedOptions=this.options.filter((function(e){return e.isSelected}))}},{key:"setSortedOptions",value:function(){var e=y(this.options);this.showSelectedOptionsFirst&&this.selectedValues.length&&(e=this.hasOptionGroup?this.sortOptionsGroup(e):this.sortOptions(e)),this.sortedOptions=e}},{key:"setVisibleOptions",value:function(){var e=y(this.sortedOptions),t=2*this.optionsCount,i=this.getVisibleStartIndex(),o=this.getNewOption(),s=i+t-1,n=0;o&&(o.visibleIndex=n,n+=1),e=e.filter((function(e){var t=!1;return e.isVisible&&!e.isCurrentNew&&(t=n>=i&&n<=s,e.visibleIndex=n,n+=1),t})),o&&(e=[o].concat(y(e))),this.visibleOptions=e,this.renderOptions()}},{key:"setOptionsPosition",value:function(e){var t=(e||this.getVisibleStartIndex())*this.optionHeight;this.$options.style.transform="translate3d(0, ".concat(t,"px, 0)"),p.setData(this.$options,"top",t)}},{key:"setOptionsTooltip",value:function(){var e=this,t=this.getVisibleOptions(),i=this.hasOptionDescription;t.forEach((function(t){var o=e.$dropboxContainer.querySelector('.vscomp-option[data-index="'.concat(t.index,'"]'));p.setData(o.querySelector(".vscomp-option-text"),"tooltip",t.label),i&&p.setData(o.querySelector(".vscomp-option-description"),"tooltip",t.description)}))}},{key:"setValue",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.disableEvent,o=void 0!==i&&i,n=t.disableValidation,r=void 0!==n&&n,a=this.hasEmptyValueOption&&""===e||e;a?Array.isArray(e)?this.selectedValues=y(e):this.selectedValues=[e]:this.selectedValues=[];var l=this.getValue();this.$ele.value=l,this.$hiddenInput.value=this.getInputValue(l),this.isMaxValuesSelected=!!(this.maxValues&&this.maxValues<=this.selectedValues.length),this.toggleAllOptionsClass(),this.setValueText(),p.toggleClass(this.$allWrappers,"has-value",s.isNotEmpty(this.selectedValues)),p.toggleClass(this.$allWrappers,"max-value-selected",this.isMaxValuesSelected),r||this.validate(),o||p.dispatchEvent(this.$ele,"change",!0)}},{key:"setValueText",value:function(){var e=this.multiple,t=this.selectedValues,i=this.noOfDisplayValues,o=this.showValueAsTags,s=this.$valueText,n=[],r=[],a=t.length,l=0,u=this.isAllSelected&&!this.hasServerSearch&&!this.disableAllOptionsSelectedText&&!o;if(u&&this.hideValueTooltipOnSelectAll)s.innerHTML="".concat(this.allOptionsSelectedText," (").concat(a,")");else{this.getSelectedOptions({fullDetails:!0,keepSelectionOrder:!0}).some((function(e){if(e.isCurrentNew)return!1;if(l>=i)return!0;var t=e.label;if(n.push(t),l+=1,o){var s='\n ').concat(t,'\n \n \n \n ');r.push(s)}else r.push(t);return!1}));var h=a-i;h>0&&r.push('+ '.concat(h," ").concat(this.moreText,""));var c=n.join(", ");if(""===c)s.innerHTML=this.placeholder;else if(s.innerHTML=c,e){var d=this.maxValues;if(this.alwaysShowSelectedOptionsCount||p.hasEllipsis(s)||d||o){var v=''.concat(a,"");if(d&&(v+=' / '.concat(d,"")),u)s.innerHTML="".concat(this.allOptionsSelectedText," (").concat(a,")");else if(o)s.innerHTML=r.join(""),this.$valueTags=s.querySelectorAll(".vscomp-value-tag"),this.setValueTagAttr();else if(!this.alwaysShowSelectedOptionsLabel){var f=1===a?this.optionSelectedText:this.optionsSelectedText;s.innerHTML="".concat(v," ").concat(f)}}else r=[]}}var y="";0===a?y=this.placeholder:o||(y=r.join(", ")),p.setData(s,"tooltip",y),e&&(p.setData(s,"tooltipEllipsisOnly",0===a),o&&this.updatePosition())}},{key:"setSearchValue",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e!==this.searchValueOriginal||i){t||(this.$searchInput.value=e);var o=e.replace(/\\/g,"").toLowerCase().trim();this.searchValue=o,this.searchValueOriginal=e,p.toggleClass(this.$allWrappers,"has-search-value",e),this.afterSetSearchValue()}}},{key:"setVisibleOptionsCount",value:function(){var e,t=0,i=!1,o=this.searchValue,s=this.searchGroup,n=this.showOptionsOnlyOnSearch,r=this.searchByStartsWith,a=this.isOptionVisible.bind(this);this.hasOptionGroup&&(e=this.getVisibleOptionGroupsMapping(o)),this.options.forEach((function(l){var u;l.isCurrentNew||(n&&!o?(l.isVisible=!1,u={isVisible:!1,hasExactOption:!1}):u=a({data:l,searchValue:o,hasExactOption:i,visibleOptionGroupsMapping:e,searchGroup:s,searchByStartsWith:r}),u.isVisible&&(t+=1),i||(i=u.hasExactOption))})),this.allowNewOption&&(o&&!i?(this.setNewOption(),t+=1):this.removeNewOption()),this.visibleOptionsCount=t,this.afterSetVisibleOptionsCount()}},{key:"setOptionProp",value:function(e,t,i){this.options[e]&&(this.options[e][t]=i)}},{key:"setOptionsHeight",value:function(){this.$optionsList.style.height="".concat(this.optionHeight*this.visibleOptionsCount,"px")}},{key:"setOptionsContainerHeight",value:function(e){var t;e?this.showAsPopup&&(this.optionsCount=this.getOptionsCount(),this.halfOptionsCount=Math.ceil(this.optionsCount/2),t=this.getOptionsHeight(),this.optionsHeight=t):(t=this.optionsHeight,this.keepAlwaysOpen&&(p.setStyle(this.$noOptions,"height",t),p.setStyle(this.$noSearchResults,"height",t))),p.setStyle(this.$optionsContainer,"max-height",t),this.afterSetOptionsContainerHeight(e)}},{key:"setNewOption",value:function(e){var t=e||this.searchValueOriginal.trim();if(t){var i=this.getNewOption();if(i){var o=i.index;this.setOptionProp(o,"value",this.secureText(t)),this.setOptionProp(o,"label",this.secureText(t))}else{var s={value:t,label:t};e?(s.isNew=!0,this.newValues.push(t)):s.isCurrentNew=!0,this.addOption(s)}}}},{key:"setSelectedProp",value:function(){var e={};this.selectedValues.forEach((function(t){e[t]=!0})),this.options.forEach((function(t){!0===e[t.value]&&(t.isSelected=!0)}))}},{key:"setNewOptionsFromValue",value:function(e){if(e){var t=this.setNewOption.bind(this),i={};this.options.forEach((function(e){i[e.value]=!0})),e.forEach((function(e){e&&!0!==i[e]&&t(e)}))}}},{key:"setDropboxWrapperWidth",value:function(){if(!this.showAsPopup){var e=this.dropboxWidth||"".concat(this.$wrapper.offsetWidth,"px");p.setStyle(this.$dropboxContainer,"max-width",e)}}},{key:"setEleStyles",value:function(){var e=this.maxWidth,t={};e&&(t["max-width"]=e),p.setStyles(this.$ele,t)}},{key:"setDropboxStyles",value:function(){var e=this.dropboxWidth,t={},i={"z-index":this.zIndex};e&&(this.showAsPopup?t["max-width"]=e:i.width=e),p.setStyles(this.$dropboxContainer,i),p.setStyles(this.$dropbox,t)}},{key:"setOptionAttr",value:function(){var e=this.$visibleOptions,t=this.options,i="".concat(this.optionHeight,"px"),o=p.setStyle,s=p.getData,n=p.setData;e&&e.length&&e.forEach((function(e){var r=t[s(e,"index")];o(e,"height",i),n(e,"value",r.value)}))}},{key:"setValueTagAttr",value:function(){var e=this.$valueTags;if(e&&e.length){var t=p.getData,i=p.setData,o=this.options;e.forEach((function(e){var s=t(e,"index");if(void 0!==s){var n=o[s];i(e,"value",n.value)}}))}}},{key:"setScrollTop",value:function(){var e=this.selectedValues;if(!this.showSelectedOptionsFirst&&this.focusSelectedOptionOnOpen&&0!==e.length){var t,i={};e.forEach((function(e){i[e]=!0})),this.options.some((function(e){return!!i[e.value]&&(t=e.visibleIndex,!0)})),t&&(this.$optionsContainer.scrollTop=this.optionHeight*t)}}},{key:"getVisibleOptions",value:function(){return this.visibleOptions||[]}},{key:"getValue",value:function(){return this.multiple?this.useGroupValue?this.getGroupValue():this.selectedValues:this.selectedValues[0]||""}},{key:"getGroupValue",value:function(){var e=[],t={};return this.options.forEach((function(i){if(i.isSelected){var o=i.value;i.isGroupTitle?o&&(t[i.index]=!0,e.push(o)):!0!==t[i.groupIndex]&&e.push(o)}})),e}},{key:"getInputValue",value:function(e){var t=e;return t&&t.length?this.setValueAsArray&&this.multiple&&(t=JSON.stringify(t)):t=this.emptyValue,t}},{key:"getFirstVisibleOptionIndex",value:function(){return Math.ceil(this.$optionsContainer.scrollTop/this.optionHeight)}},{key:"getVisibleStartIndex",value:function(){var e=this.getFirstVisibleOptionIndex()-this.halfOptionsCount;return e<0&&(e=0),e}},{key:"getTooltipAttrText",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o={"data-tooltip":e||"","data-tooltip-enter-delay":this.tooltipEnterDelay,"data-tooltip-z-index":this.zIndex,"data-tooltip-font-size":this.tooltipFontSize,"data-tooltip-alignment":this.tooltipAlignment,"data-tooltip-max-width":this.tooltipMaxWidth,"data-tooltip-ellipsis-only":t,"data-tooltip-allow-html":i};return p.getAttributesText(o)}},{key:"getOptionObj",value:function(e){if(e){var t=s.getString,i=this.secureText.bind(this);return{index:e.index,value:i(t(e.value)),label:i(t(e.label)),description:i(t(e.description)),alias:this.getAlias(e.alias),isCurrentNew:e.isCurrentNew||!1,isNew:e.isNew||!1,isVisible:!0}}}},{key:"getNewOption",value:function(){var e=this.options[this.lastOptionIndex];if(e&&e.isCurrentNew)return e}},{key:"getOptionIndex",value:function(e){var t;return this.options.some((function(i){return i.value===e&&(t=i.index,!0)})),t}},{key:"getNewValue",value:function(){var e={};this.newValues.forEach((function(t){e[t]=!0}));var t=this.selectedValues.filter((function(t){return!0===e[t]}));return this.multiple?t:t[0]}},{key:"getAlias",value:function(e){var t=e;return t&&(t=(t=Array.isArray(t)?t.join(","):t.toString().trim()).toLowerCase()),t||""}},{key:"getDisplayValue",value:function(){var e=[];return this.options.forEach((function(t){t.isSelected&&e.push(t.label)})),this.multiple?e:e[0]||""}},{key:"getSelectedOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.fullDetails,i=void 0!==t&&t,o=e.keepSelectionOrder,s=void 0!==o&&o,n=this.valueKey,r=this.labelKey,a=this.selectedValues,l=[];if(this.options.forEach((function(e){if(e.isSelected&&!e.isGroupTitle)if(i)l.push(e);else{var t,o=(d(t={},n,e.value),d(t,r,e.label),t);e.isNew&&(o.isNew=!0),e.customData&&(o.customData=e.customData),l.push(o)}})),s){var u={};a.forEach((function(e,t){u[e]=t})),l.sort((function(e,t){return u[e.value]-u[t.value]}))}return this.multiple||i?l:l[0]}},{key:"getDisabledOptions",value:function(){var e=this.valueKey,t=this.labelKey,i=this.disabledOptions,o={},s=[];return i.forEach((function(e){o[e]=!0})),this.options.forEach((function(i){var n,r=i.value,a=i.label;o[r]&&s.push((d(n={},e,r),d(n,t,a),n))})),s}},{key:"getVisibleOptionGroupsMapping",value:function(e){var t=this.options,i={},o=this.isOptionVisible.bind(this);return(t=this.structureOptionGroup(t)).forEach((function(t){i[t.index]=t.options.some((function(t){return o({data:t,searchValue:e}).isVisible}))})),i}},{key:"getOptionsCount",value:function(e){var t;if(this.showAsPopup){var i=80*window.innerHeight/100-48;this.hasSearchContainer&&(i-=40),t=Math.floor(i/this.optionHeight)}else t=parseInt(e);return t}},{key:"getOptionsHeight",value:function(){return"".concat(this.optionsCount*this.optionHeight,"px")}},{key:"getSibling",value:function(e,t){var i="next"===t?"nextElementSibling":"previousElementSibling",o=e;do{o&&(o=o[i])}while(p.hasClass(o,"disabled")||p.hasClass(o,"group-title"));return o}},{key:"getUniqueId",value:function(){var e=s.getRandomInt(1e4);return document.querySelector("#vscomp-ele-wrapper-".concat(e))?this.getUniqueId():e}},{key:"initDropboxPopover",value:function(){var e={ele:this.$ele,target:this.$dropboxContainer,position:this.position,zIndex:this.zIndex,margin:4,transitionDistance:30,hideArrowIcon:!0,disableManualAction:!0,disableUpdatePosition:!this.hasDropboxWrapper,updatePositionThrottle:this.updatePositionThrottle,afterShow:this.afterShowPopper.bind(this),afterHide:this.afterHidePopper.bind(this)};this.dropboxPopover=new PopoverComponent(e)}},{key:"openDropbox",value:function(e){this.isSilentOpen=e,e?p.setStyle(this.$dropboxContainer,"display","inline-flex"):(p.dispatchEvent(this.$ele,"beforeOpen"),p.setAria(this.$wrapper,"expanded",!0)),this.setDropboxWrapperWidth(),p.removeClass(this.$allWrappers,"closed"),p.changeTabIndex(this.$allWrappers,0),this.dropboxPopover&&!e?this.dropboxPopover.show():this.afterShowPopper()}},{key:"afterShowPopper",value:function(){var e=this.isSilentOpen;this.isSilentOpen=!1,e||(this.moveSelectedOptionsFirst(),this.setScrollTop(),p.addClass(this.$allWrappers,"focused"),this.showAsPopup?(p.addClass(this.$body,"vscomp-popup-active"),this.isPopupActive=!0):this.focusSearchInput(),p.dispatchEvent(this.$ele,"afterOpen"))}},{key:"closeDropbox",value:function(e){this.isSilentClose=e,this.keepAlwaysOpen?this.removeOptionFocus():(e?p.setStyle(this.$dropboxContainer,"display",""):(p.dispatchEvent(this.$ele,"beforeClose"),p.setAria(this.$wrapper,"expanded",!1),p.setAria(this.$wrapper,"activedescendant","")),this.dropboxPopover&&!e?this.dropboxPopover.hide():this.afterHidePopper())}},{key:"afterHidePopper",value:function(){var e=this.isSilentClose;this.isSilentClose=!1,p.removeClass(this.$allWrappers,"focused"),this.removeOptionFocus(),!e&&this.isPopupActive&&(p.removeClass(this.$body,"vscomp-popup-active"),this.isPopupActive=!1),p.addClass(this.$allWrappers,"closed"),p.changeTabIndex(this.$allWrappers,-1),e||p.dispatchEvent(this.$ele,"afterClose")}},{key:"moveSelectedOptionsFirst",value:function(){this.showSelectedOptionsFirst&&(this.setSortedOptions(),this.$optionsContainer.scrollTop&&this.selectedValues.length?this.scrollToTop():this.setVisibleOptions())}},{key:"toggleDropbox",value:function(){this.isOpened()?this.closeDropbox():this.openDropbox()}},{key:"updatePosition",value:function(){this.dropboxPopover&&this.isOpened()&&this.$ele.updatePosition()}},{key:"isOpened",value:function(){return!p.hasClass(this.$wrapper,"closed")}},{key:"focusSearchInput",value:function(){var e=this.$searchInput;e&&e.focus()}},{key:"focusOption",value:function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=t.direction,o=t.$option,s=t.focusFirst,n=this.$dropboxContainer.querySelector(".vscomp-option.focused");if(o)e=o;else if(!n||s){var r=this.getFirstVisibleOptionIndex();e=this.$dropboxContainer.querySelector('.vscomp-option[data-visible-index="'.concat(r,'"]')),(p.hasClass(e,"disabled")||p.hasClass(e,"group-title"))&&(e=this.getSibling(e,"next"))}else e=this.getSibling(n,i);e&&e!==n&&(n&&this.toggleOptionFocusedState(n,!1),this.toggleOptionFocusedState(e,!0),this.toggleFocusedProp(p.getData(e,"index"),!0),this.moveFocusedOptionToView(e))}},{key:"moveFocusedOptionToView",value:function(e){var t=e||this.$dropboxContainer.querySelector(".vscomp-option.focused");if(t){var i,o=this.$optionsContainer.getBoundingClientRect(),s=t.getBoundingClientRect(),n=o.top,r=o.bottom,a=o.height,l=s.top,u=s.bottom,h=s.height,c=t.offsetTop,d=p.getData(this.$options,"top","number");n>l?i=c+d:r1&&void 0!==arguments[1]?arguments[1]:{},i=t.event;if(e){var o=!p.hasClass(e,"selected");if(o){if(this.multiple&&this.isMaxValuesSelected)return}else if(!this.multiple)return void this.closeDropbox();var n=this.selectedValues,r=p.getData(e,"value"),a=p.getData(e,"index","number"),l=p.hasClass(e,"current-new"),u=!1,h=this.lastSelectedOptionIndex;if(this.lastSelectedOptionIndex=null,this.toggleSelectedProp(a,o),o){if(this.multiple)n.push(r),this.toggleAllOptionsClass(),this.toggleGroupOptionsParent(e),i&&i.shiftKey&&(u=!0);else{n.length&&this.toggleSelectedProp(this.getOptionIndex(n[0]),!1),n=[r];var c=this.$dropboxContainer.querySelector(".vscomp-option.selected");c&&this.toggleOptionSelectedState(c,!1),this.closeDropbox(),l||this.setSearchValue("")}this.lastSelectedOptionIndex=a,this.toggleOptionSelectedState(e)}else this.multiple&&(this.toggleOptionSelectedState(e),s.removeItemFromArray(n,r),this.toggleAllOptionsClass(!1),this.toggleGroupOptionsParent(e,!1));l&&this.beforeSelectNewValue(),this.setValue(n),u&&this.selectRangeOptions(h,a)}}},{key:"selectFocusedOption",value:function(){this.selectOption(this.$dropboxContainer.querySelector(".vscomp-option.focused"))}},{key:"selectRangeOptions",value:function(e,t){var i=this;if("number"==typeof e&&!this.maxValues){var o,s,n=this.selectedValues,r=this.hasOptionGroup,a={};if(eo&&t1&&void 0!==arguments[1]&&arguments[1];this.focusedOptionIndex&&this.setOptionProp(this.focusedOptionIndex,"isFocused",!1),this.setOptionProp(e,"isFocused",t),this.focusedOptionIndex=e}},{key:"toggleSelectedProp",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.setOptionProp(e,"isSelected",t)}},{key:"scrollToTop",value:function(){var e=!this.isOpened();e&&this.openDropbox(!0),this.$optionsContainer.scrollTop>0&&(this.$optionsContainer.scrollTop=0),e&&this.closeDropbox(!0)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.options.forEach((function(e){e.isSelected=!1})),this.beforeValueSet(!0),this.setValue(null,{disableValidation:e}),this.afterValueSet(),e&&p.removeClass(this.$allWrappers,"has-error"),p.dispatchEvent(this.$ele,"reset")}},{key:"addOption",value:function(e,t){if(e){this.lastOptionIndex+=1;var i=this.getOptionObj(c(c({},e),{},{index:this.lastOptionIndex}));this.options.push(i),this.sortedOptions.push(i),t&&(this.visibleOptionsCount+=1,this.afterSetOptions())}}},{key:"removeOption",value:function(e){(e||0===e)&&(this.options.splice(e,1),this.lastOptionIndex-=1)}},{key:"removeNewOption",value:function(){var e=this.getNewOption();e&&this.removeOption(e.index)}},{key:"sortOptions",value:function(e){return e.sort((function(e,t){var i=e.isSelected||e.isAnySelected,o=t.isSelected||t.isAnySelected;return i||o?i&&(!o||e.indexe.length)&&(t=e.length);for(var i=0,o=new Array(t);ii-s-t.width?"left":"right",vertical:n>o-n-t.height?"top":"bottom"}}},{key:"getAbsoluteCoords",value:function(e){if(e){var t=e.getBoundingClientRect(),i=window.pageXOffset,o=window.pageYOffset;return{width:t.width,height:t.height,top:t.top+o,right:t.right+i,bottom:t.bottom+o,left:t.left+i}}}},{key:"getCoords",value:function(e){return e?e.getBoundingClientRect():{}}},{key:"getData",value:function(e,t,i){if(e){var o=e?e.dataset[t]:"";return"number"===i?o=parseFloat(o)||0:"true"===o?o=!0:"false"===o&&(o=!1),o}}},{key:"setData",value:function(e,t,i){e&&(e.dataset[t]=i)}},{key:"setStyle",value:function(e,t,i){e&&(e.style[t]=i)}},{key:"show",value:function(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"block";t.setStyle(e,"display",i)}},{key:"hide",value:function(e){t.setStyle(e,"display","none")}},{key:"getHideableParent",value:function(e){for(var t,i=e.parentElement;i;){var o=getComputedStyle(i).overflow;if(-1!==o.indexOf("scroll")||-1!==o.indexOf("auto")){t=i;break}i=i.parentElement}return t}}])&&function(e,t){for(var i=0;im?m-f:M:k+p>F&&("right"===C?n="left":k=F+fO?O-c:P:E+h>I&&("bottom"===C?n="top":E=I+cp-z&&(N=p-z):"left"!==C&&"right"!==C||((j=b/2+g-B)h-z&&(j=h-z)),i.setStyle(this.$arrowEle,"transform","translate3d(".concat(N,"px, ").concat(j,"px, 0) ").concat(K))}i.hide(this.$popperEle)}},{key:"resetPosition",value:function(){i.setStyle(this.$popperEle,"transform","none"),this.setPosition()}},{key:"show",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.resetPosition,s=t.data;clearTimeout(this.exitDelayTimeout),clearTimeout(this.hideDurationTimeout),o&&this.resetPosition(),this.enterDelayTimeout=setTimeout((function(){var t=i.getData(e.$popperEle,"left"),o=i.getData(e.$popperEle,"top"),n="translate3d(".concat(t,"px, ").concat(o,"px, 0)"),r=e.showDuration;i.show(e.$popperEle,"inline-flex"),i.getCoords(e.$popperEle),i.setStyle(e.$popperEle,"transitionDuration",r+"ms"),i.setStyle(e.$popperEle,"transform",n),i.setStyle(e.$popperEle,"opacity",1),e.showDurationTimeout=setTimeout((function(){"function"==typeof e.afterShowCallback&&e.afterShowCallback(s)}),r)}),this.enterDelay)}},{key:"hide",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=t.data;clearTimeout(this.enterDelayTimeout),clearTimeout(this.showDurationTimeout),this.exitDelayTimeout=setTimeout((function(){if(e.$popperEle){var t=i.getData(e.$popperEle,"fromLeft"),s=i.getData(e.$popperEle,"fromTop"),n="translate3d(".concat(t,"px, ").concat(s,"px, 0)"),r=e.hideDuration;i.setStyle(e.$popperEle,"transitionDuration",r+"ms"),i.setStyle(e.$popperEle,"transform",n),i.setStyle(e.$popperEle,"opacity",0),e.hideDurationTimeout=setTimeout((function(){i.hide(e.$popperEle),"function"==typeof e.afterHideCallback&&e.afterHideCallback(o)}),r)}}),this.exitDelay)}},{key:"updatePosition",value:function(){i.setStyle(this.$popperEle,"transitionDuration","0ms"),this.resetPosition();var e=i.getData(this.$popperEle,"left"),t=i.getData(this.$popperEle,"top");i.show(this.$popperEle,"inline-flex"),i.setStyle(this.$popperEle,"transform","translate3d(".concat(e,"px, ").concat(t,"px, 0)"))}}])&&function(e,t){for(var i=0;i1&&void 0!==arguments[1]&&arguments[1];return!0===e||"true"===e||!1!==e&&"false"!==e&&t}},{key:"removeArrayEmpty",value:function(e){return Array.isArray(e)&&e.length?e.filter((function(e){return!!e})):[]}},{key:"throttle",value:function(e,t){var i,o=0;return function(){for(var s=arguments.length,n=new Array(s),r=0;re.length)&&(t=e.length);for(var i=0,o=new Array(t);i'),e=this.$popover.querySelector(".pop-comp-arrow")),this.$arrowEle=e}}},{key:"destroy",value:function(){this.removeEvents()}}])&&r(i.prototype,o),s&&r(i,s),Object.defineProperty(i,"prototype",{writable:!1}),e}();a=p.getAttrProps(),window.PopoverComponent=p}(); \ No newline at end of file diff --git a/src/utils/dom-utils.js b/src/utils/dom-utils.js index 15ffd44..ab67e80 100644 --- a/src/utils/dom-utils.js +++ b/src/utils/dom-utils.js @@ -300,10 +300,4 @@ export class DomUtils { }); } -} - - - - - - +} \ No newline at end of file