} $ele\n * @param {number} newTabIndex\n * @memberof DomUtils\n */\n }, {\n key: \"changeTabIndex\",\n value: function changeTabIndex($ele, newTabIndex) {\n if (!$ele) {\n // eslint-disable-next-line no-console\n console.log($ele, 'Invalid element provided.');\n return;\n }\n DomUtils.getElements($ele).forEach(function ($this) {\n // eslint-disable-next-line no-param-reassign\n $this.tabIndex = newTabIndex;\n });\n }\n /**\n * @param {HTMLElement} $ele\n * @param {string} event\n * @param {Function} callback\n */\n }, {\n key: \"removeEvent\",\n value: function removeEvent($ele, event, callback) {\n if (!$ele) {\n return;\n }\n var $eleArray = DomUtils.getElements($ele);\n $eleArray.forEach(function ($this) {\n $this.removeEventListener(event, callback);\n });\n }\n }]);\n return DomUtils;\n }();\n ; // CONCATENATED MODULE: ./src/virtual-select.js\n function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols);\n } return keys; }\n function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n 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)); });\n } return target; }\n function _defineProperty(obj, key, value) { key = virtual_select_toPropertyKey(key); if (key in obj) {\n Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });\n }\n else {\n obj[key] = value;\n } return obj; }\n function virtual_select_typeof(obj) {\n \"@babel/helpers - typeof\";\n 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);\n }\n function virtual_select_slicedToArray(arr, i) { return virtual_select_arrayWithHoles(arr) || virtual_select_iterableToArrayLimit(arr, i) || virtual_select_unsupportedIterableToArray(arr, i) || virtual_select_nonIterableRest(); }\n 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.\"); }\n function virtual_select_iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) {\n var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1;\n try {\n if (_x = (_i = _i.call(arr)).next, 0 === i) {\n if (Object(_i) !== _i)\n return;\n _n = !1;\n }\n else\n for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {\n ;\n }\n }\n catch (err) {\n _d = !0, _e = err;\n }\n finally {\n try {\n if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r))\n return;\n }\n finally {\n if (_d)\n throw _e;\n }\n }\n return _arr;\n } }\n function virtual_select_arrayWithHoles(arr) { if (Array.isArray(arr))\n return arr; }\n function virtual_select_toConsumableArray(arr) { return virtual_select_arrayWithoutHoles(arr) || virtual_select_iterableToArray(arr) || virtual_select_unsupportedIterableToArray(arr) || virtual_select_nonIterableSpread(); }\n 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.\"); }\n function virtual_select_unsupportedIterableToArray(o, minLen) { if (!o)\n return; if (typeof o === \"string\")\n return virtual_select_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor)\n n = o.constructor.name; if (n === \"Map\" || n === \"Set\")\n return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))\n return virtual_select_arrayLikeToArray(o, minLen); }\n function virtual_select_iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null)\n return Array.from(iter); }\n function virtual_select_arrayWithoutHoles(arr) { if (Array.isArray(arr))\n return virtual_select_arrayLikeToArray(arr); }\n function virtual_select_arrayLikeToArray(arr, len) { if (len == null || len > arr.length)\n len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) {\n arr2[i] = arr[i];\n } return arr2; }\n function virtual_select_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n } }\n function virtual_select_defineProperties(target, props) { for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor)\n descriptor.writable = true;\n Object.defineProperty(target, virtual_select_toPropertyKey(descriptor.key), descriptor);\n } }\n function virtual_select_createClass(Constructor, protoProps, staticProps) { if (protoProps)\n virtual_select_defineProperties(Constructor.prototype, protoProps); if (staticProps)\n virtual_select_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n function virtual_select_toPropertyKey(arg) { var key = virtual_select_toPrimitive(arg, \"string\"); return virtual_select_typeof(key) === \"symbol\" ? key : String(key); }\n function virtual_select_toPrimitive(input, hint) { if (virtual_select_typeof(input) !== \"object\" || input === null)\n return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) {\n var res = prim.call(input, hint || \"default\");\n if (virtual_select_typeof(res) !== \"object\")\n return res;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n } return (hint === \"string\" ? String : Number)(input); }\n /** cSpell:ignore nocheck, Labelledby, vscomp, tabindex, combobox, haspopup, listbox, activedescendant */\n /* eslint-disable class-methods-use-this */\n // @ts-nocheck\n var dropboxCloseButtonFullHeight = 48;\n var searchHeight = 40;\n var keyDownMethodMapping = {\n 13: 'onEnterPress',\n 38: 'onUpArrowPress',\n 40: 'onDownArrowPress',\n 46: 'onBackspaceOrDeletePress',\n // Delete\n 8: 'onBackspaceOrDeletePress' // Backspace\n };\n var valueLessProps = ['autofocus', 'disabled', 'multiple', 'required'];\n var nativeProps = ['autofocus', 'class', 'disabled', 'id', 'multiple', 'name', 'placeholder', 'required'];\n var attrPropsMapping;\n var dataProps = ['additionalClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'ariaLabelClearButtonText', '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', 'searchNormalize', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex'];\n /** Class representing VirtualSelect */\n var VirtualSelect = /*#__PURE__*/ function () {\n /**\n * @param {virtualSelectOptions} options\n */\n function VirtualSelect(options) {\n virtual_select_classCallCheck(this, VirtualSelect);\n try {\n this.createSecureTextElements();\n this.setProps(options);\n this.setDisabledOptions(options.disabledOptions);\n this.setOptions(options.options);\n this.render();\n }\n catch (e) {\n // eslint-disable-next-line no-console\n console.warn(\"Couldn't initiate Virtual Select\");\n // eslint-disable-next-line no-console\n console.error(e);\n }\n }\n /** render methods - start */\n virtual_select_createClass(VirtualSelect, [{\n key: \"render\",\n value: function render() {\n if (!this.$ele) {\n return;\n }\n var uniqueId = this.uniqueId;\n var wrapperClasses = 'vscomp-wrapper';\n var valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);\n var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);\n var ariaLabelledbyText = this.ariaLabelledby ? \"aria-labelledby=\\\"\".concat(this.ariaLabelledby, \"\\\"\") : '';\n var ariaLabelText = this.ariaLabelText ? \"aria-label=\\\"\".concat(this.ariaLabelText, \"\\\"\") : '';\n var ariaLabelClearBtnTxt = this.ariaLabelClearButtonText ? \"aria-label=\\\"\".concat(this.ariaLabelClearButtonText, \"\\\"\") : '';\n var isExpanded = false;\n if (this.additionalClasses) {\n wrapperClasses += \" \".concat(this.additionalClasses);\n }\n if (this.multiple) {\n wrapperClasses += ' multiple';\n if (!this.disableSelectAll) {\n wrapperClasses += ' has-select-all';\n }\n }\n if (!this.hideClearButton) {\n wrapperClasses += ' has-clear-button';\n }\n if (this.keepAlwaysOpen) {\n wrapperClasses += ' keep-always-open';\n isExpanded = true;\n }\n else {\n wrapperClasses += ' closed';\n }\n if (this.showAsPopup) {\n wrapperClasses += ' show-as-popup';\n }\n if (this.hasSearch) {\n wrapperClasses += ' has-search-input';\n }\n if (this.showValueAsTags) {\n wrapperClasses += ' show-value-as-tags';\n }\n if (this.textDirection) {\n wrapperClasses += \" text-direction-\".concat(this.textDirection);\n }\n if (this.popupPosition) {\n wrapperClasses += \" popup-position-\".concat(this.popupPosition.toLowerCase());\n }\n // eslint-disable-next-line no-trailing-spaces\n var html = \"\\n
\\n
\\n\\n \").concat(this.renderDropbox({\n wrapperClasses: wrapperClasses\n }), \"\\n
\\n
\\n
\\n
\\n\\n
\\n\\n
\\n
\").concat(this.noOptionsText, \"
\\n
\").concat(this.noSearchResultsText, \"
\\n\\n
\\n
\\n
\\n
\").concat(d.description, \"
\");\n }\n if (d.isCurrentNew) {\n optionClasses += ' current-new';\n rightSection += newOptionIconHtml;\n }\n else if (markSearchResults && (!d.isGroupTitle || searchGroup)) {\n optionLabel = optionLabel.replace(searchRegex, '$1 ');\n }\n html += \"\\n \").concat(leftSection, \"\\n \\n \").concat(optionLabel, \"\\n \\n \").concat(description, \"\\n \").concat(rightSection, \"\\n
\");\n });\n groupName = '';\n this.$options.innerHTML = html;\n this.$visibleOptions = this.$options.querySelectorAll('.vscomp-option');\n this.afterRenderOptions();\n }\n }, {\n key: \"renderSearch\",\n value: function renderSearch() {\n if (!this.hasSearchContainer) {\n return;\n }\n var checkboxHtml = '';\n var searchInput = '';\n if (this.multiple && !this.disableSelectAll) {\n checkboxHtml = \"\\n \".concat(this.selectAllText, \" \\n \");\n }\n if (this.hasSearch) {\n searchInput = \"\\n \").concat(this.searchFormLabel, \"\\n \\n × \");\n }\n var html = \"\\n \".concat(checkboxHtml, \"\\n \").concat(searchInput, \"\\n
\");\n this.$search.innerHTML = html;\n this.$searchInput = this.$dropboxContainer.querySelector('.vscomp-search-input');\n this.$searchClear = this.$dropboxContainer.querySelector('.vscomp-search-clear');\n this.$toggleAllButton = this.$dropboxContainer.querySelector('.vscomp-toggle-all-button');\n this.$toggleAllCheckbox = this.$dropboxContainer.querySelector('.vscomp-toggle-all-checkbox');\n this.addEvent(this.$searchInput, 'input', 'onSearch');\n this.addEvent(this.$searchClear, 'click', 'onSearchClear');\n this.addEvent(this.$toggleAllButton, 'click', 'onToggleAllOptions');\n this.addEvent(this.$dropboxContainerBottom, 'focus', 'onDropboxContainerTopOrBottomFocus');\n this.addEvent(this.$dropboxContainerTop, 'focus', 'onDropboxContainerTopOrBottomFocus');\n }\n /** render methods - end */\n /** dom event methods - start */\n }, {\n key: \"addEvents\",\n value: function addEvents() {\n this.addEvent(document, 'click', 'onDocumentClick');\n this.addEvent(this.$allWrappers, 'keydown', 'onKeyDown');\n this.addEvent(this.$toggleButton, 'click', 'onToggleButtonClick');\n this.addEvent(this.$clearButton, 'click keydown', 'onClearButtonClick');\n this.addEvent(this.$dropboxContainer, 'click', 'onDropboxContainerClick');\n this.addEvent(this.$dropboxCloseButton, 'click', 'onDropboxCloseButtonClick');\n this.addEvent(this.$optionsContainer, 'scroll', 'onOptionsScroll');\n this.addEvent(this.$options, 'click', 'onOptionsClick');\n this.addEvent(this.$options, 'mouseover', 'onOptionsMouseOver');\n this.addEvent(this.$options, 'touchmove', 'onOptionsTouchMove');\n this.addMutationObserver();\n }\n }, {\n key: \"addEvent\",\n value: function addEvent($ele, events, method) {\n var _this2 = this;\n if (!$ele) {\n return;\n }\n var eventsArray = Utils.removeArrayEmpty(events.split(' '));\n eventsArray.forEach(function (event) {\n var eventsKey = \"\".concat(method, \"-\").concat(event);\n var callback = _this2.events[eventsKey];\n if (!callback) {\n callback = _this2[method].bind(_this2);\n _this2.events[eventsKey] = callback;\n }\n DomUtils.addEvent($ele, event, callback);\n });\n }\n /** dom event methods - start */\n }, {\n key: \"removeEvents\",\n value: function removeEvents() {\n this.removeEvent(document, 'click', 'onDocumentClick');\n this.removeEvent(this.$allWrappers, 'keydown', 'onKeyDown');\n this.removeEvent(this.$toggleButton, 'click', 'onToggleButtonClick');\n this.removeEvent(this.$clearButton, 'click keydown', 'onClearButtonClick');\n this.removeEvent(this.$dropboxContainer, 'click', 'onDropboxContainerClick');\n this.removeEvent(this.$dropboxCloseButton, 'click', 'onDropboxCloseButtonClick');\n this.removeEvent(this.$optionsContainer, 'scroll', 'onOptionsScroll');\n this.removeEvent(this.$options, 'click', 'onOptionsClick');\n this.removeEvent(this.$options, 'mouseover', 'onOptionsMouseOver');\n this.removeEvent(this.$options, 'touchmove', 'onOptionsTouchMove');\n this.removeMutationObserver();\n }\n }, {\n key: \"removeEvent\",\n value: function removeEvent($ele, events, method) {\n var _this3 = this;\n if (!$ele) {\n return;\n }\n var eventsArray = Utils.removeArrayEmpty(events.split(' '));\n eventsArray.forEach(function (event) {\n var eventsKey = \"\".concat(method, \"-\").concat(event);\n var callback = _this3.events[eventsKey];\n if (callback) {\n DomUtils.removeEvent($ele, event, callback);\n }\n });\n }\n }, {\n key: \"onDocumentClick\",\n value: function onDocumentClick(e) {\n var $eleToKeepOpen = e.target.closest('.vscomp-wrapper');\n if ($eleToKeepOpen !== this.$wrapper && $eleToKeepOpen !== this.$dropboxWrapper && this.isOpened()) {\n this.closeDropbox();\n }\n }\n }, {\n key: \"onKeyDown\",\n value: function onKeyDown(e) {\n var key = e.which || e.keyCode;\n var method = keyDownMethodMapping[key];\n if (document.activeElement === this.$searchInput && e.shiftKey && key === 9) {\n e.preventDefault();\n this.$dropboxContainerTop.focus();\n return;\n }\n if (document.activeElement === this.$searchInput && key === 9) {\n e.preventDefault();\n this.focusFirstVisibleOption();\n return;\n }\n // Handle the Escape key when showing the dropdown as a popup, closing it\n if (document.activeElement === this.$wrapper && (key === 27 || e.key === 'Escape') && this.showAsPopup) {\n this.closeDropbox();\n return;\n }\n if (method) {\n this[method](e);\n }\n }\n }, {\n key: \"onEnterPress\",\n value: function onEnterPress(e) {\n e.preventDefault();\n if (this.isOpened()) {\n this.selectFocusedOption();\n }\n else if (this.$ele.disabled === false) {\n this.openDropbox();\n }\n }\n }, {\n key: \"onDownArrowPress\",\n value: function onDownArrowPress(e) {\n e.preventDefault();\n if (this.isOpened()) {\n this.focusOption({\n direction: 'next'\n });\n }\n else {\n this.openDropbox();\n }\n }\n }, {\n key: \"onUpArrowPress\",\n value: function onUpArrowPress(e) {\n e.preventDefault();\n if (this.isOpened()) {\n this.focusOption({\n direction: 'previous'\n });\n }\n else {\n this.openDropbox();\n }\n }\n }, {\n key: \"onBackspaceOrDeletePress\",\n value: function onBackspaceOrDeletePress(e) {\n if (e.target === this.$wrapper) {\n e.preventDefault();\n if (this.selectedValues.length > 0) {\n this.reset();\n }\n }\n }\n }, {\n key: \"onToggleButtonClick\",\n value: function onToggleButtonClick(e) {\n var $target = e.target;\n if ($target.closest('.vscomp-value-tag-clear-button')) {\n this.removeValue($target.closest('.vscomp-value-tag'));\n }\n else if (!$target.closest('.toggle-button-child')) {\n this.toggleDropbox();\n }\n }\n }, {\n key: \"onClearButtonClick\",\n value: function onClearButtonClick(e) {\n if (e.type === 'click') {\n this.reset();\n }\n else if (e.type === 'keydown' && (e.code === 'Enter' || e.code === 'Space')) {\n e.stopPropagation();\n this.reset();\n }\n }\n }, {\n key: \"onOptionsScroll\",\n value: function onOptionsScroll() {\n this.setVisibleOptions();\n }\n }, {\n key: \"onOptionsClick\",\n value: function onOptionsClick(e) {\n var $option = e.target.closest('.vscomp-option');\n if ($option && !DomUtils.hasClass($option, 'disabled')) {\n if (DomUtils.hasClass($option, 'group-title')) {\n this.onGroupTitleClick($option);\n }\n else {\n this.selectOption($option, {\n event: e\n });\n }\n }\n }\n }, {\n key: \"onGroupTitleClick\",\n value: function onGroupTitleClick($ele) {\n if (!$ele || !this.multiple || this.disableOptionGroupCheckbox) {\n return;\n }\n var isAdding = !DomUtils.hasClass($ele, 'selected');\n this.toggleGroupTitleCheckbox($ele, isAdding);\n this.toggleGroupOptions($ele, isAdding);\n }\n }, {\n key: \"onDropboxContainerClick\",\n value: function onDropboxContainerClick(e) {\n if (!e.target.closest('.vscomp-dropbox')) {\n this.closeDropbox();\n }\n }\n }, {\n key: \"onDropboxCloseButtonClick\",\n value: function onDropboxCloseButtonClick() {\n this.closeDropbox();\n }\n }, {\n key: \"onOptionsMouseOver\",\n value: function onOptionsMouseOver(e) {\n var $ele = e.target.closest('.vscomp-option');\n if ($ele && this.isOpened()) {\n if (DomUtils.hasClass($ele, 'disabled') || DomUtils.hasClass($ele, 'group-title')) {\n this.removeOptionFocus();\n }\n else {\n this.focusOption({\n $option: $ele\n });\n }\n }\n }\n }, {\n key: \"onOptionsTouchMove\",\n value: function onOptionsTouchMove() {\n this.removeOptionFocus();\n }\n }, {\n key: \"onSearch\",\n value: function onSearch(e) {\n e.stopPropagation();\n this.setSearchValue(e.target.value, true);\n }\n }, {\n key: \"onSearchClear\",\n value: function onSearchClear() {\n this.setSearchValue('');\n this.focusSearchInput();\n }\n }, {\n key: \"onToggleAllOptions\",\n value: function onToggleAllOptions() {\n this.toggleAllOptions();\n }\n }, {\n key: \"onDropboxContainerTopOrBottomFocus\",\n value: function onDropboxContainerTopOrBottomFocus() {\n this.closeDropbox();\n }\n }, {\n key: \"onResize\",\n value: function onResize() {\n this.setOptionsContainerHeight(true);\n }\n /** to remove dropboxWrapper on removing vscomp-ele when it is rendered outside of vscomp-ele */\n }, {\n key: \"addMutationObserver\",\n value: function addMutationObserver() {\n var _this4 = this;\n if (!this.hasDropboxWrapper) {\n return;\n }\n var $vscompEle = this.$ele;\n this.mutationObserver = new MutationObserver(function (mutations) {\n var isAdded = false;\n var isRemoved = false;\n mutations.forEach(function (mutation) {\n if (!isAdded) {\n isAdded = virtual_select_toConsumableArray(mutation.addedNodes).some(function ($ele) {\n return !!($ele === $vscompEle || $ele.contains($vscompEle));\n });\n }\n if (!isRemoved) {\n isRemoved = virtual_select_toConsumableArray(mutation.removedNodes).some(function ($ele) {\n return !!($ele === $vscompEle || $ele.contains($vscompEle));\n });\n }\n });\n if (isRemoved && !isAdded) {\n _this4.destroy();\n }\n });\n this.mutationObserver.observe(document.querySelector('body'), {\n childList: true,\n subtree: true\n });\n }\n }, {\n key: \"removeMutationObserver\",\n value: function removeMutationObserver() {\n this.mutationObserver.disconnect();\n }\n /** dom event methods - end */\n /** before event methods - start */\n }, {\n key: \"beforeValueSet\",\n value: function beforeValueSet(isReset) {\n this.toggleAllOptionsClass(isReset ? false : undefined);\n }\n }, {\n key: \"beforeSelectNewValue\",\n value: function beforeSelectNewValue() {\n var _this5 = this;\n var newOption = this.getNewOption();\n var newIndex = newOption.index;\n this.newValues.push(newOption.value);\n this.setOptionProp(newIndex, 'isCurrentNew', false);\n this.setOptionProp(newIndex, 'isNew', true);\n /** using setTimeout to fix the issue of dropbox getting closed on select */\n setTimeout(function () {\n _this5.setSearchValue('');\n _this5.focusSearchInput();\n }, 0);\n }\n /** before event methods - end */\n /** after event methods - start */\n }, {\n key: \"afterRenderWrapper\",\n value: function afterRenderWrapper() {\n DomUtils.addClass(this.$ele, 'vscomp-ele');\n this.renderSearch();\n this.setEleStyles();\n this.setDropboxStyles();\n this.setOptionsHeight();\n this.setVisibleOptions();\n this.setOptionsContainerHeight();\n this.addEvents();\n this.setEleProps();\n if (!this.keepAlwaysOpen && !this.showAsPopup) {\n this.initDropboxPopover();\n }\n if (this.initialSelectedValue) {\n this.setValueMethod(this.initialSelectedValue, this.silentInitialValueSet);\n }\n else if (this.autoSelectFirstOption && this.visibleOptions.length) {\n this.setValueMethod(this.visibleOptions[0].value, this.silentInitialValueSet);\n }\n if (this.showOptionsOnlyOnSearch) {\n this.setSearchValue('', false, true);\n }\n if (this.initialDisabled) {\n this.disable();\n }\n if (this.autofocus) {\n this.focus();\n }\n }\n }, {\n key: \"afterRenderOptions\",\n value: function afterRenderOptions() {\n var visibleOptions = this.getVisibleOptions();\n var hasNoOptions = !this.options.length && !this.hasServerSearch;\n var hasNoSearchResults = !hasNoOptions && !visibleOptions.length;\n if (!this.allowNewOption || this.hasServerSearch || this.showOptionsOnlyOnSearch) {\n DomUtils.toggleClass(this.$allWrappers, 'has-no-search-results', hasNoSearchResults);\n if (hasNoSearchResults) {\n DomUtils.setAttr(this.$noSearchResults, 'tabindex', '0');\n DomUtils.setAttr(this.$noSearchResults, 'aria-hidden', 'false');\n }\n else {\n DomUtils.setAttr(this.$noSearchResults, 'tabindex', '-1');\n DomUtils.setAttr(this.$noSearchResults, 'aria-hidden', 'true');\n }\n }\n DomUtils.toggleClass(this.$allWrappers, 'has-no-options', hasNoOptions);\n if (hasNoOptions) {\n DomUtils.setAttr(this.$noOptions, 'tabindex', '0');\n DomUtils.setAttr(this.$noOptions, 'aria-hidden', 'false');\n }\n else {\n DomUtils.setAttr(this.$noOptions, 'tabindex', '-1');\n DomUtils.setAttr(this.$noOptions, 'aria-hidden', 'true');\n }\n this.setOptionAttr();\n this.setOptionsPosition();\n this.setOptionsTooltip();\n if (document.activeElement !== this.$searchInput) {\n var focusedOption = DomUtils.getElementsBySelector('.focused', this.$dropboxContainer)[0];\n if (focusedOption !== undefined) {\n focusedOption.focus();\n }\n }\n }\n }, {\n key: \"afterSetOptionsContainerHeight\",\n value: function afterSetOptionsContainerHeight(reset) {\n if (reset && this.showAsPopup) {\n this.setVisibleOptions();\n }\n }\n }, {\n key: \"afterSetSearchValue\",\n value: function afterSetSearchValue() {\n var _this6 = this;\n if (this.hasServerSearch) {\n clearInterval(this.serverSearchTimeout);\n this.serverSearchTimeout = setTimeout(function () {\n _this6.serverSearch();\n }, this.searchDelay);\n }\n else {\n this.setVisibleOptionsCount();\n }\n if (this.selectAllOnlyVisible) {\n this.toggleAllOptionsClass();\n }\n this.focusOption({\n focusFirst: true\n });\n }\n }, {\n key: \"afterSetVisibleOptionsCount\",\n value: function afterSetVisibleOptionsCount() {\n this.scrollToTop();\n this.setOptionsHeight();\n this.setVisibleOptions();\n this.updatePosition();\n }\n }, {\n key: \"afterValueSet\",\n value: function afterValueSet() {\n this.scrollToTop();\n this.setSearchValue('');\n this.renderOptions();\n }\n }, {\n key: \"afterSetOptions\",\n value: function afterSetOptions(keepValue) {\n if (keepValue) {\n this.setSelectedProp();\n }\n this.setOptionsHeight();\n this.setVisibleOptions();\n if (this.showOptionsOnlyOnSearch) {\n this.setSearchValue('', false, true);\n }\n if (!keepValue) {\n this.reset();\n }\n }\n /** after event methods - end */\n /** set methods - start */\n /**\n * @param {virtualSelectOptions} params\n */\n }, {\n key: \"setProps\",\n value: function setProps(params) {\n var options = this.setDefaultProps(params);\n this.setPropsFromElementAttr(options);\n var convertToBoolean = Utils.convertToBoolean;\n this.$ele = options.ele;\n this.dropboxWrapper = options.dropboxWrapper;\n this.valueKey = options.valueKey;\n this.labelKey = options.labelKey;\n this.descriptionKey = options.descriptionKey;\n this.aliasKey = options.aliasKey;\n this.optionHeightText = options.optionHeight;\n this.optionHeight = parseFloat(this.optionHeightText);\n this.multiple = convertToBoolean(options.multiple);\n this.hasSearch = convertToBoolean(options.search);\n this.searchByStartsWith = convertToBoolean(options.searchByStartsWith);\n this.searchGroup = convertToBoolean(options.searchGroup);\n this.hideClearButton = convertToBoolean(options.hideClearButton);\n this.autoSelectFirstOption = convertToBoolean(options.autoSelectFirstOption);\n this.hasOptionDescription = convertToBoolean(options.hasOptionDescription);\n this.silentInitialValueSet = convertToBoolean(options.silentInitialValueSet);\n this.allowNewOption = convertToBoolean(options.allowNewOption);\n this.markSearchResults = convertToBoolean(options.markSearchResults);\n this.showSelectedOptionsFirst = convertToBoolean(options.showSelectedOptionsFirst);\n this.disableSelectAll = convertToBoolean(options.disableSelectAll);\n this.keepAlwaysOpen = convertToBoolean(options.keepAlwaysOpen);\n this.showDropboxAsPopup = convertToBoolean(options.showDropboxAsPopup);\n this.hideValueTooltipOnSelectAll = convertToBoolean(options.hideValueTooltipOnSelectAll);\n this.showOptionsOnlyOnSearch = convertToBoolean(options.showOptionsOnlyOnSearch);\n this.selectAllOnlyVisible = convertToBoolean(options.selectAllOnlyVisible);\n this.alwaysShowSelectedOptionsCount = convertToBoolean(options.alwaysShowSelectedOptionsCount);\n this.alwaysShowSelectedOptionsLabel = convertToBoolean(options.alwaysShowSelectedOptionsLabel);\n this.disableAllOptionsSelectedText = convertToBoolean(options.disableAllOptionsSelectedText);\n this.showValueAsTags = convertToBoolean(options.showValueAsTags);\n this.disableOptionGroupCheckbox = convertToBoolean(options.disableOptionGroupCheckbox);\n this.enableSecureText = convertToBoolean(options.enableSecureText);\n this.setValueAsArray = convertToBoolean(options.setValueAsArray);\n this.disableValidation = convertToBoolean(options.disableValidation);\n this.initialDisabled = convertToBoolean(options.disabled);\n this.required = convertToBoolean(options.required);\n this.autofocus = convertToBoolean(options.autofocus);\n this.useGroupValue = convertToBoolean(options.useGroupValue);\n this.focusSelectedOptionOnOpen = convertToBoolean(options.focusSelectedOptionOnOpen);\n this.noOptionsText = options.noOptionsText;\n this.noSearchResultsText = options.noSearchResultsText;\n this.selectAllText = options.selectAllText;\n this.searchNormalize = options.searchNormalize;\n this.searchPlaceholderText = options.searchPlaceholderText;\n this.searchFormLabel = options.searchFormLabel;\n this.optionsSelectedText = options.optionsSelectedText;\n this.optionSelectedText = options.optionSelectedText;\n this.allOptionsSelectedText = options.allOptionsSelectedText;\n this.clearButtonText = options.clearButtonText;\n this.moreText = options.moreText;\n this.placeholder = options.placeholder;\n this.position = options.position;\n this.textDirection = options.textDirection;\n this.dropboxWidth = options.dropboxWidth;\n this.tooltipFontSize = options.tooltipFontSize;\n this.tooltipAlignment = options.tooltipAlignment;\n this.tooltipMaxWidth = options.tooltipMaxWidth;\n this.updatePositionThrottle = options.updatePositionThrottle;\n this.noOfDisplayValues = parseInt(options.noOfDisplayValues);\n this.zIndex = parseInt(options.zIndex);\n this.maxValues = parseInt(options.maxValues);\n this.minValues = parseInt(options.minValues);\n this.name = this.secureText(options.name);\n this.additionalClasses = options.additionalClasses;\n this.popupDropboxBreakpoint = options.popupDropboxBreakpoint;\n this.popupPosition = options.popupPosition;\n this.onServerSearch = options.onServerSearch;\n this.labelRenderer = options.labelRenderer;\n this.initialSelectedValue = options.selectedValue === 0 ? '0' : options.selectedValue;\n this.emptyValue = options.emptyValue;\n this.ariaLabelledby = options.ariaLabelledby;\n this.ariaLabelText = options.ariaLabelText;\n this.ariaLabelClearButtonText = options.ariaLabelClearButtonText;\n this.maxWidth = options.maxWidth;\n this.searchDelay = options.searchDelay;\n /** @type {string[]} */\n this.selectedValues = [];\n /** @type {virtualSelectOption[]} */\n this.selectedOptions = [];\n this.newValues = [];\n this.events = {};\n this.tooltipEnterDelay = 200;\n this.searchValue = '';\n this.searchValueOriginal = '';\n this.isAllSelected = false;\n if (options.search === undefined && this.multiple || this.allowNewOption || this.showOptionsOnlyOnSearch) {\n this.hasSearch = true;\n }\n this.hasServerSearch = typeof this.onServerSearch === 'function';\n if (this.maxValues || this.hasServerSearch || this.showOptionsOnlyOnSearch) {\n this.disableSelectAll = true;\n this.disableOptionGroupCheckbox = true;\n }\n if (this.keepAlwaysOpen) {\n this.dropboxWrapper = 'self';\n }\n this.showAsPopup = this.showDropboxAsPopup && !this.keepAlwaysOpen && window.innerWidth <= parseFloat(this.popupDropboxBreakpoint);\n this.hasSearchContainer = this.hasSearch || this.multiple && !this.disableSelectAll;\n this.optionsCount = this.getOptionsCount(options.optionsCount);\n this.halfOptionsCount = Math.ceil(this.optionsCount / 2);\n this.optionsHeight = this.getOptionsHeight();\n this.uniqueId = this.getUniqueId();\n }\n /**\n * @param {virtualSelectOptions} options\n */\n }, {\n key: \"setDefaultProps\",\n value: function setDefaultProps(options) {\n var defaultOptions = {\n dropboxWrapper: 'self',\n valueKey: 'value',\n labelKey: 'label',\n descriptionKey: 'description',\n aliasKey: 'alias',\n ariaLabelText: 'Options list',\n ariaLabelClearButtonText: 'Clear button',\n optionsCount: 5,\n noOfDisplayValues: 50,\n optionHeight: '40px',\n noOptionsText: 'No options found',\n noSearchResultsText: 'No results found',\n selectAllText: 'Select All',\n searchNormalize: false,\n searchPlaceholderText: 'Search...',\n searchFormLabel: 'Search',\n clearButtonText: 'Clear',\n moreText: 'more...',\n optionsSelectedText: 'options selected',\n optionSelectedText: 'option selected',\n allOptionsSelectedText: 'All',\n placeholder: 'Select',\n position: 'bottom left',\n zIndex: options.keepAlwaysOpen ? 1 : 2,\n tooltipFontSize: '14px',\n tooltipAlignment: 'center',\n tooltipMaxWidth: '300px',\n updatePositionThrottle: 100,\n name: '',\n additionalClasses: '',\n maxValues: 0,\n showDropboxAsPopup: true,\n popupDropboxBreakpoint: '576px',\n popupPosition: 'center',\n hideValueTooltipOnSelectAll: true,\n emptyValue: '',\n searchDelay: 300,\n focusSelectedOptionOnOpen: true\n };\n if (options.hasOptionDescription) {\n defaultOptions.optionsCount = 4;\n defaultOptions.optionHeight = '50px';\n }\n return Object.assign(defaultOptions, options);\n }\n }, {\n key: \"setPropsFromElementAttr\",\n value: function setPropsFromElementAttr(options) {\n var $ele = options.ele;\n Object.keys(attrPropsMapping).forEach(function (k) {\n var value = $ele.getAttribute(k);\n if (valueLessProps.indexOf(k) !== -1 && (value === '' || value === 'true')) {\n value = true;\n }\n if (value) {\n // eslint-disable-next-line no-param-reassign\n options[attrPropsMapping[k]] = value;\n }\n });\n }\n }, {\n key: \"setEleProps\",\n value: function setEleProps() {\n var $ele = this.$ele;\n $ele.virtualSelect = this;\n $ele.value = this.multiple ? [] : '';\n $ele.name = this.name;\n $ele.disabled = false;\n $ele.required = this.required;\n $ele.autofocus = this.autofocus;\n $ele.multiple = this.multiple;\n $ele.form = $ele.closest('form');\n $ele.reset = VirtualSelect.reset;\n $ele.setValue = VirtualSelect.setValueMethod;\n $ele.setOptions = VirtualSelect.setOptionsMethod;\n $ele.setDisabledOptions = VirtualSelect.setDisabledOptionsMethod;\n $ele.setEnabledOptions = VirtualSelect.setEnabledOptionsMethod;\n $ele.toggleSelectAll = VirtualSelect.toggleSelectAll;\n $ele.isAllSelected = VirtualSelect.isAllSelected;\n $ele.addOption = VirtualSelect.addOptionMethod;\n $ele.getNewValue = VirtualSelect.getNewValueMethod;\n $ele.getDisplayValue = VirtualSelect.getDisplayValueMethod;\n $ele.getSelectedOptions = VirtualSelect.getSelectedOptionsMethod;\n $ele.getDisabledOptions = VirtualSelect.getDisabledOptionsMethod;\n $ele.open = VirtualSelect.openMethod;\n $ele.close = VirtualSelect.closeMethod;\n $ele.focus = VirtualSelect.focusMethod;\n $ele.enable = VirtualSelect.enableMethod;\n $ele.disable = VirtualSelect.disableMethod;\n $ele.destroy = VirtualSelect.destroyMethod;\n $ele.validate = VirtualSelect.validateMethod;\n $ele.toggleRequired = VirtualSelect.toggleRequiredMethod;\n if (this.hasDropboxWrapper) {\n this.$dropboxWrapper.virtualSelect = this;\n }\n }\n }, {\n key: \"setValueMethod\",\n value: function setValueMethod(newValue, silentChange) {\n var valuesMapping = {};\n var valuesOrder = {};\n var validValues = [];\n var isMultiSelect = this.multiple;\n var value = newValue;\n if (value) {\n if (!Array.isArray(value)) {\n value = [value];\n }\n if (isMultiSelect) {\n var maxValues = this.maxValues;\n if (maxValues && value.length > maxValues) {\n value.splice(maxValues);\n }\n }\n else if (value.length > 1) {\n value = [value[0]];\n }\n /** converting value to string */\n value = value.map(function (v) {\n return v || v === 0 ? v.toString() : '';\n });\n if (this.useGroupValue) {\n value = this.setGroupOptionsValue(value);\n }\n value.forEach(function (d, i) {\n valuesMapping[d] = true;\n valuesOrder[d] = i;\n });\n if (this.allowNewOption && value) {\n this.setNewOptionsFromValue(value);\n }\n }\n this.options.forEach(function (d) {\n if (valuesMapping[d.value] === true && !d.isDisabled && !d.isGroupTitle) {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = true;\n validValues.push(d.value);\n }\n else {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = false;\n }\n });\n if (isMultiSelect) {\n if (this.hasOptionGroup) {\n this.setGroupsSelectedProp();\n }\n /** sorting validValues in the given values order */\n validValues.sort(function (a, b) {\n return valuesOrder[a] - valuesOrder[b];\n });\n }\n else {\n /** taking first value for single select */\n var _validValues = validValues;\n var _validValues2 = virtual_select_slicedToArray(_validValues, 1);\n validValues = _validValues2[0];\n }\n this.beforeValueSet();\n this.setValue(validValues, {\n disableEvent: silentChange\n });\n this.afterValueSet();\n }\n }, {\n key: \"setGroupOptionsValue\",\n value: function setGroupOptionsValue(preparedValues) {\n var selectedValues = [];\n var selectedGroups = {};\n var valuesMapping = {};\n preparedValues.forEach(function (d) {\n valuesMapping[d] = true;\n });\n this.options.forEach(function (d) {\n var value = d.value;\n var isSelected = valuesMapping[value] === true;\n if (d.isGroupTitle) {\n if (isSelected) {\n selectedGroups[d.index] = true;\n }\n }\n else if (isSelected || selectedGroups[d.groupIndex]) {\n selectedValues.push(value);\n }\n });\n return selectedValues;\n }\n }, {\n key: \"setGroupsSelectedProp\",\n value: function setGroupsSelectedProp() {\n var isAllGroupOptionsSelected = this.isAllGroupOptionsSelected.bind(this);\n this.options.forEach(function (d) {\n if (d.isGroupTitle) {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = isAllGroupOptionsSelected(d.index);\n }\n });\n }\n }, {\n key: \"setOptionsMethod\",\n value: function setOptionsMethod(options, keepValue) {\n this.setOptions(options);\n this.afterSetOptions(keepValue);\n }\n }, {\n key: \"setDisabledOptionsMethod\",\n value: function setDisabledOptionsMethod(disabledOptions) {\n var keepValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n this.setDisabledOptions(disabledOptions, true);\n if (!keepValue) {\n this.setValueMethod(null);\n this.toggleAllOptionsClass();\n }\n this.setVisibleOptions();\n }\n }, {\n key: \"setDisabledOptions\",\n value: function setDisabledOptions(disabledOptions) {\n var setOptionsProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var disabledOptionsArr = [];\n if (!disabledOptions) {\n if (setOptionsProp) {\n this.options.forEach(function (d) {\n // eslint-disable-next-line no-param-reassign\n d.isDisabled = false;\n return d;\n });\n }\n }\n else if (disabledOptions === true) {\n if (setOptionsProp) {\n this.options.forEach(function (d) {\n // eslint-disable-next-line no-param-reassign\n d.isDisabled = true;\n disabledOptionsArr.push(d.value);\n return d;\n });\n }\n }\n else {\n disabledOptionsArr = disabledOptions.map(function (d) {\n return d.toString();\n });\n var disabledOptionsMapping = {};\n disabledOptionsArr.forEach(function (d) {\n disabledOptionsMapping[d] = true;\n });\n if (setOptionsProp) {\n this.options.forEach(function (d) {\n // eslint-disable-next-line no-param-reassign\n d.isDisabled = disabledOptionsMapping[d.value] === true;\n return d;\n });\n }\n }\n this.disabledOptions = disabledOptionsArr;\n }\n }, {\n key: \"setEnabledOptionsMethod\",\n value: function setEnabledOptionsMethod(disabledOptions) {\n var keepValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n this.setEnabledOptions(disabledOptions);\n if (!keepValue) {\n this.setValueMethod(null);\n this.toggleAllOptionsClass();\n }\n this.setVisibleOptions();\n }\n }, {\n key: \"setEnabledOptions\",\n value: function setEnabledOptions(enabledOptions) {\n if (enabledOptions === undefined) {\n return;\n }\n var disabledOptionsArr = [];\n if (enabledOptions === true) {\n this.options.forEach(function (d) {\n // eslint-disable-next-line no-param-reassign\n d.isDisabled = false;\n return d;\n });\n }\n else {\n var enabledOptionsMapping = {};\n enabledOptions.forEach(function (d) {\n enabledOptionsMapping[d] = true;\n });\n this.options.forEach(function (d) {\n var isDisabled = enabledOptionsMapping[d.value] !== true;\n // eslint-disable-next-line no-param-reassign\n d.isDisabled = isDisabled;\n if (isDisabled) {\n disabledOptionsArr.push(d.value);\n }\n return d;\n });\n }\n this.disabledOptions = disabledOptionsArr;\n }\n }, {\n key: \"setOptions\",\n value: function setOptions() {\n var _this7 = this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n var preparedOptions = [];\n var hasDisabledOptions = this.disabledOptions.length;\n var valueKey = this.valueKey, labelKey = this.labelKey, descriptionKey = this.descriptionKey, aliasKey = this.aliasKey, hasOptionDescription = this.hasOptionDescription;\n var getString = Utils.getString, convertToBoolean = Utils.convertToBoolean;\n var secureText = this.secureText.bind(this);\n var getAlias = this.getAlias.bind(this);\n var index = 0;\n var hasOptionGroup = false;\n var disabledOptionsMapping = {};\n var hasEmptyValueOption = false;\n this.disabledOptions.forEach(function (d) {\n disabledOptionsMapping[d] = true;\n });\n var prepareOption = function prepareOption(d) {\n if (virtual_select_typeof(d) !== 'object') {\n var _d2;\n // eslint-disable-next-line no-param-reassign\n d = (_d2 = {}, _defineProperty(_d2, valueKey, d), _defineProperty(_d2, labelKey, d), _d2);\n }\n var value = secureText(getString(d[valueKey]));\n var label = secureText(getString(d[labelKey]));\n var childOptions = d.options;\n var isGroupTitle = !!childOptions;\n var option = {\n index: index,\n value: value,\n label: label,\n labelNormalized: _this7.searchNormalize ? Utils.normalizeString(label).toLowerCase() : label.toLowerCase(),\n alias: getAlias(d[aliasKey]),\n isVisible: convertToBoolean(d.isVisible, true),\n isNew: d.isNew || false,\n isGroupTitle: isGroupTitle,\n classNames: d.classNames\n };\n if (!hasEmptyValueOption && value === '') {\n hasEmptyValueOption = true;\n }\n if (hasDisabledOptions) {\n option.isDisabled = disabledOptionsMapping[value] === true;\n }\n if (d.isGroupOption) {\n option.isGroupOption = true;\n option.groupIndex = d.groupIndex;\n }\n if (hasOptionDescription) {\n option.description = secureText(getString(d[descriptionKey]));\n }\n if (d.customData) {\n option.customData = d.customData;\n }\n preparedOptions.push(option);\n index += 1;\n if (isGroupTitle) {\n var groupIndex = option.index;\n hasOptionGroup = true;\n childOptions.forEach(function (childData) {\n // eslint-disable-next-line no-param-reassign\n childData.isGroupOption = true;\n // eslint-disable-next-line no-param-reassign\n childData.groupIndex = groupIndex;\n prepareOption(childData);\n });\n }\n };\n if (Array.isArray(options)) {\n options.forEach(prepareOption);\n }\n var optionsLength = preparedOptions.length;\n var $ele = this.$ele;\n $ele.options = preparedOptions;\n $ele.length = optionsLength;\n this.options = preparedOptions;\n this.visibleOptionsCount = optionsLength;\n this.lastOptionIndex = optionsLength - 1;\n this.newValues = [];\n this.hasOptionGroup = hasOptionGroup;\n this.hasEmptyValueOption = hasEmptyValueOption;\n this.setSortedOptions();\n }\n }, {\n key: \"setServerOptions\",\n value: function setServerOptions() {\n var _this8 = this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n this.setOptionsMethod(options, true);\n var selectedOptions = this.selectedOptions;\n var newOptions = this.options;\n var optionsUpdated = false;\n /** merging already selected options details with new options */\n if (selectedOptions.length) {\n var newOptionsValueMapping = {};\n optionsUpdated = true;\n newOptions.forEach(function (d) {\n newOptionsValueMapping[d.value] = true;\n });\n selectedOptions.forEach(function (d) {\n if (newOptionsValueMapping[d.value] !== true) {\n // eslint-disable-next-line no-param-reassign\n d.isVisible = false;\n newOptions.push(d);\n }\n });\n this.setOptionsMethod(newOptions, true);\n }\n /** merging new search option */\n if (this.allowNewOption && this.searchValue) {\n var hasExactOption = newOptions.some(function (d) {\n return d.label.toLowerCase() === _this8.searchValue;\n });\n if (!hasExactOption) {\n optionsUpdated = true;\n this.setNewOption();\n }\n }\n if (optionsUpdated) {\n this.setVisibleOptionsCount();\n if (this.multiple) {\n this.toggleAllOptionsClass();\n }\n this.setValueText();\n }\n else {\n this.updatePosition();\n }\n this.setVisibleOptionsCount();\n DomUtils.removeClass(this.$allWrappers, 'server-searching');\n }\n }, {\n key: \"setSelectedOptions\",\n value: function setSelectedOptions() {\n this.selectedOptions = this.options.filter(function (d) {\n return d.isSelected;\n });\n }\n }, {\n key: \"setSortedOptions\",\n value: function setSortedOptions() {\n var sortedOptions = virtual_select_toConsumableArray(this.options);\n if (this.showSelectedOptionsFirst && this.selectedValues.length) {\n if (this.hasOptionGroup) {\n sortedOptions = this.sortOptionsGroup(sortedOptions);\n }\n else {\n sortedOptions = this.sortOptions(sortedOptions);\n }\n }\n this.sortedOptions = sortedOptions;\n }\n }, {\n key: \"setVisibleOptions\",\n value: function setVisibleOptions() {\n var visibleOptions = virtual_select_toConsumableArray(this.sortedOptions);\n var maxOptionsToShow = this.optionsCount * 2;\n var startIndex = this.getVisibleStartIndex();\n var newOption = this.getNewOption();\n var endIndex = startIndex + maxOptionsToShow - 1;\n var i = 0;\n if (newOption) {\n newOption.visibleIndex = i;\n i += 1;\n }\n visibleOptions = visibleOptions.filter(function (d) {\n var inView = false;\n if (d.isVisible && !d.isCurrentNew) {\n inView = i >= startIndex && i <= endIndex;\n // eslint-disable-next-line no-param-reassign\n d.visibleIndex = i;\n i += 1;\n }\n return inView;\n });\n if (newOption) {\n visibleOptions = [newOption].concat(virtual_select_toConsumableArray(visibleOptions));\n }\n this.visibleOptions = visibleOptions;\n // update number of visible options\n this.visibleOptionsCount = visibleOptions.length;\n this.renderOptions();\n }\n }, {\n key: \"setOptionsPosition\",\n value: function setOptionsPosition(startIndex) {\n // We use the parseInt to fix a Chrome issue when dealing with decimal pixels in translate3d\n var top = parseInt((startIndex || this.getVisibleStartIndex()) * this.optionHeight);\n this.$options.style.transform = \"translate3d(0, \".concat(top, \"px, 0)\");\n DomUtils.setData(this.$options, 'top', top);\n }\n }, {\n key: \"setOptionsTooltip\",\n value: function setOptionsTooltip() {\n var _this9 = this;\n var visibleOptions = this.getVisibleOptions();\n var hasOptionDescription = this.hasOptionDescription;\n visibleOptions.forEach(function (d) {\n var $optionEle = _this9.$dropboxContainer.querySelector(\".vscomp-option[data-index=\\\"\".concat(d.index, \"\\\"]\"));\n DomUtils.setData($optionEle.querySelector('.vscomp-option-text'), 'tooltip', d.label);\n if (hasOptionDescription) {\n DomUtils.setData($optionEle.querySelector('.vscomp-option-description'), 'tooltip', d.description);\n }\n });\n }\n }, {\n key: \"setValue\",\n value: function setValue(value) {\n 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;\n var isValidValue = this.hasEmptyValueOption && value === '' || value;\n if (!isValidValue) {\n this.selectedValues = [];\n }\n else if (Array.isArray(value)) {\n this.selectedValues = virtual_select_toConsumableArray(value);\n }\n else {\n this.selectedValues = [value];\n }\n var newValue = this.getValue();\n this.$ele.value = newValue;\n this.$hiddenInput.value = this.getInputValue(newValue);\n this.isMaxValuesSelected = !!(this.maxValues && this.maxValues <= this.selectedValues.length);\n this.toggleAllOptionsClass();\n this.setValueText();\n DomUtils.toggleClass(this.$allWrappers, 'has-value', Utils.isNotEmpty(this.selectedValues));\n DomUtils.toggleClass(this.$allWrappers, 'max-value-selected', this.isMaxValuesSelected);\n if (!disableValidation) {\n this.validate();\n }\n if (!disableEvent) {\n DomUtils.dispatchEvent(this.$ele, 'change', true);\n }\n }\n }, {\n key: \"setValueText\",\n value: function setValueText() {\n var _this10 = this;\n var multiple = this.multiple, selectedValues = this.selectedValues, noOfDisplayValues = this.noOfDisplayValues, showValueAsTags = this.showValueAsTags, $valueText = this.$valueText;\n var valueText = [];\n var valueTooltip = [];\n var selectedLength = selectedValues.length;\n var selectedValuesCount = 0;\n var showAllText = this.isAllSelected && !this.hasServerSearch && !this.disableAllOptionsSelectedText && !showValueAsTags;\n /** show all values selected text without tooltip text */\n if (showAllText && this.hideValueTooltipOnSelectAll) {\n $valueText.innerHTML = \"\".concat(this.allOptionsSelectedText, \" (\").concat(selectedLength, \")\");\n }\n else {\n var selectedOptions = this.getSelectedOptions({\n fullDetails: true,\n keepSelectionOrder: true\n });\n selectedOptions.some(function (d) {\n if (d.isCurrentNew) {\n return false;\n }\n if (selectedValuesCount >= noOfDisplayValues) {\n return true;\n }\n var label = d.label;\n valueText.push(label);\n selectedValuesCount += 1;\n if (showValueAsTags) {\n // Will cause text overflow in runtime and if so,the tooltip information is prepared\n var valueTooltipForTags = Utils.willTextOverflow($valueText.parentElement, label) ? _this10.getTooltipAttrText(label, false, true) : '';\n var valueTagHtml = \"\\n \").concat(label, \" \\n \\n \\n \");\n valueTooltip.push(valueTagHtml);\n }\n else {\n valueTooltip.push(label);\n }\n return false;\n });\n var moreSelectedOptions = selectedLength - noOfDisplayValues;\n if (moreSelectedOptions > 0) {\n valueTooltip.push(\"+ \".concat(moreSelectedOptions, \" \").concat(this.moreText, \" \"));\n }\n var aggregatedValueText = valueText.join(', ');\n if (aggregatedValueText === '') {\n $valueText.innerHTML = this.placeholder;\n }\n else {\n $valueText.innerHTML = aggregatedValueText;\n if (multiple) {\n var maxValues = this.maxValues;\n var showSelectedCount = this.alwaysShowSelectedOptionsCount || DomUtils.hasEllipsis($valueText);\n if (showSelectedCount || maxValues || showValueAsTags) {\n var countText = \"\".concat(selectedLength, \" \");\n if (maxValues) {\n countText += \" / \".concat(maxValues, \" \");\n }\n /** show all values selected text with tooltip text */\n if (showAllText) {\n $valueText.innerHTML = \"\".concat(this.allOptionsSelectedText, \" (\").concat(selectedLength, \")\");\n }\n else if (showValueAsTags) {\n $valueText.innerHTML = valueTooltip.join('');\n this.$valueTags = $valueText.querySelectorAll('.vscomp-value-tag');\n this.setValueTagAttr();\n }\n else if (!this.alwaysShowSelectedOptionsLabel) {\n /** replace comma separated list of selections with shorter text indicating selection count */\n var optionsSelectedText = selectedLength === 1 ? this.optionSelectedText : this.optionsSelectedText;\n $valueText.innerHTML = \"\".concat(countText, \" \").concat(optionsSelectedText);\n }\n }\n else {\n /** removing tooltip if full value text is visible */\n valueTooltip = [];\n }\n }\n }\n }\n var tooltipText = '';\n if (selectedLength === 0) {\n tooltipText = this.placeholder;\n }\n else if (!showValueAsTags) {\n tooltipText = valueTooltip.join(', ');\n }\n if (!showValueAsTags) {\n DomUtils.setData($valueText, 'tooltip', tooltipText);\n }\n if (multiple) {\n if (!showValueAsTags) {\n DomUtils.setData($valueText, 'tooltipEllipsisOnly', selectedLength === 0);\n }\n else {\n this.updatePosition();\n }\n }\n }\n }, {\n key: \"setSearchValue\",\n value: function setSearchValue(value) {\n var skipInputSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var forceSet = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n if (value === this.searchValueOriginal && !forceSet) {\n return;\n }\n if (!skipInputSet) {\n this.$searchInput.value = value;\n }\n var searchValue = value.replace(/\\\\/g, '').toLowerCase().trim();\n this.searchValue = searchValue;\n this.searchValueOriginal = value;\n DomUtils.toggleClass(this.$allWrappers, 'has-search-value', value);\n this.afterSetSearchValue();\n }\n }, {\n key: \"setVisibleOptionsCount\",\n value: function setVisibleOptionsCount() {\n var visibleOptionsCount = 0;\n var hasExactOption = false;\n var visibleOptionGroupsMapping;\n var searchGroup = this.searchGroup, showOptionsOnlyOnSearch = this.showOptionsOnlyOnSearch, searchByStartsWith = this.searchByStartsWith;\n /** If searchNormalize we'll normalize the searchValue */\n var searchValue = this.searchValue;\n searchValue = this.searchNormalize ? Utils.normalizeString(searchValue) : searchValue;\n var isOptionVisible = this.isOptionVisible.bind(this);\n if (this.hasOptionGroup) {\n visibleOptionGroupsMapping = this.getVisibleOptionGroupsMapping(searchValue);\n }\n this.options.forEach(function (d) {\n if (d.isCurrentNew) {\n return;\n }\n var result;\n if (showOptionsOnlyOnSearch && !searchValue) {\n // eslint-disable-next-line no-param-reassign\n d.isVisible = false;\n result = {\n isVisible: false,\n hasExactOption: false\n };\n }\n else {\n result = isOptionVisible({\n data: d,\n searchValue: searchValue,\n hasExactOption: hasExactOption,\n visibleOptionGroupsMapping: visibleOptionGroupsMapping,\n searchGroup: searchGroup,\n searchByStartsWith: searchByStartsWith\n });\n }\n if (result.isVisible) {\n visibleOptionsCount += 1;\n }\n if (!hasExactOption) {\n hasExactOption = result.hasExactOption;\n }\n });\n if (this.allowNewOption) {\n if (searchValue && !hasExactOption) {\n this.setNewOption();\n visibleOptionsCount += 1;\n }\n else {\n this.removeNewOption();\n }\n }\n this.visibleOptionsCount = visibleOptionsCount;\n this.afterSetVisibleOptionsCount();\n }\n }, {\n key: \"setOptionProp\",\n value: function setOptionProp(index, key, value) {\n if (!this.options[index]) {\n return;\n }\n this.options[index][key] = value;\n }\n }, {\n key: \"setOptionsHeight\",\n value: function setOptionsHeight() {\n this.$optionsList.style.height = \"\".concat(this.optionHeight * this.visibleOptionsCount, \"px\");\n }\n }, {\n key: \"setOptionsContainerHeight\",\n value: function setOptionsContainerHeight(reset) {\n var optionsHeight;\n if (reset) {\n if (this.showAsPopup) {\n this.optionsCount = this.getOptionsCount();\n this.halfOptionsCount = Math.ceil(this.optionsCount / 2);\n optionsHeight = this.getOptionsHeight();\n this.optionsHeight = optionsHeight;\n }\n }\n else {\n optionsHeight = this.optionsHeight;\n if (this.keepAlwaysOpen) {\n DomUtils.setStyle(this.$noOptions, 'height', optionsHeight);\n DomUtils.setStyle(this.$noSearchResults, 'height', optionsHeight);\n }\n }\n DomUtils.setStyle(this.$optionsContainer, 'max-height', optionsHeight);\n this.afterSetOptionsContainerHeight(reset);\n }\n }, {\n key: \"setNewOption\",\n value: function setNewOption(newValue) {\n var value = newValue || this.searchValueOriginal.trim();\n if (!value) {\n return;\n }\n var newOption = this.getNewOption();\n if (newOption) {\n var newIndex = newOption.index;\n this.setOptionProp(newIndex, 'value', this.secureText(value));\n this.setOptionProp(newIndex, 'label', this.secureText(value));\n }\n else {\n var data = {\n value: value,\n label: value\n };\n if (newValue) {\n data.isNew = true;\n this.newValues.push(value);\n }\n else {\n data.isCurrentNew = true;\n }\n this.addOption(data);\n }\n }\n }, {\n key: \"setSelectedProp\",\n value: function setSelectedProp() {\n var valuesMapping = {};\n this.selectedValues.forEach(function (d) {\n valuesMapping[d] = true;\n });\n this.options.forEach(function (d) {\n if (valuesMapping[d.value] === true) {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = true;\n }\n });\n }\n }, {\n key: \"setNewOptionsFromValue\",\n value: function setNewOptionsFromValue(values) {\n if (!values) {\n return;\n }\n var setNewOption = this.setNewOption.bind(this);\n var availableValuesMapping = {};\n this.options.forEach(function (d) {\n availableValuesMapping[d.value] = true;\n });\n values.forEach(function (d) {\n if (d && availableValuesMapping[d] !== true) {\n setNewOption(d);\n }\n });\n }\n }, {\n key: \"setDropboxWrapperWidth\",\n value: function setDropboxWrapperWidth() {\n if (this.showAsPopup) {\n return;\n }\n var width = this.dropboxWidth || \"\".concat(this.$wrapper.offsetWidth, \"px\");\n DomUtils.setStyle(this.$dropboxContainer, 'max-width', width);\n }\n }, {\n key: \"setEleStyles\",\n value: function setEleStyles() {\n var maxWidth = this.maxWidth;\n var styles = {};\n if (maxWidth) {\n styles['max-width'] = maxWidth;\n }\n DomUtils.setStyles(this.$ele, styles);\n }\n }, {\n key: \"setDropboxStyles\",\n value: function setDropboxStyles() {\n var dropboxWidth = this.dropboxWidth;\n var styles = {};\n var containerStyles = {\n 'z-index': this.zIndex\n };\n if (dropboxWidth) {\n if (this.showAsPopup) {\n styles['max-width'] = dropboxWidth;\n }\n else {\n containerStyles.width = dropboxWidth;\n }\n }\n DomUtils.setStyles(this.$dropboxContainer, containerStyles);\n DomUtils.setStyles(this.$dropbox, styles);\n }\n }, {\n key: \"setOptionAttr\",\n value: function setOptionAttr() {\n var $visibleOptions = this.$visibleOptions;\n var options = this.options;\n var optionHeight = \"\".concat(this.optionHeight, \"px\");\n var setStyle = DomUtils.setStyle, getData = DomUtils.getData, setData = DomUtils.setData;\n if ($visibleOptions && $visibleOptions.length) {\n $visibleOptions.forEach(function ($option) {\n var optionDetails = options[getData($option, 'index')];\n setStyle($option, 'height', optionHeight);\n setData($option, 'value', optionDetails.value);\n });\n }\n }\n }, {\n key: \"setValueTagAttr\",\n value: function setValueTagAttr() {\n var $valueTags = this.$valueTags;\n if (!$valueTags || !$valueTags.length) {\n return;\n }\n var getData = DomUtils.getData, setData = DomUtils.setData;\n var options = this.options;\n $valueTags.forEach(function ($valueTag) {\n var index = getData($valueTag, 'index');\n if (typeof index !== 'undefined') {\n var optionDetails = options[index];\n setData($valueTag, 'value', optionDetails.value);\n }\n });\n }\n }, {\n key: \"setScrollTop\",\n value: function setScrollTop() {\n var selectedValues = this.selectedValues;\n if (this.showSelectedOptionsFirst || !this.focusSelectedOptionOnOpen || selectedValues.length === 0) {\n return;\n }\n var valuesMapping = {};\n var selectedOptionIndex;\n selectedValues.forEach(function (d) {\n valuesMapping[d] = true;\n });\n this.options.some(function (d) {\n if (valuesMapping[d.value]) {\n selectedOptionIndex = d.visibleIndex;\n return true;\n }\n return false;\n });\n if (selectedOptionIndex) {\n this.$optionsContainer.scrollTop = this.optionHeight * selectedOptionIndex;\n }\n }\n /** set methods - end */\n /** get methods - start */\n }, {\n key: \"getVisibleOptions\",\n value: function getVisibleOptions() {\n return this.visibleOptions || [];\n }\n }, {\n key: \"getValue\",\n value: function getValue() {\n var value;\n if (this.multiple) {\n if (this.useGroupValue) {\n value = this.getGroupValue();\n }\n else {\n value = this.selectedValues;\n }\n }\n else {\n value = this.selectedValues[0] || '';\n }\n return value;\n }\n }, {\n key: \"getGroupValue\",\n value: function getGroupValue() {\n var selectedValues = [];\n var selectedGroups = {};\n this.options.forEach(function (d) {\n if (!d.isSelected) {\n return;\n }\n var value = d.value;\n if (d.isGroupTitle) {\n if (value) {\n selectedGroups[d.index] = true;\n selectedValues.push(value);\n }\n }\n else if (selectedGroups[d.groupIndex] !== true) {\n selectedValues.push(value);\n }\n });\n return selectedValues;\n }\n }, {\n key: \"getInputValue\",\n value: function getInputValue(preparedValue) {\n var value = preparedValue;\n if (value && value.length) {\n if (this.setValueAsArray && this.multiple) {\n value = JSON.stringify(value);\n }\n }\n else {\n value = this.emptyValue;\n }\n return value;\n }\n }, {\n key: \"getFirstVisibleOptionIndex\",\n value: function getFirstVisibleOptionIndex() {\n return Math.ceil(this.$optionsContainer.scrollTop / this.optionHeight);\n }\n }, {\n key: \"getVisibleStartIndex\",\n value: function getVisibleStartIndex() {\n var firstVisibleOptionIndex = this.getFirstVisibleOptionIndex();\n var startIndex = firstVisibleOptionIndex - this.halfOptionsCount;\n if (startIndex < 0) {\n startIndex = 0;\n }\n return startIndex;\n }\n }, {\n key: \"getTooltipAttrText\",\n value: function getTooltipAttrText(text) {\n var ellipsisOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var allowHtml = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n var tootltipText = Utils.containsHTML(text) ? Utils.replaceDoubleQuotesWithHTML(text) : text;\n var data = {\n 'data-tooltip': tootltipText || '',\n 'data-tooltip-enter-delay': this.tooltipEnterDelay,\n 'data-tooltip-z-index': this.zIndex,\n 'data-tooltip-font-size': this.tooltipFontSize,\n 'data-tooltip-alignment': this.tooltipAlignment,\n 'data-tooltip-max-width': this.tooltipMaxWidth,\n 'data-tooltip-ellipsis-only': ellipsisOnly,\n 'data-tooltip-allow-html': allowHtml\n };\n return DomUtils.getAttributesText(data);\n }\n /**\n * @param {any} data\n * @returns {any}\n */\n }, {\n key: \"getOptionObj\",\n value: function getOptionObj(data) {\n if (!data) {\n return undefined;\n }\n var getString = Utils.getString;\n var secureText = this.secureText.bind(this);\n return {\n index: data.index,\n value: secureText(getString(data.value)),\n label: secureText(getString(data.label)),\n description: secureText(getString(data.description)),\n alias: this.getAlias(data.alias),\n isCurrentNew: data.isCurrentNew || false,\n isNew: data.isNew || false,\n isVisible: true\n };\n }\n }, {\n key: \"getNewOption\",\n value: function getNewOption() {\n var lastOption = this.options[this.lastOptionIndex];\n if (!lastOption || !lastOption.isCurrentNew) {\n return undefined;\n }\n return lastOption;\n }\n }, {\n key: \"getOptionIndex\",\n value: function getOptionIndex(value) {\n var index;\n this.options.some(function (d) {\n if (d.value === value) {\n index = d.index;\n return true;\n }\n return false;\n });\n return index;\n }\n }, {\n key: \"getNewValue\",\n value: function getNewValue() {\n var valuesMapping = {};\n this.newValues.forEach(function (d) {\n valuesMapping[d] = true;\n });\n var result = this.selectedValues.filter(function (d) {\n return valuesMapping[d] === true;\n });\n return this.multiple ? result : result[0];\n }\n }, {\n key: \"getAlias\",\n value: function getAlias(alias) {\n var result = alias;\n if (result) {\n if (Array.isArray(result)) {\n result = result.join(',');\n }\n else {\n result = result.toString().trim();\n }\n result = result.toLowerCase();\n }\n return result || '';\n }\n }, {\n key: \"getDisplayValue\",\n value: function getDisplayValue() {\n var displayValues = [];\n this.options.forEach(function (d) {\n if (d.isSelected) {\n displayValues.push(d.label);\n }\n });\n return this.multiple ? displayValues : displayValues[0] || '';\n }\n }, {\n key: \"getSelectedOptions\",\n value: function getSelectedOptions() {\n 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;\n var valueKey = this.valueKey, labelKey = this.labelKey, selectedValues = this.selectedValues;\n var selectedOptions = [];\n this.options.forEach(function (d) {\n if (d.isSelected && !d.isGroupTitle) {\n if (fullDetails) {\n selectedOptions.push(d);\n }\n else {\n var _data;\n var data = (_data = {}, _defineProperty(_data, valueKey, d.value), _defineProperty(_data, labelKey, d.label), _data);\n if (d.isNew) {\n data.isNew = true;\n }\n if (d.customData) {\n data.customData = d.customData;\n }\n selectedOptions.push(data);\n }\n }\n });\n if (keepSelectionOrder) {\n var valuesOrder = {};\n selectedValues.forEach(function (d, i) {\n valuesOrder[d] = i;\n });\n selectedOptions.sort(function (a, b) {\n return valuesOrder[a.value] - valuesOrder[b.value];\n });\n }\n return this.multiple || fullDetails ? selectedOptions : selectedOptions[0];\n }\n }, {\n key: \"getDisabledOptions\",\n value: function getDisabledOptions() {\n var valueKey = this.valueKey, labelKey = this.labelKey, disabledOptions = this.disabledOptions;\n var disabledOptionsValueMapping = {};\n var result = [];\n disabledOptions.forEach(function (value) {\n disabledOptionsValueMapping[value] = true;\n });\n this.options.forEach(function (_ref4) {\n var value = _ref4.value, label = _ref4.label;\n if (disabledOptionsValueMapping[value]) {\n var _result$push;\n result.push((_result$push = {}, _defineProperty(_result$push, valueKey, value), _defineProperty(_result$push, labelKey, label), _result$push));\n }\n });\n return result;\n }\n }, {\n key: \"getVisibleOptionGroupsMapping\",\n value: function getVisibleOptionGroupsMapping(searchValue) {\n var options = this.options;\n var result = {};\n var isOptionVisible = this.isOptionVisible.bind(this);\n options = this.structureOptionGroup(options);\n options.forEach(function (d) {\n result[d.index] = d.options.some(function (e) {\n return isOptionVisible({\n data: e,\n searchValue: searchValue\n }).isVisible;\n });\n });\n return result;\n }\n }, {\n key: \"getOptionsCount\",\n value: function getOptionsCount(count) {\n var result;\n if (this.showAsPopup) {\n var availableHeight = window.innerHeight * 80 / 100 - dropboxCloseButtonFullHeight;\n if (this.hasSearchContainer) {\n availableHeight -= searchHeight;\n }\n result = Math.floor(availableHeight / this.optionHeight);\n }\n else {\n result = parseInt(count);\n }\n return result;\n }\n }, {\n key: \"getOptionsHeight\",\n value: function getOptionsHeight() {\n return \"\".concat(this.optionsCount * this.optionHeight, \"px\");\n }\n /** getting next/prev valid option element */\n }, {\n key: \"getSibling\",\n value: function getSibling($ele, direction) {\n var propName = direction === 'next' ? 'nextElementSibling' : 'previousElementSibling';\n var $sibling = $ele;\n do {\n if ($sibling) {\n $sibling = $sibling[propName];\n }\n } while (DomUtils.hasClass($sibling, 'disabled') || DomUtils.hasClass($sibling, 'group-title'));\n return $sibling;\n }\n }, {\n key: \"getUniqueId\",\n value: function getUniqueId() {\n var uniqueId = Utils.getRandomInt(10000);\n var isAlreadyUsed = document.querySelector(\"#vscomp-ele-wrapper-\".concat(uniqueId));\n if (isAlreadyUsed) {\n return this.getUniqueId();\n }\n return uniqueId;\n }\n /** get methods - end */\n }, {\n key: \"initDropboxPopover\",\n value: function initDropboxPopover() {\n var data = {\n ele: this.$ele,\n target: this.$dropboxContainer,\n position: this.position,\n zIndex: this.zIndex,\n margin: 4,\n transitionDistance: 30,\n hideArrowIcon: true,\n disableManualAction: true,\n disableUpdatePosition: !this.hasDropboxWrapper,\n updatePositionThrottle: this.updatePositionThrottle,\n afterShow: this.afterShowPopper.bind(this),\n afterHide: this.afterHidePopper.bind(this)\n };\n this.dropboxPopover = new PopoverComponent(data);\n }\n }, {\n key: \"openDropbox\",\n value: function openDropbox(isSilent) {\n this.isSilentOpen = isSilent;\n if (isSilent) {\n DomUtils.setStyle(this.$dropboxContainer, 'display', 'inline-flex');\n }\n else {\n DomUtils.dispatchEvent(this.$ele, 'beforeOpen');\n DomUtils.setAria(this.$wrapper, 'expanded', true);\n }\n this.setDropboxWrapperWidth();\n DomUtils.removeClass(this.$allWrappers, 'closed');\n DomUtils.changeTabIndex(this.$allWrappers, 0);\n if (this.dropboxPopover && !isSilent) {\n this.dropboxPopover.show();\n }\n else {\n this.afterShowPopper();\n }\n }\n }, {\n key: \"afterShowPopper\",\n value: function afterShowPopper() {\n var isSilent = this.isSilentOpen;\n this.isSilentOpen = false;\n if (!isSilent) {\n this.moveSelectedOptionsFirst();\n this.setScrollTop();\n DomUtils.addClass(this.$allWrappers, 'focused');\n if (this.showAsPopup) {\n DomUtils.addClass(this.$body, 'vscomp-popup-active');\n this.isPopupActive = true;\n }\n else {\n this.focusElementOnOpen();\n }\n DomUtils.dispatchEvent(this.$ele, 'afterOpen');\n }\n }\n }, {\n key: \"closeDropbox\",\n value: function closeDropbox(isSilent) {\n this.isSilentClose = isSilent;\n if (this.keepAlwaysOpen) {\n this.removeOptionFocus();\n return;\n }\n if (isSilent) {\n DomUtils.setStyle(this.$dropboxContainer, 'display', '');\n }\n else {\n DomUtils.dispatchEvent(this.$ele, 'beforeClose');\n DomUtils.setAria(this.$wrapper, 'expanded', false);\n DomUtils.setAria(this.$wrapper, 'activedescendant', '');\n }\n if (this.dropboxPopover && !isSilent) {\n this.dropboxPopover.hide();\n }\n else {\n this.afterHidePopper();\n }\n }\n }, {\n key: \"afterHidePopper\",\n value: function afterHidePopper() {\n var isSilent = this.isSilentClose;\n this.isSilentClose = false;\n DomUtils.removeClass(this.$allWrappers, 'focused');\n this.removeOptionFocus();\n if (!isSilent && this.isPopupActive) {\n DomUtils.removeClass(this.$body, 'vscomp-popup-active');\n this.isPopupActive = false;\n }\n DomUtils.addClass(this.$allWrappers, 'closed');\n if (!isSilent) {\n DomUtils.dispatchEvent(this.$ele, 'afterClose');\n // Only focus there are no pre-selected options or when selecting new options\n if (this.initialSelectedValue && this.initialSelectedValue.length === 0 || this.selectedValues.length > 0) {\n this.focus();\n }\n }\n }\n }, {\n key: \"moveSelectedOptionsFirst\",\n value: function moveSelectedOptionsFirst() {\n if (!this.showSelectedOptionsFirst) {\n return;\n }\n this.setSortedOptions();\n if (!this.$optionsContainer.scrollTop || !this.selectedValues.length) {\n this.setVisibleOptions();\n }\n else {\n this.scrollToTop();\n }\n }\n }, {\n key: \"toggleDropbox\",\n value: function toggleDropbox() {\n if (this.isOpened()) {\n this.closeDropbox();\n }\n else {\n this.openDropbox();\n }\n }\n }, {\n key: \"updatePosition\",\n value: function updatePosition() {\n if (!this.dropboxPopover || !this.isOpened()) {\n return;\n }\n this.$ele.updatePosition();\n }\n }, {\n key: \"isOpened\",\n value: function isOpened() {\n return !DomUtils.hasClass(this.$wrapper, 'closed');\n }\n }, {\n key: \"focusSearchInput\",\n value: function focusSearchInput() {\n var $ele = this.$searchInput;\n if ($ele) {\n $ele.focus();\n }\n }\n }, {\n key: \"focusElementOnOpen\",\n value: function focusElementOnOpen() {\n var $ele = this.$searchInput;\n var hasNoOptions = !this.options.length && !this.hasServerSearch;\n if ($ele) {\n if (hasNoOptions && !this.allowNewOption) {\n DomUtils.setAttr($ele, 'disabled', '');\n this.$noOptions.focus();\n }\n else {\n $ele.removeAttribute('disabled');\n $ele.focus();\n }\n }\n else {\n var $focusableEle = this.$dropbox.querySelector('[tabindex=\"0\"]');\n var optIndex = DomUtils.getData($focusableEle, 'index');\n if (optIndex !== undefined) {\n this.focusOption({\n direction: 'next'\n });\n }\n else if ($focusableEle) {\n $focusableEle.focus();\n }\n else {\n this.focusFirstVisibleOption();\n }\n }\n }\n }, {\n key: \"focusFirstVisibleOption\",\n value: function focusFirstVisibleOption() {\n var $focusableEle = this.$optionsContainer.querySelector(\"[data-index='\".concat(this.getFirstVisibleOptionIndex(), \"']\"));\n if ($focusableEle) {\n if (DomUtils.hasClass($focusableEle, 'group-title')) {\n $focusableEle = this.getSibling($focusableEle, 'next');\n }\n DomUtils.setAttr($focusableEle, 'tabindex', '0');\n this.$optionsContainer.scrollTop = this.optionHeight * this.getFirstVisibleOptionIndex();\n this.focusOption({\n focusFirst: true\n });\n $focusableEle.focus();\n }\n else {\n $focusableEle = this.$dropbox.querySelector('[tabindex=\"0\"]');\n if ($focusableEle) {\n $focusableEle.focus();\n }\n }\n }\n }, {\n key: \"focusOption\",\n value: function focusOption() {\n var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, direction = _ref5.direction, $option = _ref5.$option, focusFirst = _ref5.focusFirst;\n var $focusedEle = this.$dropboxContainer.querySelector('.vscomp-option.focused');\n var $newFocusedEle;\n if ($option) {\n $newFocusedEle = $option;\n }\n else if (!$focusedEle || focusFirst) {\n /* if no element on focus choose first visible one */\n var firstVisibleOptionIndex = this.getFirstVisibleOptionIndex();\n $newFocusedEle = this.$dropboxContainer.querySelector(\".vscomp-option[data-visible-index=\\\"\".concat(firstVisibleOptionIndex, \"\\\"]\"));\n if (DomUtils.hasClass($newFocusedEle, 'disabled') || DomUtils.hasClass($newFocusedEle, 'group-title')) {\n $newFocusedEle = this.getSibling($newFocusedEle, 'next');\n }\n }\n else {\n $newFocusedEle = this.getSibling($focusedEle, direction);\n }\n if ($newFocusedEle && $newFocusedEle !== $focusedEle) {\n if ($focusedEle) {\n this.toggleOptionFocusedState($focusedEle, false);\n }\n this.toggleOptionFocusedState($newFocusedEle, true);\n this.toggleFocusedProp(DomUtils.getData($newFocusedEle, 'index'), true);\n this.moveFocusedOptionToView($newFocusedEle);\n }\n }\n }, {\n key: \"moveFocusedOptionToView\",\n value: function moveFocusedOptionToView($ele) {\n var $focusedEle = $ele || this.$dropboxContainer.querySelector('.vscomp-option.focused');\n if (!$focusedEle) {\n return;\n }\n var newScrollTop;\n var containerRect = this.$optionsContainer.getBoundingClientRect();\n var optionRect = $focusedEle.getBoundingClientRect();\n var containerTop = containerRect.top;\n var containerBottom = containerRect.bottom;\n var containerHeight = containerRect.height;\n var optionTop = optionRect.top;\n var optionBottom = optionRect.bottom;\n var optionHeight = optionRect.height;\n var optionOffsetTop = $focusedEle.offsetTop;\n var optionsTop = DomUtils.getData(this.$options, 'top', 'number');\n /* if option hidden on top */\n if (containerTop > optionTop) {\n newScrollTop = optionOffsetTop + optionsTop;\n }\n else if (containerBottom < optionBottom) {\n /* if option hidden on bottom */\n newScrollTop = optionOffsetTop - containerHeight + optionHeight + optionsTop;\n }\n if (newScrollTop !== undefined) {\n this.$optionsContainer.scrollTop = newScrollTop;\n }\n }\n }, {\n key: \"removeOptionFocus\",\n value: function removeOptionFocus() {\n var $focusedEle = this.$dropboxContainer.querySelector('.vscomp-option.focused');\n if (!$focusedEle) {\n return;\n }\n this.toggleOptionFocusedState($focusedEle, false);\n this.toggleFocusedProp(null);\n }\n }, {\n key: \"selectOption\",\n value: function selectOption($ele) {\n var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, event = _ref6.event;\n if (!$ele) {\n return;\n }\n var isAdding = !DomUtils.hasClass($ele, 'selected');\n if (isAdding) {\n if (this.multiple && this.isMaxValuesSelected) {\n return;\n }\n }\n else if (!this.multiple) {\n /** on selecting same value in single select */\n this.closeDropbox();\n return;\n }\n var selectedValues = this.selectedValues;\n var selectedValue = DomUtils.getData($ele, 'value');\n var selectedIndex = DomUtils.getData($ele, 'index', 'number');\n var isNewOption = DomUtils.hasClass($ele, 'current-new');\n var shouldSelectRange = false;\n var lastSelectedOptionIndex = this.lastSelectedOptionIndex;\n this.lastSelectedOptionIndex = null;\n this.toggleSelectedProp(selectedIndex, isAdding);\n if (isAdding) {\n if (this.multiple) {\n selectedValues.push(selectedValue);\n this.toggleAllOptionsClass();\n this.toggleGroupOptionsParent($ele);\n if (event && event.shiftKey) {\n shouldSelectRange = true;\n }\n }\n else {\n if (selectedValues.length) {\n this.toggleSelectedProp(this.getOptionIndex(selectedValues[0]), false);\n }\n selectedValues = [selectedValue];\n var $prevSelectedOption = this.$dropboxContainer.querySelector('.vscomp-option.selected');\n if ($prevSelectedOption) {\n this.toggleOptionSelectedState($prevSelectedOption, false);\n }\n this.closeDropbox();\n if (!isNewOption) {\n this.setSearchValue('');\n }\n }\n this.lastSelectedOptionIndex = selectedIndex;\n this.toggleOptionSelectedState($ele);\n }\n else if (this.multiple) {\n this.toggleOptionSelectedState($ele);\n Utils.removeItemFromArray(selectedValues, selectedValue);\n this.toggleAllOptionsClass(false);\n this.toggleGroupOptionsParent($ele, false);\n }\n if (isNewOption) {\n this.beforeSelectNewValue();\n }\n this.setValue(selectedValues);\n if (shouldSelectRange) {\n this.selectRangeOptions(lastSelectedOptionIndex, selectedIndex);\n }\n }\n }, {\n key: \"selectFocusedOption\",\n value: function selectFocusedOption() {\n this.selectOption(this.$dropboxContainer.querySelector('.vscomp-option.focused'));\n }\n }, {\n key: \"selectRangeOptions\",\n value: function selectRangeOptions(lastSelectedOptionIndex, selectedIndex) {\n var _this11 = this;\n if (typeof lastSelectedOptionIndex !== 'number' || this.maxValues) {\n return;\n }\n var selectedValues = this.selectedValues, hasOptionGroup = this.hasOptionGroup;\n var groupIndexes = {};\n var startIndex;\n var endIndex;\n if (lastSelectedOptionIndex < selectedIndex) {\n startIndex = lastSelectedOptionIndex;\n endIndex = selectedIndex;\n }\n else {\n startIndex = selectedIndex;\n endIndex = lastSelectedOptionIndex;\n }\n this.options.forEach(function (d) {\n if (d.isDisabled || d.isGroupTitle || !d.isVisible || d.isSelected) {\n return;\n }\n var index = d.index;\n if (index > startIndex && index < endIndex) {\n if (hasOptionGroup) {\n var groupIndex = d.groupIndex;\n if (typeof groupIndex === 'number') {\n groupIndexes[groupIndex] = true;\n }\n }\n // eslint-disable-next-line no-param-reassign\n d.isSelected = true;\n selectedValues.push(d.value);\n }\n });\n this.toggleAllOptionsClass();\n this.setValue(selectedValues);\n groupIndexes = Object.keys(groupIndexes);\n if (groupIndexes.length) {\n var toggleGroupTitleProp = this.toggleGroupTitleProp.bind(this);\n groupIndexes.forEach(function (i) {\n toggleGroupTitleProp(parseInt(i));\n });\n }\n /** using setTimeout to fix the issue of dropbox getting closed on select */\n setTimeout(function () {\n _this11.renderOptions();\n }, 0);\n }\n }, {\n key: \"toggleAllOptions\",\n value: function toggleAllOptions(selectAll) {\n if (!this.multiple || this.disableSelectAll) {\n return;\n }\n var selectingAll = typeof isSelected === 'boolean' ? selectAll : !DomUtils.hasClass(this.$toggleAllCheckbox, 'checked');\n var selectedValues = [];\n var selectAllOnlyVisible = this.selectAllOnlyVisible;\n this.options.forEach(function (d) {\n var option = d;\n if (option.isDisabled || option.isCurrentNew) {\n return;\n }\n var isVisible = option.isVisible, isSelected = option.isSelected;\n /** unselected items are */\n 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)) {\n option.isSelected = false;\n }\n else {\n option.isSelected = true;\n if (!option.isGroupTitle) {\n selectedValues.push(option.value);\n }\n }\n });\n this.toggleAllOptionsClass(selectingAll);\n this.setValue(selectedValues);\n this.renderOptions();\n }\n }, {\n key: \"toggleAllOptionsClass\",\n value: function toggleAllOptionsClass(isAllSelected) {\n if (!this.multiple) {\n return;\n }\n var valuePassed = typeof isAllSelected === 'boolean';\n var isAllVisibleSelected = false;\n if (!valuePassed) {\n // eslint-disable-next-line no-param-reassign\n isAllSelected = this.isAllOptionsSelected();\n }\n /** When all options not selected, checking if all visible options selected\n * Also, in a search mode, validate that we still have visible items\n */\n if (!isAllSelected && this.selectAllOnlyVisible && this.searchValue !== '' && (this.visibleOptionsCount > 0 || this.searchValue === '')) {\n isAllVisibleSelected = this.isAllOptionsSelected(true);\n }\n DomUtils.toggleClass(this.$toggleAllCheckbox, 'checked', isAllSelected || isAllVisibleSelected);\n this.isAllSelected = isAllSelected;\n }\n }, {\n key: \"isAllOptionsSelected\",\n value: function isAllOptionsSelected(visibleOnly) {\n var isAllSelected = false;\n if (this.options.length && this.selectedValues.length) {\n isAllSelected = !this.options.some(\n /**\n * stop looping if any option is not selected\n * for selectAllOnlyVisible case hidden option need not to be selected\n */\n function (d) {\n return !d.isSelected && !d.isDisabled && !d.isGroupTitle && (!visibleOnly || d.isVisible);\n });\n }\n return isAllSelected;\n }\n }, {\n key: \"isAllGroupOptionsSelected\",\n value: function isAllGroupOptionsSelected(groupIndex) {\n var isAllSelected = false;\n if (this.options.length) {\n isAllSelected = !this.options.some(function (d) {\n return !d.isSelected && !d.isDisabled && !d.isGroupTitle && d.groupIndex === groupIndex;\n });\n }\n return isAllSelected;\n }\n }, {\n key: \"toggleGroupOptionsParent\",\n value: function toggleGroupOptionsParent($option, isSelected) {\n if (!this.hasOptionGroup || this.disableOptionGroupCheckbox || !$option) {\n return;\n }\n var groupIndex = DomUtils.getData($option, 'groupIndex');\n if (groupIndex !== undefined) {\n groupIndex = parseInt(groupIndex);\n }\n var $group = this.$options.querySelector(\".vscomp-option[data-index=\\\"\".concat(groupIndex, \"\\\"]\"));\n var isAllSelected = typeof isSelected === 'boolean' ? isSelected : this.isAllGroupOptionsSelected(groupIndex);\n this.toggleGroupTitleCheckbox($group, isAllSelected);\n this.toggleGroupTitleProp(groupIndex, isAllSelected);\n }\n }, {\n key: \"toggleGroupTitleProp\",\n value: function toggleGroupTitleProp(groupIndex, isSelected) {\n var isAllSelected = typeof isSelected === 'boolean' ? isSelected : this.isAllGroupOptionsSelected(groupIndex);\n this.toggleSelectedProp(groupIndex, isAllSelected);\n }\n }, {\n key: \"toggleGroupOptions\",\n value: function toggleGroupOptions($ele, isSelected) {\n var _this12 = this;\n if (!this.hasOptionGroup || this.disableOptionGroupCheckbox || !$ele) {\n return;\n }\n var groupIndex = DomUtils.getData($ele, 'index', 'number');\n var selectedValues = this.selectedValues, selectAllOnlyVisible = this.selectAllOnlyVisible;\n var valuesMapping = {};\n var removeItemFromArray = Utils.removeItemFromArray;\n selectedValues.forEach(function (d) {\n valuesMapping[d] = true;\n });\n this.options.forEach(function (d) {\n if (d.isDisabled || d.groupIndex !== groupIndex) {\n return;\n }\n var value = d.value;\n if (!isSelected || selectAllOnlyVisible && !d.isVisible) {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = false;\n if (valuesMapping[value]) {\n removeItemFromArray(selectedValues, value);\n }\n }\n else {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = true;\n if (!valuesMapping[value]) {\n selectedValues.push(value);\n }\n }\n });\n this.toggleAllOptionsClass(isSelected ? null : false);\n this.setValue(selectedValues);\n /** using setTimeout to fix the issue of dropbox getting closed on select */\n setTimeout(function () {\n _this12.renderOptions();\n }, 0);\n }\n }, {\n key: \"toggleGroupTitleCheckbox\",\n value: function toggleGroupTitleCheckbox($ele, isSelected) {\n if (!$ele) {\n return;\n }\n var selectedIndex = DomUtils.getData($ele, 'index', 'number');\n this.toggleSelectedProp(selectedIndex, isSelected);\n this.toggleOptionSelectedState($ele, isSelected);\n }\n }, {\n key: \"toggleFocusedProp\",\n value: function toggleFocusedProp(index) {\n var isFocused = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n if (this.focusedOptionIndex) {\n this.setOptionProp(this.focusedOptionIndex, 'isFocused', false);\n }\n this.setOptionProp(index, 'isFocused', isFocused);\n this.focusedOptionIndex = index;\n }\n }, {\n key: \"toggleSelectedProp\",\n value: function toggleSelectedProp(index) {\n var isSelected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n this.setOptionProp(index, 'isSelected', isSelected);\n }\n }, {\n key: \"scrollToTop\",\n value: function scrollToTop() {\n var isClosed = !this.isOpened();\n if (isClosed) {\n this.openDropbox(true);\n }\n var scrollTop = this.$optionsContainer.scrollTop;\n if (scrollTop > 0) {\n this.$optionsContainer.scrollTop = 0;\n }\n if (isClosed) {\n this.closeDropbox(true);\n }\n }\n }, {\n key: \"reset\",\n value: function reset() {\n var formReset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var disableChangeEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n this.options.forEach(function (d) {\n // eslint-disable-next-line no-param-reassign\n d.isSelected = false;\n });\n this.beforeValueSet(true);\n this.setValue(null, {\n disableEvent: disableChangeEvent,\n disableValidation: formReset\n });\n this.afterValueSet();\n if (formReset) {\n DomUtils.removeClass(this.$allWrappers, 'has-error');\n }\n DomUtils.dispatchEvent(this.$ele, 'reset');\n }\n }, {\n key: \"addOption\",\n value: function addOption(data, rerender) {\n if (!data) {\n return;\n }\n this.lastOptionIndex += 1;\n var newOption = this.getOptionObj(_objectSpread(_objectSpread({}, data), {}, {\n index: this.lastOptionIndex\n }));\n this.options.push(newOption);\n this.sortedOptions.push(newOption);\n if (rerender) {\n this.visibleOptionsCount += 1;\n this.afterSetOptions();\n }\n }\n }, {\n key: \"removeOption\",\n value: function removeOption(index) {\n if (!index && index !== 0) {\n return;\n }\n this.options.splice(index, 1);\n this.lastOptionIndex -= 1;\n }\n }, {\n key: \"removeNewOption\",\n value: function removeNewOption() {\n var newOption = this.getNewOption();\n if (newOption) {\n this.removeOption(newOption.index);\n }\n }\n }, {\n key: \"sortOptions\",\n value: function sortOptions(options) {\n return options.sort(function (a, b) {\n var aIsSelected = a.isSelected || a.isAnySelected;\n var bIsSelected = b.isSelected || b.isAnySelected;\n if (!aIsSelected && !bIsSelected) {\n return 0;\n }\n if (aIsSelected && (!bIsSelected || a.index < b.index)) {\n return -1;\n }\n return 1;\n });\n }\n }, {\n key: \"sortOptionsGroup\",\n value: function sortOptionsGroup(options) {\n var sortOptions = this.sortOptions.bind(this);\n var structuredOptions = this.structureOptionGroup(options);\n structuredOptions.forEach(function (d) {\n var childOptions = d.options;\n // eslint-disable-next-line no-param-reassign\n d.isAnySelected = childOptions.some(function (e) {\n return e.isSelected;\n });\n if (d.isAnySelected) {\n sortOptions(childOptions);\n }\n });\n sortOptions(structuredOptions);\n return this.destructureOptionGroup(structuredOptions);\n }\n }, {\n key: \"isOptionVisible\",\n value: function isOptionVisible(_ref7) {\n var data = _ref7.data, searchValue = _ref7.searchValue, hasExactOption = _ref7.hasExactOption, visibleOptionGroupsMapping = _ref7.visibleOptionGroupsMapping, searchGroup = _ref7.searchGroup, searchByStartsWith = _ref7.searchByStartsWith;\n var value = data.value.toLowerCase();\n var label = this.searchNormalize ? data.labelNormalized : data.label.toLowerCase();\n var description = data.description, alias = data.alias;\n var isVisible = searchByStartsWith ? label.startsWith(searchValue) : label.includes(searchValue);\n if (data.isGroupTitle && (!searchGroup || !isVisible)) {\n isVisible = visibleOptionGroupsMapping[data.index];\n }\n if (!searchByStartsWith && alias && !isVisible) {\n isVisible = alias.includes(searchValue);\n }\n if (!searchByStartsWith && description && !isVisible) {\n isVisible = description.toLowerCase().includes(searchValue);\n }\n // eslint-disable-next-line no-param-reassign\n data.isVisible = isVisible;\n if (!hasExactOption) {\n // eslint-disable-next-line no-param-reassign\n hasExactOption = label === searchValue || value === searchValue;\n }\n return {\n isVisible: isVisible,\n hasExactOption: hasExactOption\n };\n }\n }, {\n key: \"structureOptionGroup\",\n value: function structureOptionGroup(options) {\n var result = [];\n var childOptions = {};\n /** getting all group title */\n options.forEach(function (d) {\n if (d.isGroupTitle) {\n var childArray = [];\n // eslint-disable-next-line no-param-reassign\n d.options = childArray;\n childOptions[d.index] = childArray;\n result.push(d);\n }\n });\n /** getting all group options */\n options.forEach(function (d) {\n if (d.isGroupOption) {\n childOptions[d.groupIndex].push(d);\n }\n });\n return result;\n }\n }, {\n key: \"destructureOptionGroup\",\n value: function destructureOptionGroup(options) {\n var result = [];\n options.forEach(function (d) {\n result.push(d);\n result = result.concat(d.options);\n });\n return result;\n }\n }, {\n key: \"serverSearch\",\n value: function serverSearch() {\n DomUtils.removeClass(this.$allWrappers, 'has-no-search-results');\n DomUtils.addClass(this.$allWrappers, 'server-searching');\n this.setSelectedOptions();\n this.onServerSearch(this.searchValue, this);\n }\n }, {\n key: \"removeValue\",\n value: function removeValue($ele) {\n var selectedValues = this.selectedValues;\n var selectedValue = DomUtils.getData($ele, 'value');\n Utils.removeItemFromArray(selectedValues, selectedValue);\n this.setValueMethod(selectedValues);\n }\n }, {\n key: \"focus\",\n value: function focus() {\n this.$wrapper.focus();\n }\n }, {\n key: \"enable\",\n value: function enable() {\n this.$ele.disabled = false;\n this.$ele.removeAttribute('disabled');\n this.$hiddenInput.removeAttribute('disabled');\n DomUtils.setAria(this.$wrapper, 'disabled', false);\n DomUtils.changeTabIndex(this.$wrapper, 0);\n }\n }, {\n key: \"disable\",\n value: function disable() {\n this.$ele.disabled = true;\n this.$ele.setAttribute('disabled', '');\n this.$hiddenInput.setAttribute('disabled', '');\n DomUtils.setAria(this.$wrapper, 'disabled', true);\n DomUtils.changeTabIndex(this.$wrapper, -1);\n this.$wrapper.blur();\n }\n }, {\n key: \"validate\",\n value: function validate() {\n if (this.disableValidation) {\n return true;\n }\n var hasError = false;\n var selectedValues = this.selectedValues, minValues = this.minValues;\n if (this.required && (Utils.isEmpty(selectedValues) || ( /** required minium options not selected */this.multiple && minValues && selectedValues.length < minValues))) {\n hasError = true;\n }\n DomUtils.toggleClass(this.$allWrappers, 'has-error', hasError);\n return !hasError;\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n var $ele = this.$ele;\n $ele.virtualSelect = undefined;\n $ele.value = undefined;\n $ele.innerHTML = '';\n if (this.hasDropboxWrapper) {\n this.$dropboxWrapper.remove();\n this.removeEvents();\n }\n if (this.dropboxPopover) {\n this.dropboxPopover.destroy();\n }\n DomUtils.removeClass($ele, 'vscomp-ele');\n }\n }, {\n key: \"createSecureTextElements\",\n value: function createSecureTextElements() {\n this.$secureDiv = document.createElement('div');\n this.$secureText = document.createTextNode('');\n this.$secureDiv.appendChild(this.$secureText);\n }\n }, {\n key: \"secureText\",\n value: function secureText(text) {\n if (!text || !this.enableSecureText) {\n return text;\n }\n this.$secureText.nodeValue = text;\n return this.$secureDiv.innerHTML;\n }\n }, {\n key: \"toggleRequired\",\n value: function toggleRequired(isRequired) {\n this.required = Utils.convertToBoolean(isRequired);\n this.$ele.required = this.required;\n }\n }, {\n key: \"toggleOptionSelectedState\",\n value: function toggleOptionSelectedState($ele, value) {\n var isSelected = value;\n if (typeof isSelected === 'undefined') {\n isSelected = !DomUtils.hasClass($ele, 'selected');\n }\n DomUtils.toggleClass($ele, 'selected', isSelected);\n DomUtils.setAria($ele, 'selected', isSelected);\n }\n }, {\n key: \"toggleOptionFocusedState\",\n value: function toggleOptionFocusedState($ele, isFocused) {\n if (!$ele) {\n return;\n }\n DomUtils.toggleClass($ele, 'focused', isFocused);\n DomUtils.setAttr($ele, 'tabindex', isFocused ? '0' : '-1');\n if (document.activeElement !== this.$searchInput) {\n $ele.focus();\n }\n if (isFocused) {\n DomUtils.setAria(this.$wrapper, 'activedescendant', $ele.id);\n }\n }\n /** static methods - start */\n }], [{\n key: \"init\",\n value: function init(options) {\n var $eleArray = options.ele;\n if (!$eleArray) {\n return undefined;\n }\n var singleEle = false;\n if (typeof $eleArray === 'string') {\n $eleArray = document.querySelectorAll($eleArray);\n var eleLength = $eleArray.length;\n if (eleLength === 0) {\n return undefined;\n }\n if (eleLength === 1) {\n singleEle = true;\n }\n }\n if ($eleArray.length === undefined || $eleArray.forEach === undefined) {\n $eleArray = [$eleArray];\n singleEle = true;\n }\n var instances = [];\n $eleArray.forEach(function ($ele) {\n /** skipping initialization on calling init method multiple times */\n if ($ele.virtualSelect) {\n instances.push($ele.virtualSelect);\n return;\n }\n // eslint-disable-next-line no-param-reassign\n options.ele = $ele;\n if ($ele.tagName === 'SELECT') {\n VirtualSelect.setPropsFromSelect(options);\n }\n instances.push(new VirtualSelect(options));\n });\n return singleEle ? instances[0] : instances;\n }\n }, {\n key: \"getAttrProps\",\n value: function getAttrProps() {\n var convertPropToDataAttr = DomUtils.convertPropToDataAttr;\n var result = {};\n nativeProps.forEach(function (d) {\n result[d] = d;\n });\n dataProps.forEach(function (d) {\n result[convertPropToDataAttr(d)] = d;\n });\n return result;\n }\n }, {\n key: \"setPropsFromSelect\",\n value: function setPropsFromSelect(props) {\n var $ele = props.ele;\n var disabledOptions = [];\n var selectedValue = [];\n var getNativeOptions = function getNativeOptions($container) {\n var options = [];\n var $options = Array.from($container.children);\n $options.forEach(function ($option) {\n var value = $option.value;\n var option = {\n value: value\n };\n if ($option.tagName === 'OPTGROUP') {\n option.label = $option.getAttribute('label');\n option.options = getNativeOptions($option);\n }\n else {\n option.label = $option.innerHTML;\n }\n options.push(option);\n if ($option.disabled) {\n disabledOptions.push(value);\n }\n if ($option.selected) {\n selectedValue.push(value);\n }\n });\n return options;\n };\n var optionsList = getNativeOptions($ele);\n /** creating div element to initiate plugin and removing native element */\n var $newEle = document.createElement('div');\n DomUtils.setAttrFromEle($ele, $newEle, Object.keys(attrPropsMapping), valueLessProps);\n $ele.parentNode.insertBefore($newEle, $ele);\n $ele.remove();\n // eslint-disable-next-line no-param-reassign\n props.ele = $newEle;\n // eslint-disable-next-line no-param-reassign\n props.options = optionsList;\n // eslint-disable-next-line no-param-reassign\n props.disabledOptions = disabledOptions;\n // eslint-disable-next-line no-param-reassign\n props.selectedValue = selectedValue;\n }\n }, {\n key: \"onFormReset\",\n value: function onFormReset(e) {\n var $form = e.target.closest('form');\n if (!$form) {\n return;\n }\n $form.querySelectorAll('.vscomp-ele-wrapper').forEach(function ($ele) {\n $ele.parentElement.virtualSelect.reset(true);\n });\n }\n }, {\n key: \"onFormSubmit\",\n value: function onFormSubmit(e) {\n if (!VirtualSelect.validate(e.target.closest('form'))) {\n e.preventDefault();\n }\n }\n }, {\n key: \"validate\",\n value: function validate($container) {\n if (!$container) {\n return true;\n }\n var hasError = false;\n $container.querySelectorAll('.vscomp-ele-wrapper').forEach(function ($ele) {\n var result = $ele.parentElement.virtualSelect.validate();\n if (!hasError && !result) {\n hasError = true;\n }\n });\n return !hasError;\n }\n }, {\n key: \"reset\",\n value: function reset() {\n var formReset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var disableChangeEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n this.virtualSelect.reset(formReset, disableChangeEvent);\n }\n }, {\n key: \"setValueMethod\",\n value: function setValueMethod() {\n var _this$virtualSelect;\n (_this$virtualSelect = this.virtualSelect).setValueMethod.apply(_this$virtualSelect, arguments);\n }\n }, {\n key: \"setOptionsMethod\",\n value: function setOptionsMethod() {\n var _this$virtualSelect2;\n (_this$virtualSelect2 = this.virtualSelect).setOptionsMethod.apply(_this$virtualSelect2, arguments);\n }\n }, {\n key: \"setDisabledOptionsMethod\",\n value: function setDisabledOptionsMethod() {\n var _this$virtualSelect3;\n (_this$virtualSelect3 = this.virtualSelect).setDisabledOptionsMethod.apply(_this$virtualSelect3, arguments);\n }\n }, {\n key: \"setEnabledOptionsMethod\",\n value: function setEnabledOptionsMethod() {\n var _this$virtualSelect4;\n (_this$virtualSelect4 = this.virtualSelect).setEnabledOptionsMethod.apply(_this$virtualSelect4, arguments);\n }\n }, {\n key: \"toggleSelectAll\",\n value: function toggleSelectAll(isSelected) {\n this.virtualSelect.toggleAllOptions(isSelected);\n }\n }, {\n key: \"isAllSelected\",\n value: function isAllSelected() {\n return this.virtualSelect.isAllSelected;\n }\n }, {\n key: \"addOptionMethod\",\n value: function addOptionMethod(data) {\n this.virtualSelect.addOption(data, true);\n }\n }, {\n key: \"getNewValueMethod\",\n value: function getNewValueMethod() {\n return this.virtualSelect.getNewValue();\n }\n }, {\n key: \"getDisplayValueMethod\",\n value: function getDisplayValueMethod() {\n return this.virtualSelect.getDisplayValue();\n }\n }, {\n key: \"getSelectedOptionsMethod\",\n value: function getSelectedOptionsMethod(params) {\n return this.virtualSelect.getSelectedOptions(params);\n }\n }, {\n key: \"getDisabledOptionsMethod\",\n value: function getDisabledOptionsMethod() {\n return this.virtualSelect.getDisabledOptions();\n }\n }, {\n key: \"openMethod\",\n value: function openMethod() {\n return this.virtualSelect.openDropbox();\n }\n }, {\n key: \"closeMethod\",\n value: function closeMethod() {\n return this.virtualSelect.closeDropbox();\n }\n }, {\n key: \"focusMethod\",\n value: function focusMethod() {\n return this.virtualSelect.focus();\n }\n }, {\n key: \"enableMethod\",\n value: function enableMethod() {\n return this.virtualSelect.enable();\n }\n }, {\n key: \"disableMethod\",\n value: function disableMethod() {\n return this.virtualSelect.disable();\n }\n }, {\n key: \"destroyMethod\",\n value: function destroyMethod() {\n return this.virtualSelect.destroy();\n }\n }, {\n key: \"validateMethod\",\n value: function validateMethod() {\n return this.virtualSelect.validate();\n }\n }, {\n key: \"toggleRequiredMethod\",\n value: function toggleRequiredMethod(isRequired) {\n return this.virtualSelect.toggleRequired(isRequired);\n }\n }, {\n key: \"onResizeMethod\",\n value: function onResizeMethod() {\n document.querySelectorAll('.vscomp-ele-wrapper').forEach(function ($ele) {\n $ele.parentElement.virtualSelect.onResize();\n });\n }\n /** static methods - end */\n }]);\n return VirtualSelect;\n }();\n document.addEventListener('reset', VirtualSelect.onFormReset);\n document.addEventListener('submit', VirtualSelect.onFormSubmit);\n window.addEventListener('resize', VirtualSelect.onResizeMethod);\n attrPropsMapping = VirtualSelect.getAttrProps();\n window.VirtualSelect = VirtualSelect;\n /** polyfill to fix an issue in ie browser */\n if (typeof NodeList !== 'undefined' && NodeList.prototype && !NodeList.prototype.forEach) {\n NodeList.prototype.forEach = Array.prototype.forEach;\n }\n }();\n // This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.\n !function () {\n /*!\n * Popover v1.0.13\n * https://sa-si-dev.github.io/popover\n * Licensed under MIT (https://github.com/sa-si-dev/popover/blob/master/LICENSE)\n */ !function () {\n \"use strict\";\n function e(e) { return function (e) { if (Array.isArray(e))\n return t(e); }(e) || function (e) { if (\"undefined\" != typeof Symbol && null != e[Symbol.iterator] || null != e[\"@@iterator\"])\n return Array.from(e); }(e) || function (e, o) { if (e) {\n if (\"string\" == typeof e)\n return t(e, o);\n var i = Object.prototype.toString.call(e).slice(8, -1);\n 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) ? t(e, o) : void 0;\n } }(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.\"); }(); }\n function t(e, t) { (null == t || t > e.length) && (t = e.length); for (var o = 0, i = new Array(t); o < t; o++)\n i[o] = e[o]; return i; }\n function o(e, t) { for (var o = 0; o < t.length; o++) {\n var i = t[o];\n i.enumerable = i.enumerable || !1, i.configurable = !0, \"value\" in i && (i.writable = !0), Object.defineProperty(e, i.key, i);\n } }\n var i = function () { function t() { !function (e, t) { if (!(e instanceof t))\n throw new TypeError(\"Cannot call a class as a function\"); }(this, t); } var i, r; return i = t, r = [{ key: \"addClass\", value: function (o, i) { o && (i = i.split(\" \"), t.getElements(o).forEach((function (t) { var o; (o = t.classList).add.apply(o, e(i)); }))); } }, { key: \"removeClass\", value: function (o, i) { o && (i = i.split(\" \"), t.getElements(o).forEach((function (t) { var o; (o = t.classList).remove.apply(o, e(i)); }))); } }, { key: \"getElements\", value: function (e) { if (e)\n return void 0 === e.forEach && (e = [e]), e; } }, { key: \"getMoreVisibleSides\", value: function (e) { if (!e)\n return {}; var t = e.getBoundingClientRect(), o = window.innerWidth, i = window.innerHeight, r = t.left, n = t.top; return { horizontal: r > o - r - t.width ? \"left\" : \"right\", vertical: n > i - n - t.height ? \"top\" : \"bottom\" }; } }, { key: \"getAbsoluteCoords\", value: function (e) { if (e) {\n var t = e.getBoundingClientRect(), o = window.pageXOffset, i = window.pageYOffset;\n return { width: t.width, height: t.height, top: t.top + i, right: t.right + o, bottom: t.bottom + i, left: t.left + o };\n } } }, { key: \"getCoords\", value: function (e) { return e ? e.getBoundingClientRect() : {}; } }, { key: \"getData\", value: function (e, t, o) { if (e) {\n var i = e ? e.dataset[t] : \"\";\n return \"number\" === o ? i = parseFloat(i) || 0 : \"true\" === i ? i = !0 : \"false\" === i && (i = !1), i;\n } } }, { key: \"setData\", value: function (e, t, o) { e && (e.dataset[t] = o); } }, { key: \"setStyle\", value: function (e, t, o) { e && (e.style[t] = o); } }, { key: \"show\", value: function (e) { var o = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : \"block\"; t.setStyle(e, \"display\", o); } }, { key: \"hide\", value: function (e) { t.setStyle(e, \"display\", \"none\"); } }, { key: \"getHideableParent\", value: function (e) { for (var t, o = e.parentElement; o;) {\n var i = getComputedStyle(o).overflow;\n if (-1 !== i.indexOf(\"scroll\") || -1 !== i.indexOf(\"auto\")) {\n t = o;\n break;\n }\n o = o.parentElement;\n } return t; } }], r && o(i, r), t; }();\n function r(e, t) { for (var o = 0; o < t.length; o++) {\n var i = t[o];\n i.enumerable = i.enumerable || !1, i.configurable = !0, \"value\" in i && (i.writable = !0), Object.defineProperty(e, i.key, i);\n } }\n var n = [\"top\", \"bottom\", \"left\", \"right\"].map((function (e) { return \"position-\".concat(e); })), a = { top: \"rotate(180deg)\", left: \"rotate(90deg)\", right: \"rotate(-90deg)\" }, s = function () { function e(t) { !function (e, t) { if (!(e instanceof t))\n throw new TypeError(\"Cannot call a class as a function\"); }(this, e); try {\n this.setProps(t), this.init();\n }\n catch (e) {\n console.warn(\"Couldn't initiate popper\"), console.error(e);\n } } var t, o; return t = e, o = [{ key: \"init\", value: function () { var e = this.$popperEle; e && this.$triggerEle && (i.setStyle(e, \"zIndex\", this.zIndex), this.setPosition()); } }, { key: \"setProps\", value: function (e) { var t = (e = this.setDefaultProps(e)).position ? e.position.toLowerCase() : \"auto\"; if (this.$popperEle = e.$popperEle, this.$triggerEle = e.$triggerEle, this.$arrowEle = e.$arrowEle, this.margin = parseFloat(e.margin), this.offset = parseFloat(e.offset), this.enterDelay = parseFloat(e.enterDelay), this.exitDelay = parseFloat(e.exitDelay), this.showDuration = parseFloat(e.showDuration), this.hideDuration = parseFloat(e.hideDuration), this.transitionDistance = parseFloat(e.transitionDistance), this.zIndex = parseFloat(e.zIndex), this.afterShowCallback = e.afterShow, this.afterHideCallback = e.afterHide, this.hasArrow = !!this.$arrowEle, -1 !== t.indexOf(\" \")) {\n var o = t.split(\" \");\n this.position = o[0], this.secondaryPosition = o[1];\n }\n else\n this.position = t; } }, { key: \"setDefaultProps\", value: function (e) { return Object.assign({ position: \"auto\", margin: 8, offset: 5, enterDelay: 0, exitDelay: 0, showDuration: 300, hideDuration: 200, transitionDistance: 10, zIndex: 1 }, e); } }, { key: \"setPosition\", value: function () { i.show(this.$popperEle, \"inline-flex\"); var e, t, o, r = window.innerWidth, s = window.innerHeight, l = i.getAbsoluteCoords(this.$popperEle), u = i.getAbsoluteCoords(this.$triggerEle), p = l.width, h = l.height, c = l.top, f = l.right, v = l.bottom, d = l.left, y = u.width, m = u.height, g = u.top, b = u.right, w = u.bottom, E = u.left, k = g - c, $ = E - d, D = $, S = k, C = this.position, P = this.secondaryPosition, O = y / 2 - p / 2, T = m / 2 - h / 2, A = this.margin, x = this.transitionDistance, I = window.scrollY - c, H = s + I, j = window.scrollX - d, L = r + j, R = this.offset; R && (I += R, H -= R, j += R, L -= R), \"auto\" === C && (C = i.getMoreVisibleSides(this.$triggerEle).vertical); var z = { top: { top: S - h - A, left: D + O }, bottom: { top: S + m + A, left: D + O }, right: { top: S + T, left: D + y + A }, left: { top: S + T, left: D - p - A } }, F = z[C]; if (S = F.top, D = F.left, P && (\"top\" === P ? S = k : \"bottom\" === P ? S = k + m - h : \"left\" === P ? D = $ : \"right\" === P && (D = $ + y - p)), D < j ? \"left\" === C ? o = \"right\" : D = j + d > b ? b - d : j : D + p > L && (\"right\" === C ? o = \"left\" : D = L + d < E ? E - f : L - p), S < I ? \"top\" === C ? o = \"bottom\" : S = I + c > w ? w - c : I : S + h > H && (\"bottom\" === C ? o = \"top\" : S = H + c < g ? g - v : H - h), o) {\n var M = z[o];\n \"top\" === (C = o) || \"bottom\" === C ? S = M.top : \"left\" !== C && \"right\" !== C || (D = M.left);\n } \"top\" === C ? (e = S + x, t = D) : \"right\" === C ? (e = S, t = D - x) : \"left\" === C ? (e = S, t = D + x) : (e = S - x, t = D); var U = \"translate3d(\".concat(parseInt(t), \"px, \").concat(parseInt(e), \"px, 0)\"); if (i.setStyle(this.$popperEle, \"transform\", U), i.setData(this.$popperEle, \"fromLeft\", t), i.setData(this.$popperEle, \"fromTop\", e), i.setData(this.$popperEle, \"top\", S), i.setData(this.$popperEle, \"left\", D), i.removeClass(this.$popperEle, n.join(\" \")), i.addClass(this.$popperEle, \"position-\".concat(C)), this.hasArrow) {\n var B = 0, q = 0, N = D + d, W = S + c, K = this.$arrowEle.offsetWidth / 2, V = a[C] || \"\";\n \"top\" === C || \"bottom\" === C ? (B = y / 2 + E - N) < K ? B = K : B > p - K && (B = p - K) : \"left\" !== C && \"right\" !== C || ((q = m / 2 + g - W) < K ? q = K : q > h - K && (q = h - K)), i.setStyle(this.$arrowEle, \"transform\", \"translate3d(\".concat(parseInt(B), \"px, \").concat(parseInt(q), \"px, 0) \").concat(V));\n } 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, r = 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(parseInt(t), \"px, \").concat(parseInt(o), \"px, 0)\"), a = e.showDuration; i.show(e.$popperEle, \"inline-flex\"), i.getCoords(e.$popperEle), i.setStyle(e.$popperEle, \"transitionDuration\", a + \"ms\"), i.setStyle(e.$popperEle, \"transform\", n), i.setStyle(e.$popperEle, \"opacity\", 1), e.showDurationTimeout = setTimeout((function () { \"function\" == typeof e.afterShowCallback && e.afterShowCallback(r); }), a); }), this.enterDelay); } }, { key: \"hide\", value: function () { var e = this, t = (arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}).data; clearTimeout(this.enterDelayTimeout), clearTimeout(this.showDurationTimeout), this.exitDelayTimeout = setTimeout((function () { if (e.$popperEle) {\n var o = parseInt(i.getData(e.$popperEle, \"fromLeft\")), r = parseInt(i.getData(e.$popperEle, \"fromTop\")), n = \"translate3d(\".concat(o, \"px, \").concat(r, \"px, 0)\"), a = e.hideDuration;\n i.setStyle(e.$popperEle, \"transitionDuration\", a + \"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(t); }), a);\n } }), this.exitDelay); } }, { key: \"updatePosition\", value: function () { i.setStyle(this.$popperEle, \"transitionDuration\", \"0ms\"), this.resetPosition(); var e = parseInt(i.getData(this.$popperEle, \"left\")), t = parseInt(i.getData(this.$popperEle, \"top\")); i.show(this.$popperEle, \"inline-flex\"), i.setStyle(this.$popperEle, \"transform\", \"translate3d(\".concat(e, \"px, \").concat(t, \"px, 0)\")); } }], o && r(t.prototype, o), e; }();\n window.PopperComponent = s;\n }(), function () {\n \"use strict\";\n function e(t) { return e = \"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(t); }\n function t(e, t) { for (var i = 0; i < t.length; i++) {\n var r = t[i];\n r.enumerable = r.enumerable || !1, r.configurable = !0, \"value\" in r && (r.writable = !0), Object.defineProperty(e, o(r.key), r);\n } }\n function o(t) { var o = function (t, o) { if (\"object\" != e(t) || !t)\n return t; var i = t[Symbol.toPrimitive]; if (void 0 !== i) {\n var r = i.call(t, o || \"default\");\n if (\"object\" != e(r))\n return r;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n } return (\"string\" === o ? String : Number)(t); }(t, \"string\"); return \"symbol\" == e(o) ? o : o + \"\"; }\n var i = function () { return e = function e() { !function (e, t) { if (!(e instanceof t))\n throw new TypeError(\"Cannot call a class as a function\"); }(this, e); }, i = [{ key: \"convertToBoolean\", value: function (e) { return e = !0 === e || \"true\" === e || !1 !== e && \"false\" !== e && arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; } }, { key: \"removeArrayEmpty\", value: function (e) { return Array.isArray(e) && e.length ? e.filter((function (e) { return !!e; })) : []; } }, { key: \"throttle\", value: function (e, t) { var o, i = 0; return function () { for (var r = arguments.length, n = new Array(r), a = 0; a < r; a++)\n n[a] = arguments[a]; var s = (new Date).getTime(), l = t - (s - i); clearTimeout(o), l <= 0 ? (i = s, e.apply(void 0, n)) : o = setTimeout((function () { e.apply(void 0, n); }), l); }; } }], (o = null) && t(e.prototype, o), i && t(e, i), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; var e, o, i; }();\n function r(e) { return r = \"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; }, r(e); }\n function n(e) { return function (e) { if (Array.isArray(e))\n return a(e); }(e) || function (e) { if (\"undefined\" != typeof Symbol && null != e[Symbol.iterator] || null != e[\"@@iterator\"])\n return Array.from(e); }(e) || function (e, t) { if (e) {\n if (\"string\" == typeof e)\n return a(e, t);\n var o = Object.prototype.toString.call(e).slice(8, -1);\n 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) ? a(e, t) : void 0;\n } }(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.\"); }(); }\n function a(e, t) { (null == t || t > e.length) && (t = e.length); for (var o = 0, i = new Array(t); o < t; o++)\n i[o] = e[o]; return i; }\n function s(e, t) { for (var o = 0; o < t.length; o++) {\n var i = t[o];\n i.enumerable = i.enumerable || !1, i.configurable = !0, \"value\" in i && (i.writable = !0), Object.defineProperty(e, l(i.key), i);\n } }\n function l(e) { var t = function (e, t) { if (\"object\" != r(e) || !e)\n return e; var o = e[Symbol.toPrimitive]; if (void 0 !== o) {\n var i = o.call(e, t || \"default\");\n if (\"object\" != r(i))\n return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n } return (\"string\" === t ? String : Number)(e); }(e, \"string\"); return \"symbol\" == r(t) ? t : t + \"\"; }\n var u = function () { function e() { !function (e, t) { if (!(e instanceof t))\n throw new TypeError(\"Cannot call a class as a function\"); }(this, e); } return t = e, r = [{ key: \"addClass\", value: function (t, o) { t && (o = o.split(\" \"), e.getElements(t).forEach((function (e) { var t; (t = e.classList).add.apply(t, n(o)); }))); } }, { key: \"removeClass\", value: function (t, o) { t && (o = o.split(\" \"), e.getElements(t).forEach((function (e) { var t; (t = e.classList).remove.apply(t, n(o)); }))); } }, { key: \"hasClass\", value: function (e, t) { return !!e && e.classList.contains(t); } }, { key: \"getElement\", value: function (e) { return e && (\"string\" == typeof e ? e = document.querySelector(e) : void 0 !== e.length && (e = e[0])), e || null; } }, { key: \"getElements\", value: function (e) { if (e)\n return void 0 === e.forEach && (e = [e]), e; } }, { key: \"addEvent\", value: function (t, o, i) { e.addOrRemoveEvent(t, o, i, \"add\"); } }, { key: \"removeEvent\", value: function (t, o, i) { e.addOrRemoveEvent(t, o, i, \"remove\"); } }, { key: \"addOrRemoveEvent\", value: function (t, o, r, n) { t && (o = i.removeArrayEmpty(o.split(\" \"))).forEach((function (o) { (t = e.getElements(t)).forEach((function (e) { \"add\" === n ? e.addEventListener(o, r) : e.removeEventListener(o, r); })); })); } }, { key: \"getScrollableParents\", value: function (e) { if (!e)\n return []; for (var t = [window], o = e.parentElement; o;) {\n var i = getComputedStyle(o).overflow;\n -1 === i.indexOf(\"scroll\") && -1 === i.indexOf(\"auto\") || t.push(o), o = o.parentElement;\n } return t; } }, { key: \"convertPropToDataAttr\", value: function (e) { return e ? \"data-popover-\".concat(e).replace(/([A-Z])/g, \"-$1\").toLowerCase() : \"\"; } }], (o = null) && s(t.prototype, o), r && s(t, r), Object.defineProperty(t, \"prototype\", { writable: !1 }), t; var t, o, r; }();\n function p(e) { return p = \"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; }, p(e); }\n function h(e, t) { for (var o = 0; o < t.length; o++) {\n var i = t[o];\n i.enumerable = i.enumerable || !1, i.configurable = !0, \"value\" in i && (i.writable = !0), Object.defineProperty(e, c(i.key), i);\n } }\n function c(e) { var t = function (e, t) { if (\"object\" != p(e) || !e)\n return e; var o = e[Symbol.toPrimitive]; if (void 0 !== o) {\n var i = o.call(e, t || \"default\");\n if (\"object\" != p(i))\n return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n } return (\"string\" === t ? String : Number)(e); }(e, \"string\"); return \"symbol\" == p(t) ? t : t + \"\"; }\n var f, v = { 27: \"onEscPress\" }, d = [\"target\", \"position\", \"margin\", \"offset\", \"enterDelay\", \"exitDelay\", \"showDuration\", \"hideDuration\", \"transitionDistance\", \"updatePositionThrottle\", \"zIndex\", \"hideOnOuterClick\", \"showOnHover\", \"hideArrowIcon\", \"disableManualAction\", \"disableUpdatePosition\"], y = function () { function e(t) { !function (e, t) { if (!(e instanceof t))\n throw new TypeError(\"Cannot call a class as a function\"); }(this, e); try {\n this.setProps(t), this.init();\n }\n catch (e) {\n console.warn(\"Couldn't initiate Popover component\"), console.error(e);\n } } return t = e, r = [{ key: \"init\", value: function (t) { var o = t.ele; if (o) {\n var i = !1;\n if (\"string\" == typeof o) {\n if (!(o = document.querySelectorAll(o)))\n return;\n 1 === o.length && (i = !0);\n }\n void 0 === o.length && (o = [o], i = !0);\n var r = [];\n return o.forEach((function (o) { t.ele = o, e.destroy(o), r.push(new e(t)); })), i ? r[0] : r;\n } } }, { key: \"destroy\", value: function (e) { if (e) {\n var t = e.popComp;\n t && t.destroy();\n } } }, { key: \"showMethod\", value: function () { this.popComp.show(); } }, { key: \"hideMethod\", value: function () { this.popComp.hide(); } }, { key: \"updatePositionMethod\", value: function () { this.popComp.popper.updatePosition(); } }, { key: \"getAttrProps\", value: function () { var e = u.convertPropToDataAttr, t = {}; return d.forEach((function (o) { t[e(o)] = o; })), t; } }], (o = [{ key: \"init\", value: function () { this.$popover && (this.setElementProps(), this.renderArrow(), this.initPopper(), this.addEvents()); } }, { key: \"getEvents\", value: function () { var e = [{ $ele: document, event: \"click\", method: \"onDocumentClick\" }, { $ele: document, event: \"keydown\", method: \"onDocumentKeyDown\" }]; return this.disableManualAction || (e.push({ $ele: this.$ele, event: \"click\", method: \"onTriggerEleClick\" }), this.showOnHover && (e.push({ $ele: this.$ele, event: \"mouseenter\", method: \"onTriggerEleMouseEnter\" }), e.push({ $ele: this.$ele, event: \"mouseleave\", method: \"onTriggerEleMouseLeave\" }))), e; } }, { key: \"addOrRemoveEvents\", value: function (e) { var t = this; this.getEvents().forEach((function (o) { t.addOrRemoveEvent({ action: e, $ele: o.$ele, events: o.event, method: o.method }); })); } }, { key: \"addEvents\", value: function () { this.addOrRemoveEvents(\"add\"); } }, { key: \"removeEvents\", value: function () { this.addOrRemoveEvents(\"remove\"), this.removeScrollEventListeners(), this.removeResizeEventListeners(); } }, { key: \"addOrRemoveEvent\", value: function (e) { var t = this, o = e.action, r = e.$ele, n = e.events, a = e.method, s = e.throttle; r && (n = i.removeArrayEmpty(n.split(\" \"))).forEach((function (e) { var n = \"\".concat(a, \"-\").concat(e), l = t.events[n]; l || (l = t[a].bind(t), s && (l = i.throttle(l, s)), t.events[n] = l), \"add\" === o ? u.addEvent(r, e, l) : u.removeEvent(r, e, l); })); } }, { key: \"addScrollEventListeners\", value: function () { this.$scrollableElems = u.getScrollableParents(this.$ele), this.addOrRemoveEvent({ action: \"add\", $ele: this.$scrollableElems, events: \"scroll\", method: \"onAnyParentScroll\", throttle: this.updatePositionThrottle }); } }, { key: \"removeScrollEventListeners\", value: function () { this.$scrollableElems && (this.addOrRemoveEvent({ action: \"remove\", $ele: this.$scrollableElems, events: \"scroll\", method: \"onAnyParentScroll\" }), this.$scrollableElems = null); } }, { key: \"addResizeEventListeners\", value: function () { this.addOrRemoveEvent({ action: \"add\", $ele: window, events: \"resize\", method: \"onResize\", throttle: this.updatePositionThrottle }); } }, { key: \"removeResizeEventListeners\", value: function () { this.addOrRemoveEvent({ action: \"remove\", $ele: window, events: \"resize\", method: \"onResize\" }); } }, { key: \"onAnyParentScroll\", value: function () { this.popper.updatePosition(); } }, { key: \"onResize\", value: function () { this.popper.updatePosition(); } }, { key: \"onDocumentClick\", value: function (e) { var t = e.target, o = t.closest(\".pop-comp-ele\"), i = t.closest(\".pop-comp-wrapper\"); this.hideOnOuterClick && o !== this.$ele && i !== this.$popover && this.hide(); } }, { key: \"onDocumentKeyDown\", value: function (e) { var t = e.which || e.keyCode, o = v[t]; o && this[o](e); } }, { key: \"onEscPress\", value: function () { this.hideOnOuterClick && this.hide(); } }, { key: \"onTriggerEleClick\", value: function () { this.toggle(); } }, { key: \"onTriggerEleMouseEnter\", value: function () { this.show(); } }, { key: \"onTriggerEleMouseLeave\", value: function () { this.hide(); } }, { key: \"setProps\", value: function (e) { e = this.setDefaultProps(e), this.setPropsFromElementAttr(e); var t = i.convertToBoolean; this.$ele = e.ele, this.target = e.target, this.position = e.position, this.margin = parseFloat(e.margin), this.offset = parseFloat(e.offset), this.enterDelay = parseFloat(e.enterDelay), this.exitDelay = parseFloat(e.exitDelay), this.showDuration = parseFloat(e.showDuration), this.hideDuration = parseFloat(e.hideDuration), this.transitionDistance = parseFloat(e.transitionDistance), this.updatePositionThrottle = parseFloat(e.updatePositionThrottle), this.zIndex = parseFloat(e.zIndex), this.hideOnOuterClick = t(e.hideOnOuterClick), this.showOnHover = t(e.showOnHover), this.hideArrowIcon = t(e.hideArrowIcon), this.disableManualAction = t(e.disableManualAction), this.disableUpdatePosition = t(e.disableUpdatePosition), this.beforeShowCallback = e.beforeShow, this.afterShowCallback = e.afterShow, this.beforeHideCallback = e.beforeHide, this.afterHideCallback = e.afterHide, this.events = {}, this.$popover = u.getElement(this.target); } }, { key: \"setDefaultProps\", value: function (e) { return Object.assign({ position: \"auto\", margin: 8, offset: 5, enterDelay: 0, exitDelay: 0, showDuration: 300, hideDuration: 200, transitionDistance: 10, updatePositionThrottle: 100, zIndex: 1, hideOnOuterClick: !0, showOnHover: !1, hideArrowIcon: !1, disableManualAction: !1, disableUpdatePosition: !1 }, e); } }, { key: \"setPropsFromElementAttr\", value: function (e) { var t = e.ele; for (var o in f) {\n var i = t.getAttribute(o);\n i && (e[f[o]] = i);\n } } }, { key: \"setElementProps\", value: function () { var t = this.$ele; t.popComp = this, t.show = e.showMethod, t.hide = e.hideMethod, t.updatePosition = e.updatePositionMethod, u.addClass(this.$ele, \"pop-comp-ele\"), u.addClass(this.$popover, \"pop-comp-wrapper\"); } }, { key: \"getOtherTriggerPopComp\", value: function () { var e, t = this.$popover.popComp; return t && t.$ele !== this.$ele && (e = t), e; } }, { key: \"initPopper\", value: function () { var e = { $popperEle: this.$popover, $triggerEle: this.$ele, $arrowEle: this.$arrowEle, position: this.position, margin: this.margin, offset: this.offset, enterDelay: this.enterDelay, exitDelay: this.exitDelay, showDuration: this.showDuration, hideDuration: this.hideDuration, transitionDistance: this.transitionDistance, zIndex: this.zIndex, afterShow: this.afterShow.bind(this), afterHide: this.afterHide.bind(this) }; this.popper = new PopperComponent(e); } }, { key: \"beforeShow\", value: function () { \"function\" == typeof this.beforeShowCallback && this.beforeShowCallback(this); } }, { key: \"beforeHide\", value: function () { \"function\" == typeof this.beforeHideCallback && this.beforeHideCallback(this); } }, { key: \"show\", value: function () { this.isShown() || (this.isShownForOtherTrigger() ? this.showAfterOtherHide() : (u.addClass(this.$popover, \"pop-comp-disable-events\"), this.$popover.popComp = this, this.beforeShow(), this.popper.show({ resetPosition: !0 }), u.addClass(this.$ele, \"pop-comp-active\"))); } }, { key: \"hide\", value: function () { this.isShown() && (this.beforeHide(), this.popper.hide(), this.removeScrollEventListeners(), this.removeResizeEventListeners()); } }, { key: \"toggle\", value: function (e) { void 0 === e && (e = !this.isShown()), e ? this.show() : this.hide(); } }, { key: \"isShown\", value: function () { return u.hasClass(this.$ele, \"pop-comp-active\"); } }, { key: \"isShownForOtherTrigger\", value: function () { var e = this.getOtherTriggerPopComp(); return !!e && e.isShown(); } }, { key: \"showAfterOtherHide\", value: function () { var e = this, t = this.getOtherTriggerPopComp(); if (t) {\n var o = t.exitDelay + t.hideDuration + 100;\n setTimeout((function () { e.show(); }), o);\n } } }, { key: \"afterShow\", value: function () { var e = this; this.showOnHover ? setTimeout((function () { u.removeClass(e.$popover, \"pop-comp-disable-events\"); }), 2e3) : u.removeClass(this.$popover, \"pop-comp-disable-events\"), this.disableUpdatePosition || (this.addScrollEventListeners(), this.addResizeEventListeners()), \"function\" == typeof this.afterShowCallback && this.afterShowCallback(this); } }, { key: \"afterHide\", value: function () { u.removeClass(this.$ele, \"pop-comp-active\"), \"function\" == typeof this.afterHideCallback && this.afterHideCallback(this); } }, { key: \"renderArrow\", value: function () { if (!this.hideArrowIcon) {\n var e = this.$popover.querySelector(\".pop-comp-arrow\");\n e || (this.$popover.insertAdjacentHTML(\"afterbegin\", '\n * \n * \n *\n * Video element could have data-lazy-play attribute when the video will play/pause automatically when it is on/off screen. data-lazy-play attribute will have a value 'done' right after the video starts playing at the first time.\n */\nconst OBSERVER_SETTINGS = {\n rootMargin: '100px 0px 100px 0px',\n threshold: 0\n};\nconst loadLazyMedia = function (el) {\n if (el.tagName === 'VIDEO') {\n const sourceEls = el.querySelectorAll('source[data-lazy-src]');\n sourceEls.forEach(sourceEl => {\n if (sourceEl.dataset.lazySrc) {\n sourceEl.setAttribute('src', sourceEl.dataset.lazySrc);\n }\n });\n el.load();\n }\n};\nconst videoCanPlay = function (evt) {\n const el = evt.target;\n el.removeEventListener('canplay', videoCanPlay);\n el.setAttribute('data-lazy-play', 'done');\n};\nlet lazyLoadMedia = {\n init: function () {\n const lazyLoadEls = document.querySelectorAll('[data-lazy-src]');\n const lazyPlayEls = document.querySelectorAll('video[data-lazy-play]');\n console.log('lazyLoadMedia.init()', 'Found ' + lazyLoadEls.length + ' lazy load elements and ' + lazyPlayEls.length + ' lazy play elements.');\n if ('IntersectionObserver' in window) {\n // IntersectionObserver is supported\n //\n // Lazy play observer\n //\n const lazyPlayObserver = new IntersectionObserver(function (entries, _) {\n entries.forEach(entry => {\n if (entry.isIntersecting && entry.target.offsetParent !== null) {\n if (entry.target.readyState === 4 && entry.target.getAttribute('data-lazy-play') !== 'done') {\n entry.target.play();\n }\n }\n else {\n entry.target.pause();\n }\n });\n }, OBSERVER_SETTINGS);\n lazyPlayEls.forEach(el => {\n el.addEventListener('canplay', videoCanPlay);\n lazyPlayObserver.observe(el);\n });\n //\n // Lazy load orserver\n //\n const lazyLoadObserver = new IntersectionObserver(function (entries, observer) {\n entries.forEach(entry => {\n if (entry.isIntersecting && entry.target !== null) {\n loadLazyMedia(entry.target);\n observer.unobserve(entry.target);\n }\n });\n }, OBSERVER_SETTINGS);\n lazyLoadEls.forEach(el => {\n lazyLoadObserver.observe((el.tagName === 'SOURCE' ? el.parentNode : el));\n });\n }\n else {\n // IntersectionObserver is NOT supported\n console.log('lazyLoadMedia.init()', 'IntersectionObserver not supported.');\n // Load all instantly\n lazyPlayEls.forEach(el => {\n el.addEventListener('canplay', videoCanPlay);\n });\n lazyLoadEls.forEach(el => {\n loadLazyMedia((el.tagName === 'SOURCE' ? el.parentNode : el));\n });\n }\n }\n};\nexports.default = lazyLoadMedia;\n","var _typeof = require(\"./typeof.js\")[\"default\"];\nfunction toPrimitive(t, r) {\n if (\"object\" != _typeof(t) || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}\nmodule.exports = toPrimitive, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","var unsupportedIterableToArray = require(\"./unsupportedIterableToArray.js\");\nfunction _createForOfIteratorHelper(r, e) {\n var t = \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n if (!t) {\n if (Array.isArray(r) || (t = unsupportedIterableToArray(r)) || e && r && \"number\" == typeof r.length) {\n t && (r = t);\n var _n = 0,\n F = function F() {};\n return {\n s: F,\n n: function n() {\n return _n >= r.length ? {\n done: !0\n } : {\n done: !1,\n value: r[_n++]\n };\n },\n e: function e(r) {\n throw r;\n },\n f: F\n };\n }\n throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n }\n var o,\n a = !0,\n u = !1;\n return {\n s: function s() {\n t = t.call(r);\n },\n n: function n() {\n var r = t.next();\n return a = r.done, r;\n },\n e: function e(r) {\n u = !0, o = r;\n },\n f: function f() {\n try {\n a || null == t[\"return\"] || t[\"return\"]();\n } finally {\n if (u) throw o;\n }\n }\n };\n}\nmodule.exports = _createForOfIteratorHelper, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getFocusableChildren = exports.getBreakpoint = void 0;\n/**\n * Get current breakpoint.\n *\n * @returns {String} 2-letter code.\n */\nfunction getBreakpoint() {\n let breakpoint = 'lg';\n const breakpoints = [\n { id: 'xs', width: 672 },\n { id: 'sm', width: 1056 },\n { id: 'md', width: 1312 },\n ];\n for (let i = 0; i < breakpoints.length; i++) {\n const item = breakpoints[i];\n if (window.innerWidth < item.width) {\n breakpoint = item.id;\n break;\n }\n }\n return breakpoint;\n}\nexports.getBreakpoint = getBreakpoint;\n/**\n * Get focusable children for given element.\n *\n * @param {Element|null} [element] Container to check. If empty, fetches all elements from current document.\n * @param {object} [options] Options to specify what rules are checked.\n * @param {boolean} [checkHidden] Whether elements with hidden attribute are excluded. Default is true.\n * @param {boolean} [checkDisabled] Whether elements with disabled attribute are excluded. Default is true.\n * @param {boolean} [checkTabIndex] Whether elements with negative tabindex are excluded. Default is true.\n * @param {boolean} [checkVisibility] Whether non-visible elements are excluded. Default is true.\n * @returns {Element[]} Array of focusable elements.\n */\nfunction getFocusableChildren(element = null, options = {}) {\n const selectors = [\n 'a[href]',\n 'area[href]',\n 'input:not([type=\"hidden\"]):not([type=\"radio\"])',\n 'input[type=\"radio\"]:checked',\n 'select',\n 'textarea',\n 'button',\n 'iframe',\n 'audio[controls]',\n 'video[controls]',\n '[contenteditable]',\n '[tabindex]:not([tabindex^=\"-\"])',\n '[role=\"button\"]'\n ];\n const container = element || window.document;\n const focusOptions = {\n checkHidden: true,\n checkDisabled: true,\n checkTabIndex: true,\n checkVisibility: true,\n ...options\n };\n return Array.from(container.querySelectorAll(selectors.join(','))).filter((child) => {\n if (focusOptions.checkHidden && child.hidden) {\n return false;\n }\n if (focusOptions.checkDisabled && child.disabled) {\n return false;\n }\n if (focusOptions.checkTabIndex && String(child.tabindex).indexOf('-') === 0) {\n return false;\n }\n if (focusOptions.checkVisibility && (!child.offsetWidth || !child.offsetHeight || !child.getClientRects().length)) {\n return false;\n }\n return true;\n });\n}\nexports.getFocusableChildren = getFocusableChildren;\n","var defineProperty = require(\"./defineProperty.js\");\nfunction ownKeys(e, r) {\n var t = Object.keys(e);\n if (Object.getOwnPropertySymbols) {\n var o = Object.getOwnPropertySymbols(e);\n r && (o = o.filter(function (r) {\n return Object.getOwnPropertyDescriptor(e, r).enumerable;\n })), t.push.apply(t, o);\n }\n return t;\n}\nfunction _objectSpread2(e) {\n for (var r = 1; r < arguments.length; r++) {\n var t = null != arguments[r] ? arguments[r] : {};\n r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {\n defineProperty(e, r, t[r]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {\n Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));\n });\n }\n return e;\n}\nmodule.exports = _objectSpread2, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst mustache_1 = __importDefault(require(\"mustache\"));\nconst siteSearch = {\n processingClickEvent: null,\n baseFormProps: {},\n customFields: {},\n controller: new AbortController(),\n timer: null,\n searchDelay: 150,\n init() {\n const self = this;\n const searchTabs = document.querySelectorAll('.js-site-search');\n if (!searchTabs.length)\n return;\n console.log('site-search.init()');\n searchTabs.forEach((tab) => {\n const filters = tab.querySelector('.js-site-search-filters');\n const id = tab.id;\n if (!id)\n return false;\n const loadMoreForm = tab.querySelector('[data-search-load-more-form]');\n if (loadMoreForm) {\n self.baseFormProps[id] = Array.from(loadMoreForm.querySelectorAll('input')).filter(i => i.type === 'hidden').reduce((acc, cur) => {\n acc[cur.name] = cur.value;\n return acc;\n }, {});\n const submit = loadMoreForm.querySelector('[type=\"submit\"]');\n loadMoreForm.addEventListener('submit', (e) => {\n e.preventDefault();\n if (self.baseFormProps[id].page === '1') {\n self.baseFormProps[id].page = (parseInt(self.baseFormProps[id].page) + 1).toString();\n }\n self.getResults(id, submit);\n });\n }\n if (filters) {\n const inputs = Array.from(filters.getElementsByTagName(\"input\"));\n self.baseFormProps[id] = Array.from(filters.querySelectorAll('input')).filter(i => i.type === 'hidden').reduce((acc, cur) => {\n acc[cur.name] = cur.value;\n return acc;\n }, {});\n const submit = loadMoreForm?.querySelector('[type=\"submit\"]');\n this.saveFilters(id, inputs);\n inputs.forEach(element => {\n element.addEventListener('change', (e) => {\n self.saveFilters(id, inputs);\n self.baseFormProps[id].page = '1';\n self.getResults(id, submit);\n });\n });\n }\n tab.addEventListener('click', (e) => {\n const target = e.target.classList.contains('search-result') ? e.target : e.target.closest('.search-result');\n if (target && target.dataset?.searchItem && target.dataset?.searchItemUrl === target.getAttribute('href')) {\n e.preventDefault();\n self.sendClickEvent({\n url: target.getAttribute('href'),\n id: target.dataset?.searchItem,\n position: target.dataset?.searchItemPosition,\n term: target.dataset?.searchItemTerm,\n });\n return false;\n }\n });\n return false;\n });\n },\n saveFilters(id, inputs) {\n this.customFields[id] = [];\n inputs.forEach(input => {\n if (input.checked) {\n if (input.dataset.sort) {\n this.baseFormProps[id].sort = input.dataset.sort;\n }\n if (input.dataset.order) {\n this.baseFormProps[id].order = input.dataset.order;\n }\n if (input.dataset.customField) {\n this.customFields[id].push(input.dataset.customField);\n }\n }\n });\n },\n getResults(id, submit) {\n this.controller.abort();\n this.controller = new AbortController();\n clearTimeout(this.timer);\n this.timer = setTimeout(async () => {\n const container = document.getElementById(id);\n container?.classList.add('loading');\n const context = this.baseFormProps[id].context;\n const formData = new FormData();\n if (context === 'search_page_filtered') {\n formData.append('customFields', JSON.stringify(this.customFields[id]));\n }\n fetch('/stage-ajax/siteSearch/?' + new URLSearchParams(this.baseFormProps[id]).toString(), {\n signal: this.controller.signal,\n method: context === 'search_page_filtered' ? 'POST' : 'GET',\n body: context === 'search_page_filtered' ? formData : null,\n }).then(response => response.json())\n .then((response) => {\n if (response.page) {\n this.baseFormProps[id].page = (response.page + 1).toString();\n ;\n }\n if (response.hits) {\n const template = document.getElementById(`template-search-item-${id}`)?.textContent;\n const results = document.querySelector(`[data-search-results-container=${id}]`);\n const tabButton = document.querySelector(`[data-toggle-target=${id}]`);\n if (template && results && response.page === 1) {\n results.innerHTML = response.hits.map((item) => mustache_1.default.render(template, item)).join('');\n }\n else if (template && results) {\n const lastChild = results?.lastElementChild;\n lastChild?.insertAdjacentHTML('afterend', response.hits.map((item) => mustache_1.default.render(template, item)).join(''));\n }\n if (tabButton) {\n tabButton.textContent = tabButton.textContent?.replace(/\\d+/, response.total_hits) || '';\n }\n }\n if (response.total_hits <= response.page * response.limit) {\n submit?.remove();\n }\n })\n .catch((err) => {\n console.error(`Search err error: ${err.message}`);\n }).finally(() => {\n container?.classList.remove('loading');\n });\n }, this.searchDelay);\n },\n sendClickEvent(data) {\n if (this.processingClickEvent) {\n return;\n }\n this.processingClickEvent = data.id;\n let locationChanging = false;\n const loadTargetPath = () => {\n if (data.url && !locationChanging) {\n locationChanging = true;\n window.location = data.url;\n }\n };\n const formData = new FormData();\n formData.append('id', data.id);\n formData.append('position', data.position);\n formData.append('term', data.term);\n try {\n fetch(`/stage-ajax/siteSearch/?stage-language=${document.body.getAttribute('data-language')}&context=reportClick`, {\n method: 'POST',\n body: formData,\n }).then((res) => {\n loadTargetPath();\n }).catch((err) => {\n loadTargetPath();\n });\n return true;\n }\n catch (err) {\n if (err instanceof Error && err.name !== 'AbortError') {\n console.log(err);\n }\n }\n // Navigate to new url after small delay, even if ajax request has not completed\n setTimeout(loadTargetPath, 500);\n },\n};\nexports.default = siteSearch;\n"],"sourceRoot":""} ![\"Image\"](\"image.jpg\")
\n *