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

package/dist/cjs/install-d95c7185.js

@@ -0,0 +1,1204 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var configureStore = require('@appbaseio/reactivecore');
+var configureStore__default = _interopDefault(configureStore);
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f127c8b7.js');
+var VueTypes = _interopDefault(require('vue-types'));
+var constants = require('@appbaseio/reactivecore/lib/utils/constants');
+var helper = require('@appbaseio/reactivecore/lib/utils/helper');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
+var vueTypes = require('./vueTypes-57d01f18.js');
+var ReactiveList = require('./ReactiveList.js');
+var index = require('./index-4509aa45.js');
+var ComponentWrapper = require('./ComponentWrapper-10bad289.js');
+var Title = require('./Title-584a8cc8.js');
+var ReactiveBase = require('./ReactiveBase.js');
+var hotkeys = _interopDefault(require('hotkeys-js'));
+var DataSearch = require('./DataSearch-37dfdf39.js');
+var CancelSvg = require('./CancelSvg-4aa35935.js');
+var Input = require('./Input-a9ee53ed.js');
+var Container = require('./Container-526efa6a.js');
+var SingleList = require('./SingleList.js');
+var MultiList = require('./MultiList.js');
+var SingleDropdownList = require('./SingleDropdownList.js');
+var MultiDropdownList = require('./MultiDropdownList.js');
+var ToggleButton = require('./ToggleButton.js');
+var ReactiveComponent = require('./ReactiveComponent.js');
+var SelectedFilters = require('./SelectedFilters.js');
+var SingleRange = require('./SingleRange.js');
+var MultiRange = require('./MultiRange.js');
+var ResultCard = require('./ResultCard.js');
+var ResultList = require('./ResultList.js');
+var RangeSlider = require('./RangeSlider.js');
+var DynamicRangeSlider = require('./DynamicRangeSlider.js');
+var StateProvider = require('./StateProvider.js');
+var RangeInput = require('./RangeInput.js');
+
+var _templateObject;
+var AutofillSvgIcon = styled__default('button')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
+var AutoFillSvg = {
+  name: 'AutoFillSvg',
+  render: function render() {
+    var h = arguments[0];
+    return h(AutofillSvgIcon, {
+      "on": {
+        "click": this.$listeners.click
+      }
+    }, [h("svg", {
+      "attrs": {
+        "viewBox": "0 0 24 24"
+      }
+    }, [h("path", {
+      "attrs": {
+        "d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
+      }
+    })])]);
+  },
+  methods: {
+    clicked: function clicked(e) {
+      e.stopPropagation();
+      window.console.log('hey', e);
+    }
+  }
+};
+
+var updateQuery = configureStore.Actions.updateQuery,
+    setCustomQuery = configureStore.Actions.setCustomQuery,
+    setDefaultQuery = configureStore.Actions.setDefaultQuery,
+    recordSuggestionClick = configureStore.Actions.recordSuggestionClick;
+var _debounce = configureStore.helper.debounce,
+    checkValueChange = configureStore.helper.checkValueChange,
+    getClassName = configureStore.helper.getClassName,
+    isEqual = configureStore.helper.isEqual,
+    getCompositeAggsQuery = configureStore.helper.getCompositeAggsQuery,
+    withClickIds = configureStore.helper.withClickIds,
+    getResultStats = configureStore.helper.getResultStats,
+    normalizeDataField = configureStore.helper.normalizeDataField;
+var SearchBox = {
+  name: 'SearchBox',
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      currentValue: '',
+      isOpen: false,
+      normalizedSuggestions: []
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
+  },
+  inject: {
+    theme: {
+      from: 'theme_reactivesearch'
+    }
+  },
+  created: function created() {
+    var _this$$props = this.$props,
+        distinctField = _this$$props.distinctField,
+        distinctFieldConfig = _this$$props.distinctFieldConfig,
+        index = _this$$props.index;
+
+    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
+    }
+
+    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
+      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+
+    if (!this.enableAppbase && index) {
+      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+    }
+
+    this.currentValue = this.selectedValue || this.value || this.defaultValue || '';
+    this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
+    this.setValue(this.currentValue, true, this.$props, undefined, false, this.selectedCategory); // Set custom and default queries in store
+
+    this.triggerCustomQuery(this.currentValue, this.selectedCategory);
+    this.triggerDefaultQuery(this.currentValue);
+  },
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer() {
+      return index.hasCustomRenderer(this);
+    },
+    stats: function stats() {
+      return getResultStats(this);
+    }
+  },
+  props: {
+    autoFocus: VueTypes.bool,
+    autosuggest: VueTypes.bool.def(true),
+    beforeValueChange: vueTypes.types.func,
+    className: VueTypes.string.def(''),
+    clearIcon: vueTypes.types.children,
+    componentId: vueTypes.types.stringRequired,
+    customHighlight: vueTypes.types.func,
+    customQuery: vueTypes.types.func,
+    defaultQuery: vueTypes.types.func,
+    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    })]),
+    aggregationField: vueTypes.types.string,
+    aggregationSize: VueTypes.number,
+    size: VueTypes.number,
+    debounce: VueTypes.number.def(0),
+    defaultValue: vueTypes.types.string,
+    excludeFields: vueTypes.types.excludeFields,
+    value: vueTypes.types.value,
+    defaultSuggestions: vueTypes.types.suggestions,
+    enableSynonyms: VueTypes.bool.def(true),
+    enableQuerySuggestions: VueTypes.bool.def(false),
+    enablePopularSuggestions: VueTypes.bool.def(false),
+    enableRecentSuggestions: VueTypes.bool.def(false),
+    fieldWeights: vueTypes.types.fieldWeights,
+    filterLabel: vueTypes.types.string,
+    fuzziness: vueTypes.types.fuzziness,
+    highlight: VueTypes.bool,
+    highlightField: vueTypes.types.stringOrArray,
+    icon: vueTypes.types.children,
+    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
+    includeFields: vueTypes.types.includeFields,
+    innerClass: vueTypes.types.style,
+    innerRef: VueTypes.string.def('searchInputField'),
+    render: vueTypes.types.func,
+    renderNoSuggestion: vueTypes.types.title,
+    renderError: vueTypes.types.title,
+    placeholder: VueTypes.string.def('Search'),
+    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
+    react: vueTypes.types.react,
+    showClear: VueTypes.bool.def(true),
+    showDistinctSuggestions: VueTypes.bool.def(true),
+    showFilter: VueTypes.bool.def(true),
+    showIcon: VueTypes.bool.def(true),
+    title: vueTypes.types.title,
+    theme: vueTypes.types.style,
+    URLParams: VueTypes.bool.def(false),
+    strictSelection: VueTypes.bool.def(false),
+    nestedField: vueTypes.types.string,
+    enablePredictiveSuggestions: VueTypes.bool.def(false),
+    recentSearchesIcon: VueTypes.any,
+    popularSearchesIcon: VueTypes.any,
+    //	mic props
+    showVoiceSearch: VueTypes.bool.def(false),
+    getMicInstance: vueTypes.types.func,
+    renderMic: vueTypes.types.func,
+    distinctField: vueTypes.types.string,
+    distinctFieldConfig: vueTypes.types.props,
+    //
+    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
+    addonBefore: VueTypes.any,
+    addonAfter: VueTypes.any,
+    expandSuggestionsContainer: VueTypes.bool.def(true),
+    index: VueTypes.string,
+    popularSuggestionsConfig: VueTypes.object,
+    recentSuggestionsConfig: VueTypes.object,
+    applyStopwords: VueTypes.bool,
+    customStopwords: vueTypes.types.stringArray,
+    onData: vueTypes.types.func,
+    renderItem: vueTypes.types.func
+  },
+  mounted: function mounted() {
+    this.listenForFocusShortcuts();
+  },
+  watch: {
+    dataField: function dataField(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.triggerCustomQuery(this.$data.currentValue);
+      }
+    },
+    fieldWeights: function fieldWeights() {
+      this.triggerCustomQuery(this.$data.currentValue);
+    },
+    fuzziness: function fuzziness() {
+      this.triggerCustomQuery(this.$data.currentValue);
+    },
+    queryFormat: function queryFormat() {
+      this.triggerCustomQuery(this.$data.currentValue);
+    },
+    defaultValue: function defaultValue(newVal) {
+      this.setValue(newVal, true, this.$props);
+    },
+    value: function value(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.setValue(newVal, true, this.$props, newVal === '' ? configureStore.causes.CLEAR_VALUE : undefined, false);
+      }
+    },
+    defaultQuery: function defaultQuery(newVal, oldVal) {
+      if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+        this.triggerDefaultQuery(this.$data.currentValue);
+      }
+    },
+    customQuery: function customQuery(newVal, oldVal) {
+      if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+        this.triggerCustomQuery(this.$data.currentValue);
+      }
+    },
+    suggestions: function suggestions(newVal) {
+      var suggestionsList = [];
+
+      if (Array.isArray(newVal) && newVal.length) {
+        suggestionsList = [].concat(withClickIds(newVal));
+      } else if (Array.isArray(this.$props.defaultSuggestions) && this.$props.defaultSuggestions.length) {
+        suggestionsList = [].concat(withClickIds(this.$props.defaultSuggestions));
+      }
+
+      this.normalizedSuggestions = suggestionsList;
+    },
+    selectedValue: function selectedValue(newVal, oldVal) {
+      if (oldVal !== newVal && this.$data.currentValue !== newVal) {
+        if (!newVal && this.$data.currentValue) {
+          // selected value is cleared, call onValueSelected
+          this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
+        }
+
+        if (this.$props.value === undefined) {
+          this.setValue(newVal || '', true, this.$props);
+        }
+      }
+    },
+    focusShortcuts: function focusShortcuts() {
+      this.listenForFocusShortcuts();
+    },
+    rawData: function rawData(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: newVal,
+        aggregationData: this.aggregationData,
+        loading: this.isLoading,
+        error: this.isError
+      });
+    },
+    aggregationData: function aggregationData(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        aggregationData: newVal,
+        loading: this.isLoading,
+        error: this.isError
+      });
+    },
+    loading: function loading(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        aggregationData: this.aggregationData,
+        loading: newVal,
+        error: this.isError
+      });
+    },
+    error: function error(newVal) {
+      this.$emit('on-data', {
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        aggregationData: this.aggregationData,
+        loading: this.isLoading,
+        error: newVal
+      });
+    },
+    debounce: function debounce(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.handleTextChange = _debounce(this.handleText, newVal);
+      }
+    }
+  },
+  methods: {
+    handleText: function handleText(value, cause) {
+      if (cause === configureStore.causes.CLEAR_VALUE) {
+        this.triggerCustomQuery(value);
+        this.triggerDefaultQuery(value);
+      } else if (this.$props.autosuggest) {
+        this.triggerDefaultQuery(value);
+      } else {
+        this.triggerCustomQuery(value);
+      }
+    },
+    validateDataField: function validateDataField() {
+      var propName = 'dataField';
+      var componentName = SearchBox.name;
+      var props = this.$props;
+      var requiredError = propName + " supplied to " + componentName + " is required. Validation failed.";
+      var propValue = props[propName];
+
+      if (!this.enableAppbase) {
+        if (!propValue) {
+          console.error(requiredError);
+          return;
+        }
+
+        if (typeof propValue !== 'string' && typeof propValue !== 'object' && !Array.isArray(propValue)) {
+          console.error("Invalid " + propName + " supplied to " + componentName + ". Validation failed.");
+          return;
+        }
+
+        if (Array.isArray(propValue) && propValue.length === 0) {
+          console.error(requiredError);
+        }
+      }
+    },
+    getComponent: function getComponent(downshiftProps) {
+      if (downshiftProps === void 0) {
+        downshiftProps = {};
+      }
+
+      var currentValue = this.$data.currentValue;
+      var data = {
+        error: this.error,
+        loading: this.isLoading,
+        downshiftProps: downshiftProps,
+        data: this.normalizedSuggestions,
+        rawData: this.rawData,
+        value: currentValue,
+        resultStats: this.stats
+      };
+      return index.getComponent(data, this);
+    },
+    // returns size and aggs property
+    getBasicQueryOptions: function getBasicQueryOptions() {
+      var aggregationField = this.$props.aggregationField;
+      var queryOptions = helper.getQueryOptions(this.$props);
+
+      if (aggregationField) {
+        queryOptions.aggs = getCompositeAggsQuery({
+          props: this.$props,
+          showTopHits: true
+        }).aggs;
+      }
+
+      return queryOptions;
+    },
+    handleSearchIconClick: function handleSearchIconClick() {
+      var currentValue = this.currentValue;
+
+      if (currentValue.trim()) {
+        this.setValue(currentValue, true);
+        this.onValueSelectedHandler(currentValue, configureStore.causes.SEARCH_ICON_CLICK);
+      }
+    },
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
+      var _this = this;
+
+      if (isDefaultValue === void 0) {
+        isDefaultValue = false;
+      }
+
+      if (props === void 0) {
+        props = this.$props;
+      }
+
+      if (toggleIsOpen === void 0) {
+        toggleIsOpen = true;
+      }
+
+      if (categoryValue === void 0) {
+        categoryValue = undefined;
+      }
+
+      var performUpdate = function performUpdate() {
+        _this.currentValue = value;
+
+        if (isDefaultValue) {
+          if (_this.$props.autosuggest) {
+            if (toggleIsOpen) {
+              _this.isOpen = false;
+            }
+
+            _this.triggerDefaultQuery(value);
+          } // in case of strict selection only SUGGESTION_SELECT should be able
+          // to set the query otherwise the value should reset
+
+
+          if (props.strictSelection) {
+            if (cause === configureStore.causes.SUGGESTION_SELECT || value === '') {
+              _this.triggerCustomQuery(value, categoryValue);
+            } else {
+              _this.setValue('', true);
+            }
+          } else if (props.value === undefined) {
+            _this.triggerCustomQuery(value, categoryValue);
+          }
+        } else {
+          // debounce for handling text while typing
+          _this.handleTextChange(value, cause);
+        }
+
+        _this.$emit('valueChange', value);
+
+        _this.$emit('value-change', value);
+      };
+
+      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
+    },
+    triggerDefaultQuery: function triggerDefaultQuery(paramValue) {
+      if (!this.$props.autosuggest) {
+        return;
+      }
+
+      var value = typeof paramValue !== 'string' ? this.currentValue : paramValue;
+      var query = SearchBox.defaultQuery(value, this.$props);
+
+      if (this.defaultQuery) {
+        var defaultQueryToBeSet = this.defaultQuery(value, this.$props) || {};
+
+        if (defaultQueryToBeSet.query) {
+          query = defaultQueryToBeSet.query;
+        } // Update calculated default query in store
+
+
+        index.updateDefaultQuery(this.$props.componentId, this.setDefaultQuery, this.$props, value);
+      }
+
+      this.updateQuery({
+        componentId: this.internalComponent,
+        query: query,
+        value: value,
+        componentType: constants.componentTypes.searchBox
+      });
+    },
+    triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
+      if (categoryValue === void 0) {
+        categoryValue = undefined;
+      }
+
+      var _this$$props2 = this.$props,
+          customQuery = _this$$props2.customQuery,
+          filterLabel = _this$$props2.filterLabel,
+          showFilter = _this$$props2.showFilter,
+          URLParams = _this$$props2.URLParams;
+      var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
+      var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
+      var query = defaultQueryTobeSet;
+
+      if (customQuery) {
+        var customQueryTobeSet = customQuery(value, this.$props);
+        var queryTobeSet = customQueryTobeSet.query;
+
+        if (queryTobeSet) {
+          query = queryTobeSet;
+        }
+
+        index.updateCustomQuery(this.$props.componentId, this.setCustomQuery, this.$props, value);
+      }
+
+      this.updateQuery({
+        componentId: this.$props.componentId,
+        query: query,
+        value: value,
+        label: filterLabel,
+        showFilter: showFilter,
+        URLParams: URLParams,
+        componentType: constants.componentTypes.searchBox,
+        category: categoryValue
+      });
+    },
+    handleFocus: function handleFocus(event) {
+      if (this.$props.autosuggest) {
+        this.isOpen = true;
+      }
+
+      this.$emit('focus', event);
+    },
+    handleVoiceResults: function handleVoiceResults(_ref) {
+      var results = _ref.results;
+
+      if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
+        this.setValue(results[0][0].transcript.trim(), true);
+      }
+    },
+    triggerQuery: function triggerQuery(_ref2) {
+      var _ref2$isOpen = _ref2.isOpen,
+          isOpen = _ref2$isOpen === void 0 ? undefined : _ref2$isOpen,
+          _ref2$customQuery = _ref2.customQuery,
+          customQuery = _ref2$customQuery === void 0 ? true : _ref2$customQuery,
+          _ref2$defaultQuery = _ref2.defaultQuery,
+          defaultQuery = _ref2$defaultQuery === void 0 ? true : _ref2$defaultQuery,
+          _ref2$value = _ref2.value,
+          value = _ref2$value === void 0 ? undefined : _ref2$value,
+          _ref2$categoryValue = _ref2.categoryValue,
+          categoryValue = _ref2$categoryValue === void 0 ? undefined : _ref2$categoryValue;
+
+      if (typeof isOpen === 'boolean') {
+        this.isOpen = isOpen;
+      }
+
+      if (customQuery) {
+        this.triggerCustomQuery(value, categoryValue);
+      }
+
+      if (defaultQuery) {
+        this.triggerDefaultQuery(value);
+      }
+    },
+    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
+      // click analytics would only work client side and after javascript loads
+      var docId = documentId;
+
+      if (!docId) {
+        var hitData = this.normalizedSuggestions.find(function (hit) {
+          return hit._click_id === searchPosition;
+        });
+
+        if (hitData && hitData.source && hitData.source._id) {
+          docId = hitData.source._id;
+        }
+      }
+
+      this.recordSuggestionClick(searchPosition, docId);
+    },
+    clearValue: function clearValue() {
+      this.setValue('', false, this.$props, configureStore.causes.CLEAR_VALUE, false);
+      this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
+    },
+    handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+      // if a suggestion was selected, delegate the handling to suggestion handler
+      if (event.key === 'Enter' && highlightedIndex === null) {
+        this.setValue(event.target.value, true);
+        this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
+      } // Need to review
+
+
+      this.$emit('keyDown', event, this.triggerQuery);
+      this.$emit('key-down', event, this.triggerQuery);
+    },
+    onInputChange: function onInputChange(e) {
+      var _this2 = this;
+
+      var inputValue = e.target.value;
+
+      if (!this.$data.isOpen && this.$props.autosuggest) {
+        this.isOpen = true;
+      }
+
+      var value = this.$props.value;
+
+      if (value === undefined) {
+        this.setValue(inputValue, false, this.$props, inputValue === '' ? configureStore.causes.CLEAR_VALUE : undefined);
+      } else {
+        this.$emit('change', inputValue, function (_ref3) {
+          var isOpen = _ref3.isOpen;
+          return _this2.triggerQuery({
+            defaultQuery: true,
+            customQuery: true,
+            value: inputValue,
+            isOpen: isOpen
+          });
+        }, e);
+      }
+    },
+    onSuggestionSelected: function onSuggestionSelected(suggestion) {
+      var _this3 = this;
+
+      this.isOpen = false;
+      var value = this.$props.value; // Record analytics for selected suggestions
+
+      this.triggerClickAnalytics(suggestion._click_id);
+
+      if (value === undefined) {
+        this.setValue(suggestion.value, true, this.$props, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
+      } else {
+        this.$emit('change', suggestion.value, function (_ref4) {
+          var isOpen = _ref4.isOpen;
+          return _this3.triggerQuery({
+            isOpen: isOpen,
+            value: suggestion.value,
+            categoryValue: suggestion._category
+          });
+        });
+      }
+
+      this.onValueSelectedHandler(suggestion.value, configureStore.causes.SUGGESTION_SELECT, suggestion.source);
+    },
+    onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
+      if (currentValue === void 0) {
+        currentValue = this.$data.currentValue;
+      }
+
+      for (var _len = arguments.length, cause = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        cause[_key - 1] = arguments[_key];
+      }
+
+      this.$emit.apply(this, ['valueSelected', currentValue].concat(cause));
+      this.$emit.apply(this, ['value-selected', currentValue].concat(cause));
+    },
+    handleStateChange: function handleStateChange(changes) {
+      var isOpen = changes.isOpen;
+      this.isOpen = isOpen;
+    },
+    getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
+      var isDark = this.themePreset === 'dark';
+
+      if (isDark) {
+        return highlightedIndex === index ? '#555' : '#424242';
+      }
+
+      return highlightedIndex === index ? '#eee' : '#fff';
+    },
+    renderIcon: function renderIcon() {
+      var h = this.$createElement;
+
+      if (this.$props.showIcon) {
+        return this.$props.icon || h(DataSearch.SearchSvg);
+      }
+
+      return null;
+    },
+    renderErrorComponent: function renderErrorComponent() {
+      var h = this.$createElement;
+      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+
+      if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
+        return h(DataSearch.SuggestionWrapper, {
+          "attrs": {
+            "innerClass": this.$props.innerClass,
+            "innerClassName": "error",
+            "theme": this.theme,
+            "themePreset": this.themePreset
+          }
+        }, [index.isFunction(renderError) ? renderError(this.error) : renderError]);
+      }
+
+      return null;
+    },
+    renderCancelIcon: function renderCancelIcon() {
+      var h = this.$createElement;
+
+      if (this.$props.showClear) {
+        return this.$props.clearIcon || h(CancelSvg.CancelSvg);
+      }
+
+      return null;
+    },
+    renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
+      if (finalSuggestionsList === void 0) {
+        finalSuggestionsList = [];
+      }
+
+      var h = this.$createElement;
+      var _this$$props3 = this.$props,
+          theme = _this$$props3.theme,
+          innerClass = _this$$props3.innerClass;
+      var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
+      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+      var _this$$data = this.$data,
+          isOpen = _this$$data.isOpen,
+          currentValue = _this$$data.currentValue;
+
+      if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
+        return h(DataSearch.SuggestionWrapper, {
+          "attrs": {
+            "innerClass": innerClass,
+            "themePreset": this.themePreset,
+            "theme": theme,
+            "innerClassName": "noSuggestion"
+          },
+          "scopedSlots": {
+            "default": function _default() {
+              return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
+            }
+          }
+        });
+      }
+
+      return null;
+    },
+    renderInputAddonBefore: function renderInputAddonBefore() {
+      var h = this.$createElement;
+      var addonBefore = this.$scopedSlots.addonBefore;
+
+      if (addonBefore) {
+        return h(DataSearch.InputAddon, {
+          "attrs": {
+            "className": "addon-before"
+          }
+        }, [addonBefore()]);
+      }
+
+      return null;
+    },
+    renderInputAddonAfter: function renderInputAddonAfter() {
+      var h = this.$createElement;
+      var addonAfter = this.$scopedSlots.addonAfter;
+
+      if (addonAfter) {
+        return h(DataSearch.InputAddon, {
+          "attrs": {
+            "className": "addon-after"
+          }
+        }, [addonAfter()]);
+      }
+
+      return null;
+    },
+    renderIcons: function renderIcons() {
+      var h = this.$createElement;
+      var _this$$props4 = this.$props,
+          iconPosition = _this$$props4.iconPosition,
+          showClear = _this$$props4.showClear,
+          innerClass = _this$$props4.innerClass,
+          getMicInstance = _this$$props4.getMicInstance,
+          showVoiceSearch = _this$$props4.showVoiceSearch,
+          showIcon = _this$$props4.showIcon;
+      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
+      var currentValue = this.$data.currentValue;
+      return h("div", [h(CancelSvg.IconGroup, {
+        "attrs": {
+          "groupPosition": "right",
+          "positionType": "absolute"
+        }
+      }, [currentValue && showClear && h(CancelSvg.IconWrapper, {
+        "on": {
+          "click": this.clearValue
+        },
+        "attrs": {
+          "showIcon": showIcon,
+          "isClearIcon": true
+        }
+      }, [this.renderCancelIcon()]), showVoiceSearch && h(DataSearch.Mic, {
+        "attrs": {
+          "getInstance": getMicInstance,
+          "render": renderMic,
+          "handleResult": this.handleVoiceResults,
+          "className": getClassName(innerClass, 'mic') || null
+        }
+      }), iconPosition === 'right' && showIcon && h(CancelSvg.IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])]), h(CancelSvg.IconGroup, {
+        "attrs": {
+          "groupPosition": "left",
+          "positionType": "absolute"
+        }
+      }, [iconPosition === 'left' && showIcon && h(CancelSvg.IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])])]);
+    },
+    focusSearchBox: function focusSearchBox(event) {
+      var _this$$refs, _this$$refs$this$$pro;
+
+      var elt = event.target || event.srcElement;
+      var tagName = elt.tagName;
+
+      if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
+        // already in an input
+        return;
+      }
+
+      (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
+    },
+    listenForFocusShortcuts: function listenForFocusShortcuts() {
+      var _this4 = this;
+
+      var _this$$props$focusSho = this.$props.focusShortcuts,
+          focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
+
+      if (index.isEmpty(focusShortcuts)) {
+        return;
+      }
+
+      var shortcutsString = index.parseFocusShortcuts(focusShortcuts).join(','); // handler for alphabets and other key combinations
+
+      hotkeys(shortcutsString, // eslint-disable-next-line no-unused-vars
+
+      /* eslint-disable no-shadow */
+      function (event, handler) {
+        // Prevent the default refresh event under WINDOWS system
+        event.preventDefault();
+
+        _this4.focusSearchBox(event);
+      }); // if one of modifier keys are used, they are handled below
+
+      hotkeys('*', function (event) {
+        var modifierKeys = index.extractModifierKeysFromFocusShortcuts(focusShortcuts);
+        if (modifierKeys.length === 0) return;
+
+        for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
+          var element = modifierKeys[index$1];
+
+          if (hotkeys[element]) {
+            _this4.focusSearchBox(event);
+
+            break;
+          }
+        }
+      });
+    },
+    onAutofillClick: function onAutofillClick(suggestion) {
+      var value = suggestion.value;
+      this.isOpen = true;
+      this.currentValue = value;
+      this.triggerDefaultQuery(value);
+    },
+    renderAutoFill: function renderAutoFill(suggestion) {
+      var _this5 = this;
+
+      var h = this.$createElement;
+
+      var handleAutoFillClick = function handleAutoFillClick(e) {
+        e.stopPropagation();
+
+        _this5.onAutofillClick(suggestion);
+      };
+      /* 👇 avoid showing autofill for category suggestions👇 */
+
+
+      return suggestion._category ? null : h(AutoFillSvg, {
+        "on": {
+          "click": handleAutoFillClick
+        }
+      });
+    }
+  },
+  render: function render() {
+    var _this6 = this;
+
+    var h = arguments[0];
+    var _this$$props5 = this.$props,
+        theme = _this$$props5.theme,
+        expandSuggestionsContainer = _this$$props5.expandSuggestionsContainer;
+    var _this$$scopedSlots = this.$scopedSlots,
+        recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
+        popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
+    var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
+    var renderItem = this.$scopedSlots.renderItem || this.$props.renderItem;
+    return h(Container.Container, {
+      "class": this.$props.className
+    }, [this.$props.title && h(Title.Title, {
+      "class": getClassName(this.$props.innerClass, 'title') || ''
+    }, [this.$props.title]), this.$props.autosuggest ? h(CancelSvg.Downshift, {
+      "attrs": {
+        "id": this.$props.componentId + "-downshift",
+        "handleChange": this.onSuggestionSelected,
+        "handleMouseup": this.handleStateChange,
+        "isOpen": this.$data.isOpen
+      },
+      "scopedSlots": {
+        "default": function _default(_ref5) {
+          var getInputEvents = _ref5.getInputEvents,
+              getInputProps = _ref5.getInputProps,
+              getItemProps = _ref5.getItemProps,
+              getItemEvents = _ref5.getItemEvents,
+              isOpen = _ref5.isOpen,
+              highlightedIndex = _ref5.highlightedIndex,
+              setHighlightedIndex = _ref5.setHighlightedIndex;
+
+          var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
+            var getIcon = function getIcon(iconType) {
+              switch (iconType) {
+                case helper.suggestionTypes.Recent:
+                  return recentSearchesIcon;
+
+                case helper.suggestionTypes.Popular:
+                  return popularSearchesIcon;
+
+                default:
+                  return null;
+              }
+            };
+
+            return h("div", [_this6.hasCustomRenderer && _this6.getComponent({
+              isOpen: isOpen,
+              getItemProps: getItemProps,
+              getItemEvents: getItemEvents,
+              highlightedIndex: highlightedIndex
+            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": Input.suggestions(_this6.themePreset, theme) + " " + getClassName(_this6.$props.innerClass, 'list')
+            }, [_this6.normalizedSuggestions.map(function (item, index) {
+              return renderItem ? h("li", {
+                "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
+                  item: item
+                })),
+                "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
+                  item: item
+                })),
+                "key": index + 1 + "-" + item.value,
+                "style": {
+                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index),
+                  justifyContent: 'flex-start',
+                  alignItems: 'center'
+                }
+              }, [renderItem(item)]) : h("li", {
+                "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
+                  item: item
+                })),
+                "on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
+                  item: item
+                })),
+                "key": index + 1 + "-" + item.value,
+                "style": {
+                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index),
+                  justifyContent: 'flex-start',
+                  alignItems: 'center'
+                }
+              }, [h("div", {
+                "style": {
+                  padding: '0 10px 0 0',
+                  display: 'flex'
+                }
+              }, [h(DataSearch.CustomSvg, {
+                "attrs": {
+                  "className": getClassName(_this6.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "icon": getIcon(item._suggestion_type),
+                  "type": item._suggestion_type + "-search-icon"
+                }
+              })]), h(DataSearch.SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this6.currentValue,
+                  "suggestion": item
+                }
+              }), _this6.renderAutoFill(item)]);
+            })]) : _this6.renderNoSuggestions(_this6.normalizedSuggestions)]);
+          };
+
+          return h("div", {
+            "class": Input.suggestionsContainer
+          }, [h(DataSearch.InputGroup, [_this6.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+            "attrs": {
+              "id": _this6.$props.componentId + "-input",
+              "showIcon": _this6.$props.showIcon,
+              "showClear": _this6.$props.showClear,
+              "iconPosition": _this6.$props.iconPosition,
+              "placeholder": _this6.$props.placeholder,
+              "autoFocus": _this6.$props.autoFocus,
+              "themePreset": _this6.themePreset,
+              "autocomplete": "off"
+            },
+            "ref": _this6.$props.innerRef,
+            "class": getClassName(_this6.$props.innerClass, 'input'),
+            "on": _rollupPluginBabelHelpers._extends({}, getInputEvents({
+              onInput: _this6.onInputChange,
+              onBlur: function onBlur(e) {
+                _this6.$emit('blur', e, _this6.triggerQuery);
+              },
+              onFocus: _this6.handleFocus,
+              onKeyPress: function onKeyPress(e) {
+                _this6.$emit('keyPress', e, _this6.triggerQuery);
+
+                _this6.$emit('key-press', e, _this6.triggerQuery);
+              },
+              onKeyDown: function onKeyDown(e) {
+                return _this6.handleKeyDown(e, highlightedIndex);
+              },
+              onKeyUp: function onKeyUp(e) {
+                _this6.$emit('keyUp', e, _this6.triggerQuery);
+
+                _this6.$emit('key-up', e, _this6.triggerQuery);
+              },
+              onClick: function onClick() {
+                setHighlightedIndex(null);
+              }
+            })),
+            "domProps": _rollupPluginBabelHelpers._extends({}, getInputProps({
+              value: _this6.$data.currentValue === null ? '' : _this6.$data.currentValue
+            }))
+          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
+        }
+      }
+    }) : h("div", {
+      "class": Input.suggestionsContainer
+    }, [h(DataSearch.InputGroup, [this.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+      "class": getClassName(this.$props.innerClass, 'input') || '',
+      "attrs": {
+        "placeholder": this.$props.placeholder,
+        "iconPosition": this.$props.iconPosition,
+        "showIcon": this.$props.showIcon,
+        "showClear": this.$props.showClear,
+        "themePreset": this.themePreset
+      },
+      "on": _rollupPluginBabelHelpers._extends({}, {
+        blur: function blur(e) {
+          _this6.$emit('blur', e, _this6.triggerQuery);
+        },
+        keypress: function keypress(e) {
+          _this6.$emit('keyPress', e, _this6.triggerQuery);
+
+          _this6.$emit('key-press', e, _this6.triggerQuery);
+        },
+        input: this.onInputChange,
+        focus: function focus(e) {
+          _this6.$emit('focus', e, _this6.triggerQuery);
+        },
+        keydown: function keydown(e) {
+          _this6.$emit('keyDown', e, _this6.triggerQuery);
+
+          _this6.$emit('key-down', e, _this6.triggerQuery);
+        },
+        keyup: function keyup(e) {
+          _this6.$emit('keyUp', e, _this6.triggerQuery);
+
+          _this6.$emit('key-up', e, _this6.triggerQuery);
+        }
+      }),
+      "domProps": _rollupPluginBabelHelpers._extends({}, {
+        autofocus: this.$props.autoFocus,
+        value: this.$data.currentValue ? this.$data.currentValue : ''
+      }),
+      "ref": this.$props.innerRef
+    }), this.renderIcons()]), this.renderInputAddonAfter()])])]);
+  },
+  destroyed: function destroyed() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+};
+
+SearchBox.defaultQuery = function (value, props) {
+  var finalQuery = null;
+  var fields = normalizeDataField(props.dataField, props.fieldWeights);
+  finalQuery = {
+    bool: {
+      should: SearchBox.shouldQuery(value, fields, props),
+      minimum_should_match: '1'
+    }
+  };
+
+  if (finalQuery && props.nestedField) {
+    return {
+      query: {
+        nested: {
+          path: props.nestedField,
+          query: finalQuery
+        }
+      }
+    };
+  }
+
+  return finalQuery;
+};
+
+SearchBox.shouldQuery = function (value, dataFields, props) {
+  var finalQuery = [];
+  var phrasePrefixFields = [];
+  var fields = dataFields.map(function (dataField) {
+    var queryField = "" + dataField.field + (dataField.weight ? "^" + dataField.weight : '');
+
+    if (!(dataField.field.endsWith('.keyword') || dataField.field.endsWith('.autosuggest') || dataField.field.endsWith('.search'))) {
+      phrasePrefixFields.push(queryField);
+    }
+
+    return queryField;
+  });
+
+  if (props.searchOperators || props.queryString) {
+    return {
+      query: value,
+      fields: fields,
+      default_operator: props.queryFormat
+    };
+  }
+
+  if (props.queryFormat === 'and') {
+    finalQuery.push({
+      multi_match: {
+        query: value,
+        fields: fields,
+        type: 'cross_fields',
+        operator: 'and'
+      }
+    });
+    finalQuery.push({
+      multi_match: {
+        query: value,
+        fields: fields,
+        type: 'phrase',
+        operator: 'and'
+      }
+    });
+
+    if (phrasePrefixFields.length > 0) {
+      finalQuery.push({
+        multi_match: {
+          query: value,
+          fields: phrasePrefixFields,
+          type: 'phrase_prefix',
+          operator: 'and'
+        }
+      });
+    }
+
+    return finalQuery;
+  }
+
+  finalQuery.push({
+    multi_match: {
+      query: value,
+      fields: fields,
+      type: 'best_fields',
+      operator: 'or',
+      fuzziness: props.fuzziness ? props.fuzziness : 0
+    }
+  });
+  finalQuery.push({
+    multi_match: {
+      query: value,
+      fields: fields,
+      type: 'phrase',
+      operator: 'or'
+    }
+  });
+
+  if (phrasePrefixFields.length > 0) {
+    finalQuery.push({
+      multi_match: {
+        query: value,
+        fields: phrasePrefixFields,
+        type: 'phrase_prefix',
+        operator: 'or'
+      }
+    });
+  }
+
+  return finalQuery;
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    selectedCategory: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].category || null,
+    suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
+    rawData: state.rawData[props.componentId],
+    aggregationData: state.compositeAggregations[props.componentId] || [],
+    themePreset: state.config.themePreset,
+    isLoading: !!state.isLoading[props.componentId + "_active"],
+    error: state.error[props.componentId],
+    enableAppbase: state.config.enableAppbase,
+    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden
+  };
+};
+
+var mapDispatchToProps = {
+  updateQuery: updateQuery,
+  setCustomQuery: setCustomQuery,
+  setDefaultQuery: setDefaultQuery,
+  recordSuggestionClick: recordSuggestionClick
+};
+var DSConnected = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
+  componentType: constants.componentTypes.searchBox,
+  internalComponent: true
+});
+
+SearchBox.install = function (Vue) {
+  Vue.component(SearchBox.name, DSConnected);
+}; // Add componentType for SSR
+
+
+SearchBox.componentType = constants.componentTypes.searchBox;
+
+var components = [ReactiveList.default, ResultCard.default, ResultList.default, ReactiveBase.default, DataSearch.DataSearch, SearchBox, SingleList.default, MultiList.default, SingleRange.default, MultiRange.default, RangeSlider.default, DynamicRangeSlider.default, ReactiveComponent.default, SelectedFilters.default, ToggleButton.default, SingleDropdownList.default, MultiDropdownList.default, StateProvider.default, RangeInput.default];
+function install (Vue) {
+  components.map(function (component) {
+    Vue.use(component);
+    return null;
+  });
+}
+
+exports.SearchBox = SearchBox;
+exports.install = install;