@appbaseio/reactivesearch-vue 1.25.0 → 1.27.0-gamma.2

package/dist/@appbaseio/reactivesearch-vue.umd.js

@@ -1351,7 +1351,6 @@
 	  }
 
 	  var defaultAnalyticsConfig = exports.defaultAnalyticsConfig = {
-	    searchStateHeader: false,
 	    emptyQuery: true,
 	    suggestionAnalytics: true,
 	    userId: null,
@@ -1729,7 +1728,19 @@
 	        return _extends({}, state, _defineProperty({}, action.component, _extends({}, state[action.component], action.payload)));
 
 	      case constants.CLEAR_VALUES:
-	        return {};
+	        {
+	          if (action.resetValues) {
+	            var nextState = {};
+	            Object.keys(action.resetValues).forEach(function (componentId) {
+	              nextState[componentId] = _extends({}, state[componentId], {
+	                value: action.resetValues[componentId]
+	              });
+	            });
+	            return nextState;
+	          }
+
+	          return {};
+	        }
 
 	      case constants.REMOVE_COMPONENT:
 	        {
@@ -4850,7 +4861,7 @@
 	  Object.defineProperty(exports, "__esModule", {
 	    value: true
 	  });
-	  exports.getTopSuggestions = exports.withClickIds = exports.getCompositeAggsQuery = exports.getAggsQuery = exports.extractQueryFromDefaultQuery = exports.updateInternalQuery = exports.getSearchState = exports.getOptionsFromQuery = exports.parseHits = exports.handleA11yAction = exports.getInnerKey = exports.getClassName = exports.checkSomePropChange = exports.checkPropChange = exports.updateDefaultQuery = exports.updateCustomQuery = undefined;
+	  exports.suggestionTypes = exports.getTopSuggestions = exports.withClickIds = exports.getCompositeAggsQuery = exports.getAggsQuery = exports.extractQueryFromDefaultQuery = exports.updateInternalQuery = exports.getSearchState = exports.getOptionsFromQuery = exports.parseHits = exports.handleA11yAction = exports.getInnerKey = exports.getClassName = exports.checkSomePropChange = exports.checkPropChange = exports.updateDefaultQuery = exports.updateCustomQuery = undefined;
 
 	  var _extends = Object.assign || function (target) {
 	    for (var i = 1; i < arguments.length; i++) {
@@ -5664,37 +5675,45 @@
 	  function isValidDateRangeQueryFormat(queryFormat) {
 	    return Object.keys(_dateFormats2["default"]).includes(queryFormat);
 	  }
+
+	  var suggestionTypes = exports.suggestionTypes = {
+	    Popular: 'popular',
+	    Index: 'index',
+	    Recent: 'recent',
+	    Promoted: 'promoted'
+	  };
 	});
 	unwrapExports(helper);
-	var helper_1 = helper.getTopSuggestions;
-	var helper_2 = helper.withClickIds;
-	var helper_3 = helper.getCompositeAggsQuery;
-	var helper_4 = helper.getAggsQuery;
-	var helper_5 = helper.extractQueryFromDefaultQuery;
-	var helper_6 = helper.updateInternalQuery;
-	var helper_7 = helper.getSearchState;
-	var helper_8 = helper.getOptionsFromQuery;
-	var helper_9 = helper.parseHits;
-	var helper_10 = helper.handleA11yAction;
-	var helper_11 = helper.getInnerKey;
-	var helper_12 = helper.getClassName;
-	var helper_13 = helper.checkSomePropChange;
-	var helper_14 = helper.checkPropChange;
-	var helper_15 = helper.updateDefaultQuery;
-	var helper_16 = helper.updateCustomQuery;
-	var helper_17 = helper.isEqual;
-	var helper_18 = helper.debounce;
-	var helper_19 = helper.getQueryOptions;
-	var helper_20 = helper.buildQuery;
-	var helper_21 = helper.pushToAndClause;
-	var helper_22 = helper.checkValueChange;
-	var helper_23 = helper.getAggsOrder;
-	var helper_24 = helper.formatDate;
-	var helper_25 = helper.getResultStats;
-	var helper_26 = helper.extractFieldsFromSource;
-	var helper_27 = helper.normalizeDataField;
-	var helper_28 = helper.handleOnSuggestions;
-	var helper_29 = helper.isValidDateRangeQueryFormat;
+	var helper_1 = helper.suggestionTypes;
+	var helper_2 = helper.getTopSuggestions;
+	var helper_3 = helper.withClickIds;
+	var helper_4 = helper.getCompositeAggsQuery;
+	var helper_5 = helper.getAggsQuery;
+	var helper_6 = helper.extractQueryFromDefaultQuery;
+	var helper_7 = helper.updateInternalQuery;
+	var helper_8 = helper.getSearchState;
+	var helper_9 = helper.getOptionsFromQuery;
+	var helper_10 = helper.parseHits;
+	var helper_11 = helper.handleA11yAction;
+	var helper_12 = helper.getInnerKey;
+	var helper_13 = helper.getClassName;
+	var helper_14 = helper.checkSomePropChange;
+	var helper_15 = helper.checkPropChange;
+	var helper_16 = helper.updateDefaultQuery;
+	var helper_17 = helper.updateCustomQuery;
+	var helper_18 = helper.isEqual;
+	var helper_19 = helper.debounce;
+	var helper_20 = helper.getQueryOptions;
+	var helper_21 = helper.buildQuery;
+	var helper_22 = helper.pushToAndClause;
+	var helper_23 = helper.checkValueChange;
+	var helper_24 = helper.getAggsOrder;
+	var helper_25 = helper.formatDate;
+	var helper_26 = helper.getResultStats;
+	var helper_27 = helper.extractFieldsFromSource;
+	var helper_28 = helper.normalizeDataField;
+	var helper_29 = helper.handleOnSuggestions;
+	var helper_30 = helper.isValidDateRangeQueryFormat;
 
 	var value = createCommonjsModule(function (module, exports) {
 	  Object.defineProperty(exports, "__esModule", {
@@ -5816,8 +5835,10 @@
 	  }
 
 	  function clearValues() {
+	    var resetValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	    return {
-	      type: constants.CLEAR_VALUES
+	      type: constants.CLEAR_VALUES,
+	      resetValues: resetValues
 	    };
 	  }
 	});
@@ -7384,7 +7405,8 @@
 	            execute = true;
 	          }
 
-	          var dependentQuery = getRSQuery(component, extractPropsFromState(store, component, _extends({}, store.props[component].componentType === constants$1.componentTypes.searchBox ? _extends({}, execute === false ? {
+	          var componentProps = store.props[component];
+	          var dependentQuery = getRSQuery(component, extractPropsFromState(store, component, _extends({}, componentProps && componentProps.componentType === constants$1.componentTypes.searchBox ? _extends({}, execute === false ? {
 	            type: constants$1.queryTypes.search
 	          } : {}, calcValues.category ? {
 	            categoryValue: calcValues.category
@@ -8359,6 +8381,20 @@
 	    value: true
 	  });
 
+	  var _extends = Object.assign || function (target) {
+	    for (var i = 1; i < arguments.length; i++) {
+	      var source = arguments[i];
+
+	      for (var key in source) {
+	        if (Object.prototype.hasOwnProperty.call(source, key)) {
+	          target[key] = source[key];
+	        }
+	      }
+	    }
+
+	    return target;
+	  };
+
 	  var _crossFetch2 = _interopRequireDefault(browserPonyfill);
 
 	  function _interopRequireDefault(obj) {
@@ -8367,20 +8403,26 @@
 	    };
 	  }
 
-	  var fetchGraphQL = function fetchGraphQL(graphQLUrl, url, credentials, app, query) {
+	  var fetchGraphQL = function fetchGraphQL(requestOptions) {
+	    var graphQLUrl = requestOptions.graphQLUrl,
+	        url = requestOptions.url,
+	        credentials = requestOptions.credentials,
+	        app = requestOptions.app,
+	        query = requestOptions.query,
+	        headers = requestOptions.headers;
 	    var fetchUrl = credentials ? url.replace('//', '//' + credentials + '@') : url;
 	    return (0, _crossFetch2["default"])(graphQLUrl, {
 	      method: 'POST',
-	      body: '\n\t\t\tquery{\n\t\t\t\telastic50(host: "' + fetchUrl + '"){\n\t\t\t\t\tmsearch(\n\t\t\t\t\t\tindex: "' + app + '"\n\t\t\t\t\t\tbody: ' + JSON.stringify(query.map(function (item) {
+	      body: '\n\t\t\tquery{\n\t\t\t\telastic77(host: "' + fetchUrl + '"){\n\t\t\t\t\tmsearch(\n\t\t\t\t\t\tindex: "' + app + '"\n\t\t\t\t\t\tbody: ' + JSON.stringify(query.map(function (item) {
 	        return JSON.stringify(item);
 	      })) + '\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t}\n\t\t',
-	      headers: {
+	      headers: _extends({}, headers, {
 	        'Content-Type': 'application/graphql'
-	      }
+	      })
 	    }).then(function (res) {
 	      return res.json();
 	    }).then(function (jsonRes) {
-	      return jsonRes.data.elastic50.msearch;
+	      return jsonRes.data.elastic77.msearch;
 	    })["catch"](function (error) {
 	      console.error(error);
 	    });
@@ -8490,6 +8532,15 @@
 	    };
 	  }
 
+	  var handleTransformRequest = function handleTransformRequest(transformRequest, res) {
+	    if (transformRequest && typeof transformRequest === 'function') {
+	      var transformRequestPromise = transformRequest(res);
+	      return transformRequestPromise instanceof Promise ? transformRequestPromise : Promise.resolve(transformRequestPromise);
+	    }
+
+	    return Promise.resolve(res);
+	  };
+
 	  function msearch(query, orderOfQueries) {
 	    var appendToHits = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 	    var isInternalComponent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -8540,14 +8591,6 @@
 	          }
 	        }
 
-	        if (config.analyticsConfig.searchStateHeader) {
-	          var searchState = (0, helper.getSearchState)(getState(), true);
-
-	          if (searchState && Object.keys(searchState).length) {
-	            searchHeaders['X-Search-State'] = JSON.stringify(searchState);
-	          }
-	        }
-
 	        if (config.analyticsConfig.userId) {
 	          searchHeaders['X-User-Id'] = config.analyticsConfig.userId;
 	        }
@@ -8563,14 +8606,29 @@
 	      });
 
 	      if (config.graphQLUrl) {
-	        (0, _graphQL2["default"])(config.graphQLUrl, config.url, config.credentials, config.app, query).then(function (res) {
-	          (0, utils.handleResponseMSearch)({
-	            res: res,
-	            isSuggestionsQuery: isSuggestionsQuery,
-	            orderOfQueries: orderOfQueries,
-	            appendToHits: appendToHits,
-	            appendToAggs: appendToAggs
-	          }, getState, dispatch);
+	        var requestOptions = {
+	          graphQLUrl: config.graphQLUrl,
+	          url: config.url,
+	          credentials: config.credentials,
+	          app: config.app,
+	          query: query,
+	          headers: headers
+	        };
+	        handleTransformRequest(appbaseRef.transformRequest, requestOptions).then(function (modifiedRequest) {
+	          (0, _graphQL2["default"])(modifiedRequest).then(function (res) {
+	            (0, utils.handleResponseMSearch)({
+	              res: res,
+	              isSuggestionsQuery: isSuggestionsQuery,
+	              orderOfQueries: orderOfQueries,
+	              appendToHits: appendToHits,
+	              appendToAggs: appendToAggs
+	            }, getState, dispatch);
+	          })["catch"](function (err) {
+	            (0, utils.handleError)({
+	              orderOfQueries: orderOfQueries,
+	              error: err
+	            }, getState, dispatch);
+	          });
 	        })["catch"](function (err) {
 	          (0, utils.handleError)({
 	            orderOfQueries: orderOfQueries,
@@ -8767,7 +8825,7 @@
 	              var isInternalComponent = componentId.endsWith('__internal');
 	              var mainComponentProps = props[componentId];
 
-	              if (isInternalComponent && (0, transform.isSearchComponent)(mainComponentProps.componentType)) {
+	              if (isInternalComponent && mainComponentProps && (0, transform.isSearchComponent)(mainComponentProps.componentType)) {
 	                value$1 = internalValues[componentId] && internalValues[componentId].value;
 	              }
 
@@ -12846,19 +12904,19 @@
 	  unit: VueTypes.oneOf(['mi', 'miles', 'yd', 'yards', 'ft', 'feet', 'in', 'inch', 'km', 'kilometers', 'm', 'meters', 'cm', 'centimeters', 'mm', 'millimeters', 'NM', 'nmi', 'nauticalmiles']),
 	  value: VueTypes.string.def(undefined),
 	  analyticsConfig: VueTypes.shape({
-	    searchStateHeader: VueTypes.bool,
 	    emptyQuery: VueTypes.bool,
 	    suggestionAnalytics: VueTypes.bool,
 	    userId: VueTypes.string,
 	    customEvents: VueTypes.object
 	  }),
 	  appbaseConfig: VueTypes.shape({
-	    enableQueryRules: VueTypes.bool,
 	    recordAnalytics: VueTypes.bool,
-	    searchStateHeader: VueTypes.bool,
 	    emptyQuery: VueTypes.bool,
 	    suggestionAnalytics: VueTypes.bool,
+	    enableQueryRules: VueTypes.bool,
+	    enableSearchRelevancy: VueTypes.bool,
 	    userId: VueTypes.string,
+	    useCache: VueTypes.bool,
 	    customEvents: VueTypes.object,
 	    enableTelemetry: VueTypes.bool.def(true)
 	  }).def({}),
@@ -13206,10 +13264,16 @@
 	}; // parses current array (i.e. this.$props.value) for `onChange` callback for multi-* components
 
 	function parseValueArray(objectValues, currentValue) {
-	  var keys = Object.keys(objectValues);
-	  var selectedValues = keys.map(function (key) {
-	    return objectValues[key] ? key : null;
-	  });
+	  var selectedValues;
+
+	  if (Array.isArray(objectValues)) {
+	    selectedValues = [].concat(objectValues);
+	  } else {
+	    var keys = Object.keys(objectValues);
+	    selectedValues = keys.map(function (key) {
+	      return objectValues[key] ? key : null;
+	    });
+	  }
 
 	  if (selectedValues.includes(currentValue)) {
 	    return selectedValues.filter(function (item) {
@@ -14024,6 +14088,12 @@
 	      });
 	    }
 
+	    if (this.urlSortOption) {
+	      this.sortOptionIndex = this.$props.sortOptions.findIndex(function (s) {
+	        return s.label === _this.urlSortOption;
+	      }) || 0;
+	    }
+
 	    this.updateComponentProps(this.componentId, {
 	      from: this.from
 	    }, constants_1$1.reactiveList);
@@ -14114,7 +14184,7 @@
 	        filteredResults = [].concat(parsedPromotedResults, filteredResults);
 	      }
 
-	      return helper_2(filteredResults);
+	      return helper_3(filteredResults);
 	    }
 	  },
 	  watch: {
@@ -14332,7 +14402,7 @@
 	        "labelPosition": this.sortOptions ? 'right' : 'left'
 	      },
 	      "class": getClassName$1(this.$props.innerClass, 'resultsInfo')
-	    }, [this.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats && results.length ? this.renderStats() : null]), !this.isLoading && results.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? h(Pagination, {
+	    }, [this.sortOptions ? this.renderSortOptions() : null, this.$props.showResultStats && results.length ? this.renderStats() : null]), !this.isLoading && hits && hits.length === 0 ? this.renderNoResult() : null, this.shouldRenderPagination && (this.$props.paginationAt === 'top' || this.$props.paginationAt === 'both') ? h(Pagination, {
 	      "attrs": {
 	        "pages": this.$props.pages,
 	        "totalPages": this.totalPages,
@@ -14540,8 +14610,11 @@
 	          sortBy: sortBy
 	        }, constants_1$1.reactiveList);
 	        this.setQueryOptions(this.$props.componentId, options, true);
+	        this.setPage(0);
 	        this.currentPageState = 0;
 	        this.from = 0;
+	        var sortOption = this.$props.sortOptions[this.sortOptionIndex] ? this.$props.sortOptions[this.sortOptionIndex].label : null;
+	        this.setPageURL(this.$props.componentId + "sortOption", sortOption, this.$props.componentId + "sortOption", false, this.$props.URLParams);
 	      }
 	    },
 	    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
@@ -14653,6 +14726,7 @@
 	var mapStateToProps$1 = function mapStateToProps(state, props) {
 	  return {
 	    defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1,
+	    urlSortOption: state.selectedValues[props.componentId + "sortOption"] && state.selectedValues[props.componentId + "sortOption"].value,
 	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits,
 	    rawData: state.rawData[props.componentId],
 	    aggregationData: state.compositeAggregations[props.componentId],
@@ -17087,14 +17161,14 @@
 	      this.updateState(this.$props);
 	    },
 	    analyticsConfig: function analyticsConfig(newVal, oldVal) {
-	      if (!helper_17(newVal, oldVal)) {
+	      if (!helper_18(newVal, oldVal)) {
 	        if (this.store) {
 	          this.store.dispatch(analytics_3$1(newVal));
 	        }
 	      }
 	    },
 	    appbaseConfig: function appbaseConfig(newVal, oldVal) {
-	      if (!helper_17(newVal, oldVal)) {
+	      if (!helper_18(newVal, oldVal)) {
 	        if (this.store) {
 	          this.store.dispatch(analytics_3$1(newVal));
 	        }
@@ -17871,7 +17945,7 @@
 	});
 
 	var suggestions$1 = function suggestions(themePreset, theme) {
-	  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 395px;\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark$1(theme));
+	  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 395px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark$1(theme));
 	};
 
 	var suggestionsContainer = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
@@ -18027,8 +18101,7 @@
 	      internal_isOpen: false,
 	      internal_inputValue: '',
 	      internal_selectedItem: null,
-	      internal_highlightedIndex: null,
-	      internal_eventsCalled: {}
+	      internal_highlightedIndex: null
 	    };
 	  },
 	  computed: {
@@ -18213,23 +18286,11 @@
 	      }
 
 	      var vm = this;
-	      setTimeout(function () {
-	        vm.internal_eventsCalled[index] = false;
-	      }, 0);
 	      return {
 	        mouseenter: function mouseenter() {
 	          vm.setHighlightedIndex(newIndex);
 	        },
-	        // for browsers not supporting click event (e.g. firefox android)
-	        mousedown: function mousedown(event) {
-	          if (vm.internal_eventsCalled[index]) return;
-	          vm.internal_eventsCalled[index] = true;
-	          event.stopPropagation();
-	          vm.selectItemAtIndex(newIndex);
-	        },
 	        click: function click(event) {
-	          if (vm.internal_eventsCalled[index]) return;
-	          vm.internal_eventsCalled[index] = true;
 	          event.stopPropagation();
 	          vm.selectItemAtIndex(newIndex);
 	        }
@@ -18924,19 +18985,22 @@
 	        title = _this$suggestion.title,
 	        description = _this$suggestion.description,
 	        image = _this$suggestion.image,
-	        isPredictiveSuggestion = _this$suggestion.isPredictiveSuggestion;
+	        isPredictiveSuggestion = _this$suggestion.isPredictiveSuggestion,
+	        _suggestion_type = _this$suggestion._suggestion_type,
+	        _category = _this$suggestion._category;
 
 	    if (label) {
 	      // label has highest precedence
 	      return typeof label === 'string' ? h("div", {
 	        "class": "trim"
-	      }, [isPredictiveSuggestion ? h(PredictiveSuggestion, {
+	      }, [(_category ? false : isPredictiveSuggestion // eslint-disable-next-line
+	      || !!_suggestion_type) ? h(PredictiveSuggestion, {
 	        "domProps": {
 	          "innerHTML": label
 	        }
 	      }) : h(VueHighlightWords, {
 	        "attrs": {
-	          "searchWords": this.currentValue.split(' '),
+	          "searchWords": _category ? [_category] : this.currentValue.split(' '),
 	          "textToHighlight": label,
 	          "autoEscape": true,
 	          "highlightStyle": highlightStyle
@@ -19005,17 +19069,22 @@
 	};
 
 	var SearchSvg = {
-	  functional: true,
-	  render: function render(h) {
+	  name: 'SearchSvg',
+	  props: ['styles'],
+	  render: function render() {
+	    var h = arguments[0];
 	    return h("svg", {
 	      "attrs": {
 	        "alt": "Search",
-	        "height": "14",
-	        "width": "10",
+	        "height": "12",
 	        "xmlns": "http://www.w3.org/2000/svg",
 	        "viewBox": "0 0 15 15"
 	      },
-	      "class": "search-icon"
+	      "class": "search-icon",
+	      "style": _extends({
+	        transform: 'scale(1.35)',
+	        position: 'relative'
+	      }, this.$props.styles ? this.$props.styles : {})
 	    }, [h("title", ["Search"]), h("path", {
 	      "attrs": {
 	        "d": 'M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'
@@ -19687,11 +19756,11 @@
 	      }, [this.customIcon]);
 	    }
 
-	    if (this.$props.type === 'popular-search-icon') {
+	    if (this.$props.type === 'recent-search-icon') {
 	      return h("svg", {
 	        "attrs": {
 	          "xmlns": "http://www.w3.org/2000/svg",
-	          "alt": "Popular Searches",
+	          "alt": "Recent Search",
 	          "height": "20",
 	          "width": "20",
 	          "viewBox": "0 0 24 24"
@@ -19707,14 +19776,36 @@
 	        }
 	      }), h("path", {
 	        "attrs": {
-	          "d": "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"
+	          "d": "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
 	        }
 	      })]);
-	    } else {
+	    }
+
+	    if (this.$props.type === 'promoted-search-icon') {
+	      return h("svg", {
+	        "attrs": {
+	          "xmlns": "http://www.w3.org/2000/svg",
+	          "width": "20",
+	          "alt": "promoted search",
+	          "height": "20",
+	          "viewBox": "0 0 24 24"
+	        },
+	        "class": this.$props.className,
+	        "style": {
+	          fill: '#707070'
+	        }
+	      }, [h("path", {
+	        "attrs": {
+	          "d": "M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
+	        }
+	      })]);
+	    }
+
+	    if (this.$props.type === 'popular-search-icon') {
 	      return h("svg", {
 	        "attrs": {
 	          "xmlns": "http://www.w3.org/2000/svg",
-	          "alt": "Recent Searches",
+	          "alt": "Popular Search",
 	          "height": "20",
 	          "width": "20",
 	          "viewBox": "0 0 24 24"
@@ -19730,10 +19821,21 @@
 	        }
 	      }), h("path", {
 	        "attrs": {
-	          "d": "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
+	          "d": "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"
 	        }
 	      })]);
 	    }
+
+	    return h(SearchSvg, {
+	      "attrs": {
+	        "styles": {
+	          position: 'relative',
+	          fill: '#707070',
+	          left: '3px',
+	          marginRight: '8px'
+	        }
+	      }
+	    });
 	  }
 	};
 
@@ -20110,7 +20212,7 @@
 	    // returns size and aggs property
 	    getBasicQueryOptions: function getBasicQueryOptions() {
 	      var aggregationField = this.$props.aggregationField;
-	      var queryOptions = helper_19(this.$props);
+	      var queryOptions = helper_20(this.$props);
 
 	      if (aggregationField) {
 	        queryOptions.aggs = getCompositeAggsQuery$1({
@@ -20216,7 +20318,7 @@
 	        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
 	      }
 
-	      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions));
+	      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), false);
 	      this.updateQuery({
 	        componentId: this.internalComponent,
 	        query: query,
@@ -20243,7 +20345,7 @@
 
 	        customQueryOptions = getOptionsFromQuery$1(customQueryTobeSet);
 	        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
-	        this.setQueryOptions(componentId, _extends({}, this.queryOptions, customQueryOptions));
+	        this.setQueryOptions(componentId, _extends({}, this.queryOptions, customQueryOptions), false);
 	      }
 
 	      if (!this.isPending) {
@@ -20977,167 +21079,1322 @@
 
 	DataSearch.componentType = constants_1$1.dataSearch;
 
-	var _templateObject$j, _templateObject2$7, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
-	var item = {
-	  width: '15px',
-	  height: '15px',
-	  scale: '4px'
-	};
-	var vh = css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n\tborder: 0;\n\tclip: rect(1px, 1px, 1px, 1px);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twidth: 1px;\n\twhite-space: nowrap;\n"])));
-	var hideInputControl = css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n\t+ label {\n\t\tpadding-left: 0;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder: 0;\n\t\t\tmargin: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n"])));
-
-	var formItem = function formItem(_ref) {
-	  var theme = _ref.theme;
-	  return css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n\t", ";\n\n\t&:focus {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tbox-shadow: 0 0 0 2px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:hover {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:active {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\ttransition-duration: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t+ label {\n\t\tposition: relative;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t&::before {\n\t\t\tbackground-color: #fff;\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tcolor: ", ";\n\t\t\tmargin-right: calc(", " * 0.5);\n\t\t\ttop: 50%;\n\t\t\tleft: 0;\n\t\t\twidth: ", ";\n\t\t\theight: ", ";\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\n\t\t&::after {\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 2);\n\t\t\twidth: calc(", " - ", ");\n\t\t\theight: calc(", " - ", ");\n\t\t\tmargin-top: calc(", " / -2 - ", " / -2);\n\t\t\ttransform: scale(0);\n\t\t\ttransform-origin: 50%;\n\t\t\ttransition: transform 200ms ease-out;\n\t\t}\n\t}\n"])), vh, curriedLighten(0.4, theme.colors.primaryColor), theme.colors.primaryColor, theme.colors.borderColor || curriedLighten(0.1, theme.colors.textColor), theme.colors.primaryColor, item.width, item.width, item.height, theme.colors.primaryColor, item.scale, item.width, item.scale, item.height, item.scale, item.height, item.scale);
-	};
-
-	var Radio = index$1('input')(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 50%;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t&:active,\n\t\t&:focus {\n\t\t\t+ label {\n\t\t\t\tcolor: ", ";\n\n\t\t\t\t&::before {\n\t\t\t\t\tanimation: none;\n\t\t\t\t\tfilter: none;\n\t\t\t\t\ttransition: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tanimation: none;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n"])), formItem, function (props) {
-	  return props.show ? null : hideInputControl;
-	}, function (_ref2) {
-	  var theme = _ref2.theme;
-	  return theme.colors.primaryColor;
-	}, function (_ref3) {
-	  var theme = _ref3.theme;
-	  return theme.colors.primaryColor;
-	});
-	var Checkbox = index$1('input')(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 5);\n\t\t\twidth: calc(", " / 2);\n\t\t\theight: calc(", " / 5);\n\t\t\tmargin-top: calc(", " / -2 / 2 * 0.8);\n\t\t\tborder-style: solid;\n\t\t\tborder-color: ", ";\n\t\t\tborder-width: 0 0 2px 2px;\n\t\t\tborder-radius: 0;\n\t\t\tborder-image: none;\n\t\t\ttransform: rotate(-45deg) scale(0);\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\ttransform: rotate(-45deg) scale(1);\n\t\t\t\ttransition: transform 200ms ease-out;\n\t\t\t}\n\t\t}\n\t}\n"])), formItem, function (props) {
-	  return props.show ? null : hideInputControl;
-	}, item.width, item.width, item.width, item.height, function (_ref4) {
-	  var theme = _ref4.theme;
-	  return theme.colors.primaryColor;
-	}, function (_ref5) {
-	  var theme = _ref5.theme;
-	  return theme.colors.primaryColor;
-	});
-	var UL = index$1('ul')(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 240px;\n\tposition: relative;\n\toverflow-y: auto;\n\tpadding-bottom: 12px;\n\n\tli {\n\t\theight 30px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding-left: 2px;\n\t}\n"])));
-
-	var getAggsOrder = lib_8.getAggsOrder;
-
-	var extractQuery = function extractQuery(props) {
-	  var queryToBeReturned = {};
-
-	  if (props.defaultQuery) {
-	    var evaluateQuery = props.defaultQuery([], props);
-
-	    if (evaluateQuery) {
-	      if (evaluateQuery.query) {
-	        queryToBeReturned.query = evaluateQuery.query;
+	var _templateObject$j;
+	var AutofillSvgIcon = index$1('button')(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
+	var AutoFillSvg = {
+	  name: 'AutoFillSvg',
+	  render: function render() {
+	    var h = arguments[0];
+	    return h(AutofillSvgIcon, {
+	      "on": {
+	        "click": this.$listeners.click
 	      }
-
-	      if (evaluateQuery.aggs) {
-	        queryToBeReturned.aggs = evaluateQuery.aggs;
+	    }, [h("svg", {
+	      "attrs": {
+	        "viewBox": "0 0 24 24"
 	      }
-	    }
-	  }
-
-	  return queryToBeReturned;
-	}; // eslint-disable-next-line import/prefer-default-export
-
-
-	var getAggsQuery = function getAggsQuery(query, props) {
-	  var _clonedQuery$aggs;
-
-	  var clonedQuery = query;
-	  var dataField = props.dataField,
-	      size = props.size,
-	      sortBy = props.sortBy,
-	      showMissing = props.showMissing,
-	      missingLabel = props.missingLabel;
-	  clonedQuery.size = 0;
-	  clonedQuery.aggs = (_clonedQuery$aggs = {}, _clonedQuery$aggs[dataField] = {
-	    terms: _extends({
-	      field: dataField,
-	      size: size,
-	      order: getAggsOrder(sortBy || 'count')
-	    }, showMissing ? {
-	      missing: missingLabel
-	    } : {})
-	  }, _clonedQuery$aggs);
-
-	  if (props.nestedField) {
-	    clonedQuery.aggs = {
-	      reactivesearch_nested: {
-	        nested: {
-	          path: props.nestedField
-	        },
-	        aggs: clonedQuery.aggs
+	    }, [h("path", {
+	      "attrs": {
+	        "d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
 	      }
-	    };
+	    })])]);
+	  },
+	  methods: {
+	    clicked: function clicked(e) {
+	      e.stopPropagation();
+	      window.console.log('hey', e);
+	    }
 	  }
-
-	  return _extends({}, clonedQuery, extractQuery(props));
 	};
 
 	var updateQuery$2 = lib_5.updateQuery,
-	    setQueryOptions$2 = lib_5.setQueryOptions,
 	    setCustomQuery$1 = lib_5.setCustomQuery,
-	    setDefaultQuery$2 = lib_5.setDefaultQuery;
-	var getQueryOptions$1 = lib_8.getQueryOptions,
+	    setDefaultQuery$2 = lib_5.setDefaultQuery,
+	    recordSuggestionClick$1 = lib_5.recordSuggestionClick;
+	var _debounce = lib_8.debounce,
 	    checkValueChange$1 = lib_8.checkValueChange,
 	    getClassName$4 = lib_8.getClassName,
-	    getOptionsFromQuery$2 = lib_8.getOptionsFromQuery,
-	    isEqual$5 = lib_8.isEqual;
-	var SingleList = {
-	  name: 'SingleList',
-	  props: {
-	    beforeValueChange: types.func,
-	    className: VueTypes.string.def(''),
-	    componentId: types.stringRequired,
-	    customQuery: types.func,
-	    dataField: types.stringRequired,
-	    defaultValue: types.string,
-	    value: types.value,
-	    defaultQuery: types.func,
-	    filterLabel: types.string,
-	    innerClass: types.style,
-	    placeholder: VueTypes.string.def('Search'),
-	    react: types.react,
-	    render: types.func,
-	    renderItem: types.func,
-	    renderNoResults: VueTypes.any,
-	    transformData: types.func,
-	    selectAllLabel: types.string,
-	    showCount: VueTypes.bool.def(true),
-	    showFilter: VueTypes.bool.def(true),
-	    showRadio: VueTypes.bool.def(true),
-	    showSearch: VueTypes.bool.def(true),
-	    size: VueTypes.number,
-	    sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
-	    title: types.title,
-	    URLParams: VueTypes.bool.def(false),
-	    showMissing: VueTypes.bool.def(false),
-	    missingLabel: VueTypes.string.def('N/A'),
-	    nestedField: types.string,
-	    index: VueTypes.string,
-	    enableStrictSelection: VueTypes.bool.def(false)
-	  },
+	    isEqual$5 = lib_8.isEqual,
+	    getCompositeAggsQuery$2 = lib_8.getCompositeAggsQuery,
+	    withClickIds$1 = lib_8.withClickIds,
+	    getResultStats$2 = lib_8.getResultStats,
+	    normalizeDataField$1 = lib_8.normalizeDataField;
+	var SearchBox = {
+	  name: 'SearchBox',
 	  data: function data() {
 	    var props = this.$props;
 	    this.__state = {
 	      currentValue: '',
-	      modifiedOptions: [],
-	      searchTerm: ''
+	      isOpen: false,
+	      normalizedSuggestions: []
 	    };
 	    this.internalComponent = props.componentId + "__internal";
 	    return this.__state;
 	  },
+	  inject: {
+	    theme: {
+	      from: 'theme_reactivesearch'
+	    }
+	  },
 	  created: function created() {
-	    if (!this.enableAppbase && this.$props.index) {
+	    var _this$$props = this.$props,
+	        distinctField = _this$$props.distinctField,
+	        distinctFieldConfig = _this$$props.distinctFieldConfig,
+	        index = _this$$props.index;
+
+	    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+	      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
+	    }
+
+	    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    }
+
+	    if (!this.enableAppbase && index) {
 	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
 	    }
 
-	    var props = this.$props;
-	    this.modifiedOptions = this.options && this.options[props.dataField] ? this.options[props.dataField].buckets : []; // Set custom and default queries in store
+	    this.currentValue = this.selectedValue || this.value || this.defaultValue || '';
+	    this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
+	    this.setValue(this.currentValue, true, this.$props, undefined, false, this.selectedCategory); // Set custom and default queries in store
 
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-	    updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
+	    this.triggerCustomQuery(this.currentValue, this.selectedCategory);
+	    this.triggerDefaultQuery(this.currentValue);
 	  },
-	  beforeMount: function beforeMount() {
-	    this.updateQueryHandlerOptions(this.$props);
-
-	    if (this.selectedValue) {
-	      this.setValue(this.selectedValue);
-	    } else if (this.$props.value) {
+	  computed: {
+	    hasCustomRenderer: function hasCustomRenderer$1() {
+	      return hasCustomRenderer(this);
+	    },
+	    stats: function stats() {
+	      return getResultStats$2(this);
+	    }
+	  },
+	  props: {
+	    autoFocus: VueTypes.bool,
+	    autosuggest: VueTypes.bool.def(true),
+	    beforeValueChange: types.func,
+	    className: VueTypes.string.def(''),
+	    clearIcon: types.children,
+	    componentId: types.stringRequired,
+	    customHighlight: types.func,
+	    customQuery: types.func,
+	    defaultQuery: types.func,
+	    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
+	      field: VueTypes.string,
+	      weight: VueTypes.number
+	    }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
+	      field: VueTypes.string,
+	      weight: VueTypes.number
+	    })]),
+	    aggregationField: types.string,
+	    aggregationSize: VueTypes.number,
+	    size: VueTypes.number,
+	    debounce: VueTypes.number.def(0),
+	    defaultValue: types.string,
+	    excludeFields: types.excludeFields,
+	    value: types.value,
+	    defaultSuggestions: types.suggestions,
+	    enableSynonyms: VueTypes.bool.def(true),
+	    enableQuerySuggestions: VueTypes.bool.def(false),
+	    enablePopularSuggestions: VueTypes.bool.def(false),
+	    enableRecentSuggestions: VueTypes.bool.def(false),
+	    fieldWeights: types.fieldWeights,
+	    filterLabel: types.string,
+	    fuzziness: types.fuzziness,
+	    highlight: VueTypes.bool,
+	    highlightField: types.stringOrArray,
+	    icon: types.children,
+	    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
+	    includeFields: types.includeFields,
+	    innerClass: types.style,
+	    innerRef: VueTypes.string.def('searchInputField'),
+	    render: types.func,
+	    renderNoSuggestion: types.title,
+	    renderError: types.title,
+	    placeholder: VueTypes.string.def('Search'),
+	    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
+	    react: types.react,
+	    showClear: VueTypes.bool.def(true),
+	    showDistinctSuggestions: VueTypes.bool.def(true),
+	    showFilter: VueTypes.bool.def(true),
+	    showIcon: VueTypes.bool.def(true),
+	    title: types.title,
+	    theme: types.style,
+	    URLParams: VueTypes.bool.def(false),
+	    strictSelection: VueTypes.bool.def(false),
+	    nestedField: types.string,
+	    enablePredictiveSuggestions: VueTypes.bool.def(false),
+	    recentSearchesIcon: VueTypes.any,
+	    popularSearchesIcon: VueTypes.any,
+	    //	mic props
+	    showVoiceSearch: VueTypes.bool.def(false),
+	    getMicInstance: types.func,
+	    renderMic: types.func,
+	    distinctField: types.string,
+	    distinctFieldConfig: types.props,
+	    //
+	    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
+	    addonBefore: VueTypes.any,
+	    addonAfter: VueTypes.any,
+	    expandSuggestionsContainer: VueTypes.bool.def(true),
+	    index: VueTypes.string,
+	    popularSuggestionsConfig: VueTypes.object,
+	    recentSuggestionsConfig: VueTypes.object,
+	    applyStopwords: VueTypes.bool,
+	    customStopwords: types.stringArray,
+	    onData: types.func,
+	    renderItem: types.func
+	  },
+	  mounted: function mounted() {
+	    this.listenForFocusShortcuts();
+	  },
+	  watch: {
+	    dataField: function dataField(newVal, oldVal) {
+	      if (!isEqual$5(newVal, oldVal)) {
+	        this.triggerCustomQuery(this.$data.currentValue);
+	      }
+	    },
+	    fieldWeights: function fieldWeights() {
+	      this.triggerCustomQuery(this.$data.currentValue);
+	    },
+	    fuzziness: function fuzziness() {
+	      this.triggerCustomQuery(this.$data.currentValue);
+	    },
+	    queryFormat: function queryFormat() {
+	      this.triggerCustomQuery(this.$data.currentValue);
+	    },
+	    defaultValue: function defaultValue(newVal) {
+	      this.setValue(newVal, true, this.$props);
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$5(newVal, oldVal)) {
+	        this.setValue(newVal, true, this.$props, newVal === '' ? lib_7.CLEAR_VALUE : undefined, false);
+	      }
+	    },
+	    defaultQuery: function defaultQuery(newVal, oldVal) {
+	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+	        this.triggerDefaultQuery(this.$data.currentValue);
+	      }
+	    },
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+	        this.triggerCustomQuery(this.$data.currentValue);
+	      }
+	    },
+	    suggestions: function suggestions(newVal) {
+	      var suggestionsList = [];
+
+	      if (Array.isArray(newVal) && newVal.length) {
+	        suggestionsList = [].concat(withClickIds$1(newVal));
+	      } else if (Array.isArray(this.$props.defaultSuggestions) && this.$props.defaultSuggestions.length) {
+	        suggestionsList = [].concat(withClickIds$1(this.$props.defaultSuggestions));
+	      }
+
+	      this.normalizedSuggestions = suggestionsList;
+	    },
+	    selectedValue: function selectedValue(newVal, oldVal) {
+	      if (oldVal !== newVal && this.$data.currentValue !== newVal) {
+	        if (!newVal && this.$data.currentValue) {
+	          // selected value is cleared, call onValueSelected
+	          this.onValueSelectedHandler('', lib_7.CLEAR_VALUE);
+	        }
+
+	        if (this.$props.value === undefined) {
+	          this.setValue(newVal || '', true, this.$props);
+	        }
+	      }
+	    },
+	    focusShortcuts: function focusShortcuts() {
+	      this.listenForFocusShortcuts();
+	    },
+	    rawData: function rawData(newVal) {
+	      this.$emit('on-data', {
+	        data: this.normalizedSuggestions,
+	        rawData: newVal,
+	        aggregationData: this.aggregationData,
+	        loading: this.isLoading,
+	        error: this.isError
+	      });
+	    },
+	    aggregationData: function aggregationData(newVal) {
+	      this.$emit('on-data', {
+	        data: this.normalizedSuggestions,
+	        rawData: this.rawData,
+	        aggregationData: newVal,
+	        loading: this.isLoading,
+	        error: this.isError
+	      });
+	    },
+	    loading: function loading(newVal) {
+	      this.$emit('on-data', {
+	        data: this.normalizedSuggestions,
+	        rawData: this.rawData,
+	        aggregationData: this.aggregationData,
+	        loading: newVal,
+	        error: this.isError
+	      });
+	    },
+	    error: function error(newVal) {
+	      this.$emit('on-data', {
+	        data: this.normalizedSuggestions,
+	        rawData: this.rawData,
+	        aggregationData: this.aggregationData,
+	        loading: this.isLoading,
+	        error: newVal
+	      });
+	    },
+	    debounce: function debounce(newVal, oldVal) {
+	      if (!isEqual$5(newVal, oldVal)) {
+	        this.handleTextChange = _debounce(this.handleText, newVal);
+	      }
+	    }
+	  },
+	  methods: {
+	    handleText: function handleText(value, cause) {
+	      if (cause === lib_7.CLEAR_VALUE) {
+	        this.triggerCustomQuery(value);
+	        this.triggerDefaultQuery(value);
+	      } else if (this.$props.autosuggest) {
+	        this.triggerDefaultQuery(value);
+	      } else {
+	        this.triggerCustomQuery(value);
+	      }
+	    },
+	    validateDataField: function validateDataField() {
+	      var propName = 'dataField';
+	      var componentName = SearchBox.name;
+	      var props = this.$props;
+	      var requiredError = propName + " supplied to " + componentName + " is required. Validation failed.";
+	      var propValue = props[propName];
+
+	      if (!this.enableAppbase) {
+	        if (!propValue) {
+	          console.error(requiredError);
+	          return;
+	        }
+
+	        if (typeof propValue !== 'string' && typeof propValue !== 'object' && !Array.isArray(propValue)) {
+	          console.error("Invalid " + propName + " supplied to " + componentName + ". Validation failed.");
+	          return;
+	        }
+
+	        if (Array.isArray(propValue) && propValue.length === 0) {
+	          console.error(requiredError);
+	        }
+	      }
+	    },
+	    getComponent: function getComponent$1(downshiftProps) {
+	      if (downshiftProps === void 0) {
+	        downshiftProps = {};
+	      }
+
+	      var currentValue = this.$data.currentValue;
+	      var data = {
+	        error: this.error,
+	        loading: this.isLoading,
+	        downshiftProps: downshiftProps,
+	        data: this.normalizedSuggestions,
+	        rawData: this.rawData,
+	        value: currentValue,
+	        resultStats: this.stats
+	      };
+	      return getComponent(data, this);
+	    },
+	    // returns size and aggs property
+	    getBasicQueryOptions: function getBasicQueryOptions() {
+	      var aggregationField = this.$props.aggregationField;
+	      var queryOptions = helper_20(this.$props);
+
+	      if (aggregationField) {
+	        queryOptions.aggs = getCompositeAggsQuery$2({
+	          props: this.$props,
+	          showTopHits: true
+	        }).aggs;
+	      }
+
+	      return queryOptions;
+	    },
+	    handleSearchIconClick: function handleSearchIconClick() {
+	      var currentValue = this.currentValue;
+
+	      if (currentValue.trim()) {
+	        this.setValue(currentValue, true);
+	        this.onValueSelectedHandler(currentValue, lib_7.SEARCH_ICON_CLICK);
+	      }
+	    },
+	    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
+	      var _this = this;
+
+	      if (isDefaultValue === void 0) {
+	        isDefaultValue = false;
+	      }
+
+	      if (props === void 0) {
+	        props = this.$props;
+	      }
+
+	      if (toggleIsOpen === void 0) {
+	        toggleIsOpen = true;
+	      }
+
+	      if (categoryValue === void 0) {
+	        categoryValue = undefined;
+	      }
+
+	      var performUpdate = function performUpdate() {
+	        _this.currentValue = value;
+
+	        if (isDefaultValue) {
+	          if (_this.$props.autosuggest) {
+	            if (toggleIsOpen) {
+	              _this.isOpen = false;
+	            }
+
+	            _this.triggerDefaultQuery(value);
+	          } // in case of strict selection only SUGGESTION_SELECT should be able
+	          // to set the query otherwise the value should reset
+
+
+	          if (props.strictSelection) {
+	            if (cause === lib_7.SUGGESTION_SELECT || value === '') {
+	              _this.triggerCustomQuery(value, categoryValue);
+	            } else {
+	              _this.setValue('', true);
+	            }
+	          } else if (props.value === undefined) {
+	            _this.triggerCustomQuery(value, categoryValue);
+	          }
+	        } else {
+	          // debounce for handling text while typing
+	          _this.handleTextChange(value, cause);
+	        }
+
+	        _this.$emit('valueChange', value);
+
+	        _this.$emit('value-change', value);
+	      };
+
+	      checkValueChange$1(props.componentId, value, props.beforeValueChange, performUpdate);
+	    },
+	    triggerDefaultQuery: function triggerDefaultQuery(paramValue) {
+	      if (!this.$props.autosuggest) {
+	        return;
+	      }
+
+	      var value = typeof paramValue !== 'string' ? this.currentValue : paramValue;
+	      var query = SearchBox.defaultQuery(value, this.$props);
+
+	      if (this.defaultQuery) {
+	        var defaultQueryToBeSet = this.defaultQuery(value, this.$props) || {};
+
+	        if (defaultQueryToBeSet.query) {
+	          query = defaultQueryToBeSet.query;
+	        } // Update calculated default query in store
+
+
+	        updateDefaultQuery(this.$props.componentId, this.setDefaultQuery, this.$props, value);
+	      }
+
+	      this.updateQuery({
+	        componentId: this.internalComponent,
+	        query: query,
+	        value: value,
+	        componentType: constants_1$1.searchBox
+	      });
+	    },
+	    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
+	      if (categoryValue === void 0) {
+	        categoryValue = undefined;
+	      }
+
+	      var _this$$props2 = this.$props,
+	          customQuery = _this$$props2.customQuery,
+	          filterLabel = _this$$props2.filterLabel,
+	          showFilter = _this$$props2.showFilter,
+	          URLParams = _this$$props2.URLParams;
+	      var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
+	      var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
+	      var query = defaultQueryTobeSet;
+
+	      if (customQuery) {
+	        var customQueryTobeSet = customQuery(value, this.$props);
+	        var queryTobeSet = customQueryTobeSet.query;
+
+	        if (queryTobeSet) {
+	          query = queryTobeSet;
+	        }
+
+	        updateCustomQuery(this.$props.componentId, this.setCustomQuery, this.$props, value);
+	      }
+
+	      this.updateQuery({
+	        componentId: this.$props.componentId,
+	        query: query,
+	        value: value,
+	        label: filterLabel,
+	        showFilter: showFilter,
+	        URLParams: URLParams,
+	        componentType: constants_1$1.searchBox,
+	        category: categoryValue
+	      });
+	    },
+	    handleFocus: function handleFocus(event) {
+	      if (this.$props.autosuggest) {
+	        this.isOpen = true;
+	      }
+
+	      this.$emit('focus', event);
+	    },
+	    handleVoiceResults: function handleVoiceResults(_ref) {
+	      var results = _ref.results;
+
+	      if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
+	        this.setValue(results[0][0].transcript.trim(), true);
+	      }
+	    },
+	    triggerQuery: function triggerQuery(_ref2) {
+	      var _ref2$isOpen = _ref2.isOpen,
+	          isOpen = _ref2$isOpen === void 0 ? undefined : _ref2$isOpen,
+	          _ref2$customQuery = _ref2.customQuery,
+	          customQuery = _ref2$customQuery === void 0 ? true : _ref2$customQuery,
+	          _ref2$defaultQuery = _ref2.defaultQuery,
+	          defaultQuery = _ref2$defaultQuery === void 0 ? true : _ref2$defaultQuery,
+	          _ref2$value = _ref2.value,
+	          value = _ref2$value === void 0 ? undefined : _ref2$value,
+	          _ref2$categoryValue = _ref2.categoryValue,
+	          categoryValue = _ref2$categoryValue === void 0 ? undefined : _ref2$categoryValue;
+
+	      if (typeof isOpen === 'boolean') {
+	        this.isOpen = isOpen;
+	      }
+
+	      if (customQuery) {
+	        this.triggerCustomQuery(value, categoryValue);
+	      }
+
+	      if (defaultQuery) {
+	        this.triggerDefaultQuery(value);
+	      }
+	    },
+	    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
+	      // click analytics would only work client side and after javascript loads
+	      var docId = documentId;
+
+	      if (!docId) {
+	        var hitData = this.normalizedSuggestions.find(function (hit) {
+	          return hit._click_id === searchPosition;
+	        });
+
+	        if (hitData && hitData.source && hitData.source._id) {
+	          docId = hitData.source._id;
+	        }
+	      }
+
+	      this.recordSuggestionClick(searchPosition, docId);
+	    },
+	    clearValue: function clearValue() {
+	      this.setValue('', false, this.$props, lib_7.CLEAR_VALUE, false);
+	      this.onValueSelectedHandler('', lib_7.CLEAR_VALUE);
+	    },
+	    handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+	      // if a suggestion was selected, delegate the handling to suggestion handler
+	      if (event.key === 'Enter' && highlightedIndex === null) {
+	        this.setValue(event.target.value, true);
+	        this.onValueSelectedHandler(event.target.value, lib_7.ENTER_PRESS);
+	      } // Need to review
+
+
+	      this.$emit('keyDown', event, this.triggerQuery);
+	      this.$emit('key-down', event, this.triggerQuery);
+	    },
+	    onInputChange: function onInputChange(e) {
+	      var _this2 = this;
+
+	      var inputValue = e.target.value;
+
+	      if (!this.$data.isOpen && this.$props.autosuggest) {
+	        this.isOpen = true;
+	      }
+
+	      var value = this.$props.value;
+
+	      if (value === undefined) {
+	        this.setValue(inputValue, false, this.$props, inputValue === '' ? lib_7.CLEAR_VALUE : undefined);
+	      } else {
+	        this.$emit('change', inputValue, function (_ref3) {
+	          var isOpen = _ref3.isOpen;
+	          return _this2.triggerQuery({
+	            defaultQuery: true,
+	            customQuery: true,
+	            value: inputValue,
+	            isOpen: isOpen
+	          });
+	        }, e);
+	      }
+	    },
+	    onSuggestionSelected: function onSuggestionSelected(suggestion) {
+	      var _this3 = this;
+
+	      this.isOpen = false;
+	      var value = this.$props.value; // Record analytics for selected suggestions
+
+	      this.triggerClickAnalytics(suggestion._click_id);
+
+	      if (value === undefined) {
+	        this.setValue(suggestion.value, true, this.$props, lib_7.SUGGESTION_SELECT, false, suggestion._category);
+	      } else {
+	        this.$emit('change', suggestion.value, function (_ref4) {
+	          var isOpen = _ref4.isOpen;
+	          return _this3.triggerQuery({
+	            isOpen: isOpen,
+	            value: suggestion.value,
+	            categoryValue: suggestion._category
+	          });
+	        });
+	      }
+
+	      this.onValueSelectedHandler(suggestion.value, lib_7.SUGGESTION_SELECT, suggestion.source);
+	    },
+	    onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
+	      if (currentValue === void 0) {
+	        currentValue = this.$data.currentValue;
+	      }
+
+	      for (var _len = arguments.length, cause = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+	        cause[_key - 1] = arguments[_key];
+	      }
+
+	      this.$emit.apply(this, ['valueSelected', currentValue].concat(cause));
+	      this.$emit.apply(this, ['value-selected', currentValue].concat(cause));
+	    },
+	    handleStateChange: function handleStateChange(changes) {
+	      var isOpen = changes.isOpen;
+	      this.isOpen = isOpen;
+	    },
+	    getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
+	      var isDark = this.themePreset === 'dark';
+
+	      if (isDark) {
+	        return highlightedIndex === index ? '#555' : '#424242';
+	      }
+
+	      return highlightedIndex === index ? '#eee' : '#fff';
+	    },
+	    renderIcon: function renderIcon() {
+	      var h = this.$createElement;
+
+	      if (this.$props.showIcon) {
+	        return this.$props.icon || h(SearchSvg);
+	      }
+
+	      return null;
+	    },
+	    renderErrorComponent: function renderErrorComponent() {
+	      var h = this.$createElement;
+	      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+
+	      if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
+	        return h(SuggestionWrapper, {
+	          "attrs": {
+	            "innerClass": this.$props.innerClass,
+	            "innerClassName": "error",
+	            "theme": this.theme,
+	            "themePreset": this.themePreset
+	          }
+	        }, [isFunction$1(renderError) ? renderError(this.error) : renderError]);
+	      }
+
+	      return null;
+	    },
+	    renderCancelIcon: function renderCancelIcon() {
+	      var h = this.$createElement;
+
+	      if (this.$props.showClear) {
+	        return this.$props.clearIcon || h(CancelSvg);
+	      }
+
+	      return null;
+	    },
+	    renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
+	      if (finalSuggestionsList === void 0) {
+	        finalSuggestionsList = [];
+	      }
+
+	      var h = this.$createElement;
+	      var _this$$props3 = this.$props,
+	          theme = _this$$props3.theme,
+	          innerClass = _this$$props3.innerClass;
+	      var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
+	      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+	      var _this$$data = this.$data,
+	          isOpen = _this$$data.isOpen,
+	          currentValue = _this$$data.currentValue;
+
+	      if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
+	        return h(SuggestionWrapper, {
+	          "attrs": {
+	            "innerClass": innerClass,
+	            "themePreset": this.themePreset,
+	            "theme": theme,
+	            "innerClassName": "noSuggestion"
+	          },
+	          "scopedSlots": {
+	            "default": function _default() {
+	              return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
+	            }
+	          }
+	        });
+	      }
+
+	      return null;
+	    },
+	    renderInputAddonBefore: function renderInputAddonBefore() {
+	      var h = this.$createElement;
+	      var addonBefore = this.$scopedSlots.addonBefore;
+
+	      if (addonBefore) {
+	        return h(InputAddon, {
+	          "attrs": {
+	            "className": "addon-before"
+	          }
+	        }, [addonBefore()]);
+	      }
+
+	      return null;
+	    },
+	    renderInputAddonAfter: function renderInputAddonAfter() {
+	      var h = this.$createElement;
+	      var addonAfter = this.$scopedSlots.addonAfter;
+
+	      if (addonAfter) {
+	        return h(InputAddon, {
+	          "attrs": {
+	            "className": "addon-after"
+	          }
+	        }, [addonAfter()]);
+	      }
+
+	      return null;
+	    },
+	    renderIcons: function renderIcons() {
+	      var h = this.$createElement;
+	      var _this$$props4 = this.$props,
+	          iconPosition = _this$$props4.iconPosition,
+	          showClear = _this$$props4.showClear,
+	          innerClass = _this$$props4.innerClass,
+	          getMicInstance = _this$$props4.getMicInstance,
+	          showVoiceSearch = _this$$props4.showVoiceSearch,
+	          showIcon = _this$$props4.showIcon;
+	      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
+	      var currentValue = this.$data.currentValue;
+	      return h("div", [h(IconGroup, {
+	        "attrs": {
+	          "groupPosition": "right",
+	          "positionType": "absolute"
+	        }
+	      }, [currentValue && showClear && h(IconWrapper, {
+	        "on": {
+	          "click": this.clearValue
+	        },
+	        "attrs": {
+	          "showIcon": showIcon,
+	          "isClearIcon": true
+	        }
+	      }, [this.renderCancelIcon()]), showVoiceSearch && h(Mic, {
+	        "attrs": {
+	          "getInstance": getMicInstance,
+	          "render": renderMic,
+	          "handleResult": this.handleVoiceResults,
+	          "className": getClassName$4(innerClass, 'mic') || null
+	        }
+	      }), iconPosition === 'right' && showIcon && h(IconWrapper, {
+	        "on": {
+	          "click": this.handleSearchIconClick
+	        }
+	      }, [this.renderIcon()])]), h(IconGroup, {
+	        "attrs": {
+	          "groupPosition": "left",
+	          "positionType": "absolute"
+	        }
+	      }, [iconPosition === 'left' && showIcon && h(IconWrapper, {
+	        "on": {
+	          "click": this.handleSearchIconClick
+	        }
+	      }, [this.renderIcon()])])]);
+	    },
+	    focusSearchBox: function focusSearchBox(event) {
+	      var _this$$refs, _this$$refs$this$$pro;
+
+	      var elt = event.target || event.srcElement;
+	      var tagName = elt.tagName;
+
+	      if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
+	        // already in an input
+	        return;
+	      }
+
+	      (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
+	    },
+	    listenForFocusShortcuts: function listenForFocusShortcuts() {
+	      var _this4 = this;
+
+	      var _this$$props$focusSho = this.$props.focusShortcuts,
+	          focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
+
+	      if (isEmpty(focusShortcuts)) {
+	        return;
+	      }
+
+	      var shortcutsString = parseFocusShortcuts(focusShortcuts).join(','); // handler for alphabets and other key combinations
+
+	      hotkeys(shortcutsString, // eslint-disable-next-line no-unused-vars
+
+	      /* eslint-disable no-shadow */
+	      function (event, handler) {
+	        // Prevent the default refresh event under WINDOWS system
+	        event.preventDefault();
+
+	        _this4.focusSearchBox(event);
+	      }); // if one of modifier keys are used, they are handled below
+
+	      hotkeys('*', function (event) {
+	        var modifierKeys = extractModifierKeysFromFocusShortcuts(focusShortcuts);
+	        if (modifierKeys.length === 0) return;
+
+	        for (var index = 0; index < modifierKeys.length; index += 1) {
+	          var element = modifierKeys[index];
+
+	          if (hotkeys[element]) {
+	            _this4.focusSearchBox(event);
+
+	            break;
+	          }
+	        }
+	      });
+	    },
+	    onAutofillClick: function onAutofillClick(suggestion) {
+	      var value = suggestion.value;
+	      this.isOpen = true;
+	      this.currentValue = value;
+	      this.triggerDefaultQuery(value);
+	    },
+	    renderAutoFill: function renderAutoFill(suggestion) {
+	      var _this5 = this;
+
+	      var h = this.$createElement;
+
+	      var handleAutoFillClick = function handleAutoFillClick(e) {
+	        e.stopPropagation();
+
+	        _this5.onAutofillClick(suggestion);
+	      };
+	      /* 👇 avoid showing autofill for category suggestions👇 */
+
+
+	      return suggestion._category ? null : h(AutoFillSvg, {
+	        "on": {
+	          "click": handleAutoFillClick
+	        }
+	      });
+	    }
+	  },
+	  render: function render() {
+	    var _this6 = this;
+
+	    var h = arguments[0];
+	    var _this$$props5 = this.$props,
+	        theme = _this$$props5.theme,
+	        expandSuggestionsContainer = _this$$props5.expandSuggestionsContainer;
+	    var _this$$scopedSlots = this.$scopedSlots,
+	        recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
+	        popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
+	    var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
+	    var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
+	    return h(Container, {
+	      "class": this.$props.className
+	    }, [this.$props.title && h(Title, {
+	      "class": getClassName$4(this.$props.innerClass, 'title') || ''
+	    }, [this.$props.title]), this.$props.autosuggest ? h(Downshift, {
+	      "attrs": {
+	        "id": this.$props.componentId + "-downshift",
+	        "handleChange": this.onSuggestionSelected,
+	        "handleMouseup": this.handleStateChange,
+	        "isOpen": this.$data.isOpen
+	      },
+	      "scopedSlots": {
+	        "default": function _default(_ref5) {
+	          var getInputEvents = _ref5.getInputEvents,
+	              getInputProps = _ref5.getInputProps,
+	              getItemProps = _ref5.getItemProps,
+	              getItemEvents = _ref5.getItemEvents,
+	              isOpen = _ref5.isOpen,
+	              highlightedIndex = _ref5.highlightedIndex,
+	              setHighlightedIndex = _ref5.setHighlightedIndex;
+
+	          var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
+	            var getIcon = function getIcon(iconType) {
+	              switch (iconType) {
+	                case helper_1.Recent:
+	                  return recentSearchesIcon;
+
+	                case helper_1.Popular:
+	                  return popularSearchesIcon;
+
+	                default:
+	                  return null;
+	              }
+	            };
+
+	            return h("div", [_this6.hasCustomRenderer && _this6.getComponent({
+	              isOpen: isOpen,
+	              getItemProps: getItemProps,
+	              getItemEvents: getItemEvents,
+	              highlightedIndex: highlightedIndex
+	            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+	              "class": suggestions$1(_this6.themePreset, theme) + " " + getClassName$4(_this6.$props.innerClass, 'list')
+	            }, [_this6.normalizedSuggestions.map(function (item, index) {
+	              return renderItem ? h("li", {
+	                "domProps": _extends({}, getItemProps({
+	                  item: item
+	                })),
+	                "on": _extends({}, getItemEvents({
+	                  item: item
+	                })),
+	                "key": index + 1 + "-" + item.value,
+	                "style": {
+	                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index),
+	                  justifyContent: 'flex-start',
+	                  alignItems: 'center'
+	                }
+	              }, [renderItem(item)]) : h("li", {
+	                "domProps": _extends({}, getItemProps({
+	                  item: item
+	                })),
+	                "on": _extends({}, getItemEvents({
+	                  item: item
+	                })),
+	                "key": index + 1 + "-" + item.value,
+	                "style": {
+	                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index),
+	                  justifyContent: 'flex-start',
+	                  alignItems: 'center'
+	                }
+	              }, [h("div", {
+	                "style": {
+	                  padding: '0 10px 0 0',
+	                  display: 'flex'
+	                }
+	              }, [h(CustomSvg, {
+	                "attrs": {
+	                  "className": getClassName$4(_this6.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+	                  "icon": getIcon(item._suggestion_type),
+	                  "type": item._suggestion_type + "-search-icon"
+	                }
+	              })]), h(SuggestionItem, {
+	                "attrs": {
+	                  "currentValue": _this6.currentValue,
+	                  "suggestion": item
+	                }
+	              }), _this6.renderAutoFill(item)]);
+	            })]) : _this6.renderNoSuggestions(_this6.normalizedSuggestions)]);
+	          };
+
+	          return h("div", {
+	            "class": suggestionsContainer
+	          }, [h(InputGroup, [_this6.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+	            "attrs": {
+	              "id": _this6.$props.componentId + "-input",
+	              "showIcon": _this6.$props.showIcon,
+	              "showClear": _this6.$props.showClear,
+	              "iconPosition": _this6.$props.iconPosition,
+	              "placeholder": _this6.$props.placeholder,
+	              "autoFocus": _this6.$props.autoFocus,
+	              "themePreset": _this6.themePreset,
+	              "autocomplete": "off"
+	            },
+	            "ref": _this6.$props.innerRef,
+	            "class": getClassName$4(_this6.$props.innerClass, 'input'),
+	            "on": _extends({}, getInputEvents({
+	              onInput: _this6.onInputChange,
+	              onBlur: function onBlur(e) {
+	                _this6.$emit('blur', e, _this6.triggerQuery);
+	              },
+	              onFocus: _this6.handleFocus,
+	              onKeyPress: function onKeyPress(e) {
+	                _this6.$emit('keyPress', e, _this6.triggerQuery);
+
+	                _this6.$emit('key-press', e, _this6.triggerQuery);
+	              },
+	              onKeyDown: function onKeyDown(e) {
+	                return _this6.handleKeyDown(e, highlightedIndex);
+	              },
+	              onKeyUp: function onKeyUp(e) {
+	                _this6.$emit('keyUp', e, _this6.triggerQuery);
+
+	                _this6.$emit('key-up', e, _this6.triggerQuery);
+	              },
+	              onClick: function onClick() {
+	                setHighlightedIndex(null);
+	              }
+	            })),
+	            "domProps": _extends({}, getInputProps({
+	              value: _this6.$data.currentValue === null ? '' : _this6.$data.currentValue
+	            }))
+	          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
+	        }
+	      }
+	    }) : h("div", {
+	      "class": suggestionsContainer
+	    }, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+	      "class": getClassName$4(this.$props.innerClass, 'input') || '',
+	      "attrs": {
+	        "placeholder": this.$props.placeholder,
+	        "iconPosition": this.$props.iconPosition,
+	        "showIcon": this.$props.showIcon,
+	        "showClear": this.$props.showClear,
+	        "themePreset": this.themePreset
+	      },
+	      "on": _extends({}, {
+	        blur: function blur(e) {
+	          _this6.$emit('blur', e, _this6.triggerQuery);
+	        },
+	        keypress: function keypress(e) {
+	          _this6.$emit('keyPress', e, _this6.triggerQuery);
+
+	          _this6.$emit('key-press', e, _this6.triggerQuery);
+	        },
+	        input: this.onInputChange,
+	        focus: function focus(e) {
+	          _this6.$emit('focus', e, _this6.triggerQuery);
+	        },
+	        keydown: function keydown(e) {
+	          _this6.$emit('keyDown', e, _this6.triggerQuery);
+
+	          _this6.$emit('key-down', e, _this6.triggerQuery);
+	        },
+	        keyup: function keyup(e) {
+	          _this6.$emit('keyUp', e, _this6.triggerQuery);
+
+	          _this6.$emit('key-up', e, _this6.triggerQuery);
+	        }
+	      }),
+	      "domProps": _extends({}, {
+	        autofocus: this.$props.autoFocus,
+	        value: this.$data.currentValue ? this.$data.currentValue : ''
+	      }),
+	      "ref": this.$props.innerRef
+	    }), this.renderIcons()]), this.renderInputAddonAfter()])])]);
+	  },
+	  destroyed: function destroyed() {
+	    document.removeEventListener('keydown', this.onKeyDown);
+	  }
+	};
+
+	SearchBox.defaultQuery = function (value, props) {
+	  var finalQuery = null;
+	  var fields = normalizeDataField$1(props.dataField, props.fieldWeights);
+	  finalQuery = {
+	    bool: {
+	      should: SearchBox.shouldQuery(value, fields, props),
+	      minimum_should_match: '1'
+	    }
+	  };
+
+	  if (finalQuery && props.nestedField) {
+	    return {
+	      query: {
+	        nested: {
+	          path: props.nestedField,
+	          query: finalQuery
+	        }
+	      }
+	    };
+	  }
+
+	  return finalQuery;
+	};
+
+	SearchBox.shouldQuery = function (value, dataFields, props) {
+	  var finalQuery = [];
+	  var phrasePrefixFields = [];
+	  var fields = dataFields.map(function (dataField) {
+	    var queryField = "" + dataField.field + (dataField.weight ? "^" + dataField.weight : '');
+
+	    if (!(dataField.field.endsWith('.keyword') || dataField.field.endsWith('.autosuggest') || dataField.field.endsWith('.search'))) {
+	      phrasePrefixFields.push(queryField);
+	    }
+
+	    return queryField;
+	  });
+
+	  if (props.searchOperators || props.queryString) {
+	    return {
+	      query: value,
+	      fields: fields,
+	      default_operator: props.queryFormat
+	    };
+	  }
+
+	  if (props.queryFormat === 'and') {
+	    finalQuery.push({
+	      multi_match: {
+	        query: value,
+	        fields: fields,
+	        type: 'cross_fields',
+	        operator: 'and'
+	      }
+	    });
+	    finalQuery.push({
+	      multi_match: {
+	        query: value,
+	        fields: fields,
+	        type: 'phrase',
+	        operator: 'and'
+	      }
+	    });
+
+	    if (phrasePrefixFields.length > 0) {
+	      finalQuery.push({
+	        multi_match: {
+	          query: value,
+	          fields: phrasePrefixFields,
+	          type: 'phrase_prefix',
+	          operator: 'and'
+	        }
+	      });
+	    }
+
+	    return finalQuery;
+	  }
+
+	  finalQuery.push({
+	    multi_match: {
+	      query: value,
+	      fields: fields,
+	      type: 'best_fields',
+	      operator: 'or',
+	      fuzziness: props.fuzziness ? props.fuzziness : 0
+	    }
+	  });
+	  finalQuery.push({
+	    multi_match: {
+	      query: value,
+	      fields: fields,
+	      type: 'phrase',
+	      operator: 'or'
+	    }
+	  });
+
+	  if (phrasePrefixFields.length > 0) {
+	    finalQuery.push({
+	      multi_match: {
+	        query: value,
+	        fields: phrasePrefixFields,
+	        type: 'phrase_prefix',
+	        operator: 'or'
+	      }
+	    });
+	  }
+
+	  return finalQuery;
+	};
+
+	var mapStateToProps$4 = function mapStateToProps(state, props) {
+	  return {
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    selectedCategory: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].category || null,
+	    suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
+	    rawData: state.rawData[props.componentId],
+	    aggregationData: state.compositeAggregations[props.componentId] || [],
+	    themePreset: state.config.themePreset,
+	    isLoading: !!state.isLoading[props.componentId + "_active"],
+	    error: state.error[props.componentId],
+	    enableAppbase: state.config.enableAppbase,
+	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden
+	  };
+	};
+
+	var mapDispatchToProps$3 = {
+	  updateQuery: updateQuery$2,
+	  setCustomQuery: setCustomQuery$1,
+	  setDefaultQuery: setDefaultQuery$2,
+	  recordSuggestionClick: recordSuggestionClick$1
+	};
+	var DSConnected$1 = ComponentWrapper$1(connect(mapStateToProps$4, mapDispatchToProps$3)(SearchBox), {
+	  componentType: constants_1$1.searchBox,
+	  internalComponent: true
+	});
+
+	SearchBox.install = function (Vue) {
+	  Vue.component(SearchBox.name, DSConnected$1);
+	}; // Add componentType for SSR
+
+
+	SearchBox.componentType = constants_1$1.searchBox;
+
+	var _templateObject$k, _templateObject2$7, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
+	var item = {
+	  width: '15px',
+	  height: '15px',
+	  scale: '4px'
+	};
+	var vh = css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n\tborder: 0;\n\tclip: rect(1px, 1px, 1px, 1px);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twidth: 1px;\n\twhite-space: nowrap;\n"])));
+	var hideInputControl = css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n\t+ label {\n\t\tpadding-left: 0;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder: 0;\n\t\t\tmargin: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n"])));
+
+	var formItem = function formItem(_ref) {
+	  var theme = _ref.theme;
+	  return css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n\t", ";\n\n\t&:focus {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tbox-shadow: 0 0 0 2px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:hover {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:active {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\ttransition-duration: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t+ label {\n\t\tposition: relative;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t&::before {\n\t\t\tbackground-color: #fff;\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tcolor: ", ";\n\t\t\tmargin-right: calc(", " * 0.5);\n\t\t\ttop: 50%;\n\t\t\tleft: 0;\n\t\t\twidth: ", ";\n\t\t\theight: ", ";\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\n\t\t&::after {\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 2);\n\t\t\twidth: calc(", " - ", ");\n\t\t\theight: calc(", " - ", ");\n\t\t\tmargin-top: calc(", " / -2 - ", " / -2);\n\t\t\ttransform: scale(0);\n\t\t\ttransform-origin: 50%;\n\t\t\ttransition: transform 200ms ease-out;\n\t\t}\n\t}\n"])), vh, curriedLighten(0.4, theme.colors.primaryColor), theme.colors.primaryColor, theme.colors.borderColor || curriedLighten(0.1, theme.colors.textColor), theme.colors.primaryColor, item.width, item.width, item.height, theme.colors.primaryColor, item.scale, item.width, item.scale, item.height, item.scale, item.height, item.scale);
+	};
+
+	var Radio = index$1('input')(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 50%;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t&:active,\n\t\t&:focus {\n\t\t\t+ label {\n\t\t\t\tcolor: ", ";\n\n\t\t\t\t&::before {\n\t\t\t\t\tanimation: none;\n\t\t\t\t\tfilter: none;\n\t\t\t\t\ttransition: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tanimation: none;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n"])), formItem, function (props) {
+	  return props.show ? null : hideInputControl;
+	}, function (_ref2) {
+	  var theme = _ref2.theme;
+	  return theme.colors.primaryColor;
+	}, function (_ref3) {
+	  var theme = _ref3.theme;
+	  return theme.colors.primaryColor;
+	});
+	var Checkbox = index$1('input')(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 5);\n\t\t\twidth: calc(", " / 2);\n\t\t\theight: calc(", " / 5);\n\t\t\tmargin-top: calc(", " / -2 / 2 * 0.8);\n\t\t\tborder-style: solid;\n\t\t\tborder-color: ", ";\n\t\t\tborder-width: 0 0 2px 2px;\n\t\t\tborder-radius: 0;\n\t\t\tborder-image: none;\n\t\t\ttransform: rotate(-45deg) scale(0);\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\ttransform: rotate(-45deg) scale(1);\n\t\t\t\ttransition: transform 200ms ease-out;\n\t\t\t}\n\t\t}\n\t}\n"])), formItem, function (props) {
+	  return props.show ? null : hideInputControl;
+	}, item.width, item.width, item.width, item.height, function (_ref4) {
+	  var theme = _ref4.theme;
+	  return theme.colors.primaryColor;
+	}, function (_ref5) {
+	  var theme = _ref5.theme;
+	  return theme.colors.primaryColor;
+	});
+	var UL = index$1('ul')(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 240px;\n\tposition: relative;\n\toverflow-y: auto;\n\tpadding-bottom: 12px;\n\n\tli {\n\t\theight 30px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding-left: 2px;\n\t}\n"])));
+
+	var getAggsOrder = lib_8.getAggsOrder;
+
+	var extractQuery = function extractQuery(props) {
+	  var queryToBeReturned = {};
+
+	  if (props.defaultQuery) {
+	    var evaluateQuery = props.defaultQuery([], props);
+
+	    if (evaluateQuery) {
+	      if (evaluateQuery.query) {
+	        queryToBeReturned.query = evaluateQuery.query;
+	      }
+
+	      if (evaluateQuery.aggs) {
+	        queryToBeReturned.aggs = evaluateQuery.aggs;
+	      }
+	    }
+	  }
+
+	  return queryToBeReturned;
+	}; // eslint-disable-next-line import/prefer-default-export
+
+
+	var getAggsQuery = function getAggsQuery(query, props) {
+	  var _clonedQuery$aggs;
+
+	  var clonedQuery = query;
+	  var dataField = props.dataField,
+	      size = props.size,
+	      sortBy = props.sortBy,
+	      showMissing = props.showMissing,
+	      missingLabel = props.missingLabel;
+	  clonedQuery.size = 0;
+	  clonedQuery.aggs = (_clonedQuery$aggs = {}, _clonedQuery$aggs[dataField] = {
+	    terms: _extends({
+	      field: dataField,
+	      size: size,
+	      order: getAggsOrder(sortBy || 'count')
+	    }, showMissing ? {
+	      missing: missingLabel
+	    } : {})
+	  }, _clonedQuery$aggs);
+
+	  if (props.nestedField) {
+	    clonedQuery.aggs = {
+	      reactivesearch_nested: {
+	        nested: {
+	          path: props.nestedField
+	        },
+	        aggs: clonedQuery.aggs
+	      }
+	    };
+	  }
+
+	  return _extends({}, clonedQuery, extractQuery(props));
+	};
+
+	var updateQuery$3 = lib_5.updateQuery,
+	    setQueryOptions$2 = lib_5.setQueryOptions,
+	    setCustomQuery$2 = lib_5.setCustomQuery,
+	    setDefaultQuery$3 = lib_5.setDefaultQuery;
+	var getQueryOptions$1 = lib_8.getQueryOptions,
+	    checkValueChange$2 = lib_8.checkValueChange,
+	    getClassName$5 = lib_8.getClassName,
+	    getOptionsFromQuery$2 = lib_8.getOptionsFromQuery,
+	    isEqual$6 = lib_8.isEqual;
+	var SingleList = {
+	  name: 'SingleList',
+	  props: {
+	    beforeValueChange: types.func,
+	    className: VueTypes.string.def(''),
+	    componentId: types.stringRequired,
+	    customQuery: types.func,
+	    dataField: types.stringRequired,
+	    defaultValue: types.string,
+	    value: types.value,
+	    defaultQuery: types.func,
+	    filterLabel: types.string,
+	    innerClass: types.style,
+	    placeholder: VueTypes.string.def('Search'),
+	    react: types.react,
+	    render: types.func,
+	    renderItem: types.func,
+	    renderNoResults: VueTypes.any,
+	    transformData: types.func,
+	    selectAllLabel: types.string,
+	    showCount: VueTypes.bool.def(true),
+	    showFilter: VueTypes.bool.def(true),
+	    showRadio: VueTypes.bool.def(true),
+	    showSearch: VueTypes.bool.def(true),
+	    size: VueTypes.number,
+	    sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
+	    title: types.title,
+	    URLParams: VueTypes.bool.def(false),
+	    showMissing: VueTypes.bool.def(false),
+	    missingLabel: VueTypes.string.def('N/A'),
+	    nestedField: types.string,
+	    index: VueTypes.string,
+	    enableStrictSelection: VueTypes.bool.def(false)
+	  },
+	  data: function data() {
+	    var props = this.$props;
+	    this.__state = {
+	      currentValue: '',
+	      modifiedOptions: [],
+	      searchTerm: ''
+	    };
+	    this.internalComponent = props.componentId + "__internal";
+	    return this.__state;
+	  },
+	  created: function created() {
+	    if (!this.enableAppbase && this.$props.index) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    }
+
+	    var props = this.$props;
+	    this.modifiedOptions = this.options && this.options[props.dataField] ? this.options[props.dataField].buckets : []; // Set custom and default queries in store
+
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+	    updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
+	  },
+	  beforeMount: function beforeMount() {
+	    this.updateQueryHandlerOptions(this.$props);
+
+	    if (this.selectedValue) {
+	      this.setValue(this.selectedValue);
+	    } else if (this.$props.value) {
 	      this.setValue(this.$props.value);
 	    } else if (this.$props.defaultValue) {
 	      this.setValue(this.$props.defaultValue);
@@ -21163,7 +22420,7 @@
 	      this.setValue(newVal);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$5(newVal, oldVal)) {
+	      if (!isEqual$6(newVal, oldVal)) {
 	        this.setValue(newVal);
 	      }
 	    },
@@ -21226,14 +22483,14 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$4(this.$props.innerClass, 'title') || ''
+	      "class": getClassName$5(this.$props.innerClass, 'title') || ''
 	    }, [this.$props.title]), this.renderSearch(), this.hasCustomRenderer ? this.getComponent() : h(UL, {
-	      "class": getClassName$4(this.$props.innerClass, 'list') || ''
+	      "class": getClassName$5(this.$props.innerClass, 'list') || ''
 	    }, [selectAllLabel ? h("li", {
 	      "key": selectAllLabel,
 	      "class": "" + (this.$data.currentValue === selectAllLabel ? 'active' : '')
 	    }, [h(Radio, {
-	      "class": getClassName$4(this.$props.innerClass, 'radio'),
+	      "class": getClassName$5(this.$props.innerClass, 'radio'),
 	      "attrs": {
 	        "id": this.$props.componentId + "-" + selectAllLabel,
 	        "name": this.$props.componentId,
@@ -21248,7 +22505,7 @@
 	        checked: this.$data.currentValue === selectAllLabel
 	      })
 	    }), h("label", {
-	      "class": getClassName$4(this.$props.innerClass, 'label') || null,
+	      "class": getClassName$5(this.$props.innerClass, 'label') || null,
 	      "attrs": {
 	        "for": this.$props.componentId + "-" + selectAllLabel
 	      }
@@ -21257,7 +22514,7 @@
 	        "key": item.key,
 	        "class": "" + (_this.currentValue === String(item.key) ? 'active' : '')
 	      }, [h(Radio, {
-	        "class": getClassName$4(_this.$props.innerClass, 'radio'),
+	        "class": getClassName$5(_this.$props.innerClass, 'radio'),
 	        "attrs": {
 	          "id": _this.$props.componentId + "-" + item.key,
 	          "name": _this.$props.componentId,
@@ -21273,7 +22530,7 @@
 	          checked: _this.currentValue === String(item.key)
 	        })
 	      }), h("label", {
-	        "class": getClassName$4(_this.$props.innerClass, 'label') || null,
+	        "class": getClassName$5(_this.$props.innerClass, 'label') || null,
 	        "attrs": {
 	          "for": _this.$props.componentId + "-" + item.key
 	        }
@@ -21282,7 +22539,7 @@
 	        count: item.doc_count,
 	        isChecked: _this.currentValue === String(item.key)
 	      }) : h("span", [item.key, _this.$props.showCount && h("span", {
-	        "class": getClassName$4(_this.$props.innerClass, 'count') || null
+	        "class": getClassName$5(_this.$props.innerClass, 'count') || null
 	      }, ["\xA0(", item.doc_count, ")"])])])]);
 	    })])]);
 	  },
@@ -21310,7 +22567,7 @@
 	        _this2.$emit('value-change', value);
 	      };
 
-	      checkValueChange$1(props.componentId, value, props.beforeValueChange, performUpdate);
+	      checkValueChange$2(props.componentId, value, props.beforeValueChange, performUpdate);
 	    },
 	    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
 	      var defaultQueryOptions;
@@ -21328,7 +22585,7 @@
 	        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
 	      }
 
-	      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
+	      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
 	      this.updateQuery({
 	        componentId: this.internalComponent,
 	        query: query,
@@ -21349,7 +22606,7 @@
 	        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
 	      }
 
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -21384,7 +22641,7 @@
 
 	      if (this.$props.showSearch) {
 	        return h(Input, {
-	          "class": getClassName$4(this.$props.innerClass, 'input') || '',
+	          "class": getClassName$5(this.$props.innerClass, 'input') || '',
 	          "on": {
 	            "input": this.handleInputChange
 	          },
@@ -21447,7 +22704,7 @@
 	      var h = this.$createElement;
 	      var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
 	      return h("p", {
-	        "class": getClassName$4(this.$props.innerClass, 'noResults') || null
+	        "class": getClassName$5(this.$props.innerClass, 'noResults') || null
 	      }, [isFunction$1(renderNoResults) ? renderNoResults() : renderNoResults]);
 	    }
 	  },
@@ -21514,7 +22771,7 @@
 	  return query;
 	};
 
-	var mapStateToProps$4 = function mapStateToProps(state, props) {
+	var mapStateToProps$5 = function mapStateToProps(state, props) {
 	  return {
 	    options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
 	    rawData: state.rawData[props.componentId],
@@ -21529,11 +22786,11 @@
 
 	var mapDispatchtoProps$2 = {
 	  setQueryOptions: setQueryOptions$2,
-	  updateQuery: updateQuery$2,
-	  setCustomQuery: setCustomQuery$1,
-	  setDefaultQuery: setDefaultQuery$2
+	  updateQuery: updateQuery$3,
+	  setCustomQuery: setCustomQuery$2,
+	  setDefaultQuery: setDefaultQuery$3
 	};
-	var ListConnected = ComponentWrapper$1(connect(mapStateToProps$4, mapDispatchtoProps$2)(SingleList), {
+	var ListConnected = ComponentWrapper$1(connect(mapStateToProps$5, mapDispatchtoProps$2)(SingleList), {
 	  componentType: constants_1$1.singleList,
 	  internalComponent: true
 	});
@@ -21545,14 +22802,14 @@
 
 	SingleList.componentType = constants_1$1.singleList;
 
-	var updateQuery$3 = lib_5.updateQuery,
+	var updateQuery$4 = lib_5.updateQuery,
 	    setQueryOptions$3 = lib_5.setQueryOptions,
-	    setCustomQuery$2 = lib_5.setCustomQuery,
-	    setDefaultQuery$3 = lib_5.setDefaultQuery;
-	var isEqual$6 = lib_8.isEqual,
+	    setCustomQuery$3 = lib_5.setCustomQuery,
+	    setDefaultQuery$4 = lib_5.setDefaultQuery;
+	var isEqual$7 = lib_8.isEqual,
 	    getQueryOptions$2 = lib_8.getQueryOptions,
-	    checkValueChange$2 = lib_8.checkValueChange,
-	    getClassName$5 = lib_8.getClassName,
+	    checkValueChange$3 = lib_8.checkValueChange,
+	    getClassName$6 = lib_8.getClassName,
 	    getOptionsFromQuery$3 = lib_8.getOptionsFromQuery;
 	var MultiList = {
 	  name: 'MultiList',
@@ -21612,13 +22869,14 @@
 	  },
 	  beforeMount: function beforeMount() {
 	    this.updateQueryHandlerOptions(this.$props);
+	    var value = this.selectedValue || this.$props.value || this.$props.defaultValue;
+	    this.setValue(value, !this.selectedValue);
+	  },
+	  mounted: function mounted() {
+	    var currentValue = Object.keys(this.$data.currentValue);
 
-	    if (this.selectedValue) {
-	      this.setValue(this.selectedValue);
-	    } else if (this.$props.value) {
-	      this.setValue(this.$props.value, true);
-	    } else if (this.$props.defaultValue) {
-	      this.setValue(this.$props.defaultValue, true);
+	    if (this.$props.value !== undefined && !isEqual$7(this.$props.value, currentValue)) {
+	      this.$emit('change', currentValue);
 	    }
 	  },
 	  watch: {
@@ -21638,12 +22896,12 @@
 	      this.updateQueryHandler(this.$data.currentValue, this.$props);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$6(oldVal, newVal)) {
+	      if (!isEqual$7(oldVal, newVal)) {
 	        this.setValue(newVal, true);
 	      }
 	    },
 	    defaultValue: function defaultValue(newVal, oldVal) {
-	      if (!isEqual$6(oldVal, newVal)) {
+	      if (!isEqual$7(oldVal, newVal)) {
 	        this.setValue(newVal, true);
 	      }
 	    },
@@ -21662,8 +22920,12 @@
 	        }
 	      }
 
-	      if (!isEqual$6(selectedValue, newVal)) {
-	        this.setValue(newVal || [], true);
+	      if (!isEqual$7(selectedValue, newVal)) {
+	        if (this.value === undefined) {
+	          this.setValue(newVal, true);
+	        } else {
+	          this.$emit('change', newVal);
+	        }
 	      }
 	    },
 	    defaultQuery: function defaultQuery(newVal, oldVal) {
@@ -21720,9 +22982,9 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$5(this.$props.innerClass, 'title')
+	      "class": getClassName$6(this.$props.innerClass, 'title')
 	    }, [this.$props.title]), this.renderSearch(), this.hasCustomRenderer ? this.getComponent() : h(UL, {
-	      "class": getClassName$5(this.$props.innerClass, 'list')
+	      "class": getClassName$6(this.$props.innerClass, 'list')
 	    }, [selectAllLabel ? h("li", {
 	      "key": selectAllLabel,
 	      "class": "" + (this.currentValue[selectAllLabel] ? 'active' : '')
@@ -21734,7 +22996,7 @@
 	        "value": selectAllLabel,
 	        "show": this.$props.showCheckbox
 	      },
-	      "class": getClassName$5(this.$props.innerClass, 'checkbox'),
+	      "class": getClassName$6(this.$props.innerClass, 'checkbox'),
 	      "on": {
 	        "click": this.handleClick
 	      },
@@ -21742,7 +23004,7 @@
 	        checked: !!this.currentValue[selectAllLabel]
 	      })
 	    }), h("label", {
-	      "class": getClassName$5(this.$props.innerClass, 'label'),
+	      "class": getClassName$6(this.$props.innerClass, 'label'),
 	      "attrs": {
 	        "for": this.$props.componentId + "-" + selectAllLabel
 	      }
@@ -21758,7 +23020,7 @@
 	          "value": item.key,
 	          "show": _this2.$props.showCheckbox
 	        },
-	        "class": getClassName$5(_this2.$props.innerClass, 'checkbox'),
+	        "class": getClassName$6(_this2.$props.innerClass, 'checkbox'),
 	        "on": {
 	          "click": _this2.handleClick
 	        },
@@ -21766,7 +23028,7 @@
 	          checked: !!_this2.$data.currentValue[item.key]
 	        })
 	      }), h("label", {
-	        "class": getClassName$5(_this2.$props.innerClass, 'label'),
+	        "class": getClassName$6(_this2.$props.innerClass, 'label'),
 	        "attrs": {
 	          "for": _this2.$props.componentId + "-" + item.key
 	        }
@@ -21775,7 +23037,7 @@
 	        count: item.doc_count,
 	        isChecked: !!_this2.$data.currentValue[item.key]
 	      }) : h("span", [item.key, _this2.$props.showCount && h("span", {
-	        "class": getClassName$5(_this2.$props.innerClass, 'count')
+	        "class": getClassName$6(_this2.$props.innerClass, 'count')
 	      }, ["\xA0(", item.doc_count, ")"])])])]);
 	    })])]);
 	  },
@@ -21859,7 +23121,7 @@
 	        _this3.$emit('value-change', finalValues);
 	      };
 
-	      checkValueChange$2(props.componentId, finalValues, props.beforeValueChange, performUpdate);
+	      checkValueChange$3(props.componentId, finalValues, props.beforeValueChange, performUpdate);
 	    },
 	    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
 	      var defaultQueryOptions;
@@ -21877,7 +23139,7 @@
 	        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
 	      }
 
-	      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
+	      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
 	      this.updateQuery({
 	        componentId: this.internalComponent,
 	        query: query,
@@ -21898,7 +23160,7 @@
 	        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
 	      }
 
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -21933,7 +23195,7 @@
 
 	      if (this.$props.showSearch) {
 	        return h(Input, {
-	          "class": getClassName$5(this.$props.innerClass, 'input') || '',
+	          "class": getClassName$6(this.$props.innerClass, 'input') || '',
 	          "on": {
 	            "input": this.handleInputChange
 	          },
@@ -21962,7 +23224,7 @@
 	      if (value === undefined) {
 	        this.setValue(currentValue);
 	      } else {
-	        var values = parseValueArray(value, currentValue);
+	        var values = parseValueArray(value || [], currentValue);
 	        this.$emit('change', values);
 	      }
 	    },
@@ -21991,7 +23253,7 @@
 	      var h = this.$createElement;
 	      var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
 	      return h("p", {
-	        "class": getClassName$5(this.$props.innerClass, 'noResults') || null
+	        "class": getClassName$6(this.$props.innerClass, 'noResults') || null
 	      }, [isFunction$1(renderNoResults) ? renderNoResults() : renderNoResults]);
 	    }
 	  },
@@ -22092,7 +23354,7 @@
 	  return getAggsQuery(queryOptions, props);
 	};
 
-	var mapStateToProps$5 = function mapStateToProps(state, props) {
+	var mapStateToProps$6 = function mapStateToProps(state, props) {
 	  return {
 	    options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
 	    rawData: state.rawData[props.componentId],
@@ -22107,11 +23369,11 @@
 
 	var mapDispatchtoProps$3 = {
 	  setQueryOptions: setQueryOptions$3,
-	  updateQuery: updateQuery$3,
-	  setCustomQuery: setCustomQuery$2,
-	  setDefaultQuery: setDefaultQuery$3
+	  updateQuery: updateQuery$4,
+	  setCustomQuery: setCustomQuery$3,
+	  setDefaultQuery: setDefaultQuery$4
 	};
-	var ListConnected$1 = ComponentWrapper$1(connect(mapStateToProps$5, mapDispatchtoProps$3)(MultiList), {
+	var ListConnected$1 = ComponentWrapper$1(connect(mapStateToProps$6, mapDispatchtoProps$3)(MultiList), {
 	  componentType: constants_1$1.multiList,
 	  internalComponent: true
 	});
@@ -22123,8 +23385,8 @@
 
 	MultiList.componentType = constants_1$1.multiList;
 
-	var _templateObject$k, _templateObject2$8, _templateObject3$7, _templateObject4$6;
-	var small = css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n"])));
+	var _templateObject$l, _templateObject2$8, _templateObject3$7, _templateObject4$6;
+	var small = css(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n"])));
 
 	var dark$2 = function dark(_ref) {
 	  var theme = _ref.theme;
@@ -22142,13 +23404,13 @@
 	  return theme.colors.primaryColor;
 	});
 
-	var _templateObject$l, _templateObject2$9;
-	var open = css(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"])));
+	var _templateObject$m, _templateObject2$9;
+	var open = css(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"])));
 	var Chevron = index$1('span')(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
 	  return props.open ? open : null;
 	});
 
-	var getClassName$6 = lib_8.getClassName;
+	var getClassName$7 = lib_8.getClassName;
 	var Dropdown = {
 	  data: function data() {
 	    this.__state = {
@@ -22234,14 +23496,15 @@
 	              isOpen = _ref.isOpen,
 	              highlightedIndex = _ref.highlightedIndex,
 	              getButtonProps = _ref.getButtonProps,
-	              getItemEvents = _ref.getItemEvents;
+	              getItemEvents = _ref.getItemEvents,
+	              getInputEvents = _ref.getInputEvents;
 	          return h("div", {
 	            "class": suggestionsContainer
 	          }, [h(Select, {
 	            "on": _extends({}, _extends({}, getButtonProps({
 	              onClick: _this.toggle
 	            }))),
-	            "class": getClassName$6(_this.$props.innerClass, 'select') || '',
+	            "class": getClassName$7(_this.$props.innerClass, 'select') || '',
 	            "attrs": {
 	              "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
 	              "small": _this.$props.small,
@@ -22258,8 +23521,14 @@
 	            getButtonProps: getButtonProps,
 	            getItemEvents: getItemEvents
 	          }) : isOpen && itemsToRender.length ? h("ul", {
-	            "class": suggestions$1(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName$6(_this.$props.innerClass, 'list')
-	          }, [_this.$props.showSearch ? _this.renderSearchbox() : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
+	            "class": suggestions$1(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName$7(_this.$props.innerClass, 'list')
+	          }, [_this.$props.showSearch ? _this.renderSearchbox({
+	            on: {
+	              input: getInputEvents({
+	                onInput: _this.handleInputChange
+	              }).input
+	            }
+	          }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
 	            var selected = _this.$props.multi // MultiDropdownList
 	            && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
 	            || Array.isArray(selectedItem) && selectedItem.find(function (value) {
@@ -22287,9 +23556,9 @@
 	                "innerHTML": item[labelField]
 	              }
 	            }) : item[labelField], _this.$props.showCount && item.doc_count && h("span", {
-	              "class": getClassName$6(_this.$props.innerClass, 'count') || ''
+	              "class": getClassName$7(_this.$props.innerClass, 'count') || ''
 	            }, ["\xA0(", item.doc_count, ")"])]), selected && _this.$props.multi ? h(Tick, {
-	              "class": getClassName$6(_this.$props.innerClass, 'icon') || ''
+	              "class": getClassName$7(_this.$props.innerClass, 'icon') || ''
 	            }) : null]);
 	          }), footer]) : null]);
 	        }
@@ -22377,10 +23646,10 @@
 	      var h = this.$createElement;
 	      var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
 	      return h("p", {
-	        "class": getClassName$6(this.$props.innerClass, 'noResults') || null
+	        "class": getClassName$7(this.$props.innerClass, 'noResults') || null
 	      }, [isFunction$1(renderNoResults) ? renderNoResults() : renderNoResults]);
 	    },
-	    renderSearchbox: function renderSearchbox() {
+	    renderSearchbox: function renderSearchbox(eventObject) {
 	      var h = this.$createElement;
 	      var _this$$props2 = this.$props,
 	          componentId = _this$$props2.componentId,
@@ -22388,7 +23657,7 @@
 	          showClear = _this$$props2.showClear,
 	          themePreset = _this$$props2.themePreset,
 	          innerClass = _this$$props2.innerClass;
-	      var InputComponent = h(Input, {
+	      var InputComponent = h(Input, helper$1([{
 	        "attrs": {
 	          "id": componentId + "-input",
 	          "showIcon": false,
@@ -22401,11 +23670,8 @@
 	          border: 0,
 	          borderBottom: '1px solid #ddd'
 	        },
-	        "class": getClassName$6(innerClass, 'input'),
-	        "on": {
-	          "change": this.handleInputChange
-	        }
-	      });
+	        "class": getClassName$7(innerClass, 'input')
+	      }, eventObject]));
 
 	      if (showClear) {
 	        return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
@@ -22428,17 +23694,17 @@
 	  }
 	};
 
-	var updateQuery$4 = lib_5.updateQuery,
+	var updateQuery$5 = lib_5.updateQuery,
 	    setQueryOptions$4 = lib_5.setQueryOptions,
-	    setCustomQuery$3 = lib_5.setCustomQuery,
-	    setDefaultQuery$4 = lib_5.setDefaultQuery;
+	    setCustomQuery$4 = lib_5.setCustomQuery,
+	    setDefaultQuery$5 = lib_5.setDefaultQuery;
 	var getQueryOptions$3 = lib_8.getQueryOptions,
-	    checkValueChange$3 = lib_8.checkValueChange,
+	    checkValueChange$4 = lib_8.checkValueChange,
 	    checkPropChange$1 = lib_8.checkPropChange,
-	    getClassName$7 = lib_8.getClassName,
+	    getClassName$8 = lib_8.getClassName,
 	    getOptionsFromQuery$4 = lib_8.getOptionsFromQuery,
-	    isEqual$7 = lib_8.isEqual,
-	    getCompositeAggsQuery$2 = lib_8.getCompositeAggsQuery;
+	    isEqual$8 = lib_8.isEqual,
+	    getCompositeAggsQuery$3 = lib_8.getCompositeAggsQuery;
 	var SingleDropdownList = {
 	  name: 'SingleDropdownList',
 	  data: function data() {
@@ -22559,7 +23825,7 @@
 	      this.setValue(newVal);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$7(newVal, oldVal)) {
+	      if (!isEqual$8(newVal, oldVal)) {
 	        this.setValue(newVal);
 	      }
 	    },
@@ -22619,7 +23885,7 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$7(this.$props.innerClass, 'title') || ''
+	      "class": getClassName$8(this.$props.innerClass, 'title') || ''
 	    }, [this.$props.title]), h(Dropdown, {
 	      "attrs": {
 	        "innerClass": this.$props.innerClass,
@@ -22675,7 +23941,7 @@
 	        _this2.$emit('value-change', value);
 	      };
 
-	      checkValueChange$3(props.componentId, value, props.beforeValueChange, performUpdate);
+	      checkValueChange$4(props.componentId, value, props.beforeValueChange, performUpdate);
 	    },
 	    handleChange: function handleChange(item) {
 	      var value = this.$props.value;
@@ -22702,7 +23968,7 @@
 	        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
 	      }
 
-	      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
+	      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
 	      this.updateQuery({
 	        componentId: this.internalComponent,
 	        query: query,
@@ -22723,7 +23989,7 @@
 	        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
 	      }
 
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -22736,7 +24002,7 @@
 	    },
 	    generateQueryOptions: function generateQueryOptions(props, after) {
 	      var queryOptions = getQueryOptions$3(props);
-	      return props.showLoadMore ? getCompositeAggsQuery$2({
+	      return props.showLoadMore ? getCompositeAggsQuery$3({
 	        query: queryOptions,
 	        props: props,
 	        after: after
@@ -22842,14 +24108,14 @@
 
 	SingleDropdownList.generateQueryOptions = function (props, after) {
 	  var queryOptions = getQueryOptions$3(props);
-	  return props.showLoadMore ? getCompositeAggsQuery$2({
+	  return props.showLoadMore ? getCompositeAggsQuery$3({
 	    query: queryOptions,
 	    props: props,
 	    after: after
 	  }) : getAggsQuery(queryOptions, props);
 	};
 
-	var mapStateToProps$6 = function mapStateToProps(state, props) {
+	var mapStateToProps$7 = function mapStateToProps(state, props) {
 	  return {
 	    options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
 	    rawData: state.rawData[props.componentId],
@@ -22864,11 +24130,11 @@
 
 	var mapDispatchtoProps$4 = {
 	  setQueryOptions: setQueryOptions$4,
-	  updateQuery: updateQuery$4,
-	  setCustomQuery: setCustomQuery$3,
-	  setDefaultQuery: setDefaultQuery$4
+	  updateQuery: updateQuery$5,
+	  setCustomQuery: setCustomQuery$4,
+	  setDefaultQuery: setDefaultQuery$5
 	};
-	var ListConnected$2 = ComponentWrapper$1(connect(mapStateToProps$6, mapDispatchtoProps$4)(SingleDropdownList), {
+	var ListConnected$2 = ComponentWrapper$1(connect(mapStateToProps$7, mapDispatchtoProps$4)(SingleDropdownList), {
 	  componentType: constants_1$1.singleDropdownList,
 	  internalComponent: true
 	});
@@ -22880,17 +24146,17 @@
 
 	SingleDropdownList.componentType = constants_1$1.singleDropdownList;
 
-	var updateQuery$5 = lib_5.updateQuery,
+	var updateQuery$6 = lib_5.updateQuery,
 	    setQueryOptions$5 = lib_5.setQueryOptions,
-	    setCustomQuery$4 = lib_5.setCustomQuery,
-	    setDefaultQuery$5 = lib_5.setDefaultQuery;
-	var isEqual$8 = lib_8.isEqual,
+	    setCustomQuery$5 = lib_5.setCustomQuery,
+	    setDefaultQuery$6 = lib_5.setDefaultQuery;
+	var isEqual$9 = lib_8.isEqual,
 	    getQueryOptions$4 = lib_8.getQueryOptions,
-	    checkValueChange$4 = lib_8.checkValueChange,
+	    checkValueChange$5 = lib_8.checkValueChange,
 	    checkPropChange$2 = lib_8.checkPropChange,
-	    getClassName$8 = lib_8.getClassName,
+	    getClassName$9 = lib_8.getClassName,
 	    getOptionsFromQuery$5 = lib_8.getOptionsFromQuery,
-	    getCompositeAggsQuery$3 = lib_8.getCompositeAggsQuery;
+	    getCompositeAggsQuery$4 = lib_8.getCompositeAggsQuery;
 	var MultiDropdownList = {
 	  name: 'MultiDropdownList',
 	  data: function data() {
@@ -22980,7 +24246,7 @@
 	        }
 	      }
 
-	      if (!isEqual$8(selectedValue, newVal)) {
+	      if (!isEqual$9(selectedValue, newVal)) {
 	        this.setValue(newVal || [], true);
 	      }
 	    },
@@ -23031,7 +24297,7 @@
 	      this.setValue(newVal, true);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$8(newVal, oldVal)) {
+	      if (!isEqual$9(newVal, oldVal)) {
 	        this.setValue(newVal, true);
 	      }
 	    },
@@ -23086,7 +24352,7 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$8(this.$props.innerClass, 'title') || ''
+	      "class": getClassName$9(this.$props.innerClass, 'title') || ''
 	    }, [this.$props.title]), h(Dropdown, {
 	      "attrs": {
 	        "innerClass": this.$props.innerClass,
@@ -23202,7 +24468,7 @@
 	      }
 
 	      var performUpdate = function performUpdate() {
-	        _this3.currentValue = currentValue;
+	        _this3.currentValue = _extends({}, currentValue);
 
 	        _this3.updateQueryHandler(finalValues, props);
 
@@ -23211,7 +24477,7 @@
 	        _this3.$emit('value-change', finalValues);
 	      };
 
-	      checkValueChange$4(props.componentId, finalValues, props.beforeValueChange, performUpdate);
+	      checkValueChange$5(props.componentId, finalValues, props.beforeValueChange, performUpdate);
 	    },
 	    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
 	      var defaultQueryOptions;
@@ -23229,7 +24495,7 @@
 	        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
 	      }
 
-	      this.setQueryOptions(this.internalComponent, defaultQueryOptions);
+	      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
 	      this.updateQuery({
 	        componentId: this.internalComponent,
 	        query: query,
@@ -23250,7 +24516,7 @@
 	        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
 	      }
 
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -23263,7 +24529,7 @@
 	    },
 	    generateQueryOptions: function generateQueryOptions(props, after) {
 	      var queryOptions = getQueryOptions$4(props);
-	      return props.showLoadMore ? getCompositeAggsQuery$3({
+	      return props.showLoadMore ? getCompositeAggsQuery$4({
 	        query: queryOptions,
 	        props: props,
 	        after: after
@@ -23405,14 +24671,14 @@
 
 	MultiDropdownList.generateQueryOptions = function (props, after) {
 	  var queryOptions = getQueryOptions$4(props);
-	  return props.showLoadMore ? getCompositeAggsQuery$3({
+	  return props.showLoadMore ? getCompositeAggsQuery$4({
 	    query: queryOptions,
 	    props: props,
 	    after: after
 	  }) : getAggsQuery(queryOptions, props);
 	};
 
-	var mapStateToProps$7 = function mapStateToProps(state, props) {
+	var mapStateToProps$8 = function mapStateToProps(state, props) {
 	  return {
 	    options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
 	    rawData: state.rawData[props.componentId],
@@ -23427,11 +24693,11 @@
 
 	var mapDispatchtoProps$5 = {
 	  setQueryOptions: setQueryOptions$5,
-	  updateQuery: updateQuery$5,
-	  setCustomQuery: setCustomQuery$4,
-	  setDefaultQuery: setDefaultQuery$5
+	  updateQuery: updateQuery$6,
+	  setCustomQuery: setCustomQuery$5,
+	  setDefaultQuery: setDefaultQuery$6
 	};
-	var ListConnected$3 = ComponentWrapper$1(connect(mapStateToProps$7, mapDispatchtoProps$5)(MultiDropdownList), {
+	var ListConnected$3 = ComponentWrapper$1(connect(mapStateToProps$8, mapDispatchtoProps$5)(MultiDropdownList), {
 	  componentType: constants_1$1.multiDropdownList,
 	  internalComponent: true
 	});
@@ -23443,12 +24709,12 @@
 
 	MultiDropdownList.componentType = constants_1$1.multiDropdownList;
 
-	var updateQuery$6 = lib_5.updateQuery,
+	var updateQuery$7 = lib_5.updateQuery,
 	    setQueryOptions$6 = lib_5.setQueryOptions,
-	    setCustomQuery$5 = lib_5.setCustomQuery;
-	var isEqual$9 = lib_8.isEqual,
-	    checkValueChange$5 = lib_8.checkValueChange,
-	    getClassName$9 = lib_8.getClassName,
+	    setCustomQuery$6 = lib_5.setCustomQuery;
+	var isEqual$a = lib_8.isEqual,
+	    checkValueChange$6 = lib_8.checkValueChange,
+	    getClassName$a = lib_8.getClassName,
 	    getOptionsFromQuery$6 = lib_8.getOptionsFromQuery,
 	    handleA11yAction$1 = lib_8.handleA11yAction;
 	var ToggleButton = {
@@ -23507,21 +24773,21 @@
 	      this.updateQuery(this.$data.currentValue, this.$props);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$9(newVal, oldVal)) {
+	      if (!isEqual$a(newVal, oldVal)) {
 	        this.handleToggle(newVal, true, this.$props);
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal, oldVal) {
 	      if (this.$props.multiSelect) {
 	        // for multiselect selectedValue will be an array
-	        if (!isEqual$9(this.$data.currentValue, newVal) && !isEqual$9(oldVal, newVal)) {
+	        if (!isEqual$a(this.$data.currentValue, newVal) && !isEqual$a(oldVal, newVal)) {
 	          this.handleToggle(newVal || [], true, this.$props);
 	        }
 	      } else {
 	        // else selectedValue will be a string
 	        var currentValue = this.$data.currentValue[0] ? this.$data.currentValue[0].value : null;
 
-	        if (!isEqual$9(currentValue, this.selectedValue) && !isEqual$9(oldVal, this.selectedValue)) {
+	        if (!isEqual$a(currentValue, this.selectedValue) && !isEqual$a(oldVal, this.selectedValue)) {
 	          this.handleToggle(this.selectedValue || [], true, this.$props);
 	        }
 	      }
@@ -23599,7 +24865,7 @@
 	        }
 	      };
 
-	      checkValueChange$5(props.componentId, props.multiSelect ? value : value[0], props.beforeValueChange, performUpdate);
+	      checkValueChange$6(props.componentId, props.multiSelect ? value : value[0], props.beforeValueChange, performUpdate);
 	    },
 	    updateQuery: function updateQuery(value, props) {
 	      var filterValue = value;
@@ -23615,7 +24881,7 @@
 	        var _ref = customQuery(value, props) || {};
 
 	        query = _ref.query;
-	        this.setQueryOptions(props.componentId, getOptionsFromQuery$6(customQuery(value, props)));
+	        this.setQueryOptions(props.componentId, getOptionsFromQuery$6(customQuery(value, props)), false);
 	        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
 	      }
 
@@ -23636,7 +24902,7 @@
 	          multiSelect = _this$$props.multiSelect;
 
 	      if (enableStrictSelection && !multiSelect && this.$data.currentValue.find(function (stateItem) {
-	        return isEqual$9(item, stateItem);
+	        return isEqual$a(item, stateItem);
 	      })) {
 	        return false;
 	      }
@@ -23666,7 +24932,7 @@
 	          return _this2.handleClick(item);
 	        }
 	      }) : h(Button, {
-	        "class": getClassName$9(this.$props.innerClass, 'button') + " " + (isSelected ? 'active' : ''),
+	        "class": getClassName$a(this.$props.innerClass, 'button') + " " + (isSelected ? 'active' : ''),
 	        "on": {
 	          "click": function click() {
 	            return _this2.handleClick(item);
@@ -23693,7 +24959,7 @@
 	    return h(Container, {
 	      "class": toggleButtons
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$9(this.$props.innerClass, 'title')
+	      "class": getClassName$a(this.$props.innerClass, 'title')
 	    }, [this.$props.title]), this.$props.data.map(function (item) {
 	      return _this3.renderButton(item);
 	    })]);
@@ -23749,7 +25015,7 @@
 	  return query;
 	};
 
-	var mapStateToProps$8 = function mapStateToProps(state, props) {
+	var mapStateToProps$9 = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId],
@@ -23758,11 +25024,11 @@
 	};
 
 	var mapDispatchtoProps$6 = {
-	  updateQueryHandler: updateQuery$6,
+	  updateQueryHandler: updateQuery$7,
 	  setQueryOptions: setQueryOptions$6,
-	  setCustomQuery: setCustomQuery$5
+	  setCustomQuery: setCustomQuery$6
 	};
-	var RcConnected = ComponentWrapper$1(connect(mapStateToProps$8, mapDispatchtoProps$6)(ToggleButton), {
+	var RcConnected = ComponentWrapper$1(connect(mapStateToProps$9, mapDispatchtoProps$6)(ToggleButton), {
 	  componentType: constants_1$1.toggleButton
 	});
 
@@ -23777,15 +25043,15 @@
 	    _excluded2 = ["query"],
 	    _excluded3 = ["query"],
 	    _excluded4 = ["query"];
-	var updateQuery$7 = lib_5.updateQuery,
+	var updateQuery$8 = lib_5.updateQuery,
 	    setQueryOptions$7 = lib_5.setQueryOptions,
-	    setCustomQuery$6 = lib_5.setCustomQuery,
-	    setDefaultQuery$6 = lib_5.setDefaultQuery;
+	    setCustomQuery$7 = lib_5.setCustomQuery,
+	    setDefaultQuery$7 = lib_5.setDefaultQuery;
 	var parseHits$1 = lib_8.parseHits,
-	    isEqual$a = lib_8.isEqual,
-	    getCompositeAggsQuery$4 = lib_8.getCompositeAggsQuery,
+	    isEqual$b = lib_8.isEqual,
+	    getCompositeAggsQuery$5 = lib_8.getCompositeAggsQuery,
 	    getOptionsFromQuery$7 = lib_8.getOptionsFromQuery,
-	    getResultStats$2 = lib_8.getResultStats;
+	    getResultStats$3 = lib_8.getResultStats;
 	var ReactiveComponent = {
 	  name: 'ReactiveComponent',
 	  props: {
@@ -23928,42 +25194,42 @@
 	  },
 	  watch: {
 	    hits: function hits(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    rawData: function rawData(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    aggregations: function aggregations(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    aggregationData: function aggregationData(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    promotedResults: function promotedResults(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    hidden: function hidden(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    total: function total(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    time: function time(newVal, oldVal) {
-	      if (!isEqual$a(newVal, oldVal)) {
+	      if (!isEqual$b(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
@@ -24047,7 +25313,7 @@
 	    getAggsQuery: function getAggsQuery() {
 	      if (this.aggregationField) {
 	        return {
-	          aggs: getCompositeAggsQuery$4({
+	          aggs: getCompositeAggsQuery$5({
 	            props: this.$props,
 	            showTopHits: true,
 	            value: this.selectedValue
@@ -24091,12 +25357,12 @@
 	  },
 	  computed: {
 	    stats: function stats() {
-	      return getResultStats$2(this);
+	      return getResultStats$3(this);
 	    }
 	  }
 	};
 
-	var mapStateToProps$9 = function mapStateToProps(state, props) {
+	var mapStateToProps$a = function mapStateToProps(state, props) {
 	  return {
 	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
 	    aggregationData: state.compositeAggregations[props.componentId] || [],
@@ -24116,11 +25382,11 @@
 
 	var mapDispatchtoProps$7 = {
 	  setQueryOptions: setQueryOptions$7,
-	  updateQuery: updateQuery$7,
-	  setCustomQuery: setCustomQuery$6,
-	  setDefaultQuery: setDefaultQuery$6
+	  updateQuery: updateQuery$8,
+	  setCustomQuery: setCustomQuery$7,
+	  setDefaultQuery: setDefaultQuery$7
 	};
-	var RcConnected$1 = ComponentWrapper$1(connect(mapStateToProps$9, mapDispatchtoProps$7)(ReactiveComponent), {
+	var RcConnected$1 = ComponentWrapper$1(connect(mapStateToProps$a, mapDispatchtoProps$7)(ReactiveComponent), {
 	  componentType: constants_1$1.reactiveComponent
 	});
 
@@ -24134,7 +25400,7 @@
 	var setValue$2 = lib_5.setValue,
 	    clearValues = lib_5.clearValues,
 	    resetValuesToDefault = lib_5.resetValuesToDefault;
-	var getClassName$a = lib_8.getClassName,
+	var getClassName$b = lib_8.getClassName,
 	    handleA11yAction$2 = lib_8.handleA11yAction;
 	var SelectedFilters = {
 	  name: 'SelectedFilters',
@@ -24144,7 +25410,8 @@
 	    innerClass: types.style,
 	    showClearAll: VueTypes.bool.def(true),
 	    title: types.title,
-	    resetToDefault: VueTypes.bool.def(false)
+	    resetToDefault: VueTypes.bool.def(false),
+	    resetToValues: VueTypes.object
 	  },
 	  inject: {
 	    theme: {
@@ -24171,9 +25438,9 @@
 	    return h(Container, {
 	      "class": filters(this.theme) + " " + (this.$props.className || '')
 	    }, [this.$props.title && hasValues && h(Title, {
-	      "class": getClassName$a(this.$props.innerClass, 'title') || ''
+	      "class": getClassName$b(this.$props.innerClass, 'title') || ''
 	    }, [this.$props.title]), filtersToRender, this.$props.showClearAll && hasValues ? h(Button, {
-	      "class": getClassName$a(this.$props.innerClass, 'button') || '',
+	      "class": getClassName$b(this.$props.innerClass, 'button') || '',
 	      "on": _extends({}, {
 	        click: this.clearValues,
 	        keypress: function keypress(event) {
@@ -24197,15 +25464,16 @@
 	      this.$emit('clear', component, value);
 	    },
 	    clearValues: function clearValues() {
-	      var resetToDefault = this.resetToDefault;
+	      var resetToDefault = this.resetToDefault,
+	          resetToValues = this.resetToValues;
 
 	      if (resetToDefault) {
 	        this.resetValuesToDefault();
 	      } else {
-	        this.clearValuesAction();
+	        this.clearValuesAction(resetToValues);
 	      }
 
-	      this.$emit('clear', null);
+	      this.$emit('clear', resetToValues);
 	    },
 	    renderValue: function renderValue(value, isArray) {
 	      var _this2 = this;
@@ -24247,7 +25515,7 @@
 	          var valueToRender = _this3.renderValue(value, isArray);
 
 	          return h(Button, {
-	            "class": getClassName$a(_this3.$props.innerClass, 'button') || '',
+	            "class": getClassName$b(_this3.$props.innerClass, 'button') || '',
 	            "key": component + "-" + (index + 1),
 	            "on": _extends({}, {
 	              click: function click() {
@@ -24276,7 +25544,7 @@
 	  }
 	};
 
-	var mapStateToProps$a = function mapStateToProps(state) {
+	var mapStateToProps$b = function mapStateToProps(state) {
 	  return {
 	    components: state.components,
 	    selectedValues: state.selectedValues
@@ -24288,18 +25556,18 @@
 	  setValue: setValue$2,
 	  resetValuesToDefault: resetValuesToDefault
 	};
-	var RcConnected$2 = connect(mapStateToProps$a, mapDispatchtoProps$8)(SelectedFilters);
+	var RcConnected$2 = connect(mapStateToProps$b, mapDispatchtoProps$8)(SelectedFilters);
 
 	SelectedFilters.install = function (Vue) {
 	  Vue.component(SelectedFilters.name, RcConnected$2);
 	};
 
-	var updateQuery$8 = lib_5.updateQuery,
+	var updateQuery$9 = lib_5.updateQuery,
 	    setQueryOptions$8 = lib_5.setQueryOptions,
-	    setCustomQuery$7 = lib_5.setCustomQuery;
-	var isEqual$b = lib_8.isEqual,
-	    checkValueChange$6 = lib_8.checkValueChange,
-	    getClassName$b = lib_8.getClassName,
+	    setCustomQuery$8 = lib_5.setCustomQuery;
+	var isEqual$c = lib_8.isEqual,
+	    checkValueChange$7 = lib_8.checkValueChange,
+	    getClassName$c = lib_8.getClassName,
 	    getOptionsFromQuery$8 = lib_8.getOptionsFromQuery;
 	var SingleRange = {
 	  name: 'SingleRange',
@@ -24354,12 +25622,12 @@
 	      this.setValue(newVal);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
+	      if (!isEqual$c(newVal, oldVal)) {
 	        this.setValue(newVal);
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$b(this.$data.currentValue, newVal)) {
+	      if (!isEqual$c(this.$data.currentValue, newVal)) {
 	        this.setValue(newVal);
 	      }
 	    },
@@ -24376,16 +25644,16 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$b(this.$props.innerClass, 'title')
+	      "class": getClassName$c(this.$props.innerClass, 'title')
 	    }, [this.$props.title]), h(UL, {
-	      "class": getClassName$b(this.$props.innerClass, 'list')
+	      "class": getClassName$c(this.$props.innerClass, 'list')
 	    }, [this.$props.data.map(function (item) {
 	      var selected = !!_this.$data.currentValue && _this.$data.currentValue.label === item.label;
 	      return h("li", {
 	        "key": item.label,
 	        "class": "" + (selected ? 'active' : '')
 	      }, [h(Radio, {
-	        "class": getClassName$b(_this.$props.innerClass, 'radio'),
+	        "class": getClassName$c(_this.$props.innerClass, 'radio'),
 	        "attrs": {
 	          "id": _this.$props.componentId + "-" + item.label,
 	          "name": _this.$props.componentId,
@@ -24398,7 +25666,7 @@
 	          "change": _this.handleChange
 	        }
 	      }), h("label", {
-	        "class": getClassName$b(_this.$props.innerClass, 'label'),
+	        "class": getClassName$c(_this.$props.innerClass, 'label'),
 	        "attrs": {
 	          "for": _this.$props.componentId + "-" + item.label
 	        }
@@ -24425,7 +25693,7 @@
 	        _this2.$emit('value-change', currentValue);
 	      };
 
-	      checkValueChange$6(props.componentId, currentValue, props.beforeValueChange, performUpdate);
+	      checkValueChange$7(props.componentId, currentValue, props.beforeValueChange, performUpdate);
 	    },
 	    updateQueryHandler: function updateQueryHandler(value, props) {
 	      var customQuery = props.customQuery;
@@ -24440,7 +25708,7 @@
 	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
 	      }
 
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -24498,7 +25766,7 @@
 	  return query;
 	};
 
-	var mapStateToProps$b = function mapStateToProps(state, props) {
+	var mapStateToProps$c = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId],
@@ -24507,11 +25775,11 @@
 	};
 
 	var mapDispatchtoProps$9 = {
-	  updateQuery: updateQuery$8,
+	  updateQuery: updateQuery$9,
 	  setQueryOptions: setQueryOptions$8,
-	  setCustomQuery: setCustomQuery$7
+	  setCustomQuery: setCustomQuery$8
 	};
-	var RangeConnected = ComponentWrapper$1(connect(mapStateToProps$b, mapDispatchtoProps$9)(SingleRange), {
+	var RangeConnected = ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$9)(SingleRange), {
 	  componentType: constants_1$1.singleRange
 	});
 
@@ -24522,12 +25790,12 @@
 
 	SingleRange.componentType = constants_1$1.singleRange;
 
-	var updateQuery$9 = lib_5.updateQuery,
+	var updateQuery$a = lib_5.updateQuery,
 	    setQueryOptions$9 = lib_5.setQueryOptions,
-	    setCustomQuery$8 = lib_5.setCustomQuery;
-	var isEqual$c = lib_8.isEqual,
-	    checkValueChange$7 = lib_8.checkValueChange,
-	    getClassName$c = lib_8.getClassName,
+	    setCustomQuery$9 = lib_5.setCustomQuery;
+	var isEqual$d = lib_8.isEqual,
+	    checkValueChange$8 = lib_8.checkValueChange,
+	    getClassName$d = lib_8.getClassName,
 	    getOptionsFromQuery$9 = lib_8.getOptionsFromQuery;
 	var MultiRange = {
 	  name: 'MultiRange',
@@ -24634,7 +25902,7 @@
 	        _this.$emit('value-change', Object.keys(selectedValues));
 	      };
 
-	      checkValueChange$7(props.componentId, currentValue, props.beforeValueChange, performUpdate);
+	      checkValueChange$8(props.componentId, currentValue, props.beforeValueChange, performUpdate);
 	    },
 	    updateQueryHandler: function updateQueryHandler(value, props) {
 	      var customQuery = props.customQuery;
@@ -24649,7 +25917,7 @@
 	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
 	      }
 
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -24669,12 +25937,12 @@
 	      this.selectItem(newVal, true, undefined, true);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$c(newVal, oldVal)) {
+	      if (!isEqual$d(newVal, oldVal)) {
 	        this.selectItem(newVal, true, undefined, true);
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$c(this.$data.currentValue, newVal)) {
+	      if (!isEqual$d(this.$data.currentValue, newVal)) {
 	        this.selectItem(newVal, true, undefined, true);
 	      }
 	    },
@@ -24708,16 +25976,16 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$c(this.$props.innerClass, 'title')
+	      "class": getClassName$d(this.$props.innerClass, 'title')
 	    }, [this.$props.title]), h(UL, {
-	      "class": getClassName$c(this.$props.innerClass, 'list')
+	      "class": getClassName$d(this.$props.innerClass, 'list')
 	    }, [this.$props.data.map(function (item) {
 	      var selected = !!_this2.$data.currentValue && _this2.$data.currentValue.label === item.label;
 	      return h("li", {
 	        "key": item.label,
 	        "class": "" + (selected ? 'active' : '')
 	      }, [h(Checkbox, {
-	        "class": getClassName$c(_this2.$props.innerClass, 'checkbox'),
+	        "class": getClassName$d(_this2.$props.innerClass, 'checkbox'),
 	        "attrs": {
 	          "id": _this2.$props.componentId + "-" + item.label,
 	          "name": _this2.$props.componentId,
@@ -24732,7 +26000,7 @@
 	          click: _this2.handleClick
 	        })
 	      }), h("label", {
-	        "class": getClassName$c(_this2.$props.innerClass, 'label'),
+	        "class": getClassName$d(_this2.$props.innerClass, 'label'),
 	        "attrs": {
 	          "for": _this2.$props.componentId + "-" + item.label
 	        }
@@ -24792,7 +26060,7 @@
 	  return query;
 	};
 
-	var mapStateToProps$c = function mapStateToProps(state, props) {
+	var mapStateToProps$d = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId],
@@ -24801,11 +26069,11 @@
 	};
 
 	var mapDispatchtoProps$a = {
-	  updateQuery: updateQuery$9,
+	  updateQuery: updateQuery$a,
 	  setQueryOptions: setQueryOptions$9,
-	  setCustomQuery: setCustomQuery$8
+	  setCustomQuery: setCustomQuery$9
 	};
-	var RangeConnected$1 = ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$a)(MultiRange), {
+	var RangeConnected$1 = ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$a)(MultiRange), {
 	  componentType: constants_1$1.multiRange
 	});
 
@@ -25091,15 +26359,15 @@
 	};
 	var vueNoSsr_common = index$2;
 
-	var _templateObject$m;
-	var Slider = index$1('div')(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot{\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder-color: #000;\n\t\tbackground-color: #000;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot -tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
+	var _templateObject$n;
+	var Slider = index$1('div')(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
 
 	/**
 	 * Caution: Please do not change this file without having a discussion with the Team.
 	 * Any change may break the umd build, we're directly replacing the line no: 14
 	 * `
 						var s = document.createElement("script");
-						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@2.8.2/dist/index.js");
+						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
 						s.onload = function(){
 							var VueSlider = global['vue-slider-component'];
 							components['vue-slider-component'] = VueSlider;
@@ -25120,7 +26388,7 @@
 	      // eslint-disable-next-line
 	      
 						var s = document.createElement("script");
-						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@2.8.2/dist/index.js");
+						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
 						s.onload = function(){
 							var VueSlider = global$1['vue-slider-component'];
 							components['vue-slider-component'] = VueSlider;
@@ -25135,13 +26403,13 @@
 	  return components;
 	};
 
-	var updateQuery$a = lib_5.updateQuery,
+	var updateQuery$b = lib_5.updateQuery,
 	    setQueryOptions$a = lib_5.setQueryOptions,
-	    setCustomQuery$9 = lib_5.setCustomQuery;
-	var checkValueChange$8 = lib_8.checkValueChange,
-	    getClassName$d = lib_8.getClassName,
+	    setCustomQuery$a = lib_5.setCustomQuery;
+	var checkValueChange$9 = lib_8.checkValueChange,
+	    getClassName$e = lib_8.getClassName,
 	    getOptionsFromQuery$a = lib_8.getOptionsFromQuery,
-	    isEqual$d = lib_8.isEqual;
+	    isEqual$e = lib_8.isEqual;
 	var RangeSlider = {
 	  name: 'RangeSlider',
 	  components: getComponents(),
@@ -25195,38 +26463,34 @@
 	        });
 	      }
 	    },
-	    handleSlider: function handleSlider(values) {
-	      var _this = this;
-
-	      clearTimeout(this.handleSliderChange._tId);
-	      this.handleSliderChange._tId = setTimeout(function () {
-	        _this.handleSliderChange(values);
-	      }, 100);
+	    handleSlider: function handleSlider() {
+	      var sliderValues = this.$refs.slider.getValue();
+	      this.handleSliderChange(sliderValues);
 	    },
 	    handleChange: function handleChange(currentValue, props) {
-	      var _this2 = this;
+	      var _this = this;
 
 	      if (props === void 0) {
 	        props = this.$props;
 	      }
 
 	      var performUpdate = function performUpdate() {
-	        _this2.currentValue = currentValue;
+	        _this.currentValue = currentValue;
 
-	        _this2.updateQueryHandler([currentValue[0], currentValue[1]], props);
+	        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
 
-	        _this2.$emit('valueChange', {
+	        _this.$emit('valueChange', {
 	          start: currentValue[0],
 	          end: currentValue[1]
 	        });
 
-	        _this2.$emit('value-change', {
+	        _this.$emit('value-change', {
 	          start: currentValue[0],
 	          end: currentValue[1]
 	        });
 	      };
 
-	      checkValueChange$8(props.componentId, {
+	      checkValueChange$9(props.componentId, {
 	        start: currentValue[0],
 	        end: currentValue[1]
 	      }, props.beforeValueChange, performUpdate);
@@ -25252,7 +26516,7 @@
 	          currentEnd = value[1]; // check if the slider is at its initial position
 
 	      var isInitialValue = currentStart === start && currentEnd === end;
-	      this.setQueryOptions(props.componentId, customQueryOptions);
+	      this.setQueryOptions(props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: props.componentId,
 	        query: query,
@@ -25269,12 +26533,12 @@
 	      this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$d(newVal, oldVal)) {
+	      if (!isEqual$e(newVal, oldVal)) {
 	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$d(this.$data.currentValue, newVal)) {
+	      if (!isEqual$e(this.$data.currentValue, newVal)) {
 	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	        this.$emit('change', newVal);
 	      }
@@ -25320,9 +26584,9 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$d(this.$props.innerClass, 'title')
+	      "class": getClassName$e(this.$props.innerClass, 'title')
 	    }, [this.$props.title]), this.$props.range ? h(vueNoSsr_common, [h(Slider, {
-	      "class": getClassName$d(this.$props.innerClass, 'slider')
+	      "class": getClassName$e(this.$props.innerClass, 'slider')
 	    }, [h("vue-slider-component", {
 	      "ref": "slider",
 	      "attrs": {
@@ -25331,18 +26595,19 @@
 	        "max": this.$props.range.end,
 	        "dotSize": 20,
 	        "height": 4,
-	        "enable-cross": false
+	        "enable-cross": false,
+	        "tooltip": "always"
 	      },
-	      "props": _extends({}, this.$props.sliderOptions),
-	      "on": _extends({}, {
-	        input: this.handleSlider
-	      })
+	      "on": {
+	        "drag-end": this.handleSlider
+	      },
+	      "props": _extends({}, this.$props.sliderOptions)
 	    }), this.$props.rangeLabels && h("div", {
 	      "class": "label-container"
 	    }, [h("label", {
-	      "class": getClassName$d(this.$props.innerClass, 'label') || 'range-label-left'
+	      "class": getClassName$e(this.$props.innerClass, 'label') || 'range-label-left'
 	    }, [this.$props.rangeLabels.start]), h("label", {
-	      "class": getClassName$d(this.$props.innerClass, 'label') || 'range-label-right'
+	      "class": getClassName$e(this.$props.innerClass, 'label') || 'range-label-right'
 	    }, [this.$props.rangeLabels.end])])])]) : null]);
 	  }
 	};
@@ -25388,7 +26653,7 @@
 	  return [];
 	};
 
-	var mapStateToProps$d = function mapStateToProps(state, props) {
+	var mapStateToProps$e = function mapStateToProps(state, props) {
 	  return {
 	    options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
 	    : [],
@@ -25399,11 +26664,11 @@
 	};
 
 	var mapDispatchtoProps$b = {
-	  updateQuery: updateQuery$a,
+	  updateQuery: updateQuery$b,
 	  setQueryOptions: setQueryOptions$a,
-	  setCustomQuery: setCustomQuery$9
+	  setCustomQuery: setCustomQuery$a
 	};
-	var RangeConnected$2 = ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$b)(RangeSlider), {
+	var RangeConnected$2 = ComponentWrapper$1(connect(mapStateToProps$e, mapDispatchtoProps$b)(RangeSlider), {
 	  componentType: constants_1$1.rangeSlider
 	});
 
@@ -25417,16 +26682,16 @@
 	var addComponent$1 = lib_5.addComponent,
 	    removeComponent$1 = lib_5.removeComponent,
 	    watchComponent$1 = lib_5.watchComponent,
-	    updateQuery$b = lib_5.updateQuery,
+	    updateQuery$c = lib_5.updateQuery,
 	    setQueryListener$1 = lib_5.setQueryListener,
 	    setQueryOptions$b = lib_5.setQueryOptions,
 	    setComponentProps$1 = lib_5.setComponentProps,
-	    setCustomQuery$a = lib_5.setCustomQuery,
+	    setCustomQuery$b = lib_5.setCustomQuery,
 	    updateComponentProps$2 = lib_5.updateComponentProps;
-	var checkValueChange$9 = lib_8.checkValueChange,
-	    getClassName$e = lib_8.getClassName,
+	var checkValueChange$a = lib_8.checkValueChange,
+	    getClassName$f = lib_8.getClassName,
 	    getOptionsFromQuery$b = lib_8.getOptionsFromQuery,
-	    isEqual$e = lib_8.isEqual,
+	    isEqual$f = lib_8.isEqual,
 	    checkSomePropChange$1 = lib_8.checkSomePropChange;
 	var DynamicRangeSlider = {
 	  name: 'DynamicRangeSlider',
@@ -25450,7 +26715,8 @@
 	    URLParams: VueTypes.bool.def(false),
 	    sliderOptions: VueTypes.object.def({}),
 	    nestedField: types.string,
-	    index: VueTypes.string
+	    index: VueTypes.string,
+	    value: types.range
 	  },
 	  data: function data() {
 	    this.internalRangeComponent = this.$props.componentId + "__range__internal";
@@ -25496,6 +26762,8 @@
 	      components = _this$$$store$getStat.components;
 	    }
 
+	    var value = this.$props.value;
+
 	    if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
 	      this.addComponent(this.componentId);
 	      this.addComponent(this.internalRangeComponent);
@@ -25504,6 +26772,8 @@
 	        this.handleChange(this.selectedValue);
 	      } else if (this.selectedValue) {
 	        this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
+	      } else if (value) {
+	        this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
 	      } // get range before executing other queries
 
 
@@ -25522,6 +26792,13 @@
 	    }
 	  },
 	  methods: {
+	    isControlled: function isControlled() {
+	      if (this.$props.value && this.$listeners) {
+	        return true;
+	      }
+
+	      return false;
+	    },
 	    setDefaultValue: function setDefaultValue(_ref) {
 	      var start = _ref.start,
 	          end = _ref.end;
@@ -25532,6 +26809,8 @@
 	            defaultEnd = _this$$props$defaultV.end;
 
 	        this.handleChange([defaultStart, defaultEnd]);
+	      } else if (this.isControlled()) {
+	        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
 	      } else {
 	        this.currentValue = [start, end];
 	      }
@@ -25579,8 +26858,18 @@
 	        aggs: aggs
 	      });
 	    },
-	    handleSlider: function handleSlider(values) {
-	      this.handleChange(values.currentValue);
+	    handleSlider: function handleSlider() {
+	      var sliderValues = this.$refs.slider.getValue();
+	      var value = this.$props.value;
+
+	      if (value === undefined) {
+	        this.handleChange(sliderValues);
+	      } else {
+	        this.$emit('change', {
+	          start: sliderValues[0],
+	          end: sliderValues[1]
+	        });
+	      }
 	    },
 	    handleChange: function handleChange(currentValue) {
 	      var _this2 = this;
@@ -25604,7 +26893,7 @@
 	        });
 	      };
 
-	      checkValueChange$9(this.$props.componentId, {
+	      checkValueChange$a(this.$props.componentId, {
 	        start: normalizedValue[0],
 	        end: normalizedValue[1]
 	      }, this.$props.beforeValueChange, performUpdate);
@@ -25632,7 +26921,7 @@
 	          currentEnd = value[1]; // check if the slider is at its initial position
 
 	      var isInitialValue = currentStart === start && currentEnd === end;
-	      this.setQueryOptions(this.$props.componentId, customQueryOptions);
+	      this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
 	      this.updateQuery({
 	        componentId: this.$props.componentId,
 	        query: query,
@@ -25668,15 +26957,16 @@
 	      this.setReact();
 	    },
 	    selectedValue: function selectedValue(newValue) {
-	      if (isEqual$e(newValue, this.currentValue)) return;
+	      if (isEqual$f(newValue, this.currentValue)) return;
 	      var value = newValue || {
 	        start: this.range.start,
 	        end: this.range.end
 	      };
+	      this.$emit('change', value);
 	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
 	    },
 	    range: function range(newValue, oldValue) {
-	      if (isEqual$e(newValue, oldValue) || !this.currentValue) return;
+	      if (isEqual$f(newValue, oldValue) || !this.currentValue) return;
 
 	      var _ref4 = this.currentValue || [],
 	          currentStart = _ref4[0],
@@ -25694,6 +26984,11 @@
 	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
 	        this.updateQueryHandler(this.$data.currentValue);
 	      }
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$f(newVal, oldVal)) {
+	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+	      }
 	    }
 	  },
 	  render: function render() {
@@ -25709,17 +27004,19 @@
 	    return h(Container, {
 	      "class": this.$props.className
 	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$e(this.$props.innerClass, 'title')
+	      "class": getClassName$f(this.$props.innerClass, 'title')
 	    }, [this.$props.title]), h(vueNoSsr_common, [h(Slider, {
-	      "class": getClassName$e(this.$props.innerClass, 'slider')
+	      "class": getClassName$f(this.$props.innerClass, 'slider')
 	    }, [h("vue-slider-component", {
+	      "ref": "slider",
 	      "attrs": {
-	        "value": [Math.max(start, this.currentValue[0]), Math.min(end, this.currentValue[1])],
-	        "min": Math.min(start, this.currentValue[0]),
-	        "max": Math.max(end, this.currentValue[1]),
+	        "value": [Math.floor(Math.max(start, this.currentValue[0])), Math.ceil(Math.min(end, this.currentValue[1]))],
+	        "min": Math.floor(Math.min(start, this.currentValue[0])),
+	        "max": Math.ceil(Math.max(end, this.currentValue[1])),
 	        "dotSize": 20,
 	        "height": 4,
-	        "enable-cross": false
+	        "enable-cross": false,
+	        "tooltip": "always"
 	      },
 	      "on": {
 	        "drag-end": this.handleSlider
@@ -25728,9 +27025,9 @@
 	    }), this.labels ? h("div", {
 	      "class": "label-container"
 	    }, [h("label", {
-	      "class": getClassName$e(this.$props.innerClass, 'label') || 'range-label-left'
+	      "class": getClassName$f(this.$props.innerClass, 'label') || 'range-label-left'
 	    }, [this.labels.start]), h("label", {
-	      "class": getClassName$e(this.$props.innerClass, 'label') || 'range-label-right'
+	      "class": getClassName$f(this.$props.innerClass, 'label') || 'range-label-right'
 	    }, [this.labels.end])]) : null])])]);
 	  }
 	};
@@ -25765,10 +27062,14 @@
 	};
 
 	DynamicRangeSlider.parseValue = function (value) {
-	  return [value.start, value.end];
+	  if (value) {
+	    return Array.isArray(value) ? value : [value.start, value.end];
+	  }
+
+	  return [];
 	};
 
-	var mapStateToProps$e = function mapStateToProps(state, props) {
+	var mapStateToProps$f = function mapStateToProps(state, props) {
 	  var componentId = state.aggregations[props.componentId];
 	  var internalRange = state.aggregations[props.componentId + "__range__internal"];
 	  var options = componentId && componentId[props.dataField];
@@ -25800,15 +27101,15 @@
 	var mapDispatchtoProps$c = {
 	  addComponent: addComponent$1,
 	  removeComponent: removeComponent$1,
-	  updateQuery: updateQuery$b,
+	  updateQuery: updateQuery$c,
 	  watchComponent: watchComponent$1,
 	  setQueryListener: setQueryListener$1,
 	  setQueryOptions: setQueryOptions$b,
 	  setComponentProps: setComponentProps$1,
-	  setCustomQuery: setCustomQuery$a,
+	  setCustomQuery: setCustomQuery$b,
 	  updateComponentProps: updateComponentProps$2
 	};
-	var RangeConnected$3 = connect(mapStateToProps$e, mapDispatchtoProps$c)(DynamicRangeSlider);
+	var RangeConnected$3 = connect(mapStateToProps$f, mapDispatchtoProps$c)(DynamicRangeSlider);
 
 	DynamicRangeSlider.install = function (Vue) {
 	  Vue.component(DynamicRangeSlider.name, RangeConnected$3);
@@ -25821,6 +27122,10 @@
 	var defaultKeys = ['hits', 'value', 'aggregations', 'error'];
 
 	var filterProps = function filterProps(props) {
+	  if (props === void 0) {
+	    props = {};
+	  }
+
 	  return _extends({}, props, {
 	    props: props.componentProps
 	  });
@@ -25840,7 +27145,7 @@
 	    return _ref = {}, _ref[componentIds] = state[componentIds], _ref;
 	  }
 
-	  if (componentIds instanceof Array) {
+	  if (Array.isArray(componentIds)) {
 	    var filteredState = {};
 	    componentIds.forEach(function (componentId) {
 	      filteredState[componentId] = state[componentId];
@@ -25879,7 +27184,7 @@
 	    };
 	    return this.__state;
 	  },
-	  mounted: function mounted() {
+	  created: function created() {
 	    this.searchState = filterByKeys(getSearchState(filterProps(this.searchStateProps)), this.includeKeys);
 	  },
 	  computed: {
@@ -25966,7 +27271,7 @@
 	  }
 	};
 
-	var mapStateToProps$f = function mapStateToProps(state, props) {
+	var mapStateToProps$g = function mapStateToProps(state, props) {
 	  return {
 	    selectedValues: filterByComponentIds(state.selectedValues, props),
 	    queryLog: filterByComponentIds(state.queryLog, props),
@@ -25983,7 +27288,7 @@
 	  };
 	};
 
-	var StateProviderConnected = connect(mapStateToProps$f, {})(StateProvider);
+	var StateProviderConnected = connect(mapStateToProps$g, {})(StateProvider);
 
 	StateProvider.install = function (Vue) {
 	  Vue.component(StateProvider.name, StateProviderConnected);
@@ -26204,7 +27509,7 @@
 	        var react = component.react;
 
 	        if (isInternalComponentPresent || isResultComponent) {
-	          react = helper_21(react, internalComponent);
+	          react = helper_22(react, internalComponent);
 	        }
 
 	        dependencyTree = dependencyTreeReducer(dependencyTree, {
@@ -26250,7 +27555,7 @@
 
 	    componentCollection.forEach(function (component) {
 	      // eslint-disable-next-line
-	      var _buildQuery = helper_20(component.componentId, dependencyTree, queryList, queryOptions),
+	      var _buildQuery = helper_21(component.componentId, dependencyTree, queryList, queryOptions),
 	          queryObj = _buildQuery.queryObj,
 	          options = _buildQuery.options;
 
@@ -26459,21 +27764,21 @@
 	  });
 	}
 
-	var version = "1.25.0";
+	var version = "1.27.0-gamma.2";
 
-	var _templateObject$n, _templateObject2$a;
+	var _templateObject$o, _templateObject2$a;
 
 	var alert = function alert(_ref) {
 	  var theme = _ref.theme;
-	  return css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
+	  return css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
 	};
 
 	var Content = index$1('div')(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
 	  return props.alert && alert;
 	});
 
-	var getClassName$f = lib_8.getClassName,
-	    isEqual$f = lib_8.isEqual;
+	var getClassName$g = lib_8.getClassName,
+	    isEqual$g = lib_8.isEqual;
 	var RangeInput = {
 	  name: 'RangeInput',
 	  components: {
@@ -26555,7 +27860,7 @@
 	    handleChange: function handleChange(value, event) {
 	      var currentValue = value;
 
-	      if (this.shouldUpdate(value) && !isEqual$f(value, this.currentValue)) {
+	      if (this.shouldUpdate(value) && !isEqual$g(value, this.currentValue)) {
 	        switch (event) {
 	          case 'change':
 	            if (!value) {
@@ -26581,7 +27886,7 @@
 	      }
 	    },
 	    handleOnChange: function handleOnChange(value) {
-	      this.handleChange(value, 'change');
+	      this.handleChange(value || this.$props.range, 'change');
 	    },
 	    handleValueChange: function handleValueChange(value) {
 	      this.handleChange(value, 'value-change');
@@ -26625,7 +27930,7 @@
 	      }
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
+	      if (!isEqual$g(newVal, oldVal)) {
 	        if (this.isControlled()) {
 	          this.handleChange(newVal, 'change');
 	        }
@@ -26636,6 +27941,10 @@
 	    if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
 	      this.handleChange(this.$props.defaultValue);
 	    }
+
+	    if (this.isControlled()) {
+	      this.handleChange(this.$props.value, 'change');
+	    }
 	  },
 	  render: function render() {
 	    var h = arguments[0];
@@ -26692,7 +28001,7 @@
 	        "value-change": this.handleValueChange
 	      }
 	    }), h(Flex, {
-	      "class": getClassName$f(innerClass, 'input-container') || ''
+	      "class": getClassName$g(innerClass, 'input-container') || ''
 	    }, [h(Flex, {
 	      "attrs": {
 	        "direction": "column",
@@ -26712,7 +28021,7 @@
 	      "on": {
 	        "change": this.handleInputChange
 	      },
-	      "class": getClassName$f(innerClass, 'input') || '',
+	      "class": getClassName$g(innerClass, 'input') || '',
 	      "domProps": _extends({}, {
 	        value: this.currentValue.start
 	      })
@@ -26745,7 +28054,7 @@
 	      "on": {
 	        "change": this.handleInputChange
 	      },
-	      "class": getClassName$f(innerClass, 'input') || '',
+	      "class": getClassName$g(innerClass, 'input') || '',
 	      "domProps": _extends({}, {
 	        value: this.currentValue.end
 	      })
@@ -26757,13 +28066,13 @@
 	  }
 	};
 
-	var mapStateToProps$g = function mapStateToProps(state) {
+	var mapStateToProps$h = function mapStateToProps(state) {
 	  return {
 	    themePreset: state.config.themePreset
 	  };
 	};
 
-	var RangeConnected$4 = ComponentWrapper$1(connect(mapStateToProps$g, {})(RangeInput), {
+	var RangeConnected$4 = ComponentWrapper$1(connect(mapStateToProps$h, {})(RangeInput), {
 	  componentType: constants_1$1.rangeInput
 	});
 
@@ -26774,7 +28083,7 @@
 
 	RangeInput.componentType = constants_1$1.rangeInput;
 
-	var components = [ReactiveList, ResultCard, ResultList, ReactiveBase, DataSearch, SingleList, MultiList, SingleRange, MultiRange, RangeSlider, DynamicRangeSlider, ReactiveComponent, SelectedFilters, ToggleButton, SingleDropdownList, MultiDropdownList, StateProvider, RangeInput];
+	var components = [ReactiveList, ResultCard, ResultList, ReactiveBase, DataSearch, SearchBox, SingleList, MultiList, SingleRange, MultiRange, RangeSlider, DynamicRangeSlider, ReactiveComponent, SelectedFilters, ToggleButton, SingleDropdownList, MultiDropdownList, StateProvider, RangeInput];
 	function install (Vue) {
 	  components.map(function (component) {
 	    Vue.use(component);
@@ -26804,6 +28113,7 @@
 	exports.ReactiveList = ReactiveList;
 	exports.ResultCard = ResultCard;
 	exports.ResultList = ResultList;
+	exports.SearchBox = SearchBox;
 	exports.SelectedFilters = SelectedFilters;
 	exports.SingleDropdownList = SingleDropdownList;
 	exports.SingleList = SingleList;