@appbaseio/reactivesearch-vue 1.24.3 → 1.27.0

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

@@ -36,14 +36,9 @@
 
 	  if (Object.getOwnPropertySymbols) {
 	    var symbols = Object.getOwnPropertySymbols(object);
-
-	    if (enumerableOnly) {
-	      symbols = symbols.filter(function (sym) {
-	        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-	      });
-	    }
-
-	    keys.push.apply(keys, symbols);
+	    enumerableOnly && (symbols = symbols.filter(function (sym) {
+	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+	    })), keys.push.apply(keys, symbols);
 	  }
 
 	  return keys;
@@ -51,19 +46,12 @@
 
 	function _objectSpread2(target) {
 	  for (var i = 1; i < arguments.length; i++) {
-	    var source = arguments[i] != null ? arguments[i] : {};
-
-	    if (i % 2) {
-	      ownKeys(Object(source), true).forEach(function (key) {
-	        _defineProperty(target, key, source[key]);
-	      });
-	    } else if (Object.getOwnPropertyDescriptors) {
-	      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-	    } else {
-	      ownKeys(Object(source)).forEach(function (key) {
-	        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-	      });
-	    }
+	    var source = null != arguments[i] ? arguments[i] : {};
+	    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+	      _defineProperty(target, key, source[key]);
+	    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+	      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+	    });
 	  }
 
 	  return target;
@@ -751,23 +739,36 @@
 		createStore: createStore
 	});
 
+	/** A function that accepts a potential "extra argument" value to be injected later,
+	 * and returns an instance of the thunk middleware that uses that value
+	 */
 	function createThunkMiddleware(extraArgument) {
-	  return function (_ref) {
+	  // Standard Redux middleware definition pattern:
+	  // See: https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware
+	  var middleware = function middleware(_ref) {
 	    var dispatch = _ref.dispatch,
 	        getState = _ref.getState;
 	    return function (next) {
 	      return function (action) {
+	        // The thunk middleware looks for any functions that were passed to `store.dispatch`.
+	        // If this "action" is really a function, call it and return the result.
 	        if (typeof action === 'function') {
+	          // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
 	          return action(dispatch, getState, extraArgument);
-	        }
+	        } // Otherwise, pass the action down the middleware chain as usual
+
 
 	        return next(action);
 	      };
 	    };
 	  };
+
+	  return middleware;
 	}
 
-	var thunk = createThunkMiddleware();
+	var thunk = createThunkMiddleware(); // Attach the factory function so users can create a customized version
+	// with whatever "extra arg" they want to inject into their thunks
+
 	thunk.withExtraArgument = createThunkMiddleware;
 
 	var constants = createCommonjsModule(function (module, exports) {
@@ -1193,6 +1194,7 @@
 	    reactiveList: 'REACTIVELIST',
 	    dataSearch: 'DATASEARCH',
 	    categorySearch: 'CATEGORYSEARCH',
+	    searchBox: 'SUGGESTION',
 	    singleList: 'SINGLELIST',
 	    multiList: 'MULTILIST',
 	    singleDataList: 'SINGLEDATALIST',
@@ -1221,9 +1223,10 @@
 	    search: 'search',
 	    term: 'term',
 	    range: 'range',
-	    geo: 'geo'
+	    geo: 'geo',
+	    suggestion: 'suggestion'
 	  };
-	  var validProps = exports.validProps = ['componentType', 'aggregationField', 'aggregationSize', 'distinctField', 'distinctFieldConfig', 'index', 'dataField', 'includeFields', 'excludeFields', 'size', 'from', 'sortBy', 'sortOptions', 'pagination', 'autoFocus', 'autosuggest', 'debounce', 'defaultValue', 'defaultSuggestions', 'fieldWeights', 'filterLabel', 'fuzziness', 'highlight', 'highlightField', 'nestedField', 'placeholder', 'queryFormat', 'searchOperators', 'enableSynonyms', 'enableQuerySuggestions', 'enablePopularSuggestions', 'queryString', 'categoryField', 'strictSelection', 'selectAllLabel', 'showCheckbox', 'showFilter', 'showSearch', 'showCount', 'showLoadMore', 'loadMoreLabel', 'showMissing', 'missingLabel', 'data', 'showRadio', 'multiSelect', 'includeNullValues', 'interval', 'showHistogram', 'snap', 'stepValue', 'range', 'showSlider', 'parseDate', 'unit'];
+	  var validProps = exports.validProps = ['componentType', 'aggregationField', 'aggregationSize', 'distinctField', 'distinctFieldConfig', 'index', 'dataField', 'includeFields', 'excludeFields', 'size', 'from', 'sortBy', 'sortOptions', 'pagination', 'autoFocus', 'autosuggest', 'debounce', 'defaultValue', 'defaultSuggestions', 'fieldWeights', 'filterLabel', 'fuzziness', 'highlight', 'highlightField', 'nestedField', 'placeholder', 'queryFormat', 'searchOperators', 'enableSynonyms', 'enableQuerySuggestions', 'enablePopularSuggestions', 'queryString', 'categoryField', 'strictSelection', 'selectAllLabel', 'showCheckbox', 'showFilter', 'showSearch', 'showCount', 'showLoadMore', 'loadMoreLabel', 'showMissing', 'missingLabel', 'data', 'showRadio', 'multiSelect', 'includeNullValues', 'interval', 'showHistogram', 'snap', 'stepValue', 'range', 'showSlider', 'parseDate', 'calendarInterval', 'unit', 'enablePopularSuggestions', 'popularSuggestionsConfig', 'enableRecentSuggestions', 'recentSuggestionsConfig', 'enablePredictiveSuggestions', 'applyStopwords', 'customStopwords'];
 	  var CLEAR_ALL = exports.CLEAR_ALL = {
 	    NEVER: 'never',
 	    ALWAYS: 'always',
@@ -1348,7 +1351,6 @@
 	  }
 
 	  var defaultAnalyticsConfig = exports.defaultAnalyticsConfig = {
-	    searchStateHeader: false,
 	    emptyQuery: true,
 	    suggestionAnalytics: true,
 	    userId: null,
@@ -1726,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:
 	        {
@@ -2749,7 +2763,12 @@
 	      var aggsResponse = Object.values(action.aggregations) && Object.values(action.aggregations)[0];
 	      var fieldName = Object.keys(action.aggregations)[0];
 	      if (!aggsResponse) return state;
-	      var buckets = aggsResponse.buckets || [];
+	      var buckets = [];
+
+	      if (aggsResponse.buckets && Array.isArray(aggsResponse.buckets)) {
+	        buckets = aggsResponse.buckets;
+	      }
+
 	      var parsedAggs = buckets.map(function (bucket) {
 	        var doc_count = bucket.doc_count,
 	            key = bucket.key,
@@ -2765,7 +2784,7 @@
 
 	        return _extends({
 	          _doc_count: doc_count,
-	          _key: key[fieldName],
+	          _key: typeof key === 'string' ? key : key[fieldName],
 	          top_hits: hitsData
 	        }, flatData, _source);
 	      });
@@ -2775,7 +2794,7 @@
 	    return state;
 	  }
 	});
-	unwrapExports(compositeAggsReducer_1);
+	var compositeAggsReducer = unwrapExports(compositeAggsReducer_1);
 
 	var appliedSettingsReducer_1 = createCommonjsModule(function (module, exports) {
 	  Object.defineProperty(exports, "__esModule", {
@@ -4557,6 +4576,8 @@
 	    return target;
 	  };
 
+	  exports.replaceDiacritics = replaceDiacritics;
+
 	  var _diacritics2 = _interopRequireDefault(diacritics_1);
 
 	  function _interopRequireDefault(obj) {
@@ -4834,12 +4855,13 @@
 	  exports["default"] = getSuggestions;
 	});
 	unwrapExports(suggestions);
+	var suggestions_1 = suggestions.replaceDiacritics;
 
 	var helper = createCommonjsModule(function (module, exports) {
 	  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.getCalendarIntervalErrorMessage = exports.queryFormatMillisecondsMap = 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++) {
@@ -4867,6 +4889,7 @@
 	  exports.extractFieldsFromSource = extractFieldsFromSource;
 	  exports.normalizeDataField = normalizeDataField;
 	  exports.handleOnSuggestions = handleOnSuggestions;
+	  exports.isValidDateRangeQueryFormat = isValidDateRangeQueryFormat;
 
 	  var _dateFormats2 = _interopRequireDefault(dateFormats_1);
 
@@ -5255,7 +5278,7 @@
 	      case 'epoch_millis':
 	        return date.getTime();
 
-	      case 'epoch_seconds':
+	      case 'epoch_second':
 	        return Math.floor(date.getTime() / 1000);
 
 	      default:
@@ -5648,36 +5671,89 @@
 	    });
 	    return withClickIds(finalSuggestions);
 	  };
+
+	  function isValidDateRangeQueryFormat(queryFormat) {
+	    return Object.keys(_dateFormats2["default"]).includes(queryFormat);
+	  }
+
+	  var suggestionTypes = exports.suggestionTypes = {
+	    Popular: 'popular',
+	    Index: 'index',
+	    Recent: 'recent',
+	    Promoted: 'promoted'
+	  };
+	  var queryFormatMillisecondsMap = exports.queryFormatMillisecondsMap = {
+	    minute: 60000,
+	    hour: 3600000,
+	    day: 86400000,
+	    week: 604800000,
+	    month: 2629746000,
+	    quarter: 7889238000,
+	    year: 31556952000
+	  };
+
+	  var getCalendarIntervalErrorMessage = exports.getCalendarIntervalErrorMessage = function getCalendarIntervalErrorMessage(totalRange) {
+	    var calendarInterval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'minute';
+	    var queryFormatMillisecondsMapKeys = Object.keys(queryFormatMillisecondsMap);
+	    var indexOfCurrentCalendarInterval = queryFormatMillisecondsMapKeys.indexOf(calendarInterval);
+
+	    if (indexOfCurrentCalendarInterval === -1) {
+	      console.error('Invalid calendarInterval Passed');
+	    }
+
+	    if (calendarInterval === 'year') {
+	      return 'Try using a shorter range of values.';
+	    }
+
+	    for (var index = indexOfCurrentCalendarInterval + 1; index < queryFormatMillisecondsMapKeys.length; index += 1) {
+	      if (totalRange / Object.values(queryFormatMillisecondsMap)[index] <= 100) {
+	        var calendarIntervalKey = queryFormatMillisecondsMapKeys[index];
+	        return {
+	          errorMessage: 'Please pass calendarInterval prop with value greater than or equal to a `' + calendarIntervalKey + '` for a meaningful resolution of histogram.',
+	          calculatedCalendarInterval: calendarIntervalKey
+	        };
+	      }
+	    }
+
+	    return {
+	      errorMessage: 'Try using a shorter range of values.',
+	      calculatedCalendarInterval: 'year'
+	    };
+	  };
 	});
 	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_1 = helper.getCalendarIntervalErrorMessage;
+	var helper_2 = helper.queryFormatMillisecondsMap;
+	var helper_3 = helper.suggestionTypes;
+	var helper_4 = helper.getTopSuggestions;
+	var helper_5 = helper.withClickIds;
+	var helper_6 = helper.getCompositeAggsQuery;
+	var helper_7 = helper.getAggsQuery;
+	var helper_8 = helper.extractQueryFromDefaultQuery;
+	var helper_9 = helper.updateInternalQuery;
+	var helper_10 = helper.getSearchState;
+	var helper_11 = helper.getOptionsFromQuery;
+	var helper_12 = helper.parseHits;
+	var helper_13 = helper.handleA11yAction;
+	var helper_14 = helper.getInnerKey;
+	var helper_15 = helper.getClassName;
+	var helper_16 = helper.checkSomePropChange;
+	var helper_17 = helper.checkPropChange;
+	var helper_18 = helper.updateDefaultQuery;
+	var helper_19 = helper.updateCustomQuery;
+	var helper_20 = helper.isEqual;
+	var helper_21 = helper.debounce;
+	var helper_22 = helper.getQueryOptions;
+	var helper_23 = helper.buildQuery;
+	var helper_24 = helper.pushToAndClause;
+	var helper_25 = helper.checkValueChange;
+	var helper_26 = helper.getAggsOrder;
+	var helper_27 = helper.formatDate;
+	var helper_28 = helper.getResultStats;
+	var helper_29 = helper.extractFieldsFromSource;
+	var helper_30 = helper.normalizeDataField;
+	var helper_31 = helper.handleOnSuggestions;
+	var helper_32 = helper.isValidDateRangeQueryFormat;
 
 	var value = createCommonjsModule(function (module, exports) {
 	  Object.defineProperty(exports, "__esModule", {
@@ -5799,8 +5875,10 @@
 	  }
 
 	  function clearValues() {
+	    var resetValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	    return {
-	      type: constants.CLEAR_VALUES
+	      type: constants.CLEAR_VALUES,
+	      resetValues: resetValues
 	    };
 	  }
 	});
@@ -6036,6 +6114,7 @@
 	  exports.updateCompositeAggs = updateCompositeAggs;
 	  exports.updateHits = updateHits;
 	  exports.saveQueryToHits = saveQueryToHits;
+	  exports.mockDataForTesting = mockDataForTesting;
 
 	  function updateAggs(component, aggregations) {
 	    var append = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -6077,12 +6156,25 @@
 	      query: query
 	    };
 	  }
+
+	  function mockDataForTesting(component, data) {
+	    return function (dispatch) {
+	      if (data.hasOwnProperty('aggregations')) {
+	        dispatch(updateAggs(component, data.aggregations));
+	      }
+
+	      if (data.hasOwnProperty('hits')) {
+	        dispatch(updateHits(component, data, data.time || undefined));
+	      }
+	    };
+	  }
 	});
 	unwrapExports(hits);
 	var hits_1 = hits.updateAggs;
 	var hits_2 = hits.updateCompositeAggs;
 	var hits_3 = hits.updateHits;
 	var hits_4 = hits.saveQueryToHits;
+	var hits_5 = hits.mockDataForTesting;
 
 	var xdate = createCommonjsModule(function (module) {
 	  /**
@@ -6910,6 +7002,8 @@
 
 	  var _xdate2 = _interopRequireDefault(xdate);
 
+	  var _dateFormats2 = _interopRequireDefault(dateFormats_1);
+
 	  function _interopRequireDefault(obj) {
 	    return obj && obj.__esModule ? obj : {
 	      "default": obj
@@ -6943,10 +7037,10 @@
 	    return obj;
 	  }
 
-	  var componentToTypeMap = exports.componentToTypeMap = (_componentToTypeMap = {}, _defineProperty(_componentToTypeMap, constants$1.componentTypes.reactiveList, constants$1.queryTypes.search), _defineProperty(_componentToTypeMap, constants$1.componentTypes.dataSearch, constants$1.queryTypes.search), _defineProperty(_componentToTypeMap, constants$1.componentTypes.categorySearch, constants$1.queryTypes.search), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleDataList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleDropdownList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiDataList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiDropdownList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.tagCloud, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.toggleButton, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.numberBox, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.datePicker, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.dateRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.dynamicRangeSlider, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleDropdownRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiDropdownRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.rangeSlider, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.ratingsFilter, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.rangeInput, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.geoDistanceDropdown, constants$1.queryTypes.geo), _defineProperty(_componentToTypeMap, constants$1.componentTypes.geoDistanceSlider, constants$1.queryTypes.geo), _defineProperty(_componentToTypeMap, constants$1.componentTypes.reactiveMap, constants$1.queryTypes.geo), _componentToTypeMap);
+	  var componentToTypeMap = exports.componentToTypeMap = (_componentToTypeMap = {}, _defineProperty(_componentToTypeMap, constants$1.componentTypes.reactiveList, constants$1.queryTypes.search), _defineProperty(_componentToTypeMap, constants$1.componentTypes.dataSearch, constants$1.queryTypes.search), _defineProperty(_componentToTypeMap, constants$1.componentTypes.categorySearch, constants$1.queryTypes.search), _defineProperty(_componentToTypeMap, constants$1.componentTypes.searchBox, constants$1.queryTypes.suggestion), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleDataList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleDropdownList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiDataList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiDropdownList, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.tagCloud, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.toggleButton, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.numberBox, constants$1.queryTypes.term), _defineProperty(_componentToTypeMap, constants$1.componentTypes.datePicker, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.dateRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.dynamicRangeSlider, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleDropdownRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiDropdownRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.singleRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.multiRange, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.rangeSlider, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.ratingsFilter, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.rangeInput, constants$1.queryTypes.range), _defineProperty(_componentToTypeMap, constants$1.componentTypes.geoDistanceDropdown, constants$1.queryTypes.geo), _defineProperty(_componentToTypeMap, constants$1.componentTypes.geoDistanceSlider, constants$1.queryTypes.geo), _defineProperty(_componentToTypeMap, constants$1.componentTypes.reactiveMap, constants$1.queryTypes.geo), _componentToTypeMap);
 	  var multiRangeComponents = [constants$1.componentTypes.multiRange, constants$1.componentTypes.multiDropdownRange];
 	  var dateRangeComponents = [constants$1.componentTypes.dateRange, constants$1.componentTypes.datePicker];
-	  var searchComponents = [constants$1.componentTypes.categorySearch, constants$1.componentTypes.dataSearch];
+	  var searchComponents = [constants$1.componentTypes.categorySearch, constants$1.componentTypes.dataSearch, constants$1.componentTypes.searchBox];
 	  var listComponentsWithPagination = [constants$1.componentTypes.singleList, constants$1.componentTypes.multiList, constants$1.componentTypes.singleDropdownList, constants$1.componentTypes.multiDropdownList];
 
 	  var getNormalizedField = exports.getNormalizedField = function getNormalizedField(field) {
@@ -7002,7 +7096,7 @@
 	        return null;
 	      }
 
-	      return {
+	      return _extends({
 	        id: componentId,
 	        type: queryType,
 	        dataField: getNormalizedField(props.dataField),
@@ -7041,7 +7135,17 @@
 	        distinctField: props.distinctField,
 	        distinctFieldConfig: props.distinctFieldConfig,
 	        index: props.index
-	      };
+	      }, queryType === constants$1.queryTypes.suggestion ? {
+	        enablePopularSuggestions: props.enablePopularSuggestions,
+	        enableRecentSuggestions: props.enableRecentSuggestions,
+	        popularSuggestionsConfig: props.popularSuggestionsConfig,
+	        recentSuggestionsConfig: props.recentSuggestionsConfig,
+	        applyStopwords: props.applyStopwords,
+	        customStopwords: props.customStopwords,
+	        enablePredictiveSuggestions: props.enablePredictiveSuggestions
+	      } : {}, {
+	        calendarInterval: props.calendarInterval
+	      });
 	    }
 
 	    return null;
@@ -7071,6 +7175,7 @@
 	    var calcValues = store.selectedValues[component] || store.internalValues[component];
 	    var value = calcValues !== undefined && calcValues !== null ? calcValues.value : undefined;
 	    var queryFormat = componentProps.queryFormat;
+	    var calendarInterval = void 0;
 	    var interval = componentProps.interval;
 	    var type = componentToTypeMap[componentProps.componentType];
 	    var dataField = componentProps.dataField;
@@ -7139,6 +7244,24 @@
 	        aggregations = ['histogram'];
 	      }
 
+	      if (componentProps.componentType === constants$1.componentTypes.dynamicRangeSlider || componentProps.componentType === constants$1.componentTypes.rangeSlider) {
+	        calendarInterval = Object.keys(_dateFormats2["default"]).includes(queryFormat) ? componentProps.calendarInterval : undefined;
+
+	        if (value) {
+	          if ((0, helper.isValidDateRangeQueryFormat)(componentProps.queryFormat)) {
+	            value = {
+	              start: (0, helper.formatDate)(new _xdate2["default"](value.start), componentProps),
+	              end: (0, helper.formatDate)(new _xdate2["default"](value.end), componentProps)
+	            };
+	          } else {
+	            value = {
+	              start: parseFloat(value.start),
+	              end: parseFloat(value.end)
+	            };
+	          }
+	        }
+	      }
+
 	      if (dateRangeComponents.includes(componentProps.componentType)) {
 	        queryFormat = 'or';
 
@@ -7261,6 +7384,7 @@
 	    }
 
 	    return _extends({}, componentProps, {
+	      calendarInterval: calendarInterval,
 	      dataField: dataField,
 	      queryFormat: queryFormat,
 	      type: type,
@@ -7271,7 +7395,7 @@
 	      defaultQuery: store.defaultQueries ? store.defaultQueries[component] : undefined,
 	      customHighlight: store.customHighlightOptions ? store.customHighlightOptions[component] : undefined,
 	      categoryValue: store.internalValues[component] ? store.internalValues[component].category : undefined,
-	      value: value,
+	      value: componentProps.componentType === constants$1.componentTypes.searchBox ? value || undefined : value,
 	      pagination: pagination,
 	      from: from
 	    }, customOptions);
@@ -7307,7 +7431,8 @@
 	    var orderOfQueries = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
 	    var finalQuery = {};
 	    var react = flatReactProp(store.dependencyTree[componentID], componentID);
-	    react.forEach(function (component) {
+	    react.forEach(function (componentObject) {
+	      var component = componentObject;
 	      var customQuery = store.customQueries[component];
 
 	      if (!isInternalComponent(component)) {
@@ -7320,7 +7445,12 @@
 	            execute = true;
 	          }
 
-	          var dependentQuery = getRSQuery(component, extractPropsFromState(store, component), execute);
+	          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
+	          } : {}) : {})), execute);
 
 	          if (dependentQuery) {
 	            finalQuery[component] = dependentQuery;
@@ -8291,6 +8421,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) {
@@ -8299,20 +8443,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);
 	    });
@@ -8422,6 +8572,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;
@@ -8472,14 +8631,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;
 	        }
@@ -8495,14 +8646,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,
@@ -8699,7 +8865,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;
 	              }
 
@@ -12778,19 +12944,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({}),
@@ -13138,10 +13304,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) {
@@ -13948,9 +14120,20 @@
 	    }
 
 	    this.internalComponent = this.$props.componentId + "__internal";
-	    this.sortOptionIndex = this.defaultSortOption ? this.sortOptions.findIndex(function (s) {
-	      return s.label === _this.defaultSortOption;
-	    }) : 0;
+	    this.sortOptionIndex = 0;
+
+	    if (this.defaultSortOption && this.sortOptions && Array.isArray(this.sortOptions)) {
+	      this.sortOptionIndex = this.sortOptions.findIndex(function (s) {
+	        return s.label === _this.defaultSortOption;
+	      });
+	    }
+
+	    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);
@@ -13960,7 +14143,7 @@
 	  },
 	  props: {
 	    currentPage: VueTypes.number.def(0),
-	    includeFields: types.includeFields.def(['*']),
+	    includeFields: types.includeFields,
 	    // component props
 	    className: types.string,
 	    componentId: types.stringRequired,
@@ -13969,7 +14152,7 @@
 	    aggregationSize: VueTypes.number,
 	    defaultQuery: types.func,
 	    defaultSortOption: types.string,
-	    excludeFields: types.excludeFields.def([]),
+	    excludeFields: types.excludeFields,
 	    innerClass: types.style,
 	    listClass: VueTypes.string.def(''),
 	    loader: types.title,
@@ -13981,7 +14164,7 @@
 	    pages: VueTypes.number.def(5),
 	    pagination: VueTypes.bool.def(false),
 	    infiniteScroll: VueTypes.bool.def(true),
-	    paginationAt: types.paginationAt.def('bottom'),
+	    paginationAt: VueTypes.oneOf(['top', 'bottom', 'both']).def('bottom'),
 	    react: types.react,
 	    scrollOnChange: VueTypes.bool.def(true),
 	    showResultStats: VueTypes.bool.def(true),
@@ -14041,7 +14224,7 @@
 	        filteredResults = [].concat(parsedPromotedResults, filteredResults);
 	      }
 
-	      return helper_2(filteredResults);
+	      return helper_5(filteredResults);
 	    }
 	  },
 	  watch: {
@@ -14182,11 +14365,11 @@
 	    var options = getQueryOptions(this.$props);
 	    options.from = this.$data.from;
 
-	    if (this.$props.sortOptions) {
+	    if (this.sortOptions && this.sortOptions[this.sortOptionIndex]) {
 	      var _ref2;
 
-	      var sortField = this.$props.sortOptions[this.sortOptionIndex].dataField;
-	      var sortBy = this.$props.sortOptions[this.sortOptionIndex].sortBy;
+	      var sortField = this.sortOptions[this.sortOptionIndex].dataField;
+	      var sortBy = this.sortOptions[this.sortOptionIndex].sortBy;
 	      options.sort = [(_ref2 = {}, _ref2[sortField] = {
 	        order: sortBy
 	      }, _ref2)]; // To handle sort options for RS API
@@ -14256,10 +14439,10 @@
 	      "class": this.$props.className
 	    }, [this.isLoading && this.shouldRenderPagination && this.showInfiniteScroll && (this.$scopedSlots.loader || this.$props.loader), this.renderErrorComponent(), h(Flex, {
 	      "attrs": {
-	        "labelPosition": this.$props.sortOptions ? 'right' : 'left'
+	        "labelPosition": this.sortOptions ? 'right' : 'left'
 	      },
 	      "class": getClassName$1(this.$props.innerClass, 'resultsInfo')
-	    }, [this.$props.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,
@@ -14330,15 +14513,18 @@
 	      var options = getQueryOptions(props);
 	      options.from = this.$data.from;
 
-	      if (props.sortOptions) {
-	        var _ref5;
-
+	      if (props.sortOptions && Array.isArray(props.sortOptions)) {
 	        var sortOptionIndex = props.defaultSortOption ? props.sortOptions.findIndex(function (s) {
 	          return s.label === props.defaultSortOption;
 	        }) : 0;
-	        options.sort = [(_ref5 = {}, _ref5[props.sortOptions[sortOptionIndex].dataField] = {
-	          order: props.sortOptions[sortOptionIndex].sortBy
-	        }, _ref5)];
+
+	        if (props.sortOptions[sortOptionIndex]) {
+	          var _ref5;
+
+	          options.sort = [(_ref5 = {}, _ref5[props.sortOptions[sortOptionIndex].dataField] = {
+	            order: props.sortOptions[sortOptionIndex].sortBy
+	          }, _ref5)];
+	        }
 	      } else if (props.sortBy) {
 	        var _ref6;
 
@@ -14444,26 +14630,32 @@
 	      }, [isFunction$1(renderNoResults) ? renderNoResults() : renderNoResults]);
 	    },
 	    handleSortChange: function handleSortChange(e) {
-	      var _ref7;
-
-	      var index = e.target.value; // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
+	      var index = e.target.value;
 
-	      var options = getQueryOptions(this.$props);
-	      options.from = 0;
-	      var sortField = this.$props.sortOptions[index].dataField;
-	      var sortBy = this.$props.sortOptions[index].sortBy;
-	      options.sort = [(_ref7 = {}, _ref7[sortField] = {
-	        order: sortBy
-	      }, _ref7)];
-	      this.sortOptionIndex = index; // To handle sort options for RS API
+	      if (this.sortOptions && this.sortOptions[index]) {
+	        var _ref7;
 
-	      this.updateComponentProps(this.componentId, {
-	        dataField: sortField,
-	        sortBy: sortBy
-	      }, constants_1$1.reactiveList);
-	      this.setQueryOptions(this.$props.componentId, options, true);
-	      this.currentPageState = 0;
-	      this.from = 0;
+	        // This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
+	        var options = getQueryOptions(this.$props);
+	        options.from = 0;
+	        var sortField = this.sortOptions[index].dataField;
+	        var sortBy = this.sortOptions[index].sortBy;
+	        options.sort = [(_ref7 = {}, _ref7[sortField] = {
+	          order: sortBy
+	        }, _ref7)];
+	        this.sortOptionIndex = index; // To handle sort options for RS API
+
+	        this.updateComponentProps(this.componentId, {
+	          dataField: sortField,
+	          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) {
 	      var docId = documentId;
@@ -14497,7 +14689,7 @@
 	        "domProps": {
 	          "value": this.sortOptionIndex
 	        }
-	      }, [this.$props.sortOptions.map(function (sort, index) {
+	      }, [this.sortOptions.map(function (sort, index) {
 	        return h("option", {
 	          "key": sort.label,
 	          "domProps": {
@@ -14574,6 +14766,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],
@@ -14603,11 +14796,7 @@
 	}; // Only used for SSR
 
 	ReactiveList.generateQueryOptions = function (props) {
-	  // simulate default (includeFields and excludeFields) props to generate consistent query
-	  var options = getQueryOptions(_extends({
-	    includeFields: ['*'],
-	    excludeFields: []
-	  }, props));
+	  var options = getQueryOptions(props);
 	  var size = props.size,
 	      dataField = props.dataField,
 	      defaultSortOption = props.defaultSortOption,
@@ -14797,22 +14986,21 @@
 	var querystring_3 = querystring.encode;
 	var querystring_4 = querystring.stringify;
 
-	var browserPonyfill$1 = createCommonjsModule(function (module) {
-	  var __root__ = function (root) {
+	var browserPonyfill$1 = createCommonjsModule(function (module, exports) {
+	  var global = typeof self !== 'undefined' ? self : commonjsGlobal;
+
+	  var __self__ = function () {
 	    function F() {
 	      this.fetch = false;
+	      this.DOMException = global.DOMException;
 	    }
 
-	    F.prototype = root;
+	    F.prototype = global;
 	    return new F();
-	  }(typeof self !== 'undefined' ? self : commonjsGlobal);
+	  }();
 
 	  (function (self) {
-	    (function (self) {
-	      if (self.fetch) {
-	        return;
-	      }
-
+	    var irrelevant = function (exports) {
 	      var support = {
 	        searchParams: 'URLSearchParams' in self,
 	        iterable: 'Symbol' in self && 'iterator' in Symbol,
@@ -14828,13 +15016,13 @@
 	        arrayBuffer: 'ArrayBuffer' in self
 	      };
 
+	      function isDataView(obj) {
+	        return obj && DataView.prototype.isPrototypeOf(obj);
+	      }
+
 	      if (support.arrayBuffer) {
 	        var viewClasses = ['[object Int8Array]', '[object Uint8Array]', '[object Uint8ClampedArray]', '[object Int16Array]', '[object Uint16Array]', '[object Int32Array]', '[object Uint32Array]', '[object Float32Array]', '[object Float64Array]'];
 
-	        var isDataView = function isDataView(obj) {
-	          return obj && DataView.prototype.isPrototypeOf(obj);
-	        };
-
 	        var isArrayBufferView = ArrayBuffer.isView || function (obj) {
 	          return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1;
 	        };
@@ -14845,7 +15033,7 @@
 	          name = String(name);
 	        }
 
-	        if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) {
+	        if (/[^a-z0-9\-#$%&'*+.^_`|~]/i.test(name)) {
 	          throw new TypeError('Invalid character in header field name');
 	        }
 
@@ -14903,7 +15091,7 @@
 	        name = normalizeName(name);
 	        value = normalizeValue(value);
 	        var oldValue = this.map[name];
-	        this.map[name] = oldValue ? oldValue + ',' + value : value;
+	        this.map[name] = oldValue ? oldValue + ', ' + value : value;
 	      };
 
 	      Headers.prototype['delete'] = function (name) {
@@ -15037,7 +15225,7 @@
 	          } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) {
 	            this._bodyArrayBuffer = bufferClone(body);
 	          } else {
-	            throw new Error('unsupported BodyInit type');
+	            this._bodyText = body = Object.prototype.toString.call(body);
 	          }
 
 	          if (!this.headers.get('content-type')) {
@@ -15136,6 +15324,7 @@
 
 	          this.method = input.method;
 	          this.mode = input.mode;
+	          this.signal = input.signal;
 
 	          if (!body && input._bodyInit != null) {
 	            body = input._bodyInit;
@@ -15145,7 +15334,7 @@
 	          this.url = String(input);
 	        }
 
-	        this.credentials = options.credentials || this.credentials || 'omit';
+	        this.credentials = options.credentials || this.credentials || 'same-origin';
 
 	        if (options.headers || !this.headers) {
 	          this.headers = new Headers(options.headers);
@@ -15153,6 +15342,7 @@
 
 	        this.method = normalizeMethod(options.method || this.method || 'GET');
 	        this.mode = options.mode || this.mode || null;
+	        this.signal = options.signal || this.signal;
 	        this.referrer = null;
 
 	        if ((this.method === 'GET' || this.method === 'HEAD') && body) {
@@ -15250,15 +15440,36 @@
 	        });
 	      };
 
-	      self.Headers = Headers;
-	      self.Request = Request;
-	      self.Response = Response;
+	      exports.DOMException = self.DOMException;
+
+	      try {
+	        new exports.DOMException();
+	      } catch (err) {
+	        exports.DOMException = function (message, name) {
+	          this.message = message;
+	          this.name = name;
+	          var error = Error(message);
+	          this.stack = error.stack;
+	        };
+
+	        exports.DOMException.prototype = Object.create(Error.prototype);
+	        exports.DOMException.prototype.constructor = exports.DOMException;
+	      }
 
-	      self.fetch = function (input, init) {
+	      function fetch(input, init) {
 	        return new Promise(function (resolve, reject) {
 	          var request = new Request(input, init);
+
+	          if (request.signal && request.signal.aborted) {
+	            return reject(new exports.DOMException('Aborted', 'AbortError'));
+	          }
+
 	          var xhr = new XMLHttpRequest();
 
+	          function abortXhr() {
+	            xhr.abort();
+	          }
+
 	          xhr.onload = function () {
 	            var options = {
 	              status: xhr.status,
@@ -15278,6 +15489,10 @@
 	            reject(new TypeError('Network request failed'));
 	          };
 
+	          xhr.onabort = function () {
+	            reject(new exports.DOMException('Aborted', 'AbortError'));
+	          };
+
 	          xhr.open(request.method, request.url, true);
 
 	          if (request.credentials === 'include') {
@@ -15293,24 +15508,65 @@
 	          request.headers.forEach(function (value, name) {
 	            xhr.setRequestHeader(name, value);
 	          });
+
+	          if (request.signal) {
+	            request.signal.addEventListener('abort', abortXhr);
+
+	            xhr.onreadystatechange = function () {
+	              // DONE (success or failure)
+	              if (xhr.readyState === 4) {
+	                request.signal.removeEventListener('abort', abortXhr);
+	              }
+	            };
+	          }
+
 	          xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit);
 	        });
-	      };
+	      }
 
-	      self.fetch.polyfill = true;
-	    })(typeof self !== 'undefined' ? self : this);
-	  }).call(__root__, void 0);
-	  var fetch = __root__.fetch;
-	  var Response = fetch.Response = __root__.Response;
-	  var Request = fetch.Request = __root__.Request;
-	  var Headers = fetch.Headers = __root__.Headers;
+	      fetch.polyfill = true;
 
-	  if ( module.exports) {
-	    module.exports = fetch; // Needed for TypeScript consumers without esModuleInterop.
+	      if (!self.fetch) {
+	        self.fetch = fetch;
+	        self.Headers = Headers;
+	        self.Request = Request;
+	        self.Response = Response;
+	      }
 
-	    module.exports["default"] = fetch;
-	  }
+	      exports.Headers = Headers;
+	      exports.Request = Request;
+	      exports.Response = Response;
+	      exports.fetch = fetch;
+	      Object.defineProperty(exports, '__esModule', {
+	        value: true
+	      });
+	      return exports;
+	    }({});
+	  })(__self__);
+
+	  __self__.fetch.ponyfill = true; // Remove "polyfill" property added by whatwg-fetch
+
+	  delete __self__.fetch.polyfill; // Choose between native implementation (global) or custom implementation (__self__)
+	  // var ctx = global.fetch ? global : __self__;
+
+	  var ctx = __self__; // this line disable service worker support temporarily
+
+	  exports = ctx.fetch; // To enable: import fetch from 'cross-fetch'
+
+	  exports["default"] = ctx.fetch; // For TypeScript consumers without esModuleInterop.
+
+	  exports.fetch = ctx.fetch; // To enable: import {fetch} from 'cross-fetch'
+
+	  exports.Headers = ctx.Headers;
+	  exports.Request = ctx.Request;
+	  exports.Response = ctx.Response;
+	  module.exports = exports;
 	});
+	var fetch$1 = unwrapExports(browserPonyfill$1);
+	var browserPonyfill_1$1 = browserPonyfill$1.fetch;
+	var browserPonyfill_2$1 = browserPonyfill$1.Headers;
+	var browserPonyfill_3$1 = browserPonyfill$1.Request;
+	var browserPonyfill_4$1 = browserPonyfill$1.Response;
 
 	var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
 	  return typeof obj;
@@ -15642,17 +15898,10 @@
 	  }
 
 	  var credentials = auth || null;
-
-	  if (!config.mongodb) {
-	    if (isAppbase(url) && credentials === null) {
-	      throw new Error('Authentication information is not present. Did you add credentials?');
-	    }
-	  }
 	  /**
 	   * Credentials can be provided as a part of the URL,
 	   * as username, password args or as a credentials argument directly */
 
-
 	  if (typeof config.credentials === 'string' && config.credentials !== '') {
 	    // eslint-disable-next-line
 	    credentials = config.credentials;
@@ -15660,6 +15909,12 @@
 	    credentials = config.username + ':' + config.password;
 	  }
 
+	  if (!config.mongodb) {
+	    if (isAppbase(url) && credentials === null) {
+	      throw new Error('Authentication information is not present. Did you add credentials?');
+	    }
+	  }
+
 	  this.url = url;
 	  this.protocol = protocol;
 	  this.app = config.app;
@@ -15757,7 +16012,7 @@
 	        var transformedRequest = Object.assign({}, ts);
 	        var url = transformedRequest.url;
 	        delete transformedRequest.url;
-	        return browserPonyfill$1(url || finalURL, Object.assign({}, transformedRequest, {
+	        return fetch$1(url || finalURL, Object.assign({}, transformedRequest, {
 	          // apply timestamp header for RS API
 	          headers: isRSAPI && !isMongoRequest ? Object.assign({}, transformedRequest.headers, {
 	            'x-timestamp': new Date().getTime()
@@ -16688,7 +16943,7 @@
 	    headers: types.headers,
 	    getSearchParams: types.func,
 	    setSearchParams: types.func,
-	    as: types.string.def('div')
+	    as: VueTypes.string.def('div')
 	  },
 	  mounted: function mounted() {
 	    var _this = this;
@@ -16836,7 +17091,9 @@
 	        return value.map(function (item) {
 	          return _this3.getValue(item);
 	        });
-	      } else if (value && typeof value === 'object') {
+	      }
+
+	      if (value && typeof value === 'object') {
 	        // TODO: support for NestedList
 	        if (value.location) return value;
 	        if (value.category) return value;
@@ -17010,14 +17267,14 @@
 	      this.updateState(this.$props);
 	    },
 	    analyticsConfig: function analyticsConfig(newVal, oldVal) {
-	      if (!helper_17(newVal, oldVal)) {
+	      if (!helper_20(newVal, oldVal)) {
 	        if (this.store) {
 	          this.store.dispatch(analytics_3$1(newVal));
 	        }
 	      }
 	    },
 	    appbaseConfig: function appbaseConfig(newVal, oldVal) {
-	      if (!helper_17(newVal, oldVal)) {
+	      if (!helper_20(newVal, oldVal)) {
 	        if (this.store) {
 	          this.store.dispatch(analytics_3$1(newVal));
 	        }
@@ -17950,8 +18207,7 @@
 	      internal_isOpen: false,
 	      internal_inputValue: '',
 	      internal_selectedItem: null,
-	      internal_highlightedIndex: null,
-	      internal_eventsCalled: {}
+	      internal_highlightedIndex: null
 	    };
 	  },
 	  computed: {
@@ -18136,23 +18392,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);
 	        }
@@ -18447,24 +18691,22 @@
 
 	    return __webpack_require__(0);
 	    /******/
-	  }([
-	    /* 0 */
-
-	    /***/
-
-	    /* 1 */
-
-	    /***/
-
-	    /* 2 */
+	  }
+	  /************************************************************************/
 
-	    /***/
+	  /******/
+	  ([
+	  /* 0 */
 
-	    /******/
+	  /***/
 	  function (module, exports, __webpack_require__) {
 	    module.exports = __webpack_require__(1);
 	    /***/
-	  }, function (module, exports, __webpack_require__) {
+	  },
+	  /* 1 */
+
+	  /***/
+	  function (module, exports, __webpack_require__) {
 
 	    Object.defineProperty(exports, "__esModule", {
 	      value: true
@@ -18497,7 +18739,11 @@
 	      }
 	    });
 	    /***/
-	  }, function (module, exports) {
+	  },
+	  /* 2 */
+
+	  /***/
+	  function (module, exports) {
 
 	    Object.defineProperty(exports, "__esModule", {
 	      value: true
@@ -18666,7 +18912,9 @@
 	    }
 	    /***/
 
-	  }]);
+	  }
+	  /******/
+	  ]);
 	});
 	unwrapExports(dist);
 	var dist_1 = dist.findAll;
@@ -19396,8 +19644,8 @@
 	  name: 'Mic',
 	  props: {
 	    children: types.title,
-	    lang: types.string.def('en-US'),
-	    iconPosition: types.string.def('left'),
+	    lang: VueTypes.string.def('en-US'),
+	    iconPosition: VueTypes.string.def('left'),
 	    handleResult: types.func,
 	    onNoMatch: types.func,
 	    onError: types.func,
@@ -19809,10 +20057,10 @@
 	    })]),
 	    aggregationField: types.string,
 	    aggregationSize: VueTypes.number,
-	    size: VueTypes.number.def(10),
+	    size: VueTypes.number,
 	    debounce: VueTypes.number.def(0),
 	    defaultValue: types.string,
-	    excludeFields: types.excludeFields.def([]),
+	    excludeFields: types.excludeFields,
 	    value: types.value,
 	    defaultSuggestions: types.suggestions,
 	    enableSynonyms: VueTypes.bool.def(true),
@@ -19826,9 +20074,9 @@
 	    highlightField: types.stringOrArray,
 	    icon: types.children,
 	    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
-	    includeFields: types.includeFields.def(['*']),
+	    includeFields: types.includeFields,
 	    innerClass: types.style,
-	    innerRef: types.string.def('searchInputField'),
+	    innerRef: VueTypes.string.def('searchInputField'),
 	    render: types.func,
 	    renderQuerySuggestions: types.func,
 	    renderPopularSuggestions: types.func,
@@ -19860,7 +20108,7 @@
 	    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
 	    addonBefore: VueTypes.any,
 	    addonAfter: VueTypes.any,
-	    expandSuggestionsContainer: types.bool.def(true),
+	    expandSuggestionsContainer: VueTypes.bool.def(true),
 	    index: VueTypes.string
 	  },
 	  beforeMount: function beforeMount() {
@@ -20029,7 +20277,7 @@
 	    // returns size and aggs property
 	    getBasicQueryOptions: function getBasicQueryOptions() {
 	      var aggregationField = this.$props.aggregationField;
-	      var queryOptions = helper_19(this.$props);
+	      var queryOptions = helper_22(this.$props);
 
 	      if (aggregationField) {
 	        queryOptions.aggs = getCompositeAggsQuery$1({
@@ -20135,7 +20383,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,
@@ -20162,7 +20410,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) {
@@ -20521,7 +20769,7 @@
 	              highlightedIndex: highlightedIndex
 	            }), _this3.renderErrorComponent(), !_this3.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
 	              "class": suggestions$1(_this3.themePreset, theme) + " " + getClassName$3(_this3.$props.innerClass, 'list')
-	            }, [_this3.suggestionsList.slice(0, size).map(function (item, index) {
+	            }, [_this3.suggestionsList.slice(0, size || 10).map(function (item, index) {
 	              return h("li", {
 	                "domProps": _extends({}, getItemProps({
 	                  item: item
@@ -21000,7 +21248,7 @@
 	  name: 'SingleList',
 	  props: {
 	    beforeValueChange: types.func,
-	    className: types.string.def(''),
+	    className: VueTypes.string.def(''),
 	    componentId: types.stringRequired,
 	    customQuery: types.func,
 	    dataField: types.stringRequired,
@@ -21020,7 +21268,7 @@
 	    showFilter: VueTypes.bool.def(true),
 	    showRadio: VueTypes.bool.def(true),
 	    showSearch: VueTypes.bool.def(true),
-	    size: VueTypes.number.def(100),
+	    size: VueTypes.number,
 	    sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
 	    title: types.title,
 	    URLParams: VueTypes.bool.def(false),
@@ -21134,7 +21382,7 @@
 	    var filteredItemsToRender = itemsToRender.filter(function (item) {
 	      if (String(item.key).length) {
 	        if (_this.$props.showSearch && _this.$data.searchTerm) {
-	          return String(item.key).toLowerCase().includes(_this.$data.searchTerm.toLowerCase());
+	          return suggestions_1(String(item.key)).toLowerCase().includes(suggestions_1(_this.$data.searchTerm.toLowerCase()));
 	        }
 
 	        return true;
@@ -21247,7 +21495,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,
@@ -21268,7 +21516,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,
@@ -21481,7 +21729,7 @@
 	    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
 	    showCheckbox: VueTypes.bool.def(true),
 	    beforeValueChange: types.func,
-	    className: types.string.def(''),
+	    className: VueTypes.string.def(''),
 	    componentId: types.stringRequired,
 	    customQuery: types.func,
 	    dataField: types.stringRequired,
@@ -21531,13 +21779,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$6(this.$props.value, currentValue)) {
+	      this.$emit('change', currentValue);
 	    }
 	  },
 	  watch: {
@@ -21582,7 +21831,11 @@
 	      }
 
 	      if (!isEqual$6(selectedValue, newVal)) {
-	        this.setValue(newVal || [], true);
+	        if (this.value === undefined) {
+	          this.setValue(newVal, true);
+	        } else {
+	          this.$emit('change', newVal);
+	        }
 	      }
 	    },
 	    defaultQuery: function defaultQuery(newVal, oldVal) {
@@ -21628,7 +21881,7 @@
 	    var filteredItemsToRender = itemsToRender.filter(function (item) {
 	      if (String(item.key).length) {
 	        if (_this2.$props.showSearch && _this2.$data.searchTerm) {
-	          return String(item.key).toLowerCase().includes(_this2.$data.searchTerm.toLowerCase());
+	          return suggestions_1(String(item.key)).toLowerCase().includes(suggestions_1(_this2.$data.searchTerm).toLowerCase());
 	        }
 
 	        return true;
@@ -21796,7 +22049,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,
@@ -21817,7 +22070,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,
@@ -21881,7 +22134,7 @@
 	      if (value === undefined) {
 	        this.setValue(currentValue);
 	      } else {
-	        var values = parseValueArray(value, currentValue);
+	        var values = parseValueArray(value || [], currentValue);
 	        this.$emit('change', values);
 	      }
 	    },
@@ -22102,7 +22355,9 @@
 	    single: VueTypes.bool,
 	    small: VueTypes.bool.def(false),
 	    themePreset: types.themePreset,
-	    showSearch: VueTypes.bool
+	    showSearch: VueTypes.bool,
+	    showClear: VueTypes.bool,
+	    searchPlaceholder: VueTypes.string.def('Type here to search...')
 	  },
 	  render: function render() {
 	    var _this = this;
@@ -22130,7 +22385,7 @@
 	    var filteredItemsToRender = itemsToRender.filter(function (item) {
 	      if (String(item[labelField]).length) {
 	        if (_this.$props.showSearch && _this.$data.searchTerm) {
-	          return String(item[labelField]).toLowerCase().includes(_this.$data.searchTerm.toLowerCase());
+	          return suggestions_1(String(item[labelField])).toLowerCase().includes(suggestions_1(_this.$data.searchTerm.toLowerCase()));
 	        }
 
 	        return true;
@@ -22151,7 +22406,8 @@
 	              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, {
@@ -22176,25 +22432,16 @@
 	            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 ? h(Input, {
-	            "attrs": {
-	              "id": _this.$props.componentId + "-input",
-	              "showIcon": false,
-	              "placeholder": "Type here to search...",
-	              "value": _this.$data.searchTerm,
-	              "themePreset": themePreset
-	            },
-	            "style": {
-	              border: 0,
-	              borderBottom: '1px solid #ddd'
-	            },
-	            "class": getClassName$6(_this.$props.innerClass, 'input'),
-	            "on": {
-	              "change": _this.handleInputChange
+	          }, [_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]] || Array.isArray(selectedItem) && selectedItem.find(function (value) {
+	            && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
+	            || Array.isArray(selectedItem) && selectedItem.find(function (value) {
 	              return value[labelField] === item[labelField];
 	            }));
 	            if (!_this.$props.multi) selected = item.key === selectedItem;
@@ -22244,6 +22491,7 @@
 
 	      if (!this.$props.multi) {
 	        this.isOpen = false;
+	        this.searchTerm = '';
 	      }
 	    },
 	    handleStateChange: function handleStateChange(_ref2) {
@@ -22267,6 +22515,9 @@
 	      var value = e.target.value;
 	      this.searchTerm = value;
 	    },
+	    clearSearchTerm: function clearSearchTerm() {
+	      this.searchTerm = '';
+	    },
 	    renderToString: function renderToString(value) {
 	      var _this2 = this;
 
@@ -22307,6 +22558,48 @@
 	      return h("p", {
 	        "class": getClassName$6(this.$props.innerClass, 'noResults') || null
 	      }, [isFunction$1(renderNoResults) ? renderNoResults() : renderNoResults]);
+	    },
+	    renderSearchbox: function renderSearchbox(eventObject) {
+	      var h = this.$createElement;
+	      var _this$$props2 = this.$props,
+	          componentId = _this$$props2.componentId,
+	          searchPlaceholder = _this$$props2.searchPlaceholder,
+	          showClear = _this$$props2.showClear,
+	          themePreset = _this$$props2.themePreset,
+	          innerClass = _this$$props2.innerClass;
+	      var InputComponent = h(Input, helper$1([{
+	        "attrs": {
+	          "id": componentId + "-input",
+	          "showIcon": false,
+	          "showClear": showClear,
+	          "placeholder": searchPlaceholder,
+	          "value": this.$data.searchTerm,
+	          "themePreset": themePreset
+	        },
+	        "style": {
+	          border: 0,
+	          borderBottom: '1px solid #ddd'
+	        },
+	        "class": getClassName$6(innerClass, 'input')
+	      }, eventObject]));
+
+	      if (showClear) {
+	        return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
+	          "attrs": {
+	            "groupPosition": "right",
+	            "positionType": "absolute"
+	          }
+	        }, [h(IconWrapper, {
+	          "on": {
+	            "click": this.clearSearchTerm
+	          },
+	          "attrs": {
+	            "isClearIcon": true
+	          }
+	        }, [h(CancelSvg)])])]);
+	      }
+
+	      return InputComponent;
 	    }
 	  }
 	};
@@ -22365,10 +22658,12 @@
 	    showMissing: VueTypes.bool.def(false),
 	    missingLabel: VueTypes.string.def('N/A'),
 	    showSearch: VueTypes.bool.def(false),
+	    showClear: VueTypes.bool.def(false),
 	    showLoadMore: VueTypes.bool.def(false),
 	    loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
 	    nestedField: types.string,
-	    index: VueTypes.string
+	    index: VueTypes.string,
+	    searchPlaceholder: VueTypes.string.def('Type here to search...')
 	  },
 	  created: function created() {
 	    if (!this.enableAppbase && this.$props.index) {
@@ -22482,7 +22777,9 @@
 	    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
 	      if (renderNoResults && isFunction$1(renderNoResults)) {
 	        return h("div", [renderNoResults()]);
-	      } else if (renderNoResults && !isFunction$1(renderNoResults)) {
+	      }
+
+	      if (renderNoResults && !isFunction$1(renderNoResults)) {
 	        return renderNoResults;
 	      }
 
@@ -22520,6 +22817,8 @@
 	        "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
 	        "themePreset": this.themePreset,
 	        "showSearch": this.$props.showSearch,
+	        "showClear": this.$props.showClear,
+	        "searchPlaceholder": this.$props.searchPlaceholder,
 	        "transformData": this.$props.transformData,
 	        "footer": showLoadMore && !isLastBucket && h("div", {
 	          "attrs": {
@@ -22579,7 +22878,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,
@@ -22600,7 +22899,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,
@@ -22812,10 +23111,12 @@
 	    showMissing: VueTypes.bool.def(false),
 	    missingLabel: VueTypes.string.def('N/A'),
 	    showSearch: VueTypes.bool.def(false),
+	    showClear: VueTypes.bool.def(false),
 	    showLoadMore: VueTypes.bool.def(false),
 	    loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
 	    nestedField: types.string,
-	    index: VueTypes.string
+	    index: VueTypes.string,
+	    searchPlaceholder: VueTypes.string.def('Type here to search...')
 	  },
 	  created: function created() {
 	    if (!this.enableAppbase && this.$props.index) {
@@ -22943,7 +23244,9 @@
 	    if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
 	      if (renderNoResults && isFunction$1(renderNoResults)) {
 	        return h("div", [renderNoResults()]);
-	      } else if (renderNoResults && !isFunction$1(renderNoResults)) {
+	      }
+
+	      if (renderNoResults && !isFunction$1(renderNoResults)) {
 	        return renderNoResults;
 	      }
 
@@ -22982,6 +23285,8 @@
 	        "renderItem": renderItemCalc,
 	        "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
 	        "showSearch": this.$props.showSearch,
+	        "showClear": this.$props.showClear,
+	        "searchPlaceholder": this.$props.searchPlaceholder,
 	        "transformData": this.$props.transformData,
 	        "footer": showLoadMore && !isLastBucket && h("div", {
 	          "attrs": {
@@ -23073,7 +23378,7 @@
 	      }
 
 	      var performUpdate = function performUpdate() {
-	        _this3.currentValue = currentValue;
+	        _this3.currentValue = _extends({}, currentValue);
 
 	        _this3.updateQueryHandler(finalValues, props);
 
@@ -23100,7 +23405,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,
@@ -23121,7 +23426,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,
@@ -23328,7 +23633,7 @@
 	    componentId: types.stringRequired,
 	    data: types.data,
 	    dataField: types.stringRequired,
-	    defaultValue: types.stringOrArray,
+	    defaultValue: types.any,
 	    value: types.stringOrArray,
 	    filterLabel: types.string,
 	    nestedField: types.string,
@@ -23486,7 +23791,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);
 	      }
 
@@ -24015,7 +24320,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: {
@@ -24068,15 +24374,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;
@@ -24311,7 +24618,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,
@@ -24520,7 +24827,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,
@@ -24963,14 +25270,14 @@
 	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 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\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;
@@ -24991,7 +25298,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;
@@ -25066,32 +25373,28 @@
 	        });
 	      }
 	    },
-	    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]
 	        });
@@ -25123,7 +25426,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,
@@ -25202,12 +25505,13 @@
 	        "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", {
@@ -25321,7 +25625,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";
@@ -25367,6 +25672,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);
@@ -25375,6 +25682,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
 
 
@@ -25393,6 +25702,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;
@@ -25403,6 +25719,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];
 	      }
@@ -25450,8 +25768,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;
@@ -25503,7 +25831,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,
@@ -25544,6 +25872,7 @@
 	        start: this.range.start,
 	        end: this.range.end
 	      };
+	      this.$emit('change', value);
 	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
 	    },
 	    range: function range(newValue, oldValue) {
@@ -25565,6 +25894,11 @@
 	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
 	        this.updateQueryHandler(this.$data.currentValue);
 	      }
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$e(newVal, oldVal)) {
+	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+	      }
 	    }
 	  },
 	  render: function render() {
@@ -25584,13 +25918,15 @@
 	    }, [this.$props.title]), h(vueNoSsr_common, [h(Slider, {
 	      "class": getClassName$e(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
@@ -25636,7 +25972,11 @@
 	};
 
 	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) {
@@ -25692,6 +26032,10 @@
 	var defaultKeys = ['hits', 'value', 'aggregations', 'error'];
 
 	var filterProps = function filterProps(props) {
+	  if (props === void 0) {
+	    props = {};
+	  }
+
 	  return _extends({}, props, {
 	    props: props.componentProps
 	  });
@@ -25711,7 +26055,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];
@@ -25750,7 +26094,7 @@
 	    };
 	    return this.__state;
 	  },
-	  mounted: function mounted() {
+	  created: function created() {
 	    this.searchState = filterByKeys(getSearchState(filterProps(this.searchStateProps)), this.includeKeys);
 	  },
 	  computed: {
@@ -25952,6 +26296,7 @@
 	    var orderOfQueries = [];
 	    var hits = {};
 	    var aggregations = {};
+	    var compositeAggregations = {};
 	    var state = {};
 	    var customQueries = {};
 	    var defaultQueries = {};
@@ -26074,7 +26419,7 @@
 	        var react = component.react;
 
 	        if (isInternalComponentPresent || isResultComponent) {
-	          react = helper_21(react, internalComponent);
+	          react = helper_24(react, internalComponent);
 	        }
 
 	        dependencyTree = dependencyTreeReducer(dependencyTree, {
@@ -26120,7 +26465,7 @@
 
 	    componentCollection.forEach(function (component) {
 	      // eslint-disable-next-line
-	      var _buildQuery = helper_20(component.componentId, dependencyTree, queryList, queryOptions),
+	      var _buildQuery = helper_23(component.componentId, dependencyTree, queryList, queryOptions),
 	          queryObj = _buildQuery.queryObj,
 	          options = _buildQuery.options;
 
@@ -26186,6 +26531,11 @@
 	              var _extends4;
 
 	              aggregations = _extends({}, aggregations, (_extends4 = {}, _extends4[component] = response.aggregations, _extends4));
+	              compositeAggregations = compositeAggsReducer(compositeAggregations, {
+	                type: constants_9,
+	                aggregations: response.aggregations,
+	                append: false
+	              });
 	            }
 
 	            hits = _extends({}, hits, (_extends5 = {}, _extends5[component] = {
@@ -26212,6 +26562,8 @@
 	      var promotedResults = {};
 	      var rawData = {};
 	      var customData = {};
+	      var settingsResponse = {};
+	      var timestamp = {};
 	      var allPromises = orderOfQueries.map(function (component) {
 	        return new Promise(function (responseResolve, responseReject) {
 	          handleTransformResponse(res[component], component).then(function (response) {
@@ -26230,6 +26582,11 @@
 
 	              if (response.customData) {
 	                customData[component] = response.customData;
+	              } // Update settings
+
+
+	              if (response.settings) {
+	                settingsResponse[component] = response.settings;
 	              }
 
 	              if (response.aggregations) {
@@ -26238,6 +26595,7 @@
 	                aggregations = _extends({}, aggregations, (_extends6 = {}, _extends6[component] = response.aggregations, _extends6));
 	              }
 
+	              timestamp[component] = res._timestamp;
 	              hits = _extends({}, hits, (_extends7 = {}, _extends7[component] = {
 	                hits: response.hits.hits,
 	                total: typeof response.hits.total === 'object' ? response.hits.total.value : response.hits.total,
@@ -26253,8 +26611,11 @@
 	      Promise.all(allPromises).then(function () {
 	        state = _extends({}, state, {
 	          hits: hits,
+	          timestamp: timestamp,
 	          aggregations: aggregations,
+	          compositeAggregations: compositeAggregations,
 	          promotedResults: promotedResults,
+	          settings: settingsResponse,
 	          customData: customData,
 	          rawData: rawData
 	        });
@@ -26313,7 +26674,7 @@
 	  });
 	}
 
-	var version = "1.24.3";
+	var version = "1.27.0";
 
 	var _templateObject$n, _templateObject2$a;
 
@@ -26435,7 +26796,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');
@@ -26490,6 +26851,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];