@appbaseio/reactivesearch-vue 1.32.3 → 1.33.0

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

@@ -1310,7 +1310,7 @@
 	    geo: 'geo',
 	    suggestion: 'suggestion'
 	  };
-	  var validProps = exports.validProps = ['type', 'componentType', 'aggregationField', 'aggregationSize', 'distinctField', 'distinctFieldConfig', 'index', 'aggregations', 'dataField', 'includeFields', 'excludeFields', 'size', 'from', 'sortBy', 'sortOptions', 'pagination', 'autoFocus', 'autosuggest', 'debounce', 'defaultValue', 'defaultSuggestions', 'fieldWeights', 'filterLabel', 'fuzziness', 'highlight', 'highlightConfig', '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', 'enableRecentSuggestions', 'popularSuggestionsConfig', 'recentSuggestionsConfig', 'indexSuggestionsConfig', 'featuredSuggestionsConfig', 'enablePredictiveSuggestions', 'applyStopwords', 'customStopwords', 'enableIndexSuggestions', 'enableFeaturedSuggestions', 'searchboxId', 'endpoint'];
+	  var validProps = exports.validProps = ['type', 'componentType', 'aggregationField', 'aggregationSize', 'distinctField', 'distinctFieldConfig', 'index', 'aggregations', 'dataField', 'includeFields', 'excludeFields', 'size', 'from', 'sortBy', 'sortOptions', 'pagination', 'autoFocus', 'autosuggest', 'debounce', 'defaultValue', 'defaultSuggestions', 'fieldWeights', 'filterLabel', 'fuzziness', 'highlight', 'highlightConfig', 'highlightField', 'nestedField', 'placeholder', 'queryFormat', 'searchOperators', 'enableSynonyms', 'enableQuerySuggestions', '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', 'enableRecentSuggestions', 'popularSuggestionsConfig', 'recentSuggestionsConfig', 'indexSuggestionsConfig', 'featuredSuggestionsConfig', 'enablePredictiveSuggestions', 'applyStopwords', 'customStopwords', 'enableIndexSuggestions', 'enableFeaturedSuggestions', 'searchboxId', 'endpoint', 'enableEndpointSuggestions'];
 	  var CLEAR_ALL = exports.CLEAR_ALL = {
 	    NEVER: 'never',
 	    ALWAYS: 'always',
@@ -5728,15 +5728,33 @@
 	        showMissing = props.showMissing,
 	        missingLabel = props.missingLabel;
 	    clonedQuery.size = 0;
-	    clonedQuery.aggs = _defineProperty({}, dataField, {
-	      terms: _extends({
-	        field: dataField,
-	        size: size,
-	        order: getAggsOrder(sortBy || 'count')
-	      }, showMissing ? {
-	        missing: missingLabel
-	      } : {})
-	    });
+
+	    if (typeof dataField === 'string') {
+	      clonedQuery.aggs = _defineProperty({}, dataField, {
+	        terms: _extends({
+	          field: dataField,
+	          size: size,
+	          order: getAggsOrder(sortBy || 'count')
+	        }, showMissing ? {
+	          missing: missingLabel
+	        } : {})
+	      });
+	    } else {
+	      var aggs = void 0;
+	      [].concat(_toConsumableArray(dataField)).reverse().forEach(function (dataFieldItem) {
+	        aggs = _defineProperty({}, dataFieldItem, {
+	          terms: _extends({
+	            field: dataFieldItem,
+	            size: size,
+	            order: getAggsOrder(sortBy || 'count')
+	          }, showMissing ? {
+	            missing: missingLabel
+	          } : {}),
+	          aggs: aggs
+	        });
+	      });
+	      clonedQuery.aggs = aggs;
+	    }
 
 	    if (props.nestedField) {
 	      clonedQuery.aggs = {
@@ -7555,6 +7573,7 @@
 	        index: props.index
 	      }, queryType === constants$1.queryTypes.suggestion ? _extends({
 	        enablePopularSuggestions: props.enablePopularSuggestions,
+	        enableEndpointSuggestions: props.enableEndpointSuggestions,
 	        enableRecentSuggestions: props.enableRecentSuggestions,
 	        popularSuggestionsConfig: props.popularSuggestionsConfig,
 	        recentSuggestionsConfig: props.recentSuggestionsConfig,
@@ -9444,6 +9463,7 @@
 	        settings.enableSearchRelevancy = (0, utils.isPropertyDefined)(config.analyticsConfig.enableSearchRelevancy) ? config.analyticsConfig.enableSearchRelevancy : undefined;
 	        settings.suggestionAnalytics = (0, utils.isPropertyDefined)(config.analyticsConfig.suggestionAnalytics) ? config.analyticsConfig.suggestionAnalytics : undefined;
 	        settings.useCache = (0, utils.isPropertyDefined)(config.analyticsConfig.useCache) ? config.analyticsConfig.useCache : undefined;
+	        settings.queryParams = (0, utils.isPropertyDefined)(config.analyticsConfig.queryParams) ? config.analyticsConfig.queryParams : undefined;
 	      }
 
 	      orderOfQueries.forEach(function (component) {
@@ -9456,7 +9476,7 @@
 	        dispatch(loadPopularSuggestions(searchComponentID));
 	      }
 
-	      appbaseRef.reactiveSearchv3(query, settings).then(function (res) {
+	      appbaseRef.reactiveSearch(query, settings, settings.queryParams).then(function (res) {
 	        (0, utils.handleResponse)({
 	          res: res,
 	          orderOfQueries: orderOfQueries,
@@ -9933,9 +9953,10 @@
 	  }
 
 	  function watchComponent(component, react) {
+	    var execute = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 	    return function (dispatch) {
 	      dispatch(updateWatchman(component, react));
-	      dispatch((0, query.executeQuery)(component));
+	      if (execute) dispatch((0, query.executeQuery)(component));
 	    };
 	  }
 	});
@@ -14920,19 +14941,20 @@
 	    },
 	    methods: {
 	      setReact: function setReact(props) {
-	        var react = props.react;
+	        var react = props.react,
+	            executeInitialQuery = props.executeInitialQuery;
 
 	        if (this.internalComponent) {
 	          if (react) {
 	            var newReact = pushToAndClause(react, this.internalComponent);
-	            this.watchComponent(props.componentId, newReact);
+	            this.watchComponent(props.componentId, newReact, executeInitialQuery);
 	          } else {
 	            this.watchComponent(props.componentId, {
 	              and: this.internalComponent
-	            });
+	            }, executeInitialQuery);
 	          }
 	        } else {
-	          this.watchComponent(props.componentId, react);
+	          this.watchComponent(props.componentId, react, executeInitialQuery);
 	        }
 	      }
 	    },
@@ -14969,6 +14991,81 @@
 	  return connect(mapStateToProps, mapDispatchToProps)(ComponentWrapper(component, options));
 	});
 
+	var deepValue = function deepValue(o, p) {
+	  return p.split('.').reduce(function (a, v) {
+	    return a ? a[v] : null;
+	  }, o);
+	};
+	/**
+	 * PreferencesConsumer reads the preferences from SearchPreferencesContext
+	 * and set the props from preferences to the component
+	 *
+	 */
+
+
+	var PreferencesConsumer = function PreferencesConsumer(component) {
+	  return {
+	    name: 'PreferencesConsumer',
+	    inject: {
+	      $searchPreferences: {
+	        "default": null
+	      }
+	    },
+	    render: function render(h) {
+	      var userProps = this.$attrs;
+	      var context = this.$searchPreferences;
+
+	      if (!userProps || !userProps.componentId) {
+	        throw Error('ReactiveSearch: componentId is required');
+	      }
+
+	      var componentId = userProps.componentId;
+	      var preferencesPath = userProps.preferencesPath;
+	      var preferences;
+
+	      if (context) {
+	        if (preferencesPath) {
+	          // read preferences from path
+	          preferences = deepValue(context, preferencesPath);
+	        } else {
+	          preferences = deepValue(context, ['componentSettings', componentId].join('.')); // read preferences from componentSettings
+	        }
+	      } // Retrieve component specific preferences
+
+
+	      var componentProps = userProps;
+
+	      if (preferences) {
+	        if (preferences.rsConfig) {
+	          componentProps = _extends({}, preferences.rsConfig, componentProps);
+	        } else {
+	          componentProps = _extends({}, preferences, componentProps);
+	        }
+
+	        if (preferences.enabled !== undefined && !preferences.enabled) {
+	          return null;
+	        }
+	      } // Parse component props
+
+
+	      Object.keys(componentProps).forEach(function (p) {
+	        if (typeof componentProps[p] === 'string') {
+	          if (['defaultQuery', 'customQuery', 'setOption'].includes(p)) {
+	            // eslint-disable-next-line
+	            componentProps[p] = eval(componentProps[p]);
+	          }
+	        }
+	      });
+	      return h(component, {
+	        attrs: componentProps,
+	        on: this.$listeners,
+	        scopedSlots: this.$scopedSlots,
+	        slots: this.$slots
+	      });
+	    }
+	  };
+	};
+
 	function _extends$2() {
 	  return _extends$2 = Object.assign ? Object.assign.bind() : function (a) {
 	    for (var b, c = 1; c < arguments.length; c++) {
@@ -16103,10 +16200,10 @@
 	  return true;
 	};
 
-	var RLConnected = ComponentWrapper$1(connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveList), {
+	var RLConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$1, mapDispatchtoProps)(ReactiveList), {
 	  componentType: constants_1$1.reactiveList,
 	  internalComponent: ReactiveList.hasInternalComponent()
-	});
+	}));
 
 	ReactiveList.install = function (Vue) {
 	  Vue.component(ReactiveList.name, RLConnected);
@@ -16556,7 +16653,7 @@
 	 */
 
 	function AppBase(config) {
-	  var _URL = urlParserLite((config.endpoint ? config.endpoint.url : '') || config.url),
+	  var _URL = urlParserLite((config.endpoint ? config.endpoint.url : config.url) || ''),
 	      _URL$auth = _URL.auth,
 	      auth = _URL$auth === undefined ? null : _URL$auth,
 	      _URL$host = _URL.host,
@@ -17066,7 +17163,7 @@
 	 */
 
 
-	function reactiveSearchApi(query, settings) {
+	function reactiveSearchApi(query, settings, params) {
 	  var parsedSettings = removeUndefined(settings); // Validate query
 
 	  var valid = validateRSQuery(query);
@@ -17092,7 +17189,8 @@
 	    body: body,
 	    headers: getTelemetryHeaders(this.enableTelemetry, !this.mongodb),
 	    isRSAPI: true,
-	    isMongoRequest: !!this.mongodb
+	    isMongoRequest: !!this.mongodb,
+	    params: params
 	  });
 	}
 	/**
@@ -17106,7 +17204,7 @@
 	 */
 
 
-	function reactiveSearchv3Api(query, settings) {
+	function reactiveSearchv3Api(query, settings, params) {
 	  var parsedSettings = removeUndefined(settings); // Validate query
 
 	  var valid = validateRSQuery(query);
@@ -17132,7 +17230,8 @@
 	    body: body,
 	    headers: getTelemetryHeaders(this.enableTelemetry, !this.mongodb),
 	    isRSAPI: true,
-	    isMongoRequest: !!this.mongodb
+	    isMongoRequest: !!this.mongodb,
+	    params: params
 	  });
 	}
 	/**
@@ -17950,12 +18049,14 @@
 	    getSearchParams: types.func,
 	    setSearchParams: types.func,
 	    mongodb: types.mongodb,
-	    endpoint: types.endpointConfig
+	    endpoint: types.endpointConfig,
+	    preferences: VueTypes.object
 	  },
 	  provide: function provide() {
 	    return {
 	      theme_reactivesearch: composeThemeObject(getTheme(this.$props.themePreset), this.$props.theme),
-	      store: this.store
+	      store: this.store,
+	      $searchPreferences: this.preferences
 	    };
 	  },
 	  watch: {
@@ -20799,6 +20900,7 @@
 
 	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
 	    updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
+	    this.updateDefaultQueryHandler(this.currentValue, this.$props, false);
 	  },
 	  computed: {
 	    suggestionsList: function suggestionsList() {
@@ -21233,7 +21335,7 @@
 
 	      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
 	    },
-	    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
+	    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props, execute) {
 	      if (!value && props.enableDefaultSuggestions === false) {
 	        // clear Component data from store
 	        this.resetStoreForComponent(props.componentId);
@@ -21256,13 +21358,13 @@
 	        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
 	      }
 
-	      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), false);
+	      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), execute);
 	      this.updateQuery({
 	        componentId: this.internalComponent,
 	        query: query,
 	        value: value,
 	        componentType: constants_1$1.dataSearch
-	      });
+	      }, execute);
 	    },
 	    updateQueryHandler: function updateQueryHandler(componentId, value, props) {
 	      var customQuery = props.customQuery,
@@ -22119,10 +22221,10 @@
 	  getRecentSearches: getRecentSearches,
 	  resetStoreForComponent: resetStoreForComponent
 	};
-	var DSConnected = ComponentWrapper$1(connect(mapStateToProps$3, mapDispatchToProps$2)(DataSearch), {
+	var DSConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$3, mapDispatchToProps$2)(DataSearch), {
 	  componentType: constants_1$1.dataSearch,
 	  internalComponent: DataSearch.hasInternalComponent()
-	});
+	}));
 
 	DataSearch.install = function (Vue) {
 	  Vue.component(DataSearch.name, DSConnected);
@@ -23478,13 +23580,13 @@
 	  setDefaultQuery: setDefaultQuery$2,
 	  recordSuggestionClick: recordSuggestionClick$1
 	};
-	var DSConnected$1 = ComponentWrapper$1(connect(mapStateToProps$4, mapDispatchToProps$3)(SearchBox), {
+	var SBConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$4, mapDispatchToProps$3)(SearchBox), {
 	  componentType: constants_1$1.searchBox,
 	  internalComponent: true
-	});
+	}));
 
 	SearchBox.install = function (Vue) {
-	  Vue.component(SearchBox.name, DSConnected$1);
+	  Vue.component(SearchBox.name, SBConnected);
 	}; // Add componentType for SSR
 
 
@@ -23754,6 +23856,7 @@
 	        "name": this.$props.componentId,
 	        "value": selectAllLabel,
 	        "readOnly": true,
+	        "type": "radio",
 	        "show": this.$props.showRadio
 	      },
 	      "on": {
@@ -23767,7 +23870,9 @@
 	      "attrs": {
 	        "for": this.$props.componentId + "-" + selectAllLabel
 	      }
-	    }, [selectAllLabel])]) : null, !this.hasCustomRenderer && filteredItemsToRender.length === 0 && !this.isLoading ? this.renderNoResult() : filteredItemsToRender.map(function (item) {
+	    }, [h("span", [selectAllLabel, this.$props.showCount && h("span", {
+	      "class": getClassName$5(this.$props.innerClass, 'count') || null
+	    }, ["\xA0(", this.totalDocumentCount, ")"])])])]) : null, !this.hasCustomRenderer && filteredItemsToRender.length === 0 && !this.isLoading ? this.renderNoResult() : filteredItemsToRender.map(function (item) {
 	      return h("li", {
 	        "key": item.key,
 	        "class": "" + (_this.currentValue === String(item.key) ? 'active' : '')
@@ -24037,6 +24142,7 @@
 	    rawData: state.rawData[props.componentId],
 	    isLoading: state.isLoading[props.componentId],
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || '',
+	    totalDocumentCount: state.hits[props.componentId] && state.hits[props.componentId].total,
 	    themePreset: state.config.themePreset,
 	    error: state.error[props.componentId],
 	    componentProps: state.props[props.componentId],
@@ -24050,10 +24156,10 @@
 	  setCustomQuery: setCustomQuery$2,
 	  setDefaultQuery: setDefaultQuery$3
 	};
-	var ListConnected = ComponentWrapper$1(connect(mapStateToProps$5, mapDispatchtoProps$2)(SingleList), {
+	var ListConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$5, mapDispatchtoProps$2)(SingleList), {
 	  componentType: constants_1$1.singleList,
 	  internalComponent: SingleList.hasInternalComponent()
-	});
+	}));
 
 	SingleList.install = function (Vue) {
 	  Vue.component(SingleList.name, ListConnected);
@@ -24270,7 +24376,9 @@
 	      "attrs": {
 	        "for": this.$props.componentId + "-" + selectAllLabel
 	      }
-	    }, [selectAllLabel])]) : null, !this.hasCustomRenderer && filteredItemsToRender.length === 0 && !this.isLoading ? this.renderNoResult() : filteredItemsToRender.map(function (item) {
+	    }, [h("span", [selectAllLabel, this.$props.showCount && h("span", {
+	      "class": getClassName$6(this.$props.innerClass, 'count')
+	    }, ["\xA0(", this.totalDocumentCount, ")"])])])]) : null, !this.hasCustomRenderer && filteredItemsToRender.length === 0 && !this.isLoading ? this.renderNoResult() : filteredItemsToRender.map(function (item) {
 	      return h("li", {
 	        "key": item.key,
 	        "class": "" + (_this2.$data.currentValue[item.key] ? 'active' : '')
@@ -24627,6 +24735,7 @@
 	    isLoading: state.isLoading[props.componentId],
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    themePreset: state.config.themePreset,
+	    totalDocumentCount: state.hits[props.componentId] && state.hits[props.componentId].total,
 	    error: state.error[props.componentId],
 	    componentProps: state.props[props.componentId],
 	    enableAppbase: state.config.enableAppbase
@@ -24644,10 +24753,10 @@
 	  return true;
 	};
 
-	var ListConnected$1 = ComponentWrapper$1(connect(mapStateToProps$6, mapDispatchtoProps$3)(MultiList), {
+	var ListConnected$1 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$6, mapDispatchtoProps$3)(MultiList), {
 	  componentType: constants_1$1.multiList,
 	  internalComponent: MultiList.hasInternalComponent()
-	});
+	}));
 
 	MultiList.install = function (Vue) {
 	  Vue.component(MultiList.name, ListConnected$1);
@@ -25151,7 +25260,8 @@
 
 	    if (this.$props.selectAllLabel) {
 	      selectAll = [{
-	        key: this.$props.selectAllLabel
+	        key: this.$props.selectAllLabel,
+	        doc_count: this.totalDocumentCount
 	      }];
 	    }
 
@@ -25396,6 +25506,7 @@
 	    rawData: state.rawData[props.componentId],
 	    isLoading: state.isLoading[props.componentId],
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || '',
+	    totalDocumentCount: state.hits[props.componentId] && state.hits[props.componentId].total,
 	    themePreset: state.config.themePreset,
 	    error: state.error[props.componentId],
 	    componentProps: state.props[props.componentId],
@@ -25409,10 +25520,10 @@
 	  setCustomQuery: setCustomQuery$4,
 	  setDefaultQuery: setDefaultQuery$5
 	};
-	var ListConnected$2 = ComponentWrapper$1(connect(mapStateToProps$7, mapDispatchtoProps$4)(SingleDropdownList), {
+	var ListConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$7, mapDispatchtoProps$4)(SingleDropdownList), {
 	  componentType: constants_1$1.singleDropdownList,
 	  internalComponent: SingleDropdownList.hasInternalComponent()
-	});
+	}));
 
 	SingleDropdownList.install = function (Vue) {
 	  Vue.component(SingleDropdownList.name, ListConnected$2);
@@ -25622,7 +25733,8 @@
 
 	    if (this.$props.selectAllLabel) {
 	      selectAll = [{
-	        key: this.$props.selectAllLabel
+	        key: this.$props.selectAllLabel,
+	        doc_count: this.totalDocumentCount
 	      }];
 	    }
 
@@ -25969,6 +26081,7 @@
 	    rawData: state.rawData[props.componentId],
 	    isLoading: state.isLoading[props.componentId],
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    totalDocumentCount: state.hits[props.componentId] && state.hits[props.componentId].total,
 	    themePreset: state.config.themePreset,
 	    error: state.error[props.componentId],
 	    componentProps: state.props[props.componentId],
@@ -25982,10 +26095,10 @@
 	  setCustomQuery: setCustomQuery$5,
 	  setDefaultQuery: setDefaultQuery$6
 	};
-	var ListConnected$3 = ComponentWrapper$1(connect(mapStateToProps$8, mapDispatchtoProps$5)(MultiDropdownList), {
+	var ListConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$8, mapDispatchtoProps$5)(MultiDropdownList), {
 	  componentType: constants_1$1.multiDropdownList,
 	  internalComponent: MultiDropdownList.hasInternalComponent()
-	});
+	}));
 
 	MultiDropdownList.install = function (Vue) {
 	  Vue.component(MultiDropdownList.name, ListConnected$3);
@@ -26315,534 +26428,562 @@
 	  setQueryOptions: setQueryOptions$6,
 	  setCustomQuery: setCustomQuery$6
 	};
-	var RcConnected = ComponentWrapper$1(connect(mapStateToProps$9, mapDispatchtoProps$6)(ToggleButton), {
+	var ListConnected$4 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$9, mapDispatchtoProps$6)(ToggleButton), {
 	  componentType: constants_1$1.toggleButton
-	});
+	}));
 
 	ToggleButton.install = function (Vue) {
-	  Vue.component(ToggleButton.name, RcConnected);
+	  Vue.component(ToggleButton.name, ListConnected$4);
 	}; // Add componentType for SSR
 
 
 	ToggleButton.componentType = constants_1$1.toggleButton;
 
-	var _excluded = ["options"];
-	var updateQuery$8 = lib_5.updateQuery,
+	/*!
+	 * vue-no-ssr v1.1.1
+	 * (c) 2018-present egoist <0x142857@gmail.com>
+	 * Released under the MIT License.
+	 */
+
+	var index$2 = {
+	  name: 'NoSsr',
+	  functional: true,
+	  props: {
+	    placeholder: String,
+	    placeholderTag: {
+	      type: String,
+	      "default": 'div'
+	    }
+	  },
+	  render: function render(h, ref) {
+	    var parent = ref.parent;
+	    var slots = ref.slots;
+	    var props = ref.props;
+	    var ref$1 = slots();
+	    var defaultSlot = ref$1["default"];
+	    if (defaultSlot === void 0) defaultSlot = [];
+	    var placeholderSlot = ref$1.placeholder;
+
+	    if (parent._isMounted) {
+	      return defaultSlot;
+	    }
+
+	    parent.$once('hook:mounted', function () {
+	      parent.$forceUpdate();
+	    });
+
+	    if (props.placeholderTag && (props.placeholder || placeholderSlot)) {
+	      return h(props.placeholderTag, {
+	        "class": ['no-ssr-placeholder']
+	      }, props.placeholder || placeholderSlot);
+	    } // Return a placeholder element for each child in the default slot
+	    // Or if no children return a single placeholder
+
+
+	    return defaultSlot.length > 0 ? defaultSlot.map(function () {
+	      return h(false);
+	    }) : h(false);
+	  }
+	};
+	var vueNoSsr_common = index$2;
+
+	var _templateObject$o;
+	var Slider = index$1('div')(_templateObject$o || (_templateObject$o = _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@3.2.15/dist/vue-slider-component.umd.min.js");
+						s.onload = function(){
+							var VueSlider = global['vue-slider-component'];
+							components['vue-slider-component'] = VueSlider;
+						}
+						document.head.appendChild(s);
+					` in rollup umd build process with some script.
+	 */
+	// eslint-disable-next-line
+
+	var getComponents = function getComponents() {
+	  var components = {
+	    NoSSR: vueNoSsr_common
+	  };
+
+	  {
+	    try {
+	      // in older versions of nuxt, it's process.BROWSER_BUILD
+	      // eslint-disable-next-line
+	      
+						var s = document.createElement("script");
+						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;
+						};
+						document.head.appendChild(s);
+					
+	    } catch (e) {
+	      console.error('Unable to load vue-slider', e);
+	    }
+	  }
+
+	  return components;
+	};
+
+	var addComponent$1 = lib_5.addComponent,
+	    removeComponent$1 = lib_5.removeComponent,
+	    watchComponent$1 = lib_5.watchComponent,
+	    updateQuery$8 = lib_5.updateQuery,
+	    setQueryListener$1 = lib_5.setQueryListener,
 	    setQueryOptions$7 = lib_5.setQueryOptions,
+	    setComponentProps$1 = lib_5.setComponentProps,
 	    setCustomQuery$7 = lib_5.setCustomQuery,
-	    setDefaultQuery$7 = lib_5.setDefaultQuery;
-	var parseHits$1 = lib_8.parseHits,
+	    updateComponentProps$2 = lib_5.updateComponentProps;
+	var checkValueChange$7 = lib_8.checkValueChange,
+	    getClassName$b = lib_8.getClassName,
 	    isEqual$b = lib_8.isEqual,
-	    getCompositeAggsQuery$5 = lib_8.getCompositeAggsQuery,
-	    getResultStats$3 = lib_8.getResultStats,
+	    checkSomePropChange$1 = lib_8.checkSomePropChange,
 	    extractQueryFromCustomQuery$6 = lib_8.extractQueryFromCustomQuery,
 	    getOptionsForCustomQuery$6 = lib_8.getOptionsForCustomQuery;
-	var ReactiveComponent = {
-	  name: 'ReactiveComponent',
+	var DynamicRangeSlider = {
+	  name: 'DynamicRangeSlider',
+	  components: getComponents(),
 	  props: {
+	    beforeValueChange: types.func,
+	    className: VueTypes.string.def(''),
+	    rangeLabels: types.func,
 	    componentId: types.stringRequired,
-	    aggregationField: types.string,
-	    aggregationSize: VueTypes.number,
-	    size: VueTypes.number,
-	    defaultQuery: types.func,
 	    customQuery: types.func,
+	    data: types.data,
+	    dataField: types.stringRequired,
+	    defaultValue: types.func,
 	    filterLabel: types.string,
+	    innerClass: types.style,
 	    react: types.react,
 	    showFilter: VueTypes.bool.def(true),
+	    destroyOnUnmount: VueTypes.bool,
+	    showCheckbox: VueTypes.bool.def(true),
+	    title: types.title,
 	    URLParams: VueTypes.bool.def(false),
-	    distinctField: types.string,
-	    distinctFieldConfig: types.props,
+	    sliderOptions: VueTypes.object.def({}),
+	    nestedField: types.string,
 	    index: VueTypes.string,
+	    value: types.range,
 	    endpoint: types.endpointConfig
 	  },
+	  data: function data() {
+	    this.internalRangeComponent = this.$props.componentId + "__range__internal";
+	    return {
+	      currentValue: null,
+	      stats: []
+	    };
+	  },
 	  created: function created() {
 	    var _this = this;
 
-	    var props = this.$props;
-	    this.internalComponent = null;
-	    this.$defaultQuery = null; // Set custom query in store
+	    var onQueryChange = function onQueryChange() {
+	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+	        args[_key] = arguments[_key];
+	      }
 
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-	    var customQuery = props.customQuery,
-	        componentId = props.componentId,
-	        filterLabel = props.filterLabel,
-	        showFilter = props.showFilter,
-	        URLParams = props.URLParams,
-	        distinctField = props.distinctField,
-	        distinctFieldConfig = props.distinctFieldConfig,
-	        index = props.index;
+	      _this.$emit.apply(_this, ['queryChange'].concat(args));
 
-	    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
-	      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
-	    }
+	      _this.$emit.apply(_this, ['query-change'].concat(args));
+	    };
 
-	    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
-	      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-	    }
+	    this.setQueryListener(this.$props.componentId, onQueryChange, null); // Update props in store
 
-	    if (!this.enableAppbase && index) {
+	    this.setComponentProps(this.componentId, this.$props, constants_1$1.dynamicRangeSlider);
+	    this.setComponentProps(this.internalRangeComponent, this.$props, constants_1$1.dynamicRangeSlider);
+
+	    if (!this.enableAppbase && this.$props.index) {
 	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    } // Set custom query in store
+
+
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+	  },
+	  mounted: function mounted() {
+	    this.setReact();
+	  },
+	  beforeMount: function beforeMount() {
+	    var components = [];
+
+	    if (this.$$store) {
+	      var _this$$$store$getStat = this.$$store.getState();
+
+	      components = _this$$$store$getStat.components;
 	    }
 
-	    if (customQuery) {
-	      var calcCustomQuery = customQuery(this.selectedValue, props);
-	      var query = extractQueryFromCustomQuery$6(calcCustomQuery);
-	      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery$6(calcCustomQuery) : null;
+	    var value = this.$props.value;
 
-	      if (customQueryOptions) {
-	        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
-	      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+	    if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
+	      this.addComponent(this.componentId);
+	      this.addComponent(this.internalRangeComponent);
 
-	      this.updateQuery({
-	        componentId: componentId,
-	        query: query,
-	        value: this.selectedValue || null,
-	        label: filterLabel,
-	        showFilter: showFilter,
-	        URLParams: URLParams
-	      });
+	      if (Array.isArray(this.selectedValue)) {
+	        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
+
+
+	      this.updateRangeQueryOptions();
+	    }
+	  },
+	  beforeUpdate: function beforeUpdate() {
+	    if (!this.currentValue) {
+	      this.setDefaultValue(this.range);
+	    }
+	  },
+	  beforeDestroy: function beforeDestroy() {
+	    if (this.destroyOnUnmount) {
+	      this.removeComponent(this.$props.componentId);
+	      this.removeComponent(this.internalRangeComponent);
 	    }
+	  },
+	  methods: {
+	    isControlled: function isControlled() {
+	      if (this.$props.value && this.$listeners) {
+	        return true;
+	      }
 
-	    this.setQuery = function (_ref) {
-	      var options = _ref.options,
-	          obj = _objectWithoutPropertiesLoose(_ref, _excluded);
+	      return false;
+	    },
+	    setDefaultValue: function setDefaultValue(_ref) {
+	      var start = _ref.start,
+	          end = _ref.end;
 
-	      var queryToBeSet = obj.query; // when enableAppbase is true, Backend throws error because of repeated query in request body
+	      if (this.$props.defaultValue) {
+	        var _this$$props$defaultV = this.$props.defaultValue(start, end),
+	            defaultStart = _this$$props$defaultV.start,
+	            defaultEnd = _this$$props$defaultV.end;
 
-	      if (queryToBeSet && queryToBeSet.query) {
-	        queryToBeSet = queryToBeSet.query;
+	        this.handleChange([defaultStart, defaultEnd]);
+	      } else if (this.isControlled()) {
+	        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
+	      } else {
+	        this.currentValue = [start, end];
+	      }
+	    },
+	    setReact: function setReact() {
+	      if (this.$props.react) {
+	        this.watchComponent(this.internalRangeComponent, this.$props.react);
+	        this.watchComponent(this.$props.componentId, this.$props.react);
+	      } else {
+	        this.watchComponent(this.internalRangeComponent, {});
+	        this.watchComponent(this.$props.componentId, {});
+	      }
+	    },
+	    rangeQuery: function rangeQuery() {
+	      return {
+	        min: {
+	          min: {
+	            field: this.$props.dataField
+	          }
+	        },
+	        max: {
+	          max: {
+	            field: this.$props.dataField
+	          }
+	        }
+	      };
+	    },
+	    updateRangeQueryOptions: function updateRangeQueryOptions() {
+	      var aggs = {};
+
+	      if (this.$props.nestedField) {
+	        var _aggs;
+
+	        aggs = (_aggs = {}, _aggs[this.$props.nestedField] = {
+	          nested: {
+	            path: this.$props.nestedField
+	          },
+	          aggs: this.rangeQuery()
+	        }, _aggs);
+	      } else {
+	        aggs = this.rangeQuery();
 	      }
 
-	      var customQueryCalc = _extends({}, options, {
-	        query: queryToBeSet
+	      this.setQueryOptions(this.internalRangeComponent, {
+	        aggs: aggs
 	      });
+	    },
+	    handleSlider: function handleSlider() {
+	      var sliderValues = this.$refs.slider.getValue();
+	      var value = this.$props.value;
 
-	      var rsAPIQuery = customQueryCalc; // handle stored queries
+	      if (value === undefined) {
+	        this.handleChange(sliderValues);
+	      } else {
+	        this.$emit('change', {
+	          start: sliderValues[0],
+	          end: sliderValues[1]
+	        });
+	      }
+	    },
+	    handleChange: function handleChange(currentValue) {
+	      var _this2 = this;
 
-	      if (queryToBeSet && queryToBeSet.id) {
-	        rsAPIQuery = queryToBeSet;
-	      } // Update customQuery field for RS API
+	      // Always keep the values within range
+	      var normalizedValue = [this.range ? Math.max(this.range.start, currentValue[0]) : currentValue[0], this.range ? Math.min(this.range.end, currentValue[1]) : currentValue[1]];
 
+	      var performUpdate = function performUpdate() {
+	        _this2.currentValue = normalizedValue;
 
-	      _this.setCustomQuery(props.componentId, rsAPIQuery);
+	        _this2.updateQueryHandler(normalizedValue, _this2.$props);
 
-	      if (options) {
-	        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
-	      }
+	        _this2.$emit('valueChange', {
+	          start: normalizedValue[0],
+	          end: normalizedValue[1]
+	        });
 
-	      _this.updateQuery(_extends({}, obj, {
-	        query: customQueryCalc.query,
-	        componentId: props.componentId,
-	        label: props.filterLabel,
-	        showFilter: props.showFilter,
-	        URLParams: props.URLParams
-	      }));
-	    };
+	        _this2.$emit('value-change', {
+	          start: normalizedValue[0],
+	          end: normalizedValue[1]
+	        });
+	      };
 
-	    if (props.defaultQuery) {
-	      this.internalComponent = props.componentId + "__internal";
-	    }
+	      checkValueChange$7(this.$props.componentId, {
+	        start: normalizedValue[0],
+	        end: normalizedValue[1]
+	      }, this.$props.beforeValueChange, performUpdate);
+	    },
+	    updateQueryHandler: function updateQueryHandler(value) {
+	      var query = DynamicRangeSlider.defaultQuery(value, this.$props);
 
-	    if (this.internalComponent && this.$props.defaultQuery) {
-	      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-	      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
+	      if (this.$props.customQuery) {
+	        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
+	        var queryTobeSet = extractQueryFromCustomQuery$6(customQueryTobeSet);
+
+	        if (queryTobeSet) {
+	          query = queryTobeSet;
+	        }
 
-	      var _query = extractQueryFromCustomQuery$6(this.$defaultQuery);
+	        var customQueryOptions = getOptionsForCustomQuery$6(customQueryTobeSet);
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
+	        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
+	      }
 
-	      var queryOptions = getOptionsForCustomQuery$6(this.$defaultQuery);
+	      var _ref2 = this.range || {
+	        start: value[0],
+	        end: value[1]
+	      },
+	          start = _ref2.start,
+	          end = _ref2.end;
 
-	      if (queryOptions) {
-	        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-	      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+	      var currentStart = value[0],
+	          currentEnd = value[1]; // check if the slider is at its initial position
 
+	      var isInitialValue = currentStart === start && currentEnd === end;
 	      this.updateQuery({
-	        componentId: this.internalComponent,
-	        query: _query
+	        componentId: this.$props.componentId,
+	        query: query,
+	        value: value,
+	        label: this.$props.filterLabel,
+	        showFilter: this.$props.showFilter && !isInitialValue,
+	        URLParams: this.$props.URLParams,
+	        componentType: constants_1$1.dynamicRangeSlider
 	      });
 	    }
 	  },
+	  computed: {
+	    labels: function labels() {
+	      if (!this.rangeLabels) return null;
+	      return this.rangeLabels(this.range.start, this.range.end);
+	    }
+	  },
 	  watch: {
-	    hits: function hits(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    rawData: function rawData(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
+	    $props: {
+	      deep: true,
+	      handler: function handler(newVal) {
+	        var _this3 = this;
+
+	        var propsKeys = getValidPropsKeys(newVal);
+	        checkSomePropChange$1(newVal, this.componentProps, propsKeys, function () {
+	          _this3.updateComponentProps(_this3.componentId, newVal, constants_1$1.dynamicRangeSlider);
+
+	          _this3.updateComponentProps(_this3.internalRangeComponent, newVal, constants_1$1.dynamicRangeSlider);
+	        });
 	      }
 	    },
-	    aggregations: function aggregations(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
+	    react: function react() {
+	      this.setReact();
 	    },
-	    aggregationData: function aggregationData(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
+	    selectedValue: function selectedValue(newValue) {
+	      if (isEqual$b(newValue, this.currentValue)) return;
+	      var value = newValue || {
+	        start: this.range.start,
+	        end: this.range.end
+	      };
+	      this.$emit('change', value);
+	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
 	    },
-	    promotedResults: function promotedResults(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
+	    range: function range(newValue, oldValue) {
+	      if (isEqual$b(newValue, oldValue) || !this.currentValue) return;
+
+	      var _ref3 = this.currentValue || [],
+	          currentStart = _ref3[0],
+	          currentEnd = _ref3[1];
+
+	      var _ref4 = oldValue || {},
+	          oldStart = _ref4.start,
+	          oldEnd = _ref4.end;
+
+	      var newStart = currentStart === oldStart ? newValue.start : currentStart;
+	      var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
+	      this.handleChange([newStart, newEnd]);
 	    },
-	    hidden: function hidden(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+	        this.updateQueryHandler(this.$data.currentValue);
 	      }
 	    },
-	    total: function total(newVal, oldVal) {
+	    value: function value(newVal, oldVal) {
 	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    time: function time(newVal, oldVal) {
-	      if (!isEqual$b(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    defaultQuery: function defaultQuery(newVal, oldVal) {
-	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-	        this.$defaultQuery = newVal(this.selectedValue, this.$props);
-	        var query = extractQueryFromCustomQuery$6(this.$defaultQuery);
-	        var queryOptions = getOptionsForCustomQuery$6(this.$defaultQuery);
-
-	        if (queryOptions) {
-	          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-	        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false); // Update default query for RS API
-
-
-	        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-	        this.updateQuery({
-	          componentId: this.internalComponent,
-	          query: query
-	        });
-	      }
-	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-	        var componentId = this.$props.componentId;
-	        this.$customQuery = newVal(this.selectedValue, this.$props);
-	        var query = extractQueryFromCustomQuery$6(this.$customQuery);
-	        var queryOptions = getOptionsForCustomQuery$6(this.$customQuery);
-
-	        if (queryOptions) {
-	          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
-	        } else this.setQueryOptions(componentId, this.getAggsQuery(), false); // Update custom query for RS API
-
-
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-	        this.updateQuery({
-	          componentId: componentId,
-	          query: query
-	        });
+	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
 	      }
 	    }
 	  },
 	  render: function render() {
 	    var h = arguments[0];
 
-	    try {
-	      var dom = this.$scopedSlots["default"];
-	      var error = this.error,
-	          isLoading = this.isLoading,
-	          selectedValue = this.selectedValue;
-
-	      var propsToBePassed = _extends({
-	        error: error,
-	        loading: isLoading
-	      }, this.getData(), {
-	        value: selectedValue,
-	        setQuery: this.setQuery
-	      });
-
-	      return h("div", [dom(propsToBePassed)]);
-	    } catch (e) {
+	    if (!this.range || !this.currentValue) {
 	      return null;
 	    }
-	  },
-	  methods: {
-	    getAggsQuery: function getAggsQuery() {
-	      if (this.aggregationField) {
-	        return {
-	          aggs: getCompositeAggsQuery$5({
-	            props: this.$props,
-	            showTopHits: true,
-	            value: this.selectedValue
-	          }).aggs
-	        };
-	      }
 
-	      return {};
-	    },
-	    getData: function getData() {
-	      var hits = this.hits,
-	          aggregations = this.aggregations,
-	          aggregationData = this.aggregationData,
-	          promotedResults = this.promotedResults,
-	          rawData = this.rawData;
-	      var filteredResults = parseHits$1(hits);
+	    var _this$range = this.range,
+	        start = _this$range.start,
+	        end = _this$range.end;
+	    return h(Container, {
+	      "class": this.$props.className
+	    }, [this.$props.title && h(Title, {
+	      "class": getClassName$b(this.$props.innerClass, 'title')
+	    }, [this.$props.title]), h(vueNoSsr_common, [h(Slider, {
+	      "class": getClassName$b(this.$props.innerClass, 'slider')
+	    }, [h("vue-slider-component", {
+	      "ref": "slider",
+	      "attrs": {
+	        "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,
+	        "tooltip": "always"
+	      },
+	      "on": {
+	        "drag-end": this.handleSlider
+	      },
+	      "props": _extends({}, this.$props.sliderOptions)
+	    }), this.labels ? h("div", {
+	      "class": "label-container"
+	    }, [h("label", {
+	      "class": getClassName$b(this.$props.innerClass, 'label') || 'range-label-left'
+	    }, [this.labels.start]), h("label", {
+	      "class": getClassName$b(this.$props.innerClass, 'label') || 'range-label-right'
+	    }, [this.labels.end])]) : null])])]);
+	  }
+	};
 
-	      if (promotedResults.length) {
-	        var ids = promotedResults.map(function (item) {
-	          return item._id;
-	        }).filter(Boolean);
+	DynamicRangeSlider.defaultQuery = function (values, props) {
+	  var query = null;
 
-	        if (ids) {
-	          filteredResults = filteredResults.filter(function (item) {
-	            return !ids.includes(item._id);
-	          });
-	        }
+	  if (Array.isArray(values) && values.length) {
+	    var _range;
 
-	        filteredResults = [].concat(promotedResults, filteredResults);
+	    query = {
+	      range: (_range = {}, _range[props.dataField] = {
+	        gte: values[0],
+	        lte: values[1],
+	        boost: 2.0
+	      }, _range)
+	    };
+	  }
+
+	  if (query && props.nestedField) {
+	    return {
+	      query: {
+	        nested: {
+	          path: props.nestedField,
+	          query: query
+	        }
 	      }
+	    };
+	  }
 
-	      return {
-	        data: filteredResults,
-	        aggregationData: aggregationData,
-	        rawData: rawData,
-	        aggregations: aggregations,
-	        promotedData: promotedResults,
-	        resultStats: this.stats
-	      };
-	    }
-	  },
-	  computed: {
-	    stats: function stats() {
-	      return getResultStats$3(this);
-	    }
+	  return query;
+	};
+
+	DynamicRangeSlider.parseValue = function (value) {
+	  if (value) {
+	    return Array.isArray(value) ? value : [value.start, value.end];
 	  }
+
+	  return [];
 	};
 
-	ReactiveComponent.hasInternalComponent = function (props) {
-	  return !!props.defaultQuery;
+	DynamicRangeSlider.hasInternalComponent = function () {
+	  return true;
 	};
 
 	var mapStateToProps$a = function mapStateToProps(state, props) {
+	  var componentId = state.aggregations[props.componentId];
+	  var internalRange = state.aggregations[props.componentId + "__range__internal"];
+	  var options = componentId && componentId[props.dataField];
+	  var range = state.aggregations[props.componentId + "__range__internal"];
+
+	  if (props.nestedField) {
+	    options = options && componentId[props.dataField][props.nestedField] && componentId[props.dataField][props.nestedField].buckets ? componentId[props.dataField][props.nestedField].buckets : [];
+	    range = range && internalRange[props.nestedField].min ? {
+	      start: internalRange[props.nestedField].min.value,
+	      end: internalRange[props.nestedField].max.value
+	    } : null;
+	  } else {
+	    options = options && componentId[props.dataField].buckets ? componentId[props.dataField].buckets : [];
+	    range = range && internalRange.min ? {
+	      start: internalRange.min.value,
+	      end: internalRange.max.value
+	    } : null;
+	  }
+
 	  return {
-	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
-	    aggregationData: state.compositeAggregations[props.componentId] || [],
-	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
-	    rawData: state.rawData[props.componentId],
-	    error: state.error[props.componentId],
-	    isLoading: state.isLoading[props.componentId],
-	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-	    promotedResults: state.promotedResults[props.componentId] || [],
-	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
-	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
-	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
+	    options: options,
+	    range: range,
+	    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
 	    componentProps: state.props[props.componentId],
 	    enableAppbase: state.config.enableAppbase
 	  };
 	};
 
 	var mapDispatchtoProps$7 = {
-	  setQueryOptions: setQueryOptions$7,
+	  addComponent: addComponent$1,
+	  removeComponent: removeComponent$1,
 	  updateQuery: updateQuery$8,
+	  watchComponent: watchComponent$1,
+	  setQueryListener: setQueryListener$1,
+	  setQueryOptions: setQueryOptions$7,
+	  setComponentProps: setComponentProps$1,
 	  setCustomQuery: setCustomQuery$7,
-	  setDefaultQuery: setDefaultQuery$7
+	  updateComponentProps: updateComponentProps$2
 	};
-	var RcConnected$1 = ComponentWrapper$1(connect(mapStateToProps$a, mapDispatchtoProps$7)(ReactiveComponent), {
-	  componentType: constants_1$1.reactiveComponent
-	});
+	var RangeConnected = PreferencesConsumer(connect(mapStateToProps$a, mapDispatchtoProps$7)(DynamicRangeSlider));
 
-	ReactiveComponent.install = function (Vue) {
-	  Vue.component(ReactiveComponent.name, RcConnected$1);
+	DynamicRangeSlider.install = function (Vue) {
+	  Vue.component(DynamicRangeSlider.name, RangeConnected);
 	}; // Add componentType for SSR
 
 
-	ReactiveComponent.componentType = constants_1$1.reactiveComponent;
-
-	var setValue$2 = lib_5.setValue,
-	    clearValues = lib_5.clearValues,
-	    resetValuesToDefault = lib_5.resetValuesToDefault;
-	var getClassName$b = lib_8.getClassName,
-	    handleA11yAction$2 = lib_8.handleA11yAction;
-	var SelectedFilters = {
-	  name: 'SelectedFilters',
-	  props: {
-	    className: VueTypes.string.def(''),
-	    clearAllLabel: VueTypes.string.def('Clear All'),
-	    innerClass: types.style,
-	    showClearAll: VueTypes.bool.def(true),
-	    title: types.title,
-	    resetToDefault: VueTypes.bool.def(false),
-	    clearAllBlacklistComponents: VueTypes.array,
-	    resetToValues: VueTypes.object
-	  },
-	  inject: {
-	    theme: {
-	      from: 'theme_reactivesearch'
-	    }
-	  },
-	  render: function render() {
-	    var _this = this;
-
-	    var h = arguments[0];
-
-	    if (this.$scopedSlots["default"]) {
-	      return this.$scopedSlots["default"]({
-	        components: this.components,
-	        selectedValues: this.selectedValues,
-	        clearValues: this.clearValues,
-	        clearValue: this.clearValue,
-	        setValue: this.setValue,
-	        resetValuesToDefault: this.resetValuesToDefault
-	      });
-	    }
-
-	    var filtersToRender = this.renderFilters();
-	    var hasValues = !!filtersToRender.length;
-	    return h(Container, {
-	      "class": filters(this.theme) + " " + (this.$props.className || '')
-	    }, [this.$props.title && hasValues && h(Title, {
-	      "class": getClassName$b(this.$props.innerClass, 'title') || ''
-	    }, [this.$props.title]), filtersToRender, this.$props.showClearAll && hasValues && filtersToRender.length > 1 ? h(Button, {
-	      "class": getClassName$b(this.$props.innerClass, 'button') || '',
-	      "on": _extends({}, {
-	        click: this.clearValues,
-	        keypress: function keypress(event) {
-	          return handleA11yAction$2(event, function () {
-	            return _this.clearValues();
-	          });
-	        }
-	      }),
-	      "attrs": {
-	        "tabIndex": "0"
-	      }
-	    }, [this.$props.clearAllLabel]) : null]);
-	  },
-	  methods: {
-	    remove: function remove(component, value) {
-	      if (value === void 0) {
-	        value = null;
-	      }
-
-	      this.setValue(component, null);
-	      this.$emit('clear', component, value);
-	    },
-	    clearValues: function clearValues() {
-	      var resetToDefault = this.resetToDefault,
-	          resetToValues = this.resetToValues,
-	          clearAllBlacklistComponents = this.clearAllBlacklistComponents;
-
-	      if (resetToDefault) {
-	        this.resetValuesToDefault(clearAllBlacklistComponents);
-	      } else {
-	        this.clearValuesAction(resetToValues, clearAllBlacklistComponents);
-	      }
-
-	      this.$emit('clear', resetToValues);
-	    },
-	    clearValue: function clearValue(componentId) {
-	      var resetToDefault = this.resetToDefault,
-	          resetToValues = this.resetToValues;
-
-	      if (resetToDefault) {
-	        this.resetValuesToDefault(this.components.filter(function (component) {
-	          return component !== componentId;
-	        }));
-	      } else {
-	        this.setValue(componentId, (resetToValues == null ? void 0 : resetToValues[componentId]) || null);
-	      }
-
-	      this.$emit('clear', resetToValues == null ? void 0 : resetToValues[componentId]);
-	    },
-	    renderValue: function renderValue(value, isArray) {
-	      var _this2 = this;
-
-	      if (isArray && value.length) {
-	        var arrayToRender = value.map(function (item) {
-	          return _this2.renderValue(item);
-	        });
-	        return arrayToRender.join(', ');
-	      }
-
-	      if (value && typeof value === 'object') {
-	        // TODO: support for NestedList
-	        var label = (typeof value.label === 'string' ? value.label : value.value) || value.key || value.distance || null;
-
-	        if (value.location) {
-	          label = value.location + " - " + label;
-	        }
-
-	        return label;
-	      }
-
-	      return value;
-	    },
-	    renderFilterButton: function renderFilterButton(component, keyProp, handleRemove, label) {
-	      var h = this.$createElement;
-	      return h(Button, {
-	        "class": getClassName$b(this.$props.innerClass, 'button') || '',
-	        "key": keyProp,
-	        "on": _extends({}, {
-	          click: handleRemove,
-	          keypress: function keypress(event) {
-	            return handleA11yAction$2(event, handleRemove);
-	          }
-	        }),
-	        "attrs": {
-	          "tabIndex": "0"
-	        }
-	      }, [h("span", [label]), h("span", ["\u2715"])]);
-	    },
-	    renderFilters: function renderFilters() {
-	      var _this3 = this;
-
-	      var selectedValues = this.selectedValues;
-	      var filterComponents = Object.keys(selectedValues).filter(function (id) {
-	        return _this3.components.includes(id) && selectedValues[id].showFilter;
-	      });
-	      return filterComponents.map(function (component, index) {
-	        var _selectedValues$compo = selectedValues[component],
-	            label = _selectedValues$compo.label,
-	            value = _selectedValues$compo.value;
-	        var isArray = Array.isArray(value); // default behaviour
-
-	        if (label && (isArray && value.length || !isArray && value)) {
-	          var valueToRender = _this3.renderValue(value, isArray);
-
-	          return _this3.renderFilterButton(component, component + "-" + (index + 1), function () {
-	            return _this3.remove(component, value);
-	          }, selectedValues[component].label + ": " + decodeHtml(valueToRender));
-	        }
-
-	        return null;
-	      }).filter(Boolean);
-	    }
-	  },
-	  watch: {
-	    selectedValues: function selectedValues(newVal) {
-	      this.$emit('change', newVal);
-	    }
-	  }
-	};
-
-	var mapStateToProps$b = function mapStateToProps(state) {
-	  return {
-	    components: state.components,
-	    selectedValues: state.selectedValues
-	  };
-	};
-
-	var mapDispatchtoProps$8 = {
-	  clearValuesAction: clearValues,
-	  setValue: setValue$2,
-	  resetValuesToDefault: resetValuesToDefault
-	};
-	var RcConnected$2 = connect(mapStateToProps$b, mapDispatchtoProps$8)(SelectedFilters);
-
-	SelectedFilters.install = function (Vue) {
-	  Vue.component(SelectedFilters.name, RcConnected$2);
-	};
+	DynamicRangeSlider.componentType = constants_1$1.dynamicRangeSlider;
 
 	var updateQuery$9 = lib_5.updateQuery,
 	    setQueryOptions$8 = lib_5.setQueryOptions,
 	    setCustomQuery$8 = lib_5.setCustomQuery;
 	var isEqual$c = lib_8.isEqual,
-	    checkValueChange$7 = lib_8.checkValueChange,
+	    checkValueChange$8 = lib_8.checkValueChange,
 	    getClassName$c = lib_8.getClassName,
 	    getOptionsFromQuery$1 = lib_8.getOptionsFromQuery;
 	var SingleRange = {
@@ -26970,7 +27111,7 @@
 	        _this2.$emit('value-change', currentValue);
 	      };
 
-	      checkValueChange$7(props.componentId, currentValue, props.beforeValueChange, performUpdate);
+	      checkValueChange$8(props.componentId, currentValue, props.beforeValueChange, performUpdate);
 	    },
 	    updateQueryHandler: function updateQueryHandler(value, props) {
 	      var customQuery = props.customQuery;
@@ -27042,7 +27183,7 @@
 	  return query;
 	};
 
-	var mapStateToProps$c = function mapStateToProps(state, props) {
+	var mapStateToProps$b = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId],
@@ -27050,17 +27191,17 @@
 	  };
 	};
 
-	var mapDispatchtoProps$9 = {
+	var mapDispatchtoProps$8 = {
 	  updateQuery: updateQuery$9,
 	  setQueryOptions: setQueryOptions$8,
 	  setCustomQuery: setCustomQuery$8
 	};
-	var RangeConnected = ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$9)(SingleRange), {
+	var RangeConnected$1 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$b, mapDispatchtoProps$8)(SingleRange), {
 	  componentType: constants_1$1.singleRange
-	});
+	}));
 
 	SingleRange.install = function (Vue) {
-	  Vue.component(SingleRange.name, RangeConnected);
+	  Vue.component(SingleRange.name, RangeConnected$1);
 	}; // Add componentType for SSR
 
 
@@ -27070,7 +27211,7 @@
 	    setQueryOptions$9 = lib_5.setQueryOptions,
 	    setCustomQuery$9 = lib_5.setCustomQuery;
 	var isEqual$d = lib_8.isEqual,
-	    checkValueChange$8 = lib_8.checkValueChange,
+	    checkValueChange$9 = lib_8.checkValueChange,
 	    getClassName$d = lib_8.getClassName,
 	    getOptionsFromQuery$2 = lib_8.getOptionsFromQuery;
 	var MultiRange = {
@@ -27179,7 +27320,7 @@
 	        _this.$emit('value-change', Object.keys(selectedValues));
 	      };
 
-	      checkValueChange$8(props.componentId, currentValue, props.beforeValueChange, performUpdate);
+	      checkValueChange$9(props.componentId, currentValue, props.beforeValueChange, performUpdate);
 	    },
 	    updateQueryHandler: function updateQueryHandler(value, props) {
 	      var customQuery = props.customQuery;
@@ -27336,7 +27477,7 @@
 	  return query;
 	};
 
-	var mapStateToProps$d = function mapStateToProps(state, props) {
+	var mapStateToProps$c = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId],
@@ -27344,417 +27485,98 @@
 	  };
 	};
 
-	var mapDispatchtoProps$a = {
+	var mapDispatchtoProps$9 = {
 	  updateQuery: updateQuery$a,
 	  setQueryOptions: setQueryOptions$9,
 	  setCustomQuery: setCustomQuery$9
 	};
-	var RangeConnected$1 = ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$a)(MultiRange), {
+	var RangeConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$9)(MultiRange), {
 	  componentType: constants_1$1.multiRange
-	});
+	}));
 
 	MultiRange.install = function (Vue) {
-	  Vue.component(MultiRange.name, RangeConnected$1);
+	  Vue.component(MultiRange.name, RangeConnected$2);
 	}; // Add componentType for SSR
 
 
 	MultiRange.componentType = constants_1$1.multiRange;
 
-	var ResultCardTitle = {
-	  name: 'ResultCardTitle',
-	  render: function render() {
-	    var h = arguments[0];
-	    var children = this.$slots["default"];
-	    return h(Title, helper$1([{}, this.$props]), [children]);
-	  }
-	};
-
-	ResultCardTitle.install = function (Vue) {
-	  Vue.component(ResultCardTitle.name, ResultCardTitle);
-	};
-
-	var _excluded$1 = ["src"];
-	var ResultCardImage = {
-	  name: 'ResultCardImage',
+	var updateQuery$b = lib_5.updateQuery,
+	    setQueryOptions$a = lib_5.setQueryOptions,
+	    setCustomQuery$a = lib_5.setCustomQuery;
+	var checkValueChange$a = lib_8.checkValueChange,
+	    getClassName$e = lib_8.getClassName,
+	    getOptionsFromQuery$3 = lib_8.getOptionsFromQuery,
+	    isEqual$e = lib_8.isEqual;
+	var RangeSlider = {
+	  name: 'RangeSlider',
+	  components: getComponents(),
+	  inject: {
+	    theme: {
+	      from: 'theme_reactivesearch'
+	    }
+	  },
+	  data: function data() {
+	    var state = {
+	      currentValue: this.$props.range ? [this.$props.range.start, this.$props.range.end] : [],
+	      stats: []
+	    };
+	    return state;
+	  },
 	  props: {
-	    src: VueTypes.string.isRequired
+	    beforeValueChange: types.func,
+	    className: VueTypes.string.def(''),
+	    range: VueTypes.shape({
+	      start: VueTypes.integer.def(0),
+	      end: VueTypes.integer.def(10)
+	    }),
+	    rangeLabels: types.rangeLabels,
+	    componentId: types.stringRequired,
+	    customQuery: types.func,
+	    data: types.data,
+	    dataField: types.stringRequired,
+	    defaultValue: types.range,
+	    value: types.range,
+	    filterLabel: types.string,
+	    innerClass: types.style,
+	    react: types.react,
+	    showFilter: VueTypes.bool.def(true),
+	    showCheckbox: VueTypes.bool.def(true),
+	    title: types.title,
+	    URLParams: VueTypes.bool.def(false),
+	    sliderOptions: VueTypes.object.def({}),
+	    nestedField: types.string,
+	    index: VueTypes.string,
+	    endpoint: types.endpointConfig
 	  },
-	  render: function render() {
-	    var h = arguments[0];
-
-	    var _this$$props = this.$props,
-	        src = _this$$props.src,
-	        props = _objectWithoutPropertiesLoose(_this$$props, _excluded$1);
+	  methods: {
+	    handleSliderChange: function handleSliderChange(values) {
+	      var value = this.$props.value;
 
-	    return h(Image$1, helper$1([{
-	      "style": {
-	        backgroundImage: "url(" + src + ")"
+	      if (value === undefined) {
+	        this.handleChange(values);
+	      } else {
+	        this.$emit('change', {
+	          start: values[0],
+	          end: values[1]
+	        });
 	      }
-	    }, props]));
-	  }
-	};
+	    },
+	    handleSlider: function handleSlider() {
+	      var sliderValues = this.$refs.slider.getValue();
+	      this.handleSliderChange(sliderValues);
+	    },
+	    handleChange: function handleChange(currentValue, props) {
+	      var _this = this;
 
-	ResultCardImage.install = function (Vue) {
-	  Vue.component(ResultCardImage.name, ResultCardImage);
-	};
+	      if (props === void 0) {
+	        props = this.$props;
+	      }
 
-	var ResultCardDescription = {
-	  name: 'ResultCardDescription',
-	  functional: true,
-	  render: function render(_, _ref) {
-	    var props = _ref.props,
-	        children = _ref.children;
-	    var h = arguments[0];
-	    return h("article", helper$1([{}, props]), [children]);
-	  }
-	};
+	      var performUpdate = function performUpdate() {
+	        _this.currentValue = currentValue;
 
-	ResultCardDescription.install = function (Vue) {
-	  Vue.component(ResultCardDescription.name, ResultCardDescription);
-	};
-
-	var _excluded$2 = ["href", "target"];
-	var ResultCard = {
-	  name: 'ResultCard',
-	  components: {
-	    ResultCardTitle: ResultCardTitle,
-	    ResultCardImage: ResultCardImage,
-	    ResultCardDescription: ResultCardDescription
-	  },
-	  props: {
-	    target: VueTypes.string.def('_blank'),
-	    href: types.string
-	  },
-	  render: function render() {
-	    var h = arguments[0];
-	    var children = this.$slots["default"];
-
-	    var _this$$props = this.$props,
-	        href = _this$$props.href,
-	        target = _this$$props.target,
-	        rest = _objectWithoutPropertiesLoose(_this$$props, _excluded$2);
-
-	    return h(Card, helper$1([{
-	      "attrs": {
-	        "href": href,
-	        "target": target,
-	        "rel": target === '_blank' ? 'noopener noreferrer' : null
-	      }
-	    }, rest]), [children]);
-	  }
-	};
-
-	ResultCard.install = function (Vue) {
-	  Vue.component(ResultCard.name, ResultCard);
-	  Vue.component(ResultCardTitle.name, ResultCardTitle);
-	  Vue.component(ResultCardImage.name, ResultCardImage);
-	  Vue.component(ResultCardDescription.name, ResultCardDescription);
-	};
-
-	var ResultListContent = {
-	  name: 'ResultListContent',
-	  functional: true,
-	  render: function render(_, _ref) {
-	    var props = _ref.props,
-	        children = _ref.children;
-	    var h = arguments[0];
-	    return h("article", helper$1([{}, props]), [children]);
-	  }
-	};
-
-	ResultListContent.install = function (Vue) {
-	  Vue.component(ResultListContent.name, ResultListContent);
-	};
-
-	var ResultListDescription = {
-	  name: 'ResultListDescription',
-	  functional: true,
-	  render: function render(_, _ref) {
-	    var props = _ref.props,
-	        children = _ref.children;
-	    var h = arguments[0];
-	    return h("div", helper$1([{}, props]), [children]);
-	  }
-	};
-
-	ResultListDescription.install = function (Vue) {
-	  Vue.component(ResultListDescription.name, ResultListDescription);
-	};
-
-	var _excluded$3 = ["src", "small"];
-	var ResultListImage = {
-	  name: 'ResultListImage',
-	  props: {
-	    src: VueTypes.string.isRequired,
-	    small: VueTypes.bool.def(false)
-	  },
-	  render: function render() {
-	    var h = arguments[0];
-
-	    var _this$$props = this.$props,
-	        src = _this$$props.src,
-	        small = _this$$props.small,
-	        props = _objectWithoutPropertiesLoose(_this$$props, _excluded$3);
-
-	    return h(Image, helper$1([{
-	      "attrs": {
-	        "src": src,
-	        "small": small
-	      }
-	    }, props]));
-	  }
-	};
-
-	ResultListImage.install = function (Vue) {
-	  Vue.component(ResultListImage.name, ResultListImage);
-	};
-
-	var ResultListTitle = {
-	  name: 'ResultListTitle',
-	  render: function render() {
-	    var h = arguments[0];
-	    var children = this.$slots["default"];
-	    return h(Title, helper$1([{}, this.$props]), [children]);
-	  }
-	};
-
-	ResultListTitle.install = function (Vue) {
-	  Vue.component(ResultListTitle.name, ResultListTitle);
-	};
-
-	var _excluded$4 = ["href", "target"];
-	var ResultList = {
-	  name: 'ResultList',
-	  props: {
-	    href: types.string,
-	    target: VueTypes.string.def('_blank')
-	  },
-	  components: {
-	    ResultListContent: ResultListContent,
-	    ResultListDescription: ResultListDescription,
-	    ResultListImage: ResultListImage,
-	    ResultListTitle: ResultListTitle
-	  },
-	  data: function data() {
-	    this.__state = {
-	      hasImage: false,
-	      isSmall: false
-	    };
-	    return this.__state;
-	  },
-	  mounted: function mounted() {
-	    var children = this.$slots["default"];
-	    var ImageChild = children.find(function (o) {
-	      return o.componentOptions && o.componentOptions.tag === ResultListImage.name;
-	    });
-
-	    if (ImageChild && ImageChild.componentOptions && ImageChild.componentOptions.propsData) {
-	      this.hasImage = true;
-
-	      if (ImageChild.componentOptions.propsData.small) {
-	        this.isSmall = true;
-	      }
-	    }
-	  },
-	  render: function render() {
-	    var h = arguments[0];
-
-	    var _this$$props = this.$props,
-	        href = _this$$props.href,
-	        target = _this$$props.target,
-	        props = _objectWithoutPropertiesLoose(_this$$props, _excluded$4);
-
-	    var hasImage = this.hasImage,
-	        isSmall = this.isSmall;
-	    var children = this.$slots["default"];
-	    return h(ListItem, helper$1([{
-	      "attrs": {
-	        "href": href,
-	        "image": hasImage,
-	        "small": isSmall,
-	        "target": target,
-	        "rel": target === '_blank' ? 'noopener noreferrer' : null
-	      }
-	    }, props]), [children]);
-	  }
-	};
-
-	ResultList.install = function (Vue) {
-	  Vue.component(ResultList.name, ResultList);
-	  Vue.component(ResultListContent.name, ResultListContent);
-	  Vue.component(ResultListDescription.name, ResultListDescription);
-	  Vue.component(ResultListImage.name, ResultListImage);
-	  Vue.component(ResultListTitle.name, ResultListTitle);
-	};
-
-	/*!
-	 * vue-no-ssr v1.1.1
-	 * (c) 2018-present egoist <0x142857@gmail.com>
-	 * Released under the MIT License.
-	 */
-
-	var index$2 = {
-	  name: 'NoSsr',
-	  functional: true,
-	  props: {
-	    placeholder: String,
-	    placeholderTag: {
-	      type: String,
-	      "default": 'div'
-	    }
-	  },
-	  render: function render(h, ref) {
-	    var parent = ref.parent;
-	    var slots = ref.slots;
-	    var props = ref.props;
-	    var ref$1 = slots();
-	    var defaultSlot = ref$1["default"];
-	    if (defaultSlot === void 0) defaultSlot = [];
-	    var placeholderSlot = ref$1.placeholder;
-
-	    if (parent._isMounted) {
-	      return defaultSlot;
-	    }
-
-	    parent.$once('hook:mounted', function () {
-	      parent.$forceUpdate();
-	    });
-
-	    if (props.placeholderTag && (props.placeholder || placeholderSlot)) {
-	      return h(props.placeholderTag, {
-	        "class": ['no-ssr-placeholder']
-	      }, props.placeholder || placeholderSlot);
-	    } // Return a placeholder element for each child in the default slot
-	    // Or if no children return a single placeholder
-
-
-	    return defaultSlot.length > 0 ? defaultSlot.map(function () {
-	      return h(false);
-	    }) : h(false);
-	  }
-	};
-	var vueNoSsr_common = index$2;
-
-	var _templateObject$o;
-	var Slider = index$1('div')(_templateObject$o || (_templateObject$o = _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@3.2.15/dist/vue-slider-component.umd.min.js");
-						s.onload = function(){
-							var VueSlider = global['vue-slider-component'];
-							components['vue-slider-component'] = VueSlider;
-						}
-						document.head.appendChild(s);
-					` in rollup umd build process with some script.
-	 */
-	// eslint-disable-next-line
-
-	var getComponents = function getComponents() {
-	  var components = {
-	    NoSSR: vueNoSsr_common
-	  };
-
-	  {
-	    try {
-	      // in older versions of nuxt, it's process.BROWSER_BUILD
-	      // eslint-disable-next-line
-	      
-						var s = document.createElement("script");
-						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;
-						};
-						document.head.appendChild(s);
-					
-	    } catch (e) {
-	      console.error('Unable to load vue-slider', e);
-	    }
-	  }
-
-	  return components;
-	};
-
-	var updateQuery$b = lib_5.updateQuery,
-	    setQueryOptions$a = lib_5.setQueryOptions,
-	    setCustomQuery$a = lib_5.setCustomQuery;
-	var checkValueChange$9 = lib_8.checkValueChange,
-	    getClassName$e = lib_8.getClassName,
-	    getOptionsFromQuery$3 = lib_8.getOptionsFromQuery,
-	    isEqual$e = lib_8.isEqual;
-	var RangeSlider = {
-	  name: 'RangeSlider',
-	  components: getComponents(),
-	  inject: {
-	    theme: {
-	      from: 'theme_reactivesearch'
-	    }
-	  },
-	  data: function data() {
-	    var state = {
-	      currentValue: this.$props.range ? [this.$props.range.start, this.$props.range.end] : [],
-	      stats: []
-	    };
-	    return state;
-	  },
-	  props: {
-	    beforeValueChange: types.func,
-	    className: VueTypes.string.def(''),
-	    range: VueTypes.shape({
-	      start: VueTypes.integer.def(0),
-	      end: VueTypes.integer.def(10)
-	    }),
-	    rangeLabels: types.rangeLabels,
-	    componentId: types.stringRequired,
-	    customQuery: types.func,
-	    data: types.data,
-	    dataField: types.stringRequired,
-	    defaultValue: types.range,
-	    value: types.range,
-	    filterLabel: types.string,
-	    innerClass: types.style,
-	    react: types.react,
-	    showFilter: VueTypes.bool.def(true),
-	    showCheckbox: VueTypes.bool.def(true),
-	    title: types.title,
-	    URLParams: VueTypes.bool.def(false),
-	    sliderOptions: VueTypes.object.def({}),
-	    nestedField: types.string,
-	    index: VueTypes.string,
-	    endpoint: types.endpointConfig
-	  },
-	  methods: {
-	    handleSliderChange: function handleSliderChange(values) {
-	      var value = this.$props.value;
-
-	      if (value === undefined) {
-	        this.handleChange(values);
-	      } else {
-	        this.$emit('change', {
-	          start: values[0],
-	          end: values[1]
-	        });
-	      }
-	    },
-	    handleSlider: function handleSlider() {
-	      var sliderValues = this.$refs.slider.getValue();
-	      this.handleSliderChange(sliderValues);
-	    },
-	    handleChange: function handleChange(currentValue, props) {
-	      var _this = this;
-
-	      if (props === void 0) {
-	        props = this.$props;
-	      }
-
-	      var performUpdate = function performUpdate() {
-	        _this.currentValue = currentValue;
-
-	        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
+	        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
 
 	        _this.$emit('valueChange', {
 	          start: currentValue[0],
@@ -27767,7 +27589,7 @@
 	        });
 	      };
 
-	      checkValueChange$9(props.componentId, {
+	      checkValueChange$a(props.componentId, {
 	        start: currentValue[0],
 	        end: currentValue[1]
 	      }, props.beforeValueChange, performUpdate);
@@ -27929,7 +27751,7 @@
 	  return [];
 	};
 
-	var mapStateToProps$e = function mapStateToProps(state, props) {
+	var mapStateToProps$d = function mapStateToProps(state, props) {
 	  return {
 	    options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
 	    : [],
@@ -27939,137 +27761,107 @@
 	  };
 	};
 
-	var mapDispatchtoProps$b = {
+	var mapDispatchtoProps$a = {
 	  updateQuery: updateQuery$b,
 	  setQueryOptions: setQueryOptions$a,
 	  setCustomQuery: setCustomQuery$a
 	};
-	var RangeConnected$2 = ComponentWrapper$1(connect(mapStateToProps$e, mapDispatchtoProps$b)(RangeSlider), {
+	var RangeConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$a)(RangeSlider), {
 	  componentType: constants_1$1.rangeSlider
-	});
+	}));
 
 	RangeSlider.install = function (Vue) {
-	  Vue.component(RangeSlider.name, RangeConnected$2);
+	  Vue.component(RangeSlider.name, RangeConnected$3);
 	}; // Add componentType for SSR
 
 
 	RangeSlider.componentType = constants_1$1.rangeSlider;
 
-	var addComponent$1 = lib_5.addComponent,
-	    removeComponent$1 = lib_5.removeComponent,
-	    watchComponent$1 = lib_5.watchComponent,
-	    updateQuery$c = lib_5.updateQuery,
-	    setQueryListener$1 = lib_5.setQueryListener,
-	    setQueryOptions$b = lib_5.setQueryOptions,
-	    setComponentProps$1 = lib_5.setComponentProps,
-	    setCustomQuery$b = lib_5.setCustomQuery,
-	    updateComponentProps$2 = lib_5.updateComponentProps;
-	var checkValueChange$a = lib_8.checkValueChange,
-	    getClassName$f = lib_8.getClassName,
-	    isEqual$f = lib_8.isEqual,
-	    checkSomePropChange$1 = lib_8.checkSomePropChange,
-	    extractQueryFromCustomQuery$7 = lib_8.extractQueryFromCustomQuery,
-	    getOptionsForCustomQuery$7 = lib_8.getOptionsForCustomQuery;
-	var DynamicRangeSlider = {
-	  name: 'DynamicRangeSlider',
-	  components: getComponents(),
+	var _templateObject$p, _templateObject2$b;
+
+	var alert = function alert(_ref) {
+	  var theme = _ref.theme;
+	  return css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
+	};
+
+	var Content = index$1('div')(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
+	  return props.alert && alert;
+	});
+
+	var getClassName$f = lib_8.getClassName,
+	    isEqual$f = lib_8.isEqual;
+	var RangeInput = {
+	  name: 'RangeInput',
+	  components: {
+	    RangeSlider: RangeConnected$3
+	  },
+	  inject: {
+	    theme: {
+	      from: 'theme_reactivesearch'
+	    }
+	  },
+	  data: function data() {
+	    var state = {
+	      currentValue: {
+	        start: this.$props.range ? this.$props.range.start : 0,
+	        end: this.$props.range ? this.$props.range.end : 10
+	      },
+	      isStartValid: true,
+	      isEndValid: true
+	    };
+	    return state;
+	  },
 	  props: {
-	    beforeValueChange: types.func,
-	    className: VueTypes.string.def(''),
-	    rangeLabels: types.func,
+	    className: {
+	      types: types.string,
+	      "default": ''
+	    },
+	    defaultValue: types.range,
+	    validateRange: types.func,
+	    value: types.range,
+	    dataField: types.stringRequired,
+	    innerClass: types.style,
+	    range: {
+	      types: types.range,
+	      "default": function _default() {
+	        return {
+	          start: 0,
+	          end: 10
+	        };
+	      }
+	    },
+	    rangeLabels: types.rangeLabels,
+	    stepValue: types.number,
+	    componentStyle: types.style,
 	    componentId: types.stringRequired,
+	    includeNullValues: VueTypes.bool,
+	    beforeValueChange: types.func,
 	    customQuery: types.func,
 	    data: types.data,
-	    dataField: types.stringRequired,
-	    defaultValue: types.func,
 	    filterLabel: types.string,
-	    innerClass: types.style,
 	    react: types.react,
 	    showFilter: VueTypes.bool.def(true),
-	    destroyOnUnmount: VueTypes.bool,
 	    showCheckbox: VueTypes.bool.def(true),
 	    title: types.title,
 	    URLParams: VueTypes.bool.def(false),
 	    sliderOptions: VueTypes.object.def({}),
 	    nestedField: types.string,
-	    index: VueTypes.string,
-	    value: types.range,
 	    endpoint: types.endpointConfig
 	  },
-	  data: function data() {
-	    this.internalRangeComponent = this.$props.componentId + "__range__internal";
-	    return {
-	      currentValue: null,
-	      stats: []
-	    };
-	  },
-	  created: function created() {
-	    var _this = this;
+	  methods: {
+	    shouldUpdate: function shouldUpdate(value) {
+	      var validateRange = this.$props.validateRange;
 
-	    var onQueryChange = function onQueryChange() {
-	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-	        args[_key] = arguments[_key];
+	      if (validateRange && value) {
+	        return validateRange([value.start, value.end]);
 	      }
 
-	      _this.$emit.apply(_this, ['queryChange'].concat(args));
-
-	      _this.$emit.apply(_this, ['query-change'].concat(args));
-	    };
-
-	    this.setQueryListener(this.$props.componentId, onQueryChange, null); // Update props in store
-
-	    this.setComponentProps(this.componentId, this.$props, constants_1$1.dynamicRangeSlider);
-	    this.setComponentProps(this.internalRangeComponent, this.$props, constants_1$1.dynamicRangeSlider);
-
-	    if (!this.enableAppbase && this.$props.index) {
-	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-	    } // Set custom query in store
-
-
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-	  },
-	  mounted: function mounted() {
-	    this.setReact();
-	  },
-	  beforeMount: function beforeMount() {
-	    var components = [];
-
-	    if (this.$$store) {
-	      var _this$$$store$getStat = this.$$store.getState();
-
-	      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);
-
-	      if (Array.isArray(this.selectedValue)) {
-	        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
-
+	      if (value) {
+	        return value.start <= value.end;
+	      }
 
-	      this.updateRangeQueryOptions();
-	    }
-	  },
-	  beforeUpdate: function beforeUpdate() {
-	    if (!this.currentValue) {
-	      this.setDefaultValue(this.range);
-	    }
-	  },
-	  beforeDestroy: function beforeDestroy() {
-	    if (this.destroyOnUnmount) {
-	      this.removeComponent(this.$props.componentId);
-	      this.removeComponent(this.internalRangeComponent);
-	    }
-	  },
-	  methods: {
+	      return false;
+	    },
 	    isControlled: function isControlled() {
 	      if (this.$props.value && this.$listeners) {
 	        return true;
@@ -28077,331 +27869,1040 @@
 
 	      return false;
 	    },
-	    setDefaultValue: function setDefaultValue(_ref) {
-	      var start = _ref.start,
-	          end = _ref.end;
-
-	      if (this.$props.defaultValue) {
-	        var _this$$props$defaultV = this.$props.defaultValue(start, end),
-	            defaultStart = _this$$props$defaultV.start,
-	            defaultEnd = _this$$props$defaultV.end;
+	    handleChange: function handleChange(value, event) {
+	      var currentValue = value;
 
-	        this.handleChange([defaultStart, defaultEnd]);
-	      } else if (this.isControlled()) {
-	        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
-	      } else {
-	        this.currentValue = [start, end];
+	      if (this.shouldUpdate(value) && !isEqual$f(value, this.currentValue)) {
+	        switch (event) {
+	          case 'change':
+	            if (!value) {
+	              currentValue = {
+	                start: this.$props.range ? this.$props.range.start : 0,
+	                end: this.$props.range ? this.$props.range.end : 10
+	              };
+	            }
+
+	            this.$data.currentValue = _extends({}, currentValue);
+	            this.$emit('change', this.$data.currentValue);
+	            break;
+
+	          case 'value-change':
+	            this.$emit('valueChange', this.$data.currentValue);
+	            this.$emit('value-change', this.$data.currentValue);
+	            break;
+
+	          default:
+	            this.$data.currentValue = _extends({}, currentValue);
+	            break;
+	        }
 	      }
 	    },
-	    setReact: function setReact() {
-	      if (this.$props.react) {
-	        this.watchComponent(this.internalRangeComponent, this.$props.react);
-	        this.watchComponent(this.$props.componentId, this.$props.react);
-	      } else {
-	        this.watchComponent(this.internalRangeComponent, {});
-	        this.watchComponent(this.$props.componentId, {});
+	    handleOnChange: function handleOnChange(value) {
+	      this.handleChange(value || this.$props.range, 'change');
+	    },
+	    handleValueChange: function handleValueChange(value) {
+	      this.handleChange(value, 'value-change');
+	    },
+	    handleInputChange: function handleInputChange(e) {
+	      var _e$target = e.target,
+	          name = _e$target.name,
+	          value = _e$target.value;
+
+	      if (Number.isNaN(value)) {
+	        if (name === 'start') {
+	          this.$data.isStartValid = false;
+	        } else {
+	          this.$data.isEndValid = false;
+	        }
+	      } else if (name === 'start' && !this.$data.isStartValid) {
+	        this.$data.isStartValid = true;
+	      } else if (name === 'end' && !this.$data.isEndValid) {
+	        this.$data.isEndValid = true;
+	      }
+
+	      if (this.$data.isStartValid && this.$data.isEndValid) {
+	        if (name === 'start') {
+	          this.handleChange({
+	            start: Number(value),
+	            end: this.$data.currentValue.end
+	          }, 'change');
+	        } else {
+	          this.handleChange({
+	            start: this.$data.currentValue.start,
+	            end: Number(value)
+	          }, 'change');
+	        }
+	      }
+	    }
+	  },
+	  watch: {
+	    defaultValue: function defaultValue(newVal, oldVal) {
+	      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
+	        this.handleChange(newVal);
 	      }
 	    },
-	    rangeQuery: function rangeQuery() {
-	      return {
-	        min: {
-	          min: {
-	            field: this.$props.dataField
-	          }
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$f(newVal, oldVal)) {
+	        if (this.isControlled()) {
+	          this.handleChange(newVal, 'change');
+	        }
+	      }
+	    }
+	  },
+	  created: function created() {
+	    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];
+	    var _this$$props = this.$props,
+	        className = _this$$props.className,
+	        dataField = _this$$props.dataField,
+	        range = _this$$props.range,
+	        rangeLabels = _this$$props.rangeLabels,
+	        componentId = _this$$props.componentId,
+	        innerClass = _this$$props.innerClass,
+	        stepValue = _this$$props.stepValue,
+	        componentStyle = _this$$props.componentStyle,
+	        themePreset = _this$$props.themePreset,
+	        includeNullValues = _this$$props.includeNullValues,
+	        beforeValueChange = _this$$props.beforeValueChange,
+	        customQuery = _this$$props.customQuery,
+	        data = _this$$props.data,
+	        filterLabel = _this$$props.filterLabel,
+	        react = _this$$props.react,
+	        showFilter = _this$$props.showFilter,
+	        showCheckbox = _this$$props.showCheckbox,
+	        title = _this$$props.title,
+	        URLParams = _this$$props.URLParams,
+	        sliderOptions = _this$$props.sliderOptions,
+	        nestedField = _this$$props.nestedField;
+	    return h(Container, {
+	      "style": componentStyle,
+	      "class": className
+	    }, [h(RangeConnected$3, {
+	      "attrs": {
+	        "componentId": componentId,
+	        "value": {
+	          start: this.currentValue.start,
+	          end: this.currentValue.end
 	        },
-	        max: {
-	          max: {
-	            field: this.$props.dataField
-	          }
+	        "range": range,
+	        "dataField": dataField,
+	        "rangeLabels": rangeLabels,
+	        "includeNullValues": includeNullValues,
+	        "beforeValueChange": beforeValueChange,
+	        "customQuery": customQuery,
+	        "data": data,
+	        "filterLabel": filterLabel,
+	        "react": react,
+	        "showFilter": showFilter,
+	        "showCheckbox": showCheckbox,
+	        "title": title,
+	        "uRLParams": URLParams,
+	        "sliderOptions": sliderOptions,
+	        "nestedField": nestedField
+	      },
+	      "on": {
+	        "change": this.handleOnChange,
+	        "value-change": this.handleValueChange
+	      }
+	    }), h(Flex, {
+	      "class": getClassName$f(innerClass, 'input-container') || ''
+	    }, [h(Flex, {
+	      "attrs": {
+	        "direction": "column",
+	        "flex": 2
+	      }
+	    }, [h(Input, {
+	      "key": componentId + "-start-value",
+	      "attrs": {
+	        "name": "start",
+	        "type": "number",
+	        "step": stepValue,
+	        "themePreset": themePreset,
+	        "aria-label": componentId + "-start-input",
+	        "min": this.$props.range ? this.$props.range.start : 0,
+	        "alert": !this.isStartValid
+	      },
+	      "on": {
+	        "change": this.handleInputChange
+	      },
+	      "class": getClassName$f(innerClass, 'input') || '',
+	      "domProps": _extends({}, {
+	        value: this.currentValue.start
+	      })
+	    }), !this.isStartValid && h(Content, {
+	      "attrs": {
+	        "alert": true
+	      }
+	    }, ["Input range is invalid"])]), h(Flex, {
+	      "attrs": {
+	        "justifyContent": "center",
+	        "alignItems": "center",
+	        "flex": 1
+	      }
+	    }, ["-"]), h(Flex, {
+	      "attrs": {
+	        "direction": "column",
+	        "flex": 2
+	      }
+	    }, [h(Input, {
+	      "key": componentId + "-end-value",
+	      "attrs": {
+	        "name": "end",
+	        "type": "number",
+	        "step": stepValue,
+	        "themePreset": themePreset,
+	        "aria-label": componentId + "-end-input",
+	        "max": this.$props.range ? this.$props.range.end : 10,
+	        "alert": !this.isEndValid
+	      },
+	      "on": {
+	        "change": this.handleInputChange
+	      },
+	      "class": getClassName$f(innerClass, 'input') || '',
+	      "domProps": _extends({}, {
+	        value: this.currentValue.end
+	      })
+	    }), !this.isEndValid && h(Content, {
+	      "attrs": {
+	        "alert": true
+	      }
+	    }, ["Input range is invalid"])])])]);
+	  }
+	};
+
+	var mapStateToProps$e = function mapStateToProps(state) {
+	  return {
+	    themePreset: state.config.themePreset
+	  };
+	};
+
+	var RangeConnected$4 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$e, {})(RangeInput), {
+	  componentType: constants_1$1.rangeInput
+	}));
+
+	RangeInput.install = function (Vue) {
+	  Vue.component(RangeInput.name, RangeConnected$4);
+	}; // Add componentType for SSR
+
+
+	RangeInput.componentType = constants_1$1.rangeInput;
+
+	var _excluded = ["options"];
+	var updateQuery$c = lib_5.updateQuery,
+	    setQueryOptions$b = lib_5.setQueryOptions,
+	    setCustomQuery$b = lib_5.setCustomQuery,
+	    setDefaultQuery$7 = lib_5.setDefaultQuery;
+	var parseHits$1 = lib_8.parseHits,
+	    isEqual$g = lib_8.isEqual,
+	    getCompositeAggsQuery$5 = lib_8.getCompositeAggsQuery,
+	    getResultStats$3 = lib_8.getResultStats,
+	    extractQueryFromCustomQuery$7 = lib_8.extractQueryFromCustomQuery,
+	    getOptionsForCustomQuery$7 = lib_8.getOptionsForCustomQuery;
+	var ReactiveComponent = {
+	  name: 'ReactiveComponent',
+	  props: {
+	    componentId: types.stringRequired,
+	    aggregationField: types.string,
+	    aggregationSize: VueTypes.number,
+	    size: VueTypes.number,
+	    defaultQuery: types.func,
+	    customQuery: types.func,
+	    filterLabel: types.string,
+	    react: types.react,
+	    showFilter: VueTypes.bool.def(true),
+	    URLParams: VueTypes.bool.def(false),
+	    distinctField: types.string,
+	    distinctFieldConfig: types.props,
+	    index: VueTypes.string,
+	    endpoint: types.endpointConfig
+	  },
+	  created: function created() {
+	    var _this = this;
+
+	    var props = this.$props;
+	    this.internalComponent = null;
+	    this.$defaultQuery = null; // Set custom query in store
+
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+	    var customQuery = props.customQuery,
+	        componentId = props.componentId,
+	        filterLabel = props.filterLabel,
+	        showFilter = props.showFilter,
+	        URLParams = props.URLParams,
+	        distinctField = props.distinctField,
+	        distinctFieldConfig = props.distinctFieldConfig,
+	        index = props.index;
+
+	    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+	      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
+	    }
+
+	    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    }
+
+	    if (!this.enableAppbase && index) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    }
+
+	    if (customQuery) {
+	      var calcCustomQuery = customQuery(this.selectedValue, props);
+	      var query = extractQueryFromCustomQuery$7(calcCustomQuery);
+	      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery$7(calcCustomQuery) : null;
+
+	      if (customQueryOptions) {
+	        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
+	      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+
+	      this.updateQuery({
+	        componentId: componentId,
+	        query: query,
+	        value: this.selectedValue || null,
+	        label: filterLabel,
+	        showFilter: showFilter,
+	        URLParams: URLParams
+	      });
+	    }
+
+	    this.setQuery = function (_ref) {
+	      var options = _ref.options,
+	          obj = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+	      var queryToBeSet = obj.query; // when enableAppbase is true, Backend throws error because of repeated query in request body
+
+	      if (queryToBeSet && queryToBeSet.query) {
+	        queryToBeSet = queryToBeSet.query;
+	      }
+
+	      var customQueryCalc = _extends({}, options, {
+	        query: queryToBeSet
+	      });
+
+	      var rsAPIQuery = customQueryCalc; // handle stored queries
+
+	      if (queryToBeSet && queryToBeSet.id) {
+	        rsAPIQuery = queryToBeSet;
+	      } // Update customQuery field for RS API
+
+
+	      _this.setCustomQuery(props.componentId, rsAPIQuery);
+
+	      if (options) {
+	        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
+	      }
+
+	      _this.updateQuery(_extends({}, obj, {
+	        query: customQueryCalc.query,
+	        componentId: props.componentId,
+	        label: props.filterLabel,
+	        showFilter: props.showFilter,
+	        URLParams: props.URLParams
+	      }));
+	    };
+
+	    if (props.defaultQuery) {
+	      this.internalComponent = props.componentId + "__internal";
+	    }
+
+	    if (this.internalComponent && this.$props.defaultQuery) {
+	      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+	      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
+
+	      var _query = extractQueryFromCustomQuery$7(this.$defaultQuery);
+
+	      var queryOptions = getOptionsForCustomQuery$7(this.$defaultQuery);
+
+	      if (queryOptions) {
+	        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
+	      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+
+	      this.updateQuery({
+	        componentId: this.internalComponent,
+	        query: _query
+	      });
+	    }
+	  },
+	  watch: {
+	    hits: function hits(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    rawData: function rawData(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    aggregations: function aggregations(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    aggregationData: function aggregationData(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    promotedResults: function promotedResults(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    hidden: function hidden(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    total: function total(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    time: function time(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    defaultQuery: function defaultQuery(newVal, oldVal) {
+	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+	        this.$defaultQuery = newVal(this.selectedValue, this.$props);
+	        var query = extractQueryFromCustomQuery$7(this.$defaultQuery);
+	        var queryOptions = getOptionsForCustomQuery$7(this.$defaultQuery);
+
+	        if (queryOptions) {
+	          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
+	        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false); // Update default query for RS API
+
+
+	        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+	        this.updateQuery({
+	          componentId: this.internalComponent,
+	          query: query
+	        });
+	      }
+	    },
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+	        var componentId = this.$props.componentId;
+	        this.$customQuery = newVal(this.selectedValue, this.$props);
+	        var query = extractQueryFromCustomQuery$7(this.$customQuery);
+	        var queryOptions = getOptionsForCustomQuery$7(this.$customQuery);
+
+	        if (queryOptions) {
+	          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
+	        } else this.setQueryOptions(componentId, this.getAggsQuery(), false); // Update custom query for RS API
+
+
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+	        this.updateQuery({
+	          componentId: componentId,
+	          query: query
+	        });
+	      }
+	    }
+	  },
+	  render: function render() {
+	    var h = arguments[0];
+
+	    try {
+	      var dom = this.$scopedSlots["default"];
+	      var error = this.error,
+	          isLoading = this.isLoading,
+	          selectedValue = this.selectedValue;
+
+	      var propsToBePassed = _extends({
+	        error: error,
+	        loading: isLoading
+	      }, this.getData(), {
+	        value: selectedValue,
+	        setQuery: this.setQuery
+	      });
+
+	      return h("div", [dom(propsToBePassed)]);
+	    } catch (e) {
+	      return null;
+	    }
+	  },
+	  methods: {
+	    getAggsQuery: function getAggsQuery() {
+	      if (this.aggregationField) {
+	        return {
+	          aggs: getCompositeAggsQuery$5({
+	            props: this.$props,
+	            showTopHits: true,
+	            value: this.selectedValue
+	          }).aggs
+	        };
+	      }
+
+	      return {};
+	    },
+	    getData: function getData() {
+	      var hits = this.hits,
+	          aggregations = this.aggregations,
+	          aggregationData = this.aggregationData,
+	          promotedResults = this.promotedResults,
+	          rawData = this.rawData;
+	      var filteredResults = parseHits$1(hits);
+
+	      if (promotedResults.length) {
+	        var ids = promotedResults.map(function (item) {
+	          return item._id;
+	        }).filter(Boolean);
+
+	        if (ids) {
+	          filteredResults = filteredResults.filter(function (item) {
+	            return !ids.includes(item._id);
+	          });
 	        }
+
+	        filteredResults = [].concat(promotedResults, filteredResults);
+	      }
+
+	      return {
+	        data: filteredResults,
+	        aggregationData: aggregationData,
+	        rawData: rawData,
+	        aggregations: aggregations,
+	        promotedData: promotedResults,
+	        resultStats: this.stats
 	      };
-	    },
-	    updateRangeQueryOptions: function updateRangeQueryOptions() {
-	      var aggs = {};
+	    }
+	  },
+	  computed: {
+	    stats: function stats() {
+	      return getResultStats$3(this);
+	    }
+	  }
+	};
+
+	ReactiveComponent.hasInternalComponent = function (props) {
+	  return !!props.defaultQuery;
+	};
+
+	var mapStateToProps$f = function mapStateToProps(state, props) {
+	  return {
+	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
+	    aggregationData: state.compositeAggregations[props.componentId] || [],
+	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
+	    rawData: state.rawData[props.componentId],
+	    error: state.error[props.componentId],
+	    isLoading: state.isLoading[props.componentId],
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    promotedResults: state.promotedResults[props.componentId] || [],
+	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
+	    componentProps: state.props[props.componentId],
+	    enableAppbase: state.config.enableAppbase
+	  };
+	};
+
+	var mapDispatchtoProps$b = {
+	  setQueryOptions: setQueryOptions$b,
+	  updateQuery: updateQuery$c,
+	  setCustomQuery: setCustomQuery$b,
+	  setDefaultQuery: setDefaultQuery$7
+	};
+	var ConnectedComponent = ComponentWrapper$1(connect(mapStateToProps$f, mapDispatchtoProps$b)(ReactiveComponent), {
+	  componentType: constants_1$1.reactiveComponent
+	});
+	var RcConnected = PreferencesConsumer({
+	  name: 'RcConnected',
+	  render: function render(h) {
+	    var component = ConnectedComponent;
+
+	    switch (this.$attrs.componentType) {
+	      case constants_1$1.reactiveList:
+	        component = RLConnected;
+	        break;
+
+	      case constants_1$1.dataSearch:
+	        component = DSConnected;
+	        break;
+
+	      case constants_1$1.searchBox:
+	        component = SBConnected;
+	        break;
+	      // list components
+
+	      case constants_1$1.singleList:
+	        component = ListConnected;
+	        break;
+
+	      case constants_1$1.multiList:
+	        component = ListConnected$1;
+	        break;
+
+	      case constants_1$1.singleDropdownList:
+	        component = ListConnected$2;
+	        break;
+
+	      case constants_1$1.multiDropdownList:
+	        component = ListConnected$3;
+	        break;
+	      // basic components
+
+	      case constants_1$1.toggleButton:
+	        component = ListConnected$4;
+	        break;
+	      // range components
+
+	      case constants_1$1.dynamicRangeSlider:
+	        component = RangeConnected;
+	        break;
+
+	      case constants_1$1.singleRange:
+	        component = RangeConnected$1;
+	        break;
+
+	      case constants_1$1.multiRange:
+	        component = RangeConnected$2;
+	        break;
+
+	      case constants_1$1.rangeSlider:
+	        component = RangeConnected$3;
+	        break;
+
+	      case constants_1$1.rangeInput:
+	        component = RangeConnected$4;
+	        break;
+	    }
+
+	    return h(component, {
+	      attrs: this.$attrs,
+	      on: this.$listeners,
+	      scopedSlots: this.$scopedSlots,
+	      slots: this.$slots
+	    });
+	  }
+	});
+
+	ReactiveComponent.install = function (Vue) {
+	  Vue.component(ReactiveComponent.name, RcConnected);
+	}; // Add componentType for SSR
+
+
+	ReactiveComponent.componentType = constants_1$1.reactiveComponent;
+
+	var setValue$2 = lib_5.setValue,
+	    clearValues = lib_5.clearValues,
+	    resetValuesToDefault = lib_5.resetValuesToDefault;
+	var getClassName$g = lib_8.getClassName,
+	    handleA11yAction$2 = lib_8.handleA11yAction;
+	var SelectedFilters = {
+	  name: 'SelectedFilters',
+	  props: {
+	    className: VueTypes.string.def(''),
+	    clearAllLabel: VueTypes.string.def('Clear All'),
+	    innerClass: types.style,
+	    showClearAll: VueTypes.bool.def(true),
+	    title: types.title,
+	    resetToDefault: VueTypes.bool.def(false),
+	    clearAllBlacklistComponents: VueTypes.array,
+	    resetToValues: VueTypes.object
+	  },
+	  inject: {
+	    theme: {
+	      from: 'theme_reactivesearch'
+	    }
+	  },
+	  render: function render() {
+	    var _this = this;
+
+	    var h = arguments[0];
+
+	    if (this.$scopedSlots["default"]) {
+	      return this.$scopedSlots["default"]({
+	        components: this.components,
+	        selectedValues: this.selectedValues,
+	        clearValues: this.clearValues,
+	        clearValue: this.clearValue,
+	        setValue: this.setValue,
+	        resetValuesToDefault: this.resetValuesToDefault
+	      });
+	    }
+
+	    var filtersToRender = this.renderFilters();
+	    var hasValues = !!filtersToRender.length;
+	    return h(Container, {
+	      "class": filters(this.theme) + " " + (this.$props.className || '')
+	    }, [this.$props.title && hasValues && h(Title, {
+	      "class": getClassName$g(this.$props.innerClass, 'title') || ''
+	    }, [this.$props.title]), filtersToRender, this.$props.showClearAll && hasValues && filtersToRender.length > 1 ? h(Button, {
+	      "class": getClassName$g(this.$props.innerClass, 'button') || '',
+	      "on": _extends({}, {
+	        click: this.clearValues,
+	        keypress: function keypress(event) {
+	          return handleA11yAction$2(event, function () {
+	            return _this.clearValues();
+	          });
+	        }
+	      }),
+	      "attrs": {
+	        "tabIndex": "0"
+	      }
+	    }, [this.$props.clearAllLabel]) : null]);
+	  },
+	  methods: {
+	    remove: function remove(component, value) {
+	      if (value === void 0) {
+	        value = null;
+	      }
 
-	      if (this.$props.nestedField) {
-	        var _aggs;
+	      this.setValue(component, null);
+	      this.$emit('clear', component, value);
+	    },
+	    clearValues: function clearValues() {
+	      var resetToDefault = this.resetToDefault,
+	          resetToValues = this.resetToValues,
+	          clearAllBlacklistComponents = this.clearAllBlacklistComponents;
 
-	        aggs = (_aggs = {}, _aggs[this.$props.nestedField] = {
-	          nested: {
-	            path: this.$props.nestedField
-	          },
-	          aggs: this.rangeQuery()
-	        }, _aggs);
+	      if (resetToDefault) {
+	        this.resetValuesToDefault(clearAllBlacklistComponents);
 	      } else {
-	        aggs = this.rangeQuery();
+	        this.clearValuesAction(resetToValues, clearAllBlacklistComponents);
 	      }
 
-	      this.setQueryOptions(this.internalRangeComponent, {
-	        aggs: aggs
-	      });
+	      this.$emit('clear', resetToValues);
 	    },
-	    handleSlider: function handleSlider() {
-	      var sliderValues = this.$refs.slider.getValue();
-	      var value = this.$props.value;
+	    clearValue: function clearValue(componentId) {
+	      var resetToDefault = this.resetToDefault,
+	          resetToValues = this.resetToValues;
 
-	      if (value === undefined) {
-	        this.handleChange(sliderValues);
+	      if (resetToDefault) {
+	        this.resetValuesToDefault(this.components.filter(function (component) {
+	          return component !== componentId;
+	        }));
 	      } else {
-	        this.$emit('change', {
-	          start: sliderValues[0],
-	          end: sliderValues[1]
-	        });
+	        this.setValue(componentId, (resetToValues == null ? void 0 : resetToValues[componentId]) || null);
 	      }
+
+	      this.$emit('clear', resetToValues == null ? void 0 : resetToValues[componentId]);
 	    },
-	    handleChange: function handleChange(currentValue) {
+	    renderValue: function renderValue(value, isArray) {
 	      var _this2 = this;
 
-	      // Always keep the values within range
-	      var normalizedValue = [this.range ? Math.max(this.range.start, currentValue[0]) : currentValue[0], this.range ? Math.min(this.range.end, currentValue[1]) : currentValue[1]];
-
-	      var performUpdate = function performUpdate() {
-	        _this2.currentValue = normalizedValue;
-
-	        _this2.updateQueryHandler(normalizedValue, _this2.$props);
-
-	        _this2.$emit('valueChange', {
-	          start: normalizedValue[0],
-	          end: normalizedValue[1]
+	      if (isArray && value.length) {
+	        var arrayToRender = value.map(function (item) {
+	          return _this2.renderValue(item);
 	        });
+	        return arrayToRender.join(', ');
+	      }
 
-	        _this2.$emit('value-change', {
-	          start: normalizedValue[0],
-	          end: normalizedValue[1]
-	        });
-	      };
+	      if (value && typeof value === 'object') {
+	        // TODO: support for NestedList
+	        var label = (typeof value.label === 'string' ? value.label : value.value) || value.key || value.distance || null;
 
-	      checkValueChange$a(this.$props.componentId, {
-	        start: normalizedValue[0],
-	        end: normalizedValue[1]
-	      }, this.$props.beforeValueChange, performUpdate);
-	    },
-	    updateQueryHandler: function updateQueryHandler(value) {
-	      var query = DynamicRangeSlider.defaultQuery(value, this.$props);
+	        if (value.location) {
+	          label = value.location + " - " + label;
+	        }
 
-	      if (this.$props.customQuery) {
-	        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
-	        var queryTobeSet = extractQueryFromCustomQuery$7(customQueryTobeSet);
+	        return label;
+	      }
 
-	        if (queryTobeSet) {
-	          query = queryTobeSet;
+	      return value;
+	    },
+	    renderFilterButton: function renderFilterButton(component, keyProp, handleRemove, label) {
+	      var h = this.$createElement;
+	      return h(Button, {
+	        "class": getClassName$g(this.$props.innerClass, 'button') || '',
+	        "key": keyProp,
+	        "on": _extends({}, {
+	          click: handleRemove,
+	          keypress: function keypress(event) {
+	            return handleA11yAction$2(event, handleRemove);
+	          }
+	        }),
+	        "attrs": {
+	          "tabIndex": "0"
 	        }
+	      }, [h("span", [label]), h("span", ["\u2715"])]);
+	    },
+	    renderFilters: function renderFilters() {
+	      var _this3 = this;
 
-	        var customQueryOptions = getOptionsForCustomQuery$7(customQueryTobeSet);
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
-	        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
-	      }
+	      var selectedValues = this.selectedValues;
+	      var filterComponents = Object.keys(selectedValues).filter(function (id) {
+	        return _this3.components.includes(id) && selectedValues[id].showFilter;
+	      });
+	      return filterComponents.map(function (component, index) {
+	        var _selectedValues$compo = selectedValues[component],
+	            label = _selectedValues$compo.label,
+	            value = _selectedValues$compo.value;
+	        var isArray = Array.isArray(value); // default behaviour
 
-	      var _ref2 = this.range || {
-	        start: value[0],
-	        end: value[1]
-	      },
-	          start = _ref2.start,
-	          end = _ref2.end;
+	        if (label && (isArray && value.length || !isArray && value)) {
+	          var valueToRender = _this3.renderValue(value, isArray);
 
-	      var currentStart = value[0],
-	          currentEnd = value[1]; // check if the slider is at its initial position
+	          return _this3.renderFilterButton(component, component + "-" + (index + 1), function () {
+	            return _this3.remove(component, value);
+	          }, selectedValues[component].label + ": " + decodeHtml(valueToRender));
+	        }
 
-	      var isInitialValue = currentStart === start && currentEnd === end;
-	      this.updateQuery({
-	        componentId: this.$props.componentId,
-	        query: query,
-	        value: value,
-	        label: this.$props.filterLabel,
-	        showFilter: this.$props.showFilter && !isInitialValue,
-	        URLParams: this.$props.URLParams,
-	        componentType: constants_1$1.dynamicRangeSlider
-	      });
-	    }
-	  },
-	  computed: {
-	    labels: function labels() {
-	      if (!this.rangeLabels) return null;
-	      return this.rangeLabels(this.range.start, this.range.end);
+	        return null;
+	      }).filter(Boolean);
 	    }
 	  },
 	  watch: {
-	    $props: {
-	      deep: true,
-	      handler: function handler(newVal) {
-	        var _this3 = this;
+	    selectedValues: function selectedValues(newVal) {
+	      this.$emit('change', newVal);
+	    }
+	  }
+	};
 
-	        var propsKeys = getValidPropsKeys(newVal);
-	        checkSomePropChange$1(newVal, this.componentProps, propsKeys, function () {
-	          _this3.updateComponentProps(_this3.componentId, newVal, constants_1$1.dynamicRangeSlider);
+	var mapStateToProps$g = function mapStateToProps(state) {
+	  return {
+	    components: state.components,
+	    selectedValues: state.selectedValues
+	  };
+	};
 
-	          _this3.updateComponentProps(_this3.internalRangeComponent, newVal, constants_1$1.dynamicRangeSlider);
-	        });
-	      }
-	    },
-	    react: function react() {
-	      this.setReact();
-	    },
-	    selectedValue: function selectedValue(newValue) {
-	      if (isEqual$f(newValue, this.currentValue)) return;
-	      var value = newValue || {
-	        start: this.range.start,
-	        end: this.range.end
-	      };
-	      this.$emit('change', value);
-	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
-	    },
-	    range: function range(newValue, oldValue) {
-	      if (isEqual$f(newValue, oldValue) || !this.currentValue) return;
+	var mapDispatchtoProps$c = {
+	  clearValuesAction: clearValues,
+	  setValue: setValue$2,
+	  resetValuesToDefault: resetValuesToDefault
+	};
+	var RcConnected$1 = connect(mapStateToProps$g, mapDispatchtoProps$c)(SelectedFilters);
 
-	      var _ref3 = this.currentValue || [],
-	          currentStart = _ref3[0],
-	          currentEnd = _ref3[1];
+	SelectedFilters.install = function (Vue) {
+	  Vue.component(SelectedFilters.name, RcConnected$1);
+	};
 
-	      var _ref4 = oldValue || {},
-	          oldStart = _ref4.start,
-	          oldEnd = _ref4.end;
+	var ResultCardTitle = {
+	  name: 'ResultCardTitle',
+	  render: function render() {
+	    var h = arguments[0];
+	    var children = this.$slots["default"];
+	    return h(Title, helper$1([{}, this.$props]), [children]);
+	  }
+	};
 
-	      var newStart = currentStart === oldStart ? newValue.start : currentStart;
-	      var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
-	      this.handleChange([newStart, newEnd]);
-	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-	        this.updateQueryHandler(this.$data.currentValue);
-	      }
-	    },
-	    value: function value(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
-	      }
-	    }
+	ResultCardTitle.install = function (Vue) {
+	  Vue.component(ResultCardTitle.name, ResultCardTitle);
+	};
+
+	var _excluded$1 = ["src"];
+	var ResultCardImage = {
+	  name: 'ResultCardImage',
+	  props: {
+	    src: VueTypes.string.isRequired
 	  },
 	  render: function render() {
 	    var h = arguments[0];
 
-	    if (!this.range || !this.currentValue) {
-	      return null;
-	    }
+	    var _this$$props = this.$props,
+	        src = _this$$props.src,
+	        props = _objectWithoutPropertiesLoose(_this$$props, _excluded$1);
 
-	    var _this$range = this.range,
-	        start = _this$range.start,
-	        end = _this$range.end;
-	    return h(Container, {
-	      "class": this.$props.className
-	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$f(this.$props.innerClass, 'title')
-	    }, [this.$props.title]), h(vueNoSsr_common, [h(Slider, {
-	      "class": getClassName$f(this.$props.innerClass, 'slider')
-	    }, [h("vue-slider-component", {
-	      "ref": "slider",
-	      "attrs": {
-	        "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,
-	        "tooltip": "always"
-	      },
-	      "on": {
-	        "drag-end": this.handleSlider
-	      },
-	      "props": _extends({}, this.$props.sliderOptions)
-	    }), this.labels ? h("div", {
-	      "class": "label-container"
-	    }, [h("label", {
-	      "class": getClassName$f(this.$props.innerClass, 'label') || 'range-label-left'
-	    }, [this.labels.start]), h("label", {
-	      "class": getClassName$f(this.$props.innerClass, 'label') || 'range-label-right'
-	    }, [this.labels.end])]) : null])])]);
+	    return h(Image$1, helper$1([{
+	      "style": {
+	        backgroundImage: "url(" + src + ")"
+	      }
+	    }, props]));
 	  }
 	};
 
-	DynamicRangeSlider.defaultQuery = function (values, props) {
-	  var query = null;
-
-	  if (Array.isArray(values) && values.length) {
-	    var _range;
+	ResultCardImage.install = function (Vue) {
+	  Vue.component(ResultCardImage.name, ResultCardImage);
+	};
 
-	    query = {
-	      range: (_range = {}, _range[props.dataField] = {
-	        gte: values[0],
-	        lte: values[1],
-	        boost: 2.0
-	      }, _range)
-	    };
+	var ResultCardDescription = {
+	  name: 'ResultCardDescription',
+	  functional: true,
+	  render: function render(_, _ref) {
+	    var props = _ref.props,
+	        children = _ref.children;
+	    var h = arguments[0];
+	    return h("article", helper$1([{}, props]), [children]);
 	  }
+	};
 
-	  if (query && props.nestedField) {
-	    return {
-	      query: {
-	        nested: {
-	          path: props.nestedField,
-	          query: query
-	        }
+	ResultCardDescription.install = function (Vue) {
+	  Vue.component(ResultCardDescription.name, ResultCardDescription);
+	};
+
+	var _excluded$2 = ["href", "target"];
+	var ResultCard = {
+	  name: 'ResultCard',
+	  components: {
+	    ResultCardTitle: ResultCardTitle,
+	    ResultCardImage: ResultCardImage,
+	    ResultCardDescription: ResultCardDescription
+	  },
+	  props: {
+	    target: VueTypes.string.def('_blank'),
+	    href: types.string
+	  },
+	  render: function render() {
+	    var h = arguments[0];
+	    var children = this.$slots["default"];
+
+	    var _this$$props = this.$props,
+	        href = _this$$props.href,
+	        target = _this$$props.target,
+	        rest = _objectWithoutPropertiesLoose(_this$$props, _excluded$2);
+
+	    return h(Card, helper$1([{
+	      "attrs": {
+	        "href": href,
+	        "target": target,
+	        "rel": target === '_blank' ? 'noopener noreferrer' : null
 	      }
-	    };
+	    }, rest]), [children]);
 	  }
+	};
 
-	  return query;
+	ResultCard.install = function (Vue) {
+	  Vue.component(ResultCard.name, ResultCard);
+	  Vue.component(ResultCardTitle.name, ResultCardTitle);
+	  Vue.component(ResultCardImage.name, ResultCardImage);
+	  Vue.component(ResultCardDescription.name, ResultCardDescription);
 	};
 
-	DynamicRangeSlider.parseValue = function (value) {
-	  if (value) {
-	    return Array.isArray(value) ? value : [value.start, value.end];
+	var ResultListContent = {
+	  name: 'ResultListContent',
+	  functional: true,
+	  render: function render(_, _ref) {
+	    var props = _ref.props,
+	        children = _ref.children;
+	    var h = arguments[0];
+	    return h("article", helper$1([{}, props]), [children]);
 	  }
+	};
 
-	  return [];
+	ResultListContent.install = function (Vue) {
+	  Vue.component(ResultListContent.name, ResultListContent);
 	};
 
-	DynamicRangeSlider.hasInternalComponent = function () {
-	  return true;
+	var ResultListDescription = {
+	  name: 'ResultListDescription',
+	  functional: true,
+	  render: function render(_, _ref) {
+	    var props = _ref.props,
+	        children = _ref.children;
+	    var h = arguments[0];
+	    return h("div", helper$1([{}, props]), [children]);
+	  }
 	};
 
-	var mapStateToProps$f = function mapStateToProps(state, props) {
-	  var componentId = state.aggregations[props.componentId];
-	  var internalRange = state.aggregations[props.componentId + "__range__internal"];
-	  var options = componentId && componentId[props.dataField];
-	  var range = state.aggregations[props.componentId + "__range__internal"];
+	ResultListDescription.install = function (Vue) {
+	  Vue.component(ResultListDescription.name, ResultListDescription);
+	};
 
-	  if (props.nestedField) {
-	    options = options && componentId[props.dataField][props.nestedField] && componentId[props.dataField][props.nestedField].buckets ? componentId[props.dataField][props.nestedField].buckets : [];
-	    range = range && internalRange[props.nestedField].min ? {
-	      start: internalRange[props.nestedField].min.value,
-	      end: internalRange[props.nestedField].max.value
-	    } : null;
-	  } else {
-	    options = options && componentId[props.dataField].buckets ? componentId[props.dataField].buckets : [];
-	    range = range && internalRange.min ? {
-	      start: internalRange.min.value,
-	      end: internalRange.max.value
-	    } : null;
+	var _excluded$3 = ["src", "small"];
+	var ResultListImage = {
+	  name: 'ResultListImage',
+	  props: {
+	    src: VueTypes.string.isRequired,
+	    small: VueTypes.bool.def(false)
+	  },
+	  render: function render() {
+	    var h = arguments[0];
+
+	    var _this$$props = this.$props,
+	        src = _this$$props.src,
+	        small = _this$$props.small,
+	        props = _objectWithoutPropertiesLoose(_this$$props, _excluded$3);
+
+	    return h(Image, helper$1([{
+	      "attrs": {
+	        "src": src,
+	        "small": small
+	      }
+	    }, props]));
 	  }
+	};
 
-	  return {
-	    options: options,
-	    range: range,
-	    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
-	    componentProps: state.props[props.componentId],
-	    enableAppbase: state.config.enableAppbase
-	  };
+	ResultListImage.install = function (Vue) {
+	  Vue.component(ResultListImage.name, ResultListImage);
 	};
 
-	var mapDispatchtoProps$c = {
-	  addComponent: addComponent$1,
-	  removeComponent: removeComponent$1,
-	  updateQuery: updateQuery$c,
-	  watchComponent: watchComponent$1,
-	  setQueryListener: setQueryListener$1,
-	  setQueryOptions: setQueryOptions$b,
-	  setComponentProps: setComponentProps$1,
-	  setCustomQuery: setCustomQuery$b,
-	  updateComponentProps: updateComponentProps$2
+	var ResultListTitle = {
+	  name: 'ResultListTitle',
+	  render: function render() {
+	    var h = arguments[0];
+	    var children = this.$slots["default"];
+	    return h(Title, helper$1([{}, this.$props]), [children]);
+	  }
 	};
-	var RangeConnected$3 = connect(mapStateToProps$f, mapDispatchtoProps$c)(DynamicRangeSlider);
 
-	DynamicRangeSlider.install = function (Vue) {
-	  Vue.component(DynamicRangeSlider.name, RangeConnected$3);
-	}; // Add componentType for SSR
+	ResultListTitle.install = function (Vue) {
+	  Vue.component(ResultListTitle.name, ResultListTitle);
+	};
+
+	var _excluded$4 = ["href", "target"];
+	var ResultList = {
+	  name: 'ResultList',
+	  props: {
+	    href: types.string,
+	    target: VueTypes.string.def('_blank')
+	  },
+	  components: {
+	    ResultListContent: ResultListContent,
+	    ResultListDescription: ResultListDescription,
+	    ResultListImage: ResultListImage,
+	    ResultListTitle: ResultListTitle
+	  },
+	  data: function data() {
+	    this.__state = {
+	      hasImage: false,
+	      isSmall: false
+	    };
+	    return this.__state;
+	  },
+	  mounted: function mounted() {
+	    var children = this.$slots["default"];
+	    var ImageChild = children.find(function (o) {
+	      return o.componentOptions && o.componentOptions.tag === ResultListImage.name;
+	    });
 
+	    if (ImageChild && ImageChild.componentOptions && ImageChild.componentOptions.propsData) {
+	      this.hasImage = true;
 
-	DynamicRangeSlider.componentType = constants_1$1.dynamicRangeSlider;
+	      if (ImageChild.componentOptions.propsData.small) {
+	        this.isSmall = true;
+	      }
+	    }
+	  },
+	  render: function render() {
+	    var h = arguments[0];
+
+	    var _this$$props = this.$props,
+	        href = _this$$props.href,
+	        target = _this$$props.target,
+	        props = _objectWithoutPropertiesLoose(_this$$props, _excluded$4);
+
+	    var hasImage = this.hasImage,
+	        isSmall = this.isSmall;
+	    var children = this.$slots["default"];
+	    return h(ListItem, helper$1([{
+	      "attrs": {
+	        "href": href,
+	        "image": hasImage,
+	        "small": isSmall,
+	        "target": target,
+	        "rel": target === '_blank' ? 'noopener noreferrer' : null
+	      }
+	    }, props]), [children]);
+	  }
+	};
+
+	ResultList.install = function (Vue) {
+	  Vue.component(ResultList.name, ResultList);
+	  Vue.component(ResultListContent.name, ResultListContent);
+	  Vue.component(ResultListDescription.name, ResultListDescription);
+	  Vue.component(ResultListImage.name, ResultListImage);
+	  Vue.component(ResultListTitle.name, ResultListTitle);
+	};
 
 	var getSearchState = lib_8.getSearchState;
 	var defaultKeys = ['hits', 'value', 'aggregations', 'error'];
@@ -28618,7 +29119,7 @@
 	  }
 	};
 
-	var mapStateToProps$g = function mapStateToProps(state, props) {
+	var mapStateToProps$h = function mapStateToProps(state, props) {
 	  return {
 	    selectedValues: filterByComponentIds(state.selectedValues, props),
 	    queryLog: filterByComponentIds(state.queryLog, props),
@@ -28632,14 +29133,14 @@
 	    customData: filterByComponentIds(state.customData, props),
 	    settings: filterByComponentIds(state.settings, props),
 	    rawData: filterByComponentIds(state.rawData, props),
-	    components: filterByComponentIds(state.components, props)
+	    components: state.components
 	  };
 	};
 
 	var mapDispatchtoProps$d = {
 	  setValues: value_6
 	};
-	var StateProviderConnected = connect(mapStateToProps$g, mapDispatchtoProps$d)(StateProvider);
+	var StateProviderConnected = connect(mapStateToProps$h, mapDispatchtoProps$d)(StateProvider);
 
 	StateProvider.install = function (Vue) {
 	  Vue.component(StateProvider.name, StateProviderConnected);
@@ -35231,9 +35732,9 @@
 	    setDefaultQuery$8 = lib_5.setDefaultQuery,
 	    recordResultClick$1 = lib_5.recordResultClick,
 	    setMapData = lib_5.setMapData;
-	var isEqual$g = lib_8.isEqual,
+	var isEqual$h = lib_8.isEqual,
 	    getQueryOptions$5 = lib_8.getQueryOptions,
-	    getClassName$g = lib_8.getClassName,
+	    getClassName$h = lib_8.getClassName,
 	    parseHits$2 = lib_8.parseHits,
 	    getOptionsFromQuery$4 = lib_8.getOptionsFromQuery,
 	    getResultStats$4 = lib_8.getResultStats; // default map center
@@ -35427,17 +35928,17 @@
 	      }
 	    },
 	    promotedResults: function promotedResults(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
+	      if (!isEqual$h(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    hidden: function hidden(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
+	      if (!isEqual$h(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
 	    time: function time(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
+	      if (!isEqual$h(newVal, oldVal)) {
 	        this.$emit('data', this.getData());
 	      }
 	    },
@@ -35454,7 +35955,7 @@
 	    rawData: function rawData(newVal, oldVal) {
 	      var _this = this;
 
-	      if (!isEqual$g(newVal, oldVal)) {
+	      if (!isEqual$h(newVal, oldVal)) {
 	        var promotedResults = this.promotedResults,
 	            hits = this.hits;
 	        var results = parseHits$2(hits) || [];
@@ -35495,7 +35996,7 @@
 	      }
 	    },
 	    center: function center(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
+	      if (!isEqual$h(newVal, oldVal)) {
 	        var persistMapQuery = !!this.center; // we need to forceExecute the query because the center has changed
 
 	        var forceExecute = true;
@@ -35929,7 +36430,7 @@
 	            zIndex: 10000
 	          },
 	          "attrs": {
-	            "className": getClassName$g(this.innerClass, 'checkboxContainer') || null
+	            "className": getClassName$h(this.innerClass, 'checkboxContainer') || null
 	          }
 	        }, [h(Checkbox, {
 	          "attrs": {
@@ -35938,13 +36439,13 @@
 	            "checked": this.searchAsMove,
 	            "show": true
 	          },
-	          "class": getClassName$g(this.$props.innerClass, 'checkbox'),
+	          "class": getClassName$h(this.$props.innerClass, 'checkbox'),
 	          "on": {
 	            "click": this.toggleSearchAsMove
 	          }
 	        }), h("label", {
 	          "attrs": {
-	            "className": getClassName$g(this.innerClass, 'label') || null,
+	            "className": getClassName$h(this.innerClass, 'label') || null,
 	            "for": this.$props.componentId + "-searchasmove"
 	          }
 	        }, [this.searchAsMoveLabel])]);
@@ -36058,7 +36559,7 @@
 	  }
 	};
 
-	var mapStateToProps$h = function mapStateToProps(state, props) {
+	var mapStateToProps$i = function mapStateToProps(state, props) {
 	  return {
 	    defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1 || -1,
 	    error: state.error[props.componentId],
@@ -36084,10 +36585,10 @@
 	  recordResultClick: recordResultClick$1,
 	  setMapData: setMapData
 	};
-	var RMConnected = ComponentWrapper$1(connect(mapStateToProps$h, mapDispatchToProps$4)(ReactiveMap), {
+	var RMConnected = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$i, mapDispatchToProps$4)(ReactiveMap), {
 	  componentType: constants_1$1.reactiveMap,
 	  internalComponent: true
-	});
+	}));
 
 	ReactiveMap.install = function (Vue) {
 	  Vue.component(ReactiveMap.name, RMConnected);
@@ -36451,7 +36952,7 @@
 	};
 
 	var _excluded$j = ["options"];
-	var isEqual$h = lib_8.isEqual;
+	var isEqual$i = lib_8.isEqual;
 	var recordResultClick$2 = lib_5.recordResultClick;
 	var ClusterMarkers = {
 	  name: 'ClusterMarkers',
@@ -36486,7 +36987,7 @@
 	  },
 	  watch: {
 	    markers: function markers(newVal, oldVal) {
-	      if (!isEqual$h(oldVal, newVal)) {
+	      if (!isEqual$i(oldVal, newVal)) {
 	        this.buildMarkers(newVal);
 	      }
 	    }
@@ -36990,9 +37491,9 @@
 	  }
 	};
 
-	var _templateObject$p, _templateObject2$b, _templateObject3$8;
-	var MapPin = index$1('div')(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
-	var MapPinArrow = index$1('div')(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
+	var _templateObject$q, _templateObject2$c, _templateObject3$8;
+	var MapPin = index$1('div')(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
+	var MapPinArrow = index$1('div')(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
 	var mapPinWrapper = css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n"])));
 
 	var Marker = components.Marker;
@@ -37473,7 +37974,7 @@
 	      var currentInstance = this;
 
 	      while (currentInstance) {
-	        if (currentInstance && currentInstance._name === '<ConnectClusterMarkers>') {
+	        if (currentInstance && currentInstance.$options && currentInstance.$options.name === 'connect-ClusterMarkers') {
 	          clusterManagerInstance = currentInstance;
 	          currentInstance = null;
 	        } else if (currentInstance.$children) {
@@ -38093,325 +38594,7 @@
 	  });
 	}
 
-	var version = "1.32.3";
-
-	var _templateObject$q, _templateObject2$c;
-
-	var alert = function alert(_ref) {
-	  var theme = _ref.theme;
-	  return css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n"])), theme.colors.alertColor);
-	};
-
-	var Content = index$1('div')(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
-	  return props.alert && alert;
-	});
-
-	var getClassName$h = lib_8.getClassName,
-	    isEqual$i = lib_8.isEqual;
-	var RangeInput = {
-	  name: 'RangeInput',
-	  components: {
-	    RangeSlider: RangeConnected$2
-	  },
-	  inject: {
-	    theme: {
-	      from: 'theme_reactivesearch'
-	    }
-	  },
-	  data: function data() {
-	    var state = {
-	      currentValue: {
-	        start: this.$props.range ? this.$props.range.start : 0,
-	        end: this.$props.range ? this.$props.range.end : 10
-	      },
-	      isStartValid: true,
-	      isEndValid: true
-	    };
-	    return state;
-	  },
-	  props: {
-	    className: {
-	      types: types.string,
-	      "default": ''
-	    },
-	    defaultValue: types.range,
-	    validateRange: types.func,
-	    value: types.range,
-	    dataField: types.stringRequired,
-	    innerClass: types.style,
-	    range: {
-	      types: types.range,
-	      "default": function _default() {
-	        return {
-	          start: 0,
-	          end: 10
-	        };
-	      }
-	    },
-	    rangeLabels: types.rangeLabels,
-	    stepValue: types.number,
-	    componentStyle: types.style,
-	    componentId: types.stringRequired,
-	    includeNullValues: VueTypes.bool,
-	    beforeValueChange: types.func,
-	    customQuery: types.func,
-	    data: types.data,
-	    filterLabel: types.string,
-	    react: types.react,
-	    showFilter: VueTypes.bool.def(true),
-	    showCheckbox: VueTypes.bool.def(true),
-	    title: types.title,
-	    URLParams: VueTypes.bool.def(false),
-	    sliderOptions: VueTypes.object.def({}),
-	    nestedField: types.string,
-	    endpoint: types.endpointConfig
-	  },
-	  methods: {
-	    shouldUpdate: function shouldUpdate(value) {
-	      var validateRange = this.$props.validateRange;
-
-	      if (validateRange && value) {
-	        return validateRange([value.start, value.end]);
-	      }
-
-	      if (value) {
-	        return value.start <= value.end;
-	      }
-
-	      return false;
-	    },
-	    isControlled: function isControlled() {
-	      if (this.$props.value && this.$listeners) {
-	        return true;
-	      }
-
-	      return false;
-	    },
-	    handleChange: function handleChange(value, event) {
-	      var currentValue = value;
-
-	      if (this.shouldUpdate(value) && !isEqual$i(value, this.currentValue)) {
-	        switch (event) {
-	          case 'change':
-	            if (!value) {
-	              currentValue = {
-	                start: this.$props.range ? this.$props.range.start : 0,
-	                end: this.$props.range ? this.$props.range.end : 10
-	              };
-	            }
-
-	            this.$data.currentValue = _extends({}, currentValue);
-	            this.$emit('change', this.$data.currentValue);
-	            break;
-
-	          case 'value-change':
-	            this.$emit('valueChange', this.$data.currentValue);
-	            this.$emit('value-change', this.$data.currentValue);
-	            break;
-
-	          default:
-	            this.$data.currentValue = _extends({}, currentValue);
-	            break;
-	        }
-	      }
-	    },
-	    handleOnChange: function handleOnChange(value) {
-	      this.handleChange(value || this.$props.range, 'change');
-	    },
-	    handleValueChange: function handleValueChange(value) {
-	      this.handleChange(value, 'value-change');
-	    },
-	    handleInputChange: function handleInputChange(e) {
-	      var _e$target = e.target,
-	          name = _e$target.name,
-	          value = _e$target.value;
-
-	      if (Number.isNaN(value)) {
-	        if (name === 'start') {
-	          this.$data.isStartValid = false;
-	        } else {
-	          this.$data.isEndValid = false;
-	        }
-	      } else if (name === 'start' && !this.$data.isStartValid) {
-	        this.$data.isStartValid = true;
-	      } else if (name === 'end' && !this.$data.isEndValid) {
-	        this.$data.isEndValid = true;
-	      }
-
-	      if (this.$data.isStartValid && this.$data.isEndValid) {
-	        if (name === 'start') {
-	          this.handleChange({
-	            start: Number(value),
-	            end: this.$data.currentValue.end
-	          }, 'change');
-	        } else {
-	          this.handleChange({
-	            start: this.$data.currentValue.start,
-	            end: Number(value)
-	          }, 'change');
-	        }
-	      }
-	    }
-	  },
-	  watch: {
-	    defaultValue: function defaultValue(newVal, oldVal) {
-	      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
-	        this.handleChange(newVal);
-	      }
-	    },
-	    value: function value(newVal, oldVal) {
-	      if (!isEqual$i(newVal, oldVal)) {
-	        if (this.isControlled()) {
-	          this.handleChange(newVal, 'change');
-	        }
-	      }
-	    }
-	  },
-	  created: function created() {
-	    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];
-	    var _this$$props = this.$props,
-	        className = _this$$props.className,
-	        dataField = _this$$props.dataField,
-	        range = _this$$props.range,
-	        rangeLabels = _this$$props.rangeLabels,
-	        componentId = _this$$props.componentId,
-	        innerClass = _this$$props.innerClass,
-	        stepValue = _this$$props.stepValue,
-	        componentStyle = _this$$props.componentStyle,
-	        themePreset = _this$$props.themePreset,
-	        includeNullValues = _this$$props.includeNullValues,
-	        beforeValueChange = _this$$props.beforeValueChange,
-	        customQuery = _this$$props.customQuery,
-	        data = _this$$props.data,
-	        filterLabel = _this$$props.filterLabel,
-	        react = _this$$props.react,
-	        showFilter = _this$$props.showFilter,
-	        showCheckbox = _this$$props.showCheckbox,
-	        title = _this$$props.title,
-	        URLParams = _this$$props.URLParams,
-	        sliderOptions = _this$$props.sliderOptions,
-	        nestedField = _this$$props.nestedField;
-	    return h(Container, {
-	      "style": componentStyle,
-	      "class": className
-	    }, [h(RangeConnected$2, {
-	      "attrs": {
-	        "componentId": componentId,
-	        "value": {
-	          start: this.currentValue.start,
-	          end: this.currentValue.end
-	        },
-	        "range": range,
-	        "dataField": dataField,
-	        "rangeLabels": rangeLabels,
-	        "includeNullValues": includeNullValues,
-	        "beforeValueChange": beforeValueChange,
-	        "customQuery": customQuery,
-	        "data": data,
-	        "filterLabel": filterLabel,
-	        "react": react,
-	        "showFilter": showFilter,
-	        "showCheckbox": showCheckbox,
-	        "title": title,
-	        "uRLParams": URLParams,
-	        "sliderOptions": sliderOptions,
-	        "nestedField": nestedField
-	      },
-	      "on": {
-	        "change": this.handleOnChange,
-	        "value-change": this.handleValueChange
-	      }
-	    }), h(Flex, {
-	      "class": getClassName$h(innerClass, 'input-container') || ''
-	    }, [h(Flex, {
-	      "attrs": {
-	        "direction": "column",
-	        "flex": 2
-	      }
-	    }, [h(Input, {
-	      "key": componentId + "-start-value",
-	      "attrs": {
-	        "name": "start",
-	        "type": "number",
-	        "step": stepValue,
-	        "themePreset": themePreset,
-	        "aria-label": componentId + "-start-input",
-	        "min": this.$props.range ? this.$props.range.start : 0,
-	        "alert": !this.isStartValid
-	      },
-	      "on": {
-	        "change": this.handleInputChange
-	      },
-	      "class": getClassName$h(innerClass, 'input') || '',
-	      "domProps": _extends({}, {
-	        value: this.currentValue.start
-	      })
-	    }), !this.isStartValid && h(Content, {
-	      "attrs": {
-	        "alert": true
-	      }
-	    }, ["Input range is invalid"])]), h(Flex, {
-	      "attrs": {
-	        "justifyContent": "center",
-	        "alignItems": "center",
-	        "flex": 1
-	      }
-	    }, ["-"]), h(Flex, {
-	      "attrs": {
-	        "direction": "column",
-	        "flex": 2
-	      }
-	    }, [h(Input, {
-	      "key": componentId + "-end-value",
-	      "attrs": {
-	        "name": "end",
-	        "type": "number",
-	        "step": stepValue,
-	        "themePreset": themePreset,
-	        "aria-label": componentId + "-end-input",
-	        "max": this.$props.range ? this.$props.range.end : 10,
-	        "alert": !this.isEndValid
-	      },
-	      "on": {
-	        "change": this.handleInputChange
-	      },
-	      "class": getClassName$h(innerClass, 'input') || '',
-	      "domProps": _extends({}, {
-	        value: this.currentValue.end
-	      })
-	    }), !this.isEndValid && h(Content, {
-	      "attrs": {
-	        "alert": true
-	      }
-	    }, ["Input range is invalid"])])])]);
-	  }
-	};
-
-	var mapStateToProps$i = function mapStateToProps(state) {
-	  return {
-	    themePreset: state.config.themePreset
-	  };
-	};
-
-	var RangeConnected$4 = ComponentWrapper$1(connect(mapStateToProps$i, {})(RangeInput), {
-	  componentType: constants_1$1.rangeInput
-	});
-
-	RangeInput.install = function (Vue) {
-	  Vue.component(RangeInput.name, RangeConnected$4);
-	}; // Add componentType for SSR
-
-
-	RangeInput.componentType = constants_1$1.rangeInput;
+	var version = "1.33.0";
 
 	var components$1 = [ReactiveList, ResultCard, ResultList, ReactiveBase, DataSearch, SearchBox, SingleList, MultiList, SingleRange, MultiRange, RangeSlider, DynamicRangeSlider, ReactiveComponent, SelectedFilters, ToggleButton, SingleDropdownList, MultiDropdownList, StateProvider, RangeInput];
 	function install (Vue) {
@@ -38451,6 +38634,7 @@
 	exports.SingleRange = SingleRange;
 	exports.StateProvider = StateProvider;
 	exports.ToggleButton = ToggleButton;
+	exports.componentTypes = constants_1$1;
 	exports.default = index$3;
 	exports.initReactivesearch = initReactivesearch;
 	exports.install = install;