virtual-select-plugin
Version:
A javascript plugin for dropdown with virtual scroll
1,157 lines (1,108 loc) • 167 kB
JavaScript
/*!
* Virtual Select v1.0.49
* https://sa-si-dev.github.io/virtual-select
* Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE)
*//******/ (function() { // webpackBootstrap
// This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
!function() {
"use strict";
// UNUSED EXPORTS: VirtualSelect
;// ./src/utils/utils.js
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Utils = /*#__PURE__*/function () {
function Utils() {
_classCallCheck(this, Utils);
}
return _createClass(Utils, null, [{
key: "getString",
value:
/**
* @param {any} text
* @returns {string}
* @memberof Utils
*/
function getString(text) {
return text || text === 0 ? text.toString() : '';
}
/**
* @param {any} value
* @param {boolean} defaultValue
* @returns {boolean}
* @memberof Utils
*/
}, {
key: "convertToBoolean",
value: function convertToBoolean(value) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var result;
if (value === true || value === 'true') {
result = true;
} else if (value === false || value === 'false') {
result = false;
} else {
result = defaultValue;
}
return result;
}
/**
* @param {any} value
* @returns {boolean}
* @memberof Utils
*/
}, {
key: "isEmpty",
value: function isEmpty(value) {
var result = false;
if (!value) {
result = true;
} else if (Array.isArray(value)) {
if (value.length === 0) {
result = true;
}
} else if (_typeof(value) === 'object' && Object.keys(value).length === 0) {
result = true;
}
return result;
}
/**
* @param {any} value
* @returns {boolean}
* @memberof Utils
*/
}, {
key: "isNotEmpty",
value: function isNotEmpty(value) {
return !Utils.isEmpty(value);
}
/**
* @param {any[]} array
* @param {any} value
* @param {boolean} cloneArray
* @returns {any[]}
* @memberof Utils
*/
}, {
key: "removeItemFromArray",
value: function removeItemFromArray(array, value) {
var cloneArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
if (!Array.isArray(array) || !array.length) {
return array;
}
var inputArr = cloneArray ? _toConsumableArray(array) : array;
var index = inputArr.indexOf(value);
if (index !== -1) {
inputArr.splice(index, 1);
}
return inputArr;
}
/**
* @param {any[]} array
* @returns {any[]}
* @memberof Utils
*/
}, {
key: "removeArrayEmpty",
value: function removeArrayEmpty(array) {
if (!Array.isArray(array) || !array.length) {
return [];
}
return array.filter(function (d) {
return !!d;
});
}
/**
* @param {number} max
* @param {number} max
* @returns {number}
* @memberof Utils
*/
}, {
key: "getRandomInt",
value: function getRandomInt(max) {
var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var minN = Math.ceil(min);
var maxN = Math.floor(max);
return Math.floor(Math.random() * (maxN - minN - 1)) + minN;
}
/**
* @param {string} text
* @return {string}
* @memberof Utils
*/
}, {
key: "regexEscape",
value: function regexEscape(text) {
var ESC_REGEX = /[-/\\^$*+?.()|[\]{}]/g;
return text.replace(ESC_REGEX, '\\$&');
}
/**
* @param {string} text
* @return {string}
* @memberof Utils
*/
}, {
key: "normalizeString",
value: function normalizeString(text) {
var NON_WORD_REGEX = /[^\w]/g;
return text.normalize('NFD').replace(NON_WORD_REGEX, '');
}
/**
* @static
* @param {*} container
* @param {string} text
* @return {boolean}
* @memberof Utils
*/
}, {
key: "willTextOverflow",
value: function willTextOverflow(container, text) {
var tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.whiteSpace = 'nowrap';
tempElement.style.fontSize = window.getComputedStyle(container).fontSize;
tempElement.style.fontFamily = window.getComputedStyle(container).fontFamily;
tempElement.textContent = text;
document.body.appendChild(tempElement);
var textWidth = tempElement.clientWidth;
document.body.removeChild(tempElement);
return textWidth > container.clientWidth;
}
/**
* @static
* @param {string} text
* @return {string}
* @memberof Utils
*/
}, {
key: "replaceDoubleQuotesWithHTML",
value: function replaceDoubleQuotesWithHTML(text) {
return text.replace(/"/g, '"');
}
/**
* @static
* @param {string} text
* @return {boolean}
* @memberof Utils
*/
}, {
key: "containsHTML",
value: function containsHTML(text) {
return /<[a-z][\s\S]*>/i.test(text);
}
/**
* @static
* @param {string} text
* @return {boolean}
* @memberof Utils
*/
}, {
key: "containsHTMLorJS",
value: function containsHTMLorJS(text) {
return /<([a-z]+)[\s\S]*?>|on\w+="[^"]*"/i.test(text);
}
}]);
}();
;// ./src/utils/dom-utils.js
function dom_utils_typeof(o) { "@babel/helpers - typeof"; return dom_utils_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, dom_utils_typeof(o); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || dom_utils_unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function dom_utils_toConsumableArray(r) { return dom_utils_arrayWithoutHoles(r) || dom_utils_iterableToArray(r) || dom_utils_unsupportedIterableToArray(r) || dom_utils_nonIterableSpread(); }
function dom_utils_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function dom_utils_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return dom_utils_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? dom_utils_arrayLikeToArray(r, a) : void 0; } }
function dom_utils_iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function dom_utils_arrayWithoutHoles(r) { if (Array.isArray(r)) return dom_utils_arrayLikeToArray(r); }
function dom_utils_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function dom_utils_classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function dom_utils_defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, dom_utils_toPropertyKey(o.key), o); } }
function dom_utils_createClass(e, r, t) { return r && dom_utils_defineProperties(e.prototype, r), t && dom_utils_defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function dom_utils_toPropertyKey(t) { var i = dom_utils_toPrimitive(t, "string"); return "symbol" == dom_utils_typeof(i) ? i : i + ""; }
function dom_utils_toPrimitive(t, r) { if ("object" != dom_utils_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != dom_utils_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var DomUtils = /*#__PURE__*/function () {
function DomUtils() {
dom_utils_classCallCheck(this, DomUtils);
}
return dom_utils_createClass(DomUtils, null, [{
key: "addClass",
value:
/**
* @param {HTMLElement | NodeListOf<HTMLElement>} $ele
* @param {string} classNames
*/
function addClass($ele, classNames) {
if (!$ele) {
return;
}
var classNamesArr = classNames.split(' ');
DomUtils.getElements($ele).forEach(function ($this) {
var _$this$classList;
(_$this$classList = $this.classList).add.apply(_$this$classList, dom_utils_toConsumableArray(classNamesArr));
});
}
/**
* @param {HTMLElement | NodeListOf<HTMLElement>} $ele
* @param {string} classNames
*/
}, {
key: "removeClass",
value: function removeClass($ele, classNames) {
if (!$ele) {
return;
}
var classNamesArr = classNames.split(' ');
DomUtils.getElements($ele).forEach(function ($this) {
var _$this$classList2;
(_$this$classList2 = $this.classList).remove.apply(_$this$classList2, dom_utils_toConsumableArray(classNamesArr));
});
}
/**
* @param {HTMLElement | NodeListOf<HTMLElement>} $ele
* @param {string} classNames
* @param {boolean} [isAdd]
*/
}, {
key: "toggleClass",
value: function toggleClass($ele, classNames, isAdd) {
if (!$ele) {
return;
}
/** @type {boolean | undefined} */
var isAdding;
if (isAdd !== undefined) {
isAdding = Boolean(isAdd);
}
DomUtils.getElements($ele).forEach(function ($this) {
$this.classList.toggle(classNames, isAdding);
});
}
/**
* @param {HTMLElement} $ele
* @param {string} className
* @returns {boolean}
*/
}, {
key: "hasClass",
value: function hasClass($ele, className) {
if (!$ele) {
return false;
}
return $ele.classList.contains(className);
}
/**
* @param {HTMLElement} $ele
* @returns {boolean}
*/
}, {
key: "hasEllipsis",
value: function hasEllipsis($ele) {
if (!$ele) {
return false;
}
return $ele.scrollWidth > $ele.offsetWidth;
}
/**
* @param {HTMLElement} $ele
* @param {string} name
* @param {string} [type]
* @returns {any}
*/
}, {
key: "getData",
value: function getData($ele, name, type) {
if (!$ele) {
return undefined;
}
/** @type {any} */
var value = $ele ? $ele.dataset[name] : '';
if (type === 'number') {
value = parseFloat(value) || 0;
} else if (value === 'true') {
value = true;
} else if (value === 'false') {
value = false;
}
return value;
}
/**
* @param {HTMLElement} $ele
* @param {string} name
* @param {string} value
*/
}, {
key: "setData",
value: function setData($ele, name, value) {
if (!$ele) {
return;
}
// eslint-disable-next-line no-param-reassign
$ele.dataset[name] = value;
}
/**
* @param {HTMLElement} $ele
* @param {string} name
* @param {string} value
*/
}, {
key: "setAttr",
value: function setAttr($ele, name, value) {
if (!$ele) {
return;
}
$ele.setAttribute(name, value);
}
/**
* @param {HTMLElement} $from
* @param {HTMLElement} $to
* @param {string[]} attrList
* @param {string[]} valueLessProps
*/
}, {
key: "setAttrFromEle",
value: function setAttrFromEle($from, $to, attrList, valueLessProps) {
/** @type {any} */
var values = {};
attrList.forEach(function (attr) {
values[attr] = $from.getAttribute(attr);
});
attrList.forEach(function (attr) {
var value = values[attr];
if (value || valueLessProps.indexOf(attr) !== -1 && value === '') {
$to.setAttribute(attr, value);
}
});
}
/**
* @param {HTMLElement} $ele
* @param {string} name
* @param {string} value
*/
}, {
key: "setStyle",
value: function setStyle($ele, name, value) {
if (!$ele) {
return;
}
// @ts-ignore
// eslint-disable-next-line no-param-reassign
$ele.style[name] = value;
}
/**
* @param {HTMLElement} $ele
* @param {any} props
*/
}, {
key: "setStyles",
value: function setStyles($ele, props) {
if (!$ele || !props) {
return;
}
Object.keys(props).forEach(function (name) {
// @ts-ignore
// eslint-disable-next-line no-param-reassign
$ele.style[name] = props[name];
});
}
/**
* @param {HTMLElement} $ele
* @param {string} name
* @param {string} value
*/
}, {
key: "setAria",
value: function setAria($ele, name, value) {
if (!$ele) {
return;
}
var attrName = name;
if (attrName !== 'role') {
attrName = "aria-".concat(attrName);
}
$ele.setAttribute(attrName, value);
}
/**
* @param {any} $ele
* @returns {any[]}
*/
}, {
key: "getElements",
value: function getElements($ele) {
if (!$ele) {
return [];
}
return $ele.forEach === undefined ? [$ele] : $ele;
}
/**
* @static
* @param {string} [$selector='']
* @param {*} [$parentEle=undefined]
* @return {*}
* @memberof DomUtils
*/
}, {
key: "getElementsBySelector",
value: function getElementsBySelector() {
var $selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var $parentEle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
var elements;
var parent = $parentEle !== undefined ? $parentEle : document;
if ($selector !== '') {
elements = parent.querySelectorAll($selector);
}
return elements !== undefined ? Array.from(elements) : [];
}
/**
* @param {HTMLElement} $ele
* @param {string} events
* @param {Function} callback
*/
}, {
key: "addEvent",
value: function addEvent($ele, events, callback) {
if (!$ele) {
return;
}
var eventsArray = Utils.removeArrayEmpty(events.split(' '));
eventsArray.forEach(function (event) {
var $eleArray = DomUtils.getElements($ele);
$eleArray.forEach(function ($this) {
$this.addEventListener(event, callback);
});
});
}
/**
* @param {HTMLElement} $ele
* @param {string} eventName
* @param {boolean} [bubbles]
*/
}, {
key: "dispatchEvent",
value: function dispatchEvent($ele, eventName) {
var bubbles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
if (!$ele) {
return;
}
var $eleArray = DomUtils.getElements($ele);
/** using setTimeout to trigger asynchronous event */
setTimeout(function () {
$eleArray.forEach(function ($this) {
$this.dispatchEvent(new CustomEvent(eventName, {
bubbles: bubbles
}));
});
}, 0);
}
/**
* convert object to dom attributes
* @param {ObjectString} data
*/
}, {
key: "getAttributesText",
value: function getAttributesText(data) {
var html = '';
if (!data) {
return html;
}
// @ts-ignore
Object.entries(data).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
k = _ref2[0],
v = _ref2[1];
if (v !== undefined) {
html += " ".concat(k, "=\"").concat(v, "\" ");
}
});
return html;
}
/**
* convert "maxValue" to "data-max-value"
* @param {string} prop
*/
}, {
key: "convertPropToDataAttr",
value: function convertPropToDataAttr(prop) {
return prop ? "data-".concat(prop).replace(/([A-Z])/g, '-$1').toLowerCase() : '';
}
/**
* Changes the tab index of an element passed as an input
* @static
* @param {HTMLElement | NodeListOf<HTMLElement>} $ele
* @param {number} newTabIndex
* @memberof DomUtils
*/
}, {
key: "changeTabIndex",
value: function changeTabIndex($ele, newTabIndex) {
if (!$ele) {
// eslint-disable-next-line no-console
console.log($ele, 'Invalid element provided.');
return;
}
DomUtils.getElements($ele).forEach(function ($this) {
// eslint-disable-next-line no-param-reassign
$this.tabIndex = newTabIndex;
});
}
/**
* @param {HTMLElement} $ele
* @param {string} event
* @param {Function} callback
*/
}, {
key: "removeEvent",
value: function removeEvent($ele, event, callback) {
if (!$ele) {
return;
}
var $eleArray = DomUtils.getElements($ele);
$eleArray.forEach(function ($this) {
$this.removeEventListener(event, callback);
});
}
}]);
}();
;// ./src/virtual-select.js
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = virtual_select_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function virtual_select_typeof(o) { "@babel/helpers - typeof"; return virtual_select_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, virtual_select_typeof(o); }
function virtual_select_slicedToArray(r, e) { return virtual_select_arrayWithHoles(r) || virtual_select_iterableToArrayLimit(r, e) || virtual_select_unsupportedIterableToArray(r, e) || virtual_select_nonIterableRest(); }
function virtual_select_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function virtual_select_iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function virtual_select_arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function virtual_select_toConsumableArray(r) { return virtual_select_arrayWithoutHoles(r) || virtual_select_iterableToArray(r) || virtual_select_unsupportedIterableToArray(r) || virtual_select_nonIterableSpread(); }
function virtual_select_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function virtual_select_unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return virtual_select_arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? virtual_select_arrayLikeToArray(r, a) : void 0; } }
function virtual_select_iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function virtual_select_arrayWithoutHoles(r) { if (Array.isArray(r)) return virtual_select_arrayLikeToArray(r); }
function virtual_select_arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function virtual_select_classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function virtual_select_defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, virtual_select_toPropertyKey(o.key), o); } }
function virtual_select_createClass(e, r, t) { return r && virtual_select_defineProperties(e.prototype, r), t && virtual_select_defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function virtual_select_toPropertyKey(t) { var i = virtual_select_toPrimitive(t, "string"); return "symbol" == virtual_select_typeof(i) ? i : i + ""; }
function virtual_select_toPrimitive(t, r) { if ("object" != virtual_select_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != virtual_select_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/** cSpell:ignore nocheck, Labelledby, vscomp, tabindex, combobox, haspopup, listbox, activedescendant */
/* eslint-disable class-methods-use-this */
// @ts-nocheck
var dropboxCloseButtonFullHeight = 48;
var searchHeight = 40;
var keyDownMethodMapping = {
13: 'onEnterPress',
38: 'onUpArrowPress',
40: 'onDownArrowPress',
46: 'onBackspaceOrDeletePress',
// Delete
8: 'onBackspaceOrDeletePress' // Backspace
};
var valueLessProps = ['autofocus', 'disabled', 'multiple', 'required'];
var nativeProps = ['autofocus', 'class', 'disabled', 'id', 'multiple', 'name', 'placeholder', 'required'];
var attrPropsMapping;
var dataProps = ['additionalClasses', 'additionalDropboxClasses', 'additionalDropboxContainerClasses', 'additionalToggleButtonClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'ariaLabelClearButtonText', 'ariaLabelTagClearButtonText', 'ariaLabelSearchClearButtonText', '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'];
/** Class representing VirtualSelect */
var VirtualSelect = /*#__PURE__*/function () {
/**
* @param {virtualSelectOptions} options
*/
function VirtualSelect(options) {
virtual_select_classCallCheck(this, VirtualSelect);
try {
this.createSecureTextElements();
this.setProps(options);
this.setDisabledOptions(options.disabledOptions);
this.setOptions(options.options);
this.render();
} catch (e) {
// eslint-disable-next-line no-console
console.warn("Couldn't initiate Virtual Select");
// eslint-disable-next-line no-console
console.error(e);
}
}
/** render methods - start */
return virtual_select_createClass(VirtualSelect, [{
key: "render",
value: function render() {
if (!this.$ele) {
return;
}
var uniqueId = this.uniqueId;
var wrapperClasses = 'vscomp-wrapper';
var toggleButtonClasses = 'vscomp-toggle-button';
var valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : '';
var ariaLabelText = this.ariaLabelText ? "aria-label=\"".concat(this.ariaLabelText, "\"") : '';
var ariaLabelClearBtnTxt = this.ariaLabelClearButtonText ? "aria-label=\"".concat(this.ariaLabelClearButtonText, "\"") : '';
var isExpanded = false;
if (this.additionalClasses) {
wrapperClasses += " ".concat(this.additionalClasses);
}
if (this.additionalToggleButtonClasses) {
toggleButtonClasses += " ".concat(this.additionalToggleButtonClasses);
}
if (this.multiple) {
wrapperClasses += ' multiple';
if (!this.disableSelectAll) {
wrapperClasses += ' has-select-all';
}
}
if (!this.hideClearButton) {
wrapperClasses += ' has-clear-button';
}
if (this.keepAlwaysOpen) {
wrapperClasses += ' keep-always-open';
isExpanded = true;
} else {
wrapperClasses += ' closed';
}
if (this.showAsPopup) {
wrapperClasses += ' show-as-popup';
}
if (this.hasSearch) {
wrapperClasses += ' has-search-input';
}
if (this.showValueAsTags) {
wrapperClasses += ' show-value-as-tags';
}
if (this.textDirection) {
wrapperClasses += " text-direction-".concat(this.textDirection);
}
if (this.popupPosition) {
wrapperClasses += " popup-position-".concat(this.popupPosition.toLowerCase());
}
// eslint-disable-next-line no-trailing-spaces
var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n <div class=\"").concat(toggleButtonClasses, "\">\n <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n ").concat(this.placeholder, "\n </div>\n <div class=\"vscomp-arrow\"></div>\n <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " \n tabindex=\"-1\" role=\"button\" ").concat(ariaLabelClearBtnTxt, ">\n <i class=\"vscomp-clear-icon\"></i>\n </div>\n </div>\n\n ").concat(this.renderDropbox({
wrapperClasses: wrapperClasses
}), "\n </div>");
this.$ele.innerHTML = html;
this.$body = document.querySelector('body');
this.$wrapper = this.$ele.querySelector('.vscomp-wrapper');
if (this.hasDropboxWrapper) {
this.$allWrappers = [this.$wrapper, this.$dropboxWrapper];
this.$dropboxContainer = this.$dropboxWrapper.querySelector('.vscomp-dropbox-container');
DomUtils.addClass(this.$dropboxContainer, 'pop-comp-wrapper');
} else {
this.$allWrappers = [this.$wrapper];
this.$dropboxContainer = this.$wrapper.querySelector('.vscomp-dropbox-container');
}
this.$toggleButton = this.$ele.querySelector('.vscomp-toggle-button');
this.$clearButton = this.$ele.querySelector('.vscomp-clear-button');
this.$valueText = this.$ele.querySelector('.vscomp-value');
this.$hiddenInput = this.$ele.querySelector('.vscomp-hidden-input');
this.$dropbox = this.$dropboxContainer.querySelector('.vscomp-dropbox');
this.$dropboxCloseButton = this.$dropboxContainer.querySelector('.vscomp-dropbox-close-button');
this.$dropboxContainerBottom = this.$dropboxContainer.querySelector('.vscomp-dropbox-container-bottom');
this.$dropboxContainerTop = this.$dropboxContainer.querySelector('.vscomp-dropbox-container-top');
this.$search = this.$dropboxContainer.querySelector('.vscomp-search-wrapper');
this.$optionsContainer = this.$dropboxContainer.querySelector('.vscomp-options-container');
this.$optionsList = this.$dropboxContainer.querySelector('.vscomp-options-list');
this.$options = this.$dropboxContainer.querySelector('.vscomp-options');
this.$noOptions = this.$dropboxContainer.querySelector('.vscomp-no-options');
this.$noSearchResults = this.$dropboxContainer.querySelector('.vscomp-no-search-results');
this.afterRenderWrapper();
}
}, {
key: "renderDropbox",
value: function renderDropbox(_ref) {
var wrapperClasses = _ref.wrapperClasses;
var $wrapper = this.dropboxWrapper !== 'self' ? document.querySelector(this.dropboxWrapper) : null;
var dropboxClasses = 'vscomp-dropbox';
if (this.additionalDropboxClasses) {
dropboxClasses += " ".concat(this.additionalDropboxClasses);
}
var dropboxContainerClasses = 'vscomp-dropbox-container';
if (this.additionalDropboxContainerClasses) {
dropboxContainerClasses += " ".concat(this.additionalDropboxContainerClasses);
}
// eslint-disable-next-line no-trailing-spaces
var html = "<div id=\"vscomp-dropbox-container-".concat(this.uniqueId, "\" role=\"listbox\" class=\"").concat(dropboxContainerClasses, "\">\n <div class=\"vscomp-dropbox-container-top\" aria-hidden=\"true\" tabindex=\"-1\"> </div>\n <div class=\"").concat(dropboxClasses, "\">\n <div class=\"vscomp-search-wrapper\"></div>\n\n <div class=\"vscomp-options-container\">\n <div class=\"vscomp-options-loader\"></div>\n\n <div class=\"vscomp-options-list\">\n <div class=\"vscomp-options\"></div>\n </div>\n </div>\n\n <div class=\"vscomp-options-bottom-freezer\"></div>\n <div class=\"vscomp-no-options\">").concat(this.noOptionsText, "</div>\n <div class=\"vscomp-no-search-results\">").concat(this.noSearchResultsText, "</div>\n\n <span class=\"vscomp-dropbox-close-button\"><i class=\"vscomp-clear-icon\"></i></span>\n </div>\n <div class=\"vscomp-dropbox-container-bottom\" aria-hidden=\"true\" tabindex=\"-1\"> </div>\n </div>");
if ($wrapper) {
var $dropboxWrapper = document.createElement('div');
this.$dropboxWrapper = $dropboxWrapper;
this.hasDropboxWrapper = true;
$dropboxWrapper.innerHTML = html;
$wrapper.appendChild($dropboxWrapper);
DomUtils.addClass($dropboxWrapper, "vscomp-dropbox-wrapper ".concat(wrapperClasses));
if (!this.keepAlwaysOpen) {
DomUtils.setAttr($dropboxWrapper, 'tabindex', '-1');
DomUtils.setAria($dropboxWrapper, 'hidden', true);
}
return '';
}
this.hasDropboxWrapper = false;
return html;
}
}, {
key: "renderOptions",
value: function renderOptions() {
var _this = this;
var html = '';
var visibleOptions = this.getVisibleOptions();
var checkboxHtml = '';
var newOptionIconHtml = '';
var markSearchResults = !!(this.markSearchResults && this.searchValue);
var searchRegex;
var labelRenderer = this.labelRenderer,
disableOptionGroupCheckbox = this.disableOptionGroupCheckbox,
uniqueId = this.uniqueId,
searchGroup = this.searchGroup;
var hasLabelRenderer = typeof labelRenderer === 'function';
var convertToBoolean = Utils.convertToBoolean;
var groupName = '';
if (markSearchResults) {
searchRegex = new RegExp("(".concat(Utils.regexEscape(this.searchValue), ")(?!([^<]+)?>)"), 'gi');
}
if (this.multiple) {
checkboxHtml = '<span class="checkbox-icon"></span>';
}
if (this.allowNewOption) {
var newOptionTooltip = this.getTooltipAttrText('New Option');
newOptionIconHtml = "<span class=\"vscomp-new-option-icon\" ".concat(newOptionTooltip, "></span>");
}
visibleOptions.forEach(function (d) {
var index = d.index;
var optionLabel;
var optionClasses = 'vscomp-option';
var optionTooltip = _this.getTooltipAttrText('', true, true);
var leftSection = checkboxHtml;
var rightSection = '';
var description = '';
var groupIndexText = '';
var ariaLabel = '';
var tabIndexValue = '-1';
var isSelected = convertToBoolean(d.isSelected);
var ariaDisabledText = '';
if (d.classNames) {
optionClasses += " ".concat(d.classNames);
}
if (d.isFocused) {
tabIndexValue = '0';
optionClasses += ' focused';
}
if (d.isDisabled) {
optionClasses += ' disabled';
ariaDisabledText = 'aria-disabled="true"';
}
if (d.isGroupTitle) {
groupName = d.label;
optionClasses += ' group-title';
if (disableOptionGroupCheckbox) {
leftSection = '';
}
}
if (isSelected) {
optionClasses += ' selected';
}
if (d.isGroupOption) {
var optionDesc = '';
optionClasses += ' group-option';
groupIndexText = "data-group-index=\"".concat(d.groupIndex, "\"");
if (d.customData) {
groupName = d.customData.group_name !== undefined ? "".concat(d.customData.group_name, ", ") : '';
optionDesc = d.customData.description !== undefined ? " ".concat(d.customData.description, ",") : '';
ariaLabel = "aria-label=\"".concat(groupName, " ").concat(d.label, ", ").concat(optionDesc, "\"");
} else {
ariaLabel = "aria-label=\"".concat(groupName, ", ").concat(d.label, "\"");
}
}
if (hasLabelRenderer) {
optionLabel = labelRenderer(d);
} else {
optionLabel = d.label;
}
if (d.description) {
description = "<div class=\"vscomp-option-description\" ".concat(optionTooltip, ">").concat(d.description, "</div>");
}
if (d.isCurrentNew) {
optionClasses += ' current-new';
rightSection += newOptionIconHtml;
} else if (markSearchResults && (!d.isGroupTitle || searchGroup)) {
optionLabel = optionLabel.replace(searchRegex, '<mark>$1</mark>');
}
html += "<div role=\"option\" aria-selected=\"".concat(isSelected, "\" id=\"vscomp-option-").concat(uniqueId, "-").concat(index, "\"\n class=\"").concat(optionClasses, "\" data-value=\"").concat(d.value, "\" data-index=\"").concat(index, "\" data-visible-index=\"").concat(d.visibleIndex, "\"\n tabindex=").concat(tabIndexValue, " ").concat(groupIndexText, " ").concat(ariaDisabledText, " ").concat(ariaLabel, "\n >\n ").concat(leftSection, "\n <span class=\"vscomp-option-text\" ").concat(optionTooltip, ">\n ").concat(optionLabel, "\n </span>\n ").concat(description, "\n ").concat(rightSection, "\n </div>");
});
groupName = '';
this.$options.innerHTML = html;
this.$visibleOptions = this.$options.querySelectorAll('.vscomp-option');
this.afterRenderOptions();
}
}, {
key: "renderSearch",
value: function renderSearch() {
if (!this.hasSearchContainer) {
return;
}
var checkboxHtml = '';
var searchInput = '';
if (this.multiple && !this.disableSelectAll) {
checkboxHtml = "<span class=\"vscomp-toggle-all-button\" tabindex=\"0\" aria-label=\"".concat(this.selectAllText, "\">\n <span class=\"checkbox-icon vscomp-toggle-all-checkbox\"></span>\n <span class=\"vscomp-toggle-all-label\">").concat(this.selectAllText, "</span>\n </span>");
}
if (this.hasSearch) {
var ariaLabelSearchClearBtnTxt = this.ariaLabelSearchClearButtonText ? "aria-label=\"".concat(this.ariaLabelSearchClearButtonText, "\"") : '';
searchInput = "<label for=\"vscomp-search-input-".concat(this.uniqueId, "\" class=\"vscomp-search-label\"\n id=\"vscomp-search-label-").concat(this.uniqueId, "\"\n >\n ").concat(this.searchFormLabel, "\n </label>\n <input type=\"text\" class=\"vscomp-search-input\" placeholder=\"").concat(this.searchPlaceholderText, "\"\n id=\"vscomp-search-input-").concat(this.uniqueId, "\">\n <span class=\"vscomp-search-clear\" role=\"button\" ").concat(ariaLabelSearchClearBtnTxt, ">×</span>");
}
var html = "<div class=\"vscomp-search-container\">\n ".concat(checkboxHtml, "\n ").concat(searchInput, "\n </div>");
this.$search.innerHTML = html;
this.$searchInput = this.$dropboxContainer.querySelector('.vscomp-search-input');
this.$searchClear = this.$dropboxContainer.querySelector('.vscomp-search-clear');
this.$toggleAllButton = this.$dropboxContainer.querySelector('.vscomp-toggle-all-button');
this.$toggleAllCheckbox = this.$dropboxContainer.querySelector('.vscomp-toggle-all-checkbox');
this.addEvent(this.$searchInput, 'input', 'onSearch');
this.addEvent(this.$searchClear, 'click keydown', 'onSearchClear');
this.addEvent(this.$toggleAllButton, 'click', 'onToggleAllOptions');
this.addEvent(this.$dropboxContainerBottom, 'focus', 'onDropboxContainerTopOrBottomFocus');
this.addEvent(this.$dropboxContainerTop, 'focus', 'onDropboxContainerTopOrBottomFocus');
}
/** render methods - end */
/** dom event methods - start */
}, {
key: "addEvents",
value: function addEvents() {
this.addEvent(document, 'click', 'onDocumentClick');
this.addEvent(this.$allWrappers, 'keydown', 'onKeyDown');
this.addEvent(this.$toggleButton, 'click keydown', 'onToggleButtonPress');
this.addEvent(this.$clearButton, 'click keydown', 'onClearButtonClick');
this.addEvent(this.$dropboxContainer, 'click', 'onDropboxContainerClick');
this.addEvent(this.$dropboxCloseButton, 'click', 'onDropboxCloseButtonClick');
this.addEvent(this.$optionsContainer, 'scroll', 'onOptionsScroll');
this.addEvent(this.$options, 'click', 'onOptionsClick');
this.addEvent(this.$options, 'mouseover', 'onOptionsMouseOver');
this.addEvent(this.$options, 'touchmove', 'onOptionsTouchMove');
this.addMutationObserver();
}
}, {
key: "addEvent",
value: function addEvent($ele, events, method) {
var _this2 = this;
if (!$ele) {
return;
}
var eventsArray = Utils.removeArrayEmpty(events.split(' '));
eventsArray.forEach(function (event) {
var eventsKey = "".concat(method, "-").concat(event);
var callback = _this2.events[eventsKey];
if (!callback) {
callback = _this2[method].bind(_this2);
_this2.events[eventsKey] = callback;
}
DomUtils.addEvent($ele, event, callback);
});
}
/** dom event methods - start */
}, {
key: "removeEvents",
value: function removeEvents() {
this.removeEvent(document, 'click', 'onDocumentClick');
this.removeEvent(this.$allWrappers, 'keydown', 'onKeyDown');
this.removeEvent(this.$toggleButton, 'click keydown', 'onToggleButtonPress');
this.removeEvent(this.$clearButton, 'click keydown', 'onClearButtonClick');
this.removeEvent(this.$dropboxContainer, 'click', 'onDropboxContainerClick');
this.removeEvent(this.$dropboxCloseButton, 'click', 'onDropboxCloseButtonClick');
this.removeEvent(this.$optionsContainer, 'scroll', 'onOptionsScroll');
this.removeEvent(this.$options, 'click', 'onOptionsClick');
this.removeEvent(this.$options, 'mouseover', 'onOptionsMouseOver');
this.removeEvent(this.$options, 'touchmove', 'onOptionsTouchMove');
this.removeMutationObserver();
}
}, {
key: "removeEvent",
value: function removeEvent($ele, events, method) {
var _this3 = this;
if (!$ele) {
return;
}
var eventsArray = Utils.removeArrayEmpty(events.split(' '));
eventsArray.forEach(function (event) {
var eventsKey = "".concat(method, "-").concat(event);
var callback = _this3.events[eventsKey];
if (callback) {
DomUtils.removeEvent($ele, event, callback);
}
});
}
}, {
key: "onDocumentClick",
value: function onDocumentClick(e) {
var $eleToKeepOpen = e.target.closest('.vscomp-wrapper');
if ($eleToKeepOpen !== this.$wrapper && $eleToKeepOpen !== this.$dropboxWrapper && this.isOpened()) {
this.closeDropbox();
}
}
}, {
key: "onKeyDown",
value: function onKeyDown(e) {
var key = e.which || e.keyCode;
var method = keyDownMethodMapping[key];
if (document.activeElement === this.$searchInput && !e.shiftKey && key === 9 && !this.multiple) {
e.preventDefault();
this.focusFirstVisibleOption();
}
if (document.activeElement === this.$toggleAllButton && key === 13) {
this.toggleAllOptions();
return;
}
// Handle the Escape key when showing the dropdown as a popup, closing it
if (key === 27 || e.key === 'Escape') {
var wrapper = this.showAsPopup ? this.$wrapper : this.$dropboxWrapper;
if ((document.activeElement === wrapper || wrapper.contains(document.activeElement)) && !this.keepAlwaysOpen) {
this.closeDropbox();
return;
}
}
if (method) {
this[method](e);
}
}
}, {
key: "onEnterPress",
value: function onEnterPress(e) {
e.preventDefault();
if (this.isOpened()) {
this.selectFocusedOption();
} else if (this.$ele.disabled === false) {
this.openDropbox();
}
}
}, {
key: "onDownArrowPress",
value: function onDownArrowPress(e) {
e.preventDefault();
if (this.isOpened()) {
this.focusOption({
direction: 'next'
});
} else {
this.openDropbox();
}
}
}, {
key: "onUpArrowPress",
value: function onUpArrowPress(e) {
e.preventDefault();
if (this.isOpened()) {
this.focusOption({
direction: 'previous'
});
} else {
this.openDropbox();
}
}
}, {
key: "onBackspaceOrDeletePress",
value: function onBackspaceOrDeletePress(e) {
if (e.target === this.$wrapper) {
e.preventDefault();
if (this.selectedValues.length > 0) {
this.reset();
}
}
}
}, {
key: "onToggleButtonPress",
value: function onToggleButtonPress(e) {
e.stopPropagation();
if (e.type === 'keydown' && e.code !== 'Enter' && e.code !== 'Space') {
return;
}
var $target = e.target;
if ($target.closest('.vscomp-value-tag-clear-button')) {
this.removeValue($target.closest('.vscomp-value-tag'));
} else if (!$target.closest('.toggle-button-child')) {
this.toggleDropbox();
}
}
}, {
key: "onClearButtonClick",
value: function onClearButtonClick(e) {
if (e.type === 'click') {
this.reset();
} else if (e.type === 'keydown' && (e.code === 'Enter' || e.code === 'Space')) {
e.stopPropagation();
this.reset();
}
}
}, {
key: "onOptionsScroll",
value: function onOptionsScroll() {
this.setVisibleOptions();
}
}, {
key: "onOptionsClick",
value: function onOptionsClick(e) {
var $option = e.target.closest('.vscomp-option');
if ($option && !DomUtils.hasClass($option, 'disabled')) {
if (DomUtils.hasClass($option, 'group-title')) {
this.onGroupTitleClick($option);
} else {
this.selectOption($option, {
event: e
});
}
}
}
}, {
key: "onGroupTitleClick",
value: function onGroupTitleClick($ele) {
if (!$ele || !this.multiple || this.disableOptionGroupCheckbox) {
return;
}
var isAdding = !DomUtils.hasClass($ele, 'selected');
this.toggleGroupTitleCheckbox($ele, isAdding);
this.toggleGroupOptions($ele, isAdding);
}
}, {
key: "onDropboxContainerClick",
value: function onDropboxContainerClick(e) {
if (!e.target.closest('.vscomp-dropbox')) {
this.closeDropbox();
}
}
}, {
key: "onDropboxCloseButtonClick",
value: function onDropboxCloseButtonClick() {
this.closeDropbox();
}
}, {
key: "onOptionsMouseOver",
value: function onOptionsMouseOver(e) {
var $ele = e.target.closest('.vscomp-option');
if ($ele && this.isOpened()) {
if (DomUtils.hasClass($ele, 'disabled') || DomUtils.hasClass($ele, 'group-title')) {
this.removeOptionFocus();
} else {
this.focusOption({
$option: $ele
});
}
}
}
}, {
key: "onOptionsTouchMove",
value: function onOptionsTouchMove() {
this.removeOptionFocus();
}
}, {
key: "onSearch",
value: function onSearch(e) {
e.stopPropagation();
this.setSearchValue(e.target.value, true);
}
}, {
key: "onSearchClear",
value: function onSearchClear(e) {
e.stopPropagation();
if (e.code === 'Enter' || e.code === 'Space' || e.type === 'click') {
this.setSearchValue('');
this.focusSearchInput();