@appbaseio/reactivesearch-vue 1.28.0 → 1.29.0-preview.1

package/dist/es/DataSearch-42f547cd.js

@@ -0,0 +1,2158 @@
+import { helper, Actions, causes } from '@appbaseio/reactivecore';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-0f24d612.js';
+import VueTypes from 'vue-types';
+import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import { getQueryOptions } from '@appbaseio/reactivecore/lib/utils/helper';
+import styled, { css, cx, injectGlobal } from '@appbaseio/vue-emotion';
+import { t as types } from './vueTypes-687b2304.js';
+import { g as getComponent, h as hasCustomRenderer, f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, j as getQuerySuggestionsComponent, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, m as hasQuerySuggestionsRenderer, c as connect } from './index-78920565.js';
+import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
+import { T as Title } from './Title-3522ff56.js';
+import { F as Flex } from './Flex-8770345d.js';
+import hotkeys from 'hotkeys-js';
+import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-c2c03a35.js';
+import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-e339e63a.js';
+import { C as Container } from './Container-18b03fde.js';
+import Highlight from 'vue-highlight-words';
+
+var _templateObject;
+var InputGroup = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n"])));
+InputGroup.defaultProps = {
+  className: 'input-group'
+};
+
+var _templateObject$1;
+var InputAddon = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fafafa;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-weight: 400;\n  padding: 0 11px;\n  position: relative;\n  transition: all 0.3s;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  &:first-of-type {\n    border-right: none;\n  }\n  &:last-of-type {\n    border-left: none;\n  }\n"])));
+InputAddon.defaultProps = {
+  className: 'input-addon'
+};
+
+var getClassName = helper.getClassName;
+var SuggestionWrapper = {
+  name: 'SuggestionWrapper',
+  props: {
+    innerClassName: types.string,
+    themePreset: types.themePreset,
+    innerClass: types.style
+  },
+  render: function render() {
+    var h = arguments[0];
+    var _this$$props = this.$props,
+        themePreset = _this$$props.themePreset,
+        innerClass = _this$$props.innerClass,
+        innerClassName = _this$$props.innerClassName;
+    return h("div", {
+      "class": noSuggestions(themePreset) + " " + getClassName(innerClass, innerClassName || '')
+    }, [h("li", [this.$scopedSlots["default"]()])]);
+  }
+};
+
+var _templateObject$2;
+var highlightStyle = {
+  fontWeight: 600,
+  padding: 0,
+  backgroundColor: 'transparent',
+  color: 'inherit'
+};
+var PredictiveSuggestion = styled('span')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
+var SuggestionItem = {
+  name: 'SuggestionItem',
+  props: {
+    currentValue: types.string,
+    suggestion: types.any
+  },
+  render: function render() {
+    var h = arguments[0];
+    var _this$suggestion = this.suggestion,
+        label = _this$suggestion.label,
+        value = _this$suggestion.value,
+        title = _this$suggestion.title,
+        description = _this$suggestion.description,
+        image = _this$suggestion.image,
+        isPredictiveSuggestion = _this$suggestion.isPredictiveSuggestion,
+        _suggestion_type = _this$suggestion._suggestion_type,
+        _category = _this$suggestion._category;
+
+    if (label) {
+      // label has highest precedence
+      return typeof label === 'string' ? h("div", {
+        "class": "trim"
+      }, [(_category ? false : isPredictiveSuggestion // eslint-disable-next-line
+      || !!_suggestion_type) ? h(PredictiveSuggestion, {
+        "domProps": {
+          "innerHTML": label
+        }
+      }) : h(Highlight, {
+        "attrs": {
+          "searchWords": _category ? [_category] : this.currentValue.split(' '),
+          "textToHighlight": label,
+          "autoEscape": true,
+          "highlightStyle": highlightStyle
+        }
+      })]) : label;
+    }
+
+    if (title || image || description) {
+      return h(Flex, {
+        "attrs": {
+          "alignItems": "center",
+          "css": {
+            width: '100%'
+          }
+        }
+      }, [image && h("div", {
+        "attrs": {
+          "css": {
+            margin: 'auto',
+            marginRight: 10
+          }
+        }
+      }, [h("img", {
+        "attrs": {
+          "src": image,
+          "alt": " ",
+          "height": "50px",
+          "width": "50px",
+          "css": {
+            objectFit: 'contain'
+          }
+        }
+      })]), h(Flex, {
+        "attrs": {
+          "direction": "column",
+          "css": {
+            width: image ? 'calc(100% - 60px)' : '100%'
+          }
+        }
+      }, [title && h("div", {
+        "class": "trim"
+      }, [h(Highlight, {
+        "attrs": {
+          "searchWords": this.currentValue.split(' '),
+          "textToHighlight": title,
+          "highlightStyle": highlightStyle
+        },
+        "class": css({
+          fontSize: '1rem'
+        })
+      })]), description && h("div", {
+        "class": cx('trim', css({
+          marginTop: 3
+        }))
+      }, [h(Highlight, {
+        "attrs": {
+          "searchWords": this.currentValue.split(' '),
+          "textToHighlight": description,
+          "highlightStyle": highlightStyle
+        }
+      })])])]);
+    }
+
+    return value;
+  }
+};
+
+var SearchSvg = {
+  name: 'SearchSvg',
+  props: ['styles'],
+  render: function render() {
+    var h = arguments[0];
+    return h("svg", {
+      "attrs": {
+        "alt": "Search",
+        "height": "12",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 15 15"
+      },
+      "class": "search-icon",
+      "style": _extends({
+        transform: 'scale(1.35)',
+        position: 'relative'
+      }, this.$props.styles ? this.$props.styles : {})
+    }, [h("title", ["Search"]), h("path", {
+      "attrs": {
+        "d": 'M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'
+      }
+    })]);
+  }
+};
+
+var _templateObject$3;
+
+injectGlobal(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"])));
+var MicSvg = {
+  name: 'MicSvg',
+  props: ['className'],
+  render: function render() {
+    var h = arguments[0];
+    return h("svg", {
+      "attrs": {
+        "viewBox": "0 0 480 480",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "id": "el_xS0FRzQjJ",
+        "width": 28,
+        "height": 28,
+        "className": this.$props.className
+      },
+      "style": {
+        transform: 'scale(1.5)'
+      }
+    }, [h("g", {
+      "attrs": {
+        "id": "el_TvxDfTAtKp",
+        "fillRule": "evenodd"
+      }
+    }, [h("g", {
+      "attrs": {
+        "id": "el_D93PK3GbmJ",
+        "fillRule": "nonzero"
+      },
+      "style": {
+        fill: '#595959'
+      }
+    }, [h("path", {
+      "attrs": {
+        "d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
+        "id": "el_uly3EwA2O3"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,-2.84217094e-14 76.9864699,-2.84217094e-14 C55.8825877,-2.84217094e-14 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
+        "id": "el_tnDbR4ytu4"
+      }
+    })])])]);
+  }
+};
+
+var _templateObject$4;
+
+injectGlobal(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"])));
+var MuteSvg = {
+  name: 'MuteSvg',
+  props: ['className'],
+  render: function render() {
+    var h = arguments[0];
+    return h("svg", {
+      "style": {
+        transform: 'scale(1.5)'
+      },
+      "attrs": {
+        "viewBox": "0 0 480 480",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "id": "el_D1rEpH2zj",
+        "width": 28,
+        "height": 28,
+        "className": this.$props.className
+      }
+    }, [h("g", {
+      "attrs": {
+        "id": "el_X81iT9kZYo",
+        "fillRule": "evenodd"
+      }
+    }, [h("g", {
+      "attrs": {
+        "id": "el_gMpyalCphp"
+      }
+    }, [h("path", {
+      "attrs": {
+        "d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
+        "id": "el_c7H-3u-D4l",
+        "fillRule": "nonzero"
+      },
+      "style": {
+        fill: '#595959'
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,-2.84217094e-14 76.9864699,-2.84217094e-14 C55.8825877,-2.84217094e-14 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
+        "id": "el_qhFcdAAFwo",
+        "fillRule": "nonzero"
+      },
+      "style": {
+        fill: '#595959'
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M11.5,206.5 L142.5,12.5",
+        "id": "el_M8X8g37WOI",
+        "strokeLinecap": "round",
+        "strokeLinejoin": "round"
+      }
+    })])])]);
+  }
+};
+
+var _templateObject$5;
+
+injectGlobal(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"])));
+var ListenSvg = {
+  name: 'ListenSvg',
+  props: ['className'],
+  render: function render() {
+    var h = arguments[0];
+    return h("svg", {
+      "attrs": {
+        "viewBox": "0 0 480 480",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "xmlnsXlink": "http://www.w3.org/1999/xlink",
+        "id": "el_hiibMG0x-",
+        "width": 28,
+        "height": 29,
+        "className": this.$props.className
+      },
+      "style": {
+        transform: 'scale(1.5)'
+      }
+    }, [h("defs", [h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-1"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-3"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-5"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-7"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-9"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-11"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-13"
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "path-15"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_QJeJ_2CDw5",
+        "fillRule": "evenodd"
+      }
+    }, [h("g", {
+      "attrs": {
+        "id": "el_UYYCfubTRf"
+      }
+    }, [h("path", {
+      "attrs": {
+        "d": "M142.731204,111 C137.280427,111 132.719573,114.852 131.82965,120.095 C127.268796,145.24 104.464526,164.5 76.9881611,164.5 C49.5117965,164.5 26.7075263,145.24 22.1466723,120.095 C21.2567496,114.852 16.6958955,111 11.2451187,111 C4.45945784,111 -0.880078594,116.778 0.121084488,123.198 C5.57186127,155.298 32.2695435,180.443 65.8641269,185.044 L65.8641269,207.3 C65.8641269,213.185 70.8699423,218 76.9881611,218 C83.10638,218 88.1121954,213.185 88.1121954,207.3 L88.1121954,185.044 C121.706779,180.443 148.404461,155.298 153.855238,123.198 C154.967641,116.778 149.516864,111 142.731204,111 Z",
+        "id": "el_uzZNtK32Zi",
+        "fillRule": "nonzero"
+      },
+      "style": {
+        fill: '#0B6AFF'
+      }
+    }), h("path", {
+      "attrs": {
+        "d": "M76.9864699,147.789474 C98.090352,147.789474 115.126016,131.286316 115.126016,110.842105 L115.126016,36.9473684 C115.126016,16.5031579 98.090352,0 76.9864699,0 C55.8825877,0 38.8469239,16.5031579 38.8469239,36.9473684 L38.8469239,110.842105 C38.8469239,131.286316 55.8825877,147.789474 76.9864699,147.789474 Z",
+        "id": "el_EYKQ2N9Kgy",
+        "fillRule": "nonzero"
+      }
+    }), h("g", {
+      "attrs": {
+        "id": "el_6SDP2LAgKC"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-2",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-1"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_-Vm65Ltfy7",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-2)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_q04iZcSim4",
+        "mask": "url(#mask-2)",
+        "x": "0.279",
+        "width": "77",
+        "height": "130"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_6WKby7wXqV"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-4",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-3"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_9bggsfQOtU",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-4)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_NKxqi9eIym",
+        "mask": "url(#mask-4)",
+        "x": "0.279",
+        "width": "77",
+        "height": "115"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_Wi-my975tM"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-6",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-5"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_zclQ34fvf7",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-6)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_1OsvRT8HkeZ",
+        "mask": "url(#mask-6)",
+        "x": "0.279",
+        "width": "77",
+        "height": "100"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_DkfFFTaFxy8"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-8",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-7"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_aa9sjx4H0vA",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-8)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_tea114vWg0J",
+        "mask": "url(#mask-8)",
+        "x": "0.279",
+        "width": "77",
+        "height": "85"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_34IgwiMB5rf"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-10",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-9"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_z5u6RAFhx7d",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-10)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_7nfuWmA5Uhy",
+        "mask": "url(#mask-10)",
+        "x": "0.279",
+        "width": "77",
+        "height": "70"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_DeebuCsPTGA"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-12",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-11"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el__ZcqlS20zcw",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-12)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_8DnEQnD7VWV",
+        "mask": "url(#mask-12)",
+        "x": "0.279",
+        "width": "77",
+        "height": "55"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_ZOjjrPTvyrv"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-14",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-13"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_FYYKCI_u24e",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-14)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_XZty4MnTp5Y",
+        "mask": "url(#mask-14)",
+        "x": "0.279",
+        "width": "77",
+        "height": "40"
+      }
+    })]), h("g", {
+      "attrs": {
+        "id": "el_2FATegVmf0K"
+      }
+    }, [h("mask", {
+      "attrs": {
+        "id": "mask-16",
+        "fill": "#fff"
+      }
+    }, [h("use", {
+      "attrs": {
+        "xlink:href": "#path-15"
+      }
+    })]), h("path", {
+      "attrs": {
+        "d": "M38.779092,147.789474 C60.0824253,147.789474 77.279092,131.286316 77.279092,110.842105 L77.279092,36.9473684 C77.279092,16.5031579 60.0824253,0 38.779092,0 C17.4757586,0 0.279091964,16.5031579 0.279091964,36.9473684 L0.279091964,110.842105 C0.279091964,131.286316 17.4757586,147.789474 38.779092,147.789474 Z",
+        "id": "el_RMT1KUfbdF8",
+        "fillRule": "nonzero",
+        "mask": "url(#mask-16)"
+      }
+    }), h("rect", {
+      "attrs": {
+        "id": "el_RgLcovvFiO1",
+        "mask": "url(#mask-16)",
+        "x": "0.279",
+        "width": "77",
+        "height": "25"
+      }
+    })])])])]);
+  }
+};
+
+var STATUS = {
+  inactive: 'INACTIVE',
+  stopped: 'STOPPED',
+  active: 'ACTIVE',
+  denied: 'DENIED'
+};
+var Mic = {
+  name: 'Mic',
+  props: {
+    children: types.title,
+    lang: VueTypes.string.def('en-US'),
+    iconPosition: VueTypes.string.def('left'),
+    handleResult: types.func,
+    onNoMatch: types.func,
+    onError: types.func,
+    getInstance: types.func,
+    render: types.func,
+    className: types.string,
+    applyClearStyle: VueTypes.bool,
+    showIcon: VueTypes.bool
+  },
+  methods: {
+    getComponent: function getComponent$1() {
+      var status = this.$data.status;
+      var data = {
+        handleClick: this.handleClick,
+        status: status
+      };
+      return getComponent(data, this);
+    },
+    stopMic: function stopMic() {
+      if (this.instance) {
+        this.status = STATUS.inactive;
+        this.instance.stop();
+        this.instance = null;
+      }
+    },
+    handleClick: function handleClick() {
+      var _this = this;
+
+      this.results = [];
+
+      if (window && window.SpeechRecognition) {
+        var status = this.$data.status;
+
+        if (status === STATUS.active) {
+          this.status = STATUS.inactive;
+        }
+
+        var _this$$props = this.$props,
+            handleResult = _this$$props.handleResult,
+            onNoMatch = _this$$props.onNoMatch,
+            onError = _this$$props.onError,
+            lang = _this$$props.lang,
+            getInstance = _this$$props.getInstance;
+        var _window = window,
+            SpeechRecognition = _window.SpeechRecognition;
+
+        if (this.instance && this.status !== STATUS.denied) {
+          this.status = STATUS.inactive;
+          this.instance.stop();
+          this.instance = null;
+          return;
+        }
+
+        this.instance = new SpeechRecognition();
+        this.instance.continuous = true;
+        this.instance.interimResults = true;
+        this.instance.lang = lang;
+
+        if (getInstance) {
+          getInstance(this.instance);
+        }
+
+        this.instance.start();
+
+        this.instance.onstart = function () {
+          _this.status = STATUS.active;
+        };
+
+        this.instance.onresult = function (_ref) {
+          var results = _ref.results,
+              timeStamp = _ref.timeStamp;
+
+          _this.stopMic();
+
+          if (handleResult) {
+            handleResult({
+              results: results,
+              timeStamp: timeStamp
+            });
+          }
+
+          _this.results.push({
+            results: results,
+            timeStamp: timeStamp
+          });
+        };
+
+        this.instance.onnomatch = function (e) {
+          return onNoMatch ? onNoMatch(e) : console.warn(e);
+        };
+
+        this.instance.onerror = function (e) {
+          if (e.error === 'no-speech' || e.error === 'audio-capture') {
+            _this.status = STATUS.inactive;
+          } else if (e.error === 'not-allowed') {
+            _this.status = STATUS.denied;
+          }
+
+          console.error(e);
+
+          if (onError) {
+            onError(e);
+          }
+        };
+        /* Below Two methods run when Continuous is False */
+
+
+        this.instance.onspeechend = function () {
+          _this.status = STATUS.inactive;
+        };
+
+        this.instance.onaudioend = function () {
+          _this.status = STATUS.inactive;
+        };
+      }
+    }
+  },
+  computed: {
+    hasCustomRenderer: function hasCustomRenderer$1() {
+      return hasCustomRenderer(this);
+    },
+    Icon: function Icon() {
+      var h = this.$createElement;
+      var status = this.$data.status;
+      var className = this.$props.className;
+
+      switch (status) {
+        case STATUS.active:
+          return h(ListenSvg, {
+            "attrs": {
+              "className": className
+            },
+            "nativeOn": {
+              "click": this.handleClick
+            }
+          });
+
+        case STATUS.stopped:
+        case STATUS.denied:
+          return h(MuteSvg, {
+            "attrs": {
+              "className": className
+            },
+            "nativeOn": {
+              "click": this.handleClick
+            }
+          });
+
+        default:
+          return h(MicSvg, {
+            "attrs": {
+              "className": className
+            },
+            "nativeOn": {
+              "click": this.handleClick
+            }
+          });
+      }
+    }
+  },
+  data: function data() {
+    return {
+      status: STATUS.inactive
+    };
+  },
+  created: function created() {
+    this.results = [];
+
+    if (typeof window !== 'undefined') {
+      window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition || null;
+
+      if (!window.SpeechRecognition) {
+        console.error('SpeechRecognition is not supported in this browser. Please check the browser compatibility at https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility.');
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+
+    if (this.hasCustomRenderer) {
+      return this.getComponent();
+    }
+
+    return h(IconWrapper, [this.Icon]);
+  }
+};
+
+var CustomSvg = {
+  name: 'CustomSvg',
+  props: {
+    className: String,
+    icon: Function,
+    type: String
+  },
+  data: function data() {
+    return {
+      customIcon: this.$props.icon && typeof this.$props.icon === 'function' ? this.$props.icon() : null
+    };
+  },
+  render: function render() {
+    var h = arguments[0];
+
+    if (this.customIcon) {
+      return h("div", {
+        "class": this.$props.className
+      }, [this.customIcon]);
+    }
+
+    if (this.$props.type === 'recent-search-icon') {
+      return h("svg", {
+        "attrs": {
+          "xmlns": "http://www.w3.org/2000/svg",
+          "alt": "Recent Search",
+          "height": "20",
+          "width": "20",
+          "viewBox": "0 0 24 24"
+        },
+        "style": {
+          fill: '#707070'
+        },
+        "class": this.$props.className
+      }, [h("path", {
+        "attrs": {
+          "d": "M0 0h24v24H0z",
+          "fill": "none"
+        }
+      }), h("path", {
+        "attrs": {
+          "d": "M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
+        }
+      })]);
+    }
+
+    if (this.$props.type === 'promoted-search-icon') {
+      return h("svg", {
+        "attrs": {
+          "xmlns": "http://www.w3.org/2000/svg",
+          "width": "20",
+          "alt": "promoted search",
+          "height": "20",
+          "viewBox": "0 0 24 24"
+        },
+        "class": this.$props.className,
+        "style": {
+          fill: '#707070'
+        }
+      }, [h("path", {
+        "attrs": {
+          "d": "M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
+        }
+      })]);
+    }
+
+    if (this.$props.type === 'popular-search-icon') {
+      return h("svg", {
+        "attrs": {
+          "xmlns": "http://www.w3.org/2000/svg",
+          "alt": "Popular Search",
+          "height": "20",
+          "width": "20",
+          "viewBox": "0 0 24 24"
+        },
+        "style": {
+          fill: '#707070'
+        },
+        "class": this.$props.className
+      }, [h("path", {
+        "attrs": {
+          "d": "M0 0h24v24H0z",
+          "fill": "none"
+        }
+      }), h("path", {
+        "attrs": {
+          "d": "M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"
+        }
+      })]);
+    }
+
+    return h(SearchSvg, {
+      "attrs": {
+        "styles": {
+          position: 'relative',
+          fill: '#707070',
+          left: '3px',
+          marginRight: '8px'
+        }
+      }
+    });
+  }
+};
+
+var updateQuery = Actions.updateQuery,
+    setQueryOptions = Actions.setQueryOptions,
+    setCustomQuery = Actions.setCustomQuery,
+    setDefaultQuery = Actions.setDefaultQuery,
+    setCustomHighlightOptions = Actions.setCustomHighlightOptions,
+    recordSuggestionClick = Actions.recordSuggestionClick,
+    loadPopularSuggestions = Actions.loadPopularSuggestions,
+    getRecentSearches = Actions.getRecentSearches;
+var debounce = helper.debounce,
+    checkValueChange = helper.checkValueChange,
+    getClassName$1 = helper.getClassName,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery,
+    isEqual = helper.isEqual,
+    getCompositeAggsQuery = helper.getCompositeAggsQuery,
+    withClickIds = helper.withClickIds,
+    getResultStats = helper.getResultStats,
+    handleOnSuggestions = helper.handleOnSuggestions,
+    getTopSuggestions = helper.getTopSuggestions,
+    normalizeDataField = helper.normalizeDataField;
+var DataSearch = {
+  name: 'DataSearch',
+  data: function data() {
+    var props = this.$props;
+    this.__state = {
+      currentValue: '',
+      isOpen: false,
+      normalizedSuggestions: [],
+      isPending: false
+    };
+    this.internalComponent = props.componentId + "__internal";
+    return this.__state;
+  },
+  inject: {
+    theme: {
+      from: 'theme_reactivesearch'
+    }
+  },
+  created: function created() {
+    var _this$$props = this.$props,
+        enableQuerySuggestions = _this$$props.enableQuerySuggestions,
+        renderQuerySuggestions = _this$$props.renderQuerySuggestions,
+        enableRecentSearches = _this$$props.enableRecentSearches,
+        distinctField = _this$$props.distinctField,
+        distinctFieldConfig = _this$$props.distinctFieldConfig,
+        index = _this$$props.index; // TODO: Remove in 2.0
+
+    if (enableQuerySuggestions) {
+      console.warn('Warning(ReactiveSearch): The `enableQuerySuggestions` prop has been marked as deprecated, please use the `enablePopularSuggestions` prop instead.');
+    } // TODO: Remove in 2.0
+
+
+    if (renderQuerySuggestions) {
+      console.warn('Warning(ReactiveSearch): The `renderQuerySuggestions` prop has been marked as deprecated, please use the `renderPopularSuggestions` prop instead.');
+    }
+
+    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 || '';
+    var shouldFetchInitialSuggestions = this.$props.enableDefaultSuggestions || this.currentValue;
+
+    if (shouldFetchInitialSuggestions) {
+      this.loadPopularSuggestions(this.$props.componentId);
+
+      if (enableRecentSearches) {
+        this.getRecentSearches();
+      }
+    }
+
+    this.handleTextChange = debounce(this.handleText, this.$props.debounce); // Set custom and default queries in store
+
+    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+    updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
+  },
+  computed: {
+    suggestionsList: function suggestionsList() {
+      var suggestionsList = [];
+
+      if (!this.$data.currentValue && this.$props.defaultSuggestions && this.$props.defaultSuggestions.length) {
+        suggestionsList = this.$props.defaultSuggestions;
+      } else if (this.$data.currentValue) {
+        suggestionsList = this.normalizedSuggestions;
+      }
+
+      return withClickIds(suggestionsList);
+    },
+    topSuggestions: function topSuggestions() {
+      if (!this.currentValue) {
+        return [];
+      }
+
+      return this.enableQuerySuggestions || this.enablePopularSuggestions ? this.normalizedPopularSuggestions : [];
+    },
+    normalizedRecentSearches: function normalizedRecentSearches() {
+      return this.recentSearches || [];
+    },
+    normalizedPopularSuggestions: function normalizedPopularSuggestions() {
+      return getTopSuggestions( // use default popular suggestions if value is empty
+      this.currentValue ? this.popularSuggestions : this.defaultPopularSuggestions || [], this.currentValue, this.showDistinctSuggestions);
+    },
+    defaultSearchSuggestions: function defaultSearchSuggestions() {
+      var isPopularSuggestionsEnabled = this.enableQuerySuggestions || this.enablePopularSuggestions;
+
+      if (this.currentValue || !this.enableDefaultSuggestions) {
+        return [];
+      }
+
+      var customDefaultPopularSuggestions = (this.defaultPopularSuggestions || []).map(function (suggestion) {
+        return _extends({}, suggestion, {
+          _popular_suggestion: true
+        });
+      });
+      var customNormalizedRecentSearches = (this.normalizedRecentSearches || []).map(function (search) {
+        return _extends({}, search, {
+          _recent_search: true
+        });
+      });
+      var defaultSuggestions = isPopularSuggestionsEnabled ? [].concat(customNormalizedRecentSearches, customDefaultPopularSuggestions || []) : customNormalizedRecentSearches;
+      return getTopSuggestions( // use default popular suggestions if value is empty
+      defaultSuggestions, this.currentValue, this.showDistinctSuggestions);
+    },
+    hasCustomRenderer: function hasCustomRenderer$1() {
+      return hasCustomRenderer(this);
+    },
+    stats: function stats() {
+      return getResultStats(this);
+    }
+  },
+  props: {
+    options: types.options,
+    autoFocus: VueTypes.bool,
+    autosuggest: VueTypes.bool.def(true),
+    beforeValueChange: types.func,
+    className: VueTypes.string.def(''),
+    clearIcon: types.children,
+    componentId: types.stringRequired,
+    customHighlight: types.func,
+    customQuery: types.func,
+    defaultQuery: types.func,
+    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    }), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
+      field: VueTypes.string,
+      weight: VueTypes.number
+    })]),
+    aggregationField: types.string,
+    aggregationSize: VueTypes.number,
+    size: VueTypes.number,
+    debounce: VueTypes.number.def(0),
+    defaultValue: types.string,
+    excludeFields: types.excludeFields,
+    value: types.value,
+    defaultSuggestions: types.suggestions,
+    enableSynonyms: VueTypes.bool.def(true),
+    enableQuerySuggestions: VueTypes.bool.def(false),
+    enablePopularSuggestions: VueTypes.bool.def(false),
+    enableRecentSearches: VueTypes.bool.def(false),
+    fieldWeights: types.fieldWeights,
+    filterLabel: types.string,
+    fuzziness: types.fuzziness,
+    highlight: VueTypes.bool,
+    highlightField: types.stringOrArray,
+    icon: types.children,
+    iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
+    includeFields: types.includeFields,
+    innerClass: types.style,
+    innerRef: VueTypes.string.def('searchInputField'),
+    render: types.func,
+    renderQuerySuggestions: types.func,
+    renderPopularSuggestions: types.func,
+    parseSuggestion: types.func,
+    renderNoSuggestion: types.title,
+    renderError: types.title,
+    placeholder: VueTypes.string.def('Search'),
+    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
+    react: types.react,
+    showClear: VueTypes.bool.def(true),
+    showDistinctSuggestions: VueTypes.bool.def(true),
+    showFilter: VueTypes.bool.def(true),
+    showIcon: VueTypes.bool.def(true),
+    title: types.title,
+    theme: types.style,
+    URLParams: VueTypes.bool.def(false),
+    strictSelection: VueTypes.bool.def(false),
+    nestedField: types.string,
+    enablePredictiveSuggestions: VueTypes.bool.def(false),
+    recentSearchesIcon: VueTypes.any,
+    popularSearchesIcon: VueTypes.any,
+    //	mic props
+    showVoiceSearch: VueTypes.bool.def(false),
+    getMicInstance: types.func,
+    renderMic: types.func,
+    distinctField: types.string,
+    distinctFieldConfig: types.props,
+    //
+    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
+    addonBefore: VueTypes.any,
+    addonAfter: VueTypes.any,
+    expandSuggestionsContainer: VueTypes.bool.def(true),
+    index: VueTypes.string,
+    enableDefaultSuggestions: VueTypes.bool.def(true)
+  },
+  beforeMount: function beforeMount() {
+    if (this.$props.highlight) {
+      if (this.customHighlight && typeof this.customHighlight === 'function') {
+        this.setCustomHighlightOptions(this.componentId, this.customHighlight(this.$props));
+      }
+
+      var queryOptions = DataSearch.highlightQuery(this.$props) || {};
+      this.queryOptions = _extends({}, queryOptions, this.getBasicQueryOptions());
+      this.setQueryOptions(this.$props.componentId, this.queryOptions);
+    } else {
+      this.queryOptions = this.getBasicQueryOptions();
+      this.setQueryOptions(this.$props.componentId, this.queryOptions);
+    }
+
+    if (this.selectedValue) {
+      this.setValue(this.selectedValue, true);
+    } else if (this.$props.value) {
+      this.setValue(this.$props.value, true);
+    } else if (this.$props.defaultValue) {
+      this.setValue(this.$props.defaultValue, true);
+    }
+  },
+  mounted: function mounted() {
+    this.listenForFocusShortcuts();
+  },
+  watch: {
+    highlight: function highlight() {
+      this.updateQueryOptions();
+    },
+    dataField: function dataField() {
+      this.updateQueryOptions();
+      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+    },
+    highlightField: function highlightField() {
+      this.updateQueryOptions();
+    },
+    fieldWeights: function fieldWeights() {
+      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+    },
+    fuzziness: function fuzziness() {
+      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+    },
+    queryFormat: function queryFormat() {
+      this.updateQueryHandler(this.$props.componentId, this.$data.currentValue, this.$props);
+    },
+    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, undefined, false);
+      }
+    },
+    defaultQuery: function defaultQuery(newVal, oldVal) {
+      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+        this.updateDefaultQueryHandler(this.$data.currentValue, this.$props);
+      }
+    },
+    customQuery: function customQuery(newVal, oldVal) {
+      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+        this.updateQueryHandler(this.componentId, this.$data.currentValue, this.$props);
+      }
+    },
+    suggestions: function suggestions(newVal) {
+      if (Array.isArray(newVal) && this.$data.currentValue.trim().length) {
+        // shallow check allows us to set suggestions even if the next set
+        // of suggestions are same as the current one
+        this.$emit('suggestions', newVal);
+        this.normalizedSuggestions = this.onSuggestions(newVal);
+      }
+    },
+    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('', causes.CLEAR_VALUE);
+        }
+
+        this.setValue(newVal || '', true, this.$props);
+      }
+    },
+    focusShortcuts: function focusShortcuts() {
+      this.listenForFocusShortcuts();
+    }
+  },
+  methods: {
+    handleText: function handleText(value) {
+      if (this.$props.autosuggest) {
+        this.updateDefaultQueryHandler(value, this.$props);
+      } else {
+        this.updateQueryHandler(this.$props.componentId, value, this.$props);
+      }
+    },
+    validateDataField: function validateDataField() {
+      var propName = 'dataField';
+      var componentName = DataSearch.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);
+        }
+      }
+    },
+    updateQueryOptions: function updateQueryOptions() {
+      if (this.customHighlight && typeof this.customHighlight === 'function') {
+        this.setCustomHighlightOptions(this.componentId, this.customHighlight(this.$props));
+      }
+
+      var queryOptions = DataSearch.highlightQuery(this.$props) || {};
+      this.queryOptions = _extends({}, queryOptions, this.getBasicQueryOptions());
+      this.setQueryOptions(this.$props.componentId, this.queryOptions);
+    },
+    getComponent: function getComponent$1(downshiftProps, isQuerySuggestionsRender) {
+      if (downshiftProps === void 0) {
+        downshiftProps = {};
+      }
+
+      if (isQuerySuggestionsRender === void 0) {
+        isQuerySuggestionsRender = false;
+      }
+
+      var currentValue = this.$data.currentValue;
+      var data = {
+        error: this.error,
+        loading: this.isLoading,
+        downshiftProps: downshiftProps,
+        data: this.suggestionsList,
+        promotedData: this.promotedResults,
+        aggregationData: this.aggregationData,
+        rawData: this.rawData,
+        customData: this.customData,
+        value: currentValue,
+        triggerClickAnalytics: this.triggerClickAnalytics,
+        resultStats: this.stats,
+        querySuggestions: this.normalizedPopularSuggestions,
+        popularSuggestions: this.normalizedPopularSuggestions
+      };
+
+      if (isQuerySuggestionsRender) {
+        return getQuerySuggestionsComponent({
+          downshiftProps: downshiftProps,
+          data: this.normalizedPopularSuggestions,
+          value: currentValue,
+          loading: this.isLoading,
+          error: this.error
+        }, this);
+      }
+
+      return getComponent(data, this);
+    },
+    // returns size and aggs property
+    getBasicQueryOptions: function getBasicQueryOptions() {
+      var aggregationField = this.$props.aggregationField;
+      var queryOptions = getQueryOptions(this.$props);
+
+      if (aggregationField) {
+        queryOptions.aggs = getCompositeAggsQuery({
+          props: this.$props,
+          showTopHits: true
+        }).aggs;
+      }
+
+      return queryOptions;
+    },
+    onSuggestions: function onSuggestions(results) {
+      return handleOnSuggestions(results, this.$data.currentValue, this);
+    },
+    handleSearchIconClick: function handleSearchIconClick() {
+      var currentValue = this.currentValue;
+
+      if (currentValue.trim()) {
+        this.isPending = false;
+        this.setValue(currentValue, true);
+        this.onValueSelectedHandler(currentValue, causes.SEARCH_ICON_CLICK);
+      }
+    },
+    setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen) {
+      var _this = this;
+
+      if (isDefaultValue === void 0) {
+        isDefaultValue = false;
+      }
+
+      if (props === void 0) {
+        props = this.$props;
+      }
+
+      if (toggleIsOpen === void 0) {
+        toggleIsOpen = true;
+      }
+
+      var performUpdate = function performUpdate() {
+        // Refresh recent searches when value becomes empty
+        if (!value && _this.currentValue && _this.enableRecentSearches) {
+          _this.getRecentSearches();
+        }
+
+        _this.currentValue = value;
+
+        if (isDefaultValue) {
+          if (_this.$props.autosuggest) {
+            if (toggleIsOpen) {
+              _this.isOpen = false;
+            }
+
+            _this.updateDefaultQueryHandler(value, _this.$props);
+          } // 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 === causes.SUGGESTION_SELECT || value === '') {
+              _this.updateQueryHandler(props.componentId, value, props);
+            } else {
+              _this.setValue('', true);
+            }
+          } else {
+            _this.updateQueryHandler(props.componentId, value, props);
+          }
+        } else {
+          // debounce for handling text while typing
+          _this.handleTextChange(value);
+        }
+
+        _this.$emit('valueChange', value);
+
+        _this.$emit('value-change', value); // Set the already fetched suggestions if query is same as used last to fetch the hits
+
+
+        if (value === _this.lastUsedQuery) {
+          _this.suggestions = _this.onSuggestions(_this.suggestions); // invoke on suggestions
+
+          _this.$emit('suggestions', _this.suggestions);
+        } else if (!value) {
+          // reset suggestions
+          _this.suggestions = []; // invoke on suggestions
+
+          _this.$emit('suggestions', _this.suggestions);
+        }
+      };
+
+      checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
+    },
+    updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
+      var defaultQueryOptions;
+      var query = DataSearch.defaultQuery(value, props);
+
+      if (this.defaultQuery) {
+        var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
+
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
+        }
+
+        defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet); // Update calculated default query in store
+
+        updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
+      }
+
+      this.setQueryOptions(this.internalComponent, _extends({}, this.queryOptions, defaultQueryOptions), false);
+      this.updateQuery({
+        componentId: this.internalComponent,
+        query: query,
+        value: value,
+        componentType: componentTypes.dataSearch
+      });
+    },
+    updateQueryHandler: function updateQueryHandler(componentId, value, props) {
+      var customQuery = props.customQuery,
+          filterLabel = props.filterLabel,
+          showFilter = props.showFilter,
+          URLParams = props.URLParams;
+      var customQueryOptions;
+      var defaultQueryTobeSet = DataSearch.defaultQuery(value, props);
+      var query = defaultQueryTobeSet;
+
+      if (customQuery) {
+        var customQueryTobeSet = customQuery(value, props);
+        var queryTobeSet = extractQueryFromCustomQuery(customQueryTobeSet);
+
+        if (queryTobeSet) {
+          query = queryTobeSet;
+        }
+
+        customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
+        updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
+        this.setQueryOptions(componentId, _extends({}, this.queryOptions, customQueryOptions), false);
+      }
+
+      if (!this.isPending) {
+        this.updateQuery({
+          componentId: componentId,
+          query: query,
+          value: value,
+          label: filterLabel,
+          showFilter: showFilter,
+          URLParams: URLParams,
+          componentType: 'DATASEARCH'
+        });
+      }
+    },
+    // need to review
+    handleFocus: function handleFocus(event) {
+      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.isPending = false;
+        this.setValue(results[0][0].transcript.trim(), true);
+      }
+    },
+    triggerQuery: function triggerQuery(_temp) {
+      var _ref2 = _temp === void 0 ? false : _temp,
+          _ref2$isOpen = _ref2.isOpen,
+          isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen;
+
+      var value = this.$props.value;
+
+      if (value !== undefined) {
+        this.isPending = false;
+        this.setValue(this.$props.value, !isOpen);
+      }
+    },
+    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
+      // click analytics would only work client side and after javascript loads
+      var docId = documentId;
+
+      if (!docId) {
+        var hitData = this.suggestionsList.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.isPending = false;
+      this.setValue('', true);
+      this.onValueSelectedHandler('', causes.CLEAR_VALUE);
+    },
+    handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+      var value = this.$props.value;
+
+      if (value !== undefined) {
+        this.isPending = true;
+      } // 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, causes.ENTER_PRESS);
+      } // Need to review
+
+
+      this.$emit('keyDown', event, this.triggerQuery);
+      this.$emit('key-down', event, this.triggerQuery);
+    },
+    onInputChange: function onInputChange(e) {
+      var inputValue = e.target.value;
+
+      if (!this.$data.isOpen) {
+        this.isOpen = true;
+      }
+
+      var value = this.$props.value;
+
+      if (value === undefined) {
+        this.setValue(inputValue);
+      } else {
+        this.isPending = true;
+        this.$emit('change', inputValue, this.triggerQuery, e);
+      }
+    },
+    onSuggestionSelected: function onSuggestionSelected(suggestion) {
+      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, causes.SUGGESTION_SELECT);
+      } else {
+        this.isPending = false;
+        this.$emit('change', suggestion.value, this.triggerQuery);
+      }
+
+      this.onValueSelectedHandler(suggestion.value, 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(SearchSvg);
+      }
+
+      return null;
+    },
+    renderErrorComponent: function renderErrorComponent() {
+      var h = this.$createElement;
+      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+
+      if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
+        return h(SuggestionWrapper, {
+          "attrs": {
+            "innerClass": this.$props.innerClass,
+            "innerClassName": "error",
+            "theme": this.theme,
+            "themePreset": this.themePreset
+          }
+        }, [isFunction(renderError) ? renderError(this.error) : renderError]);
+      }
+
+      return null;
+    },
+    renderCancelIcon: function renderCancelIcon() {
+      var h = this.$createElement;
+
+      if (this.$props.showClear) {
+        return this.$props.clearIcon || h(CancelSvg);
+      }
+
+      return null;
+    },
+    renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
+      if (finalSuggestionsList === void 0) {
+        finalSuggestionsList = [];
+      }
+
+      var h = this.$createElement;
+      var _this$$props2 = this.$props,
+          theme = _this$$props2.theme,
+          innerClass = _this$$props2.innerClass;
+      var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;
+      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+      var _this$$data = this.$data,
+          isOpen = _this$$data.isOpen,
+          currentValue = _this$$data.currentValue;
+
+      if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
+        return h(SuggestionWrapper, {
+          "attrs": {
+            "innerClass": innerClass,
+            "themePreset": this.themePreset,
+            "theme": theme,
+            "innerClassName": "noSuggestion"
+          },
+          "scopedSlots": {
+            "default": function _default() {
+              return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
+            }
+          }
+        });
+      }
+
+      return null;
+    },
+    renderInputAddonBefore: function renderInputAddonBefore() {
+      var h = this.$createElement;
+      var addonBefore = this.$scopedSlots.addonBefore;
+
+      if (addonBefore) {
+        return h(InputAddon, [addonBefore()]);
+      }
+
+      return null;
+    },
+    renderInputAddonAfter: function renderInputAddonAfter() {
+      var h = this.$createElement;
+      var addonAfter = this.$scopedSlots.addonAfter;
+
+      if (addonAfter) {
+        return h(InputAddon, [addonAfter()]);
+      }
+
+      return null;
+    },
+    renderIcons: function renderIcons() {
+      var h = this.$createElement;
+      var _this$$props3 = this.$props,
+          iconPosition = _this$$props3.iconPosition,
+          showClear = _this$$props3.showClear,
+          innerClass = _this$$props3.innerClass,
+          getMicInstance = _this$$props3.getMicInstance,
+          showVoiceSearch = _this$$props3.showVoiceSearch,
+          showIcon = _this$$props3.showIcon;
+      var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
+      var currentValue = this.$data.currentValue;
+      return h("div", [h(IconGroup, {
+        "attrs": {
+          "groupPosition": "right",
+          "positionType": "absolute"
+        }
+      }, [currentValue && showClear && h(IconWrapper, {
+        "on": {
+          "click": this.clearValue
+        },
+        "attrs": {
+          "showIcon": showIcon,
+          "isClearIcon": true
+        }
+      }, [this.renderCancelIcon()]), showVoiceSearch && h(Mic, {
+        "attrs": {
+          "getInstance": getMicInstance,
+          "render": renderMic,
+          "handleResult": this.handleVoiceResults,
+          "className": getClassName$1(innerClass, 'mic') || null
+        }
+      }), iconPosition === 'right' && showIcon && h(IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])]), h(IconGroup, {
+        "attrs": {
+          "groupPosition": "left",
+          "positionType": "absolute"
+        }
+      }, [iconPosition === 'left' && showIcon && h(IconWrapper, {
+        "on": {
+          "click": this.handleSearchIconClick
+        }
+      }, [this.renderIcon()])])]);
+    },
+    focusSearchBox: function focusSearchBox(event) {
+      var _this$$refs, _this$$refs$this$$pro;
+
+      var elt = event.target || event.srcElement;
+      var tagName = elt.tagName;
+
+      if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
+        // already in an input
+        return;
+      }
+
+      (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
+    },
+    listenForFocusShortcuts: function listenForFocusShortcuts() {
+      var _this2 = this;
+
+      var _this$$props$focusSho = this.$props.focusShortcuts,
+          focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
+
+      if (isEmpty(focusShortcuts)) {
+        return;
+      }
+
+      var shortcutsString = parseFocusShortcuts(focusShortcuts).join(','); // handler for alphabets and other key combinations
+
+      hotkeys(shortcutsString, // eslint-disable-next-line no-unused-vars
+
+      /* eslint-disable no-shadow */
+      function (event, handler) {
+        // Prevent the default refresh event under WINDOWS system
+        event.preventDefault();
+
+        _this2.focusSearchBox(event);
+      }); // if one of modifier keys are used, they are handled below
+
+      hotkeys('*', function (event) {
+        var modifierKeys = extractModifierKeysFromFocusShortcuts(focusShortcuts);
+        if (modifierKeys.length === 0) return;
+
+        for (var index = 0; index < modifierKeys.length; index += 1) {
+          var element = modifierKeys[index];
+
+          if (hotkeys[element]) {
+            _this2.focusSearchBox(event);
+
+            break;
+          }
+        }
+      });
+    }
+  },
+  render: function render() {
+    var _this3 = this;
+
+    var h = arguments[0];
+    var _this$$props4 = this.$props,
+        theme = _this$$props4.theme,
+        size = _this$$props4.size,
+        expandSuggestionsContainer = _this$$props4.expandSuggestionsContainer,
+        enableDefaultSuggestions = _this$$props4.enableDefaultSuggestions;
+    var _this$$scopedSlots = this.$scopedSlots,
+        recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
+        popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
+    var hasSuggestions = this.currentValue ? this.suggestionsList.length || this.topSuggestions.length : this.defaultSearchSuggestions.length;
+
+    if (enableDefaultSuggestions === false && !this.currentValue) {
+      hasSuggestions = false;
+    }
+
+    return h(Container, {
+      "class": this.$props.className
+    }, [this.$props.title && h(Title, {
+      "class": getClassName$1(this.$props.innerClass, 'title') || ''
+    }, [this.$props.title]), this.$props.defaultSuggestions || this.$props.autosuggest ? h(Downshift, {
+      "attrs": {
+        "id": this.$props.componentId + "-downshift",
+        "handleChange": this.onSuggestionSelected,
+        "handleMouseup": this.handleStateChange,
+        "isOpen": this.$data.isOpen
+      },
+      "scopedSlots": {
+        "default": function _default(_ref3) {
+          var getInputEvents = _ref3.getInputEvents,
+              getInputProps = _ref3.getInputProps,
+              getItemProps = _ref3.getItemProps,
+              getItemEvents = _ref3.getItemEvents,
+              isOpen = _ref3.isOpen,
+              highlightedIndex = _ref3.highlightedIndex,
+              setHighlightedIndex = _ref3.setHighlightedIndex;
+
+          var renderSuggestionsContainer = function renderSuggestionsContainer() {
+            return h("div", [_this3.hasCustomRenderer && _this3.getComponent({
+              isOpen: isOpen,
+              getItemProps: getItemProps,
+              getItemEvents: getItemEvents,
+              highlightedIndex: highlightedIndex
+            }), _this3.renderErrorComponent(), !_this3.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this3.themePreset, theme) + " " + getClassName$1(_this3.$props.innerClass, 'list')
+            }, [_this3.suggestionsList.slice(0, size || 10).map(function (item, index) {
+              return h("li", {
+                "domProps": _extends({}, getItemProps({
+                  item: item
+                })),
+                "on": _extends({}, getItemEvents({
+                  item: item
+                })),
+                "key": index + 1 + "-" + item.value,
+                "style": {
+                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, index)
+                }
+              }, [h(SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this3.currentValue,
+                  "suggestion": item
+                }
+              })]);
+            }), _this3.defaultSearchSuggestions.map(function (sugg, index) {
+              return h("li", {
+                "domProps": _extends({}, getItemProps({
+                  item: sugg
+                })),
+                "on": _extends({}, getItemEvents({
+                  item: sugg
+                })),
+                "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "style": {
+                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
+                  justifyContent: 'flex-start'
+                }
+              }, [h("div", {
+                "style": {
+                  padding: '0 10px 0 0'
+                }
+              }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
+                "attrs": {
+                  "className": getClassName$1(_this3.$props.innerClass, 'recent-search-icon') || null,
+                  "icon": recentSearchesIcon,
+                  "type": "recent-search-icon"
+                }
+              }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
+                "attrs": {
+                  "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
+                  "icon": popularSearchesIcon,
+                  "type": "popular-search-icon"
+                }
+              })]), h(SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this3.currentValue,
+                  "suggestion": sugg
+                }
+              })]);
+            }), hasQuerySuggestionsRenderer(_this3) ? _this3.getComponent({
+              isOpen: isOpen,
+              getItemProps: getItemProps,
+              getItemEvents: getItemEvents,
+              highlightedIndex: highlightedIndex
+            }, true) : _this3.topSuggestions.map(function (sugg, index) {
+              return h("li", {
+                "domProps": _extends({}, getItemProps({
+                  item: sugg
+                })),
+                "on": _extends({}, getItemEvents({
+                  item: sugg
+                })),
+                "key": _this3.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "style": {
+                  backgroundColor: _this3.getBackgroundColor(highlightedIndex, _this3.suggestionsList.length + index),
+                  justifyContent: 'flex-start'
+                }
+              }, [h("div", {
+                "style": {
+                  padding: '0 10px 0 0'
+                }
+              }, [h(CustomSvg, {
+                "attrs": {
+                  "className": getClassName$1(_this3.$props.innerClass, 'popular-search-icon') || null,
+                  "icon": popularSearchesIcon,
+                  "type": "popular-search-icon"
+                }
+              })]), h(SuggestionItem, {
+                "attrs": {
+                  "currentValue": _this3.currentValue,
+                  "suggestion": sugg
+                }
+              })]);
+            })]) : _this3.renderNoSuggestions(_this3.suggestionsList)]);
+          };
+
+          return h("div", {
+            "class": suggestionsContainer
+          }, [h(InputGroup, [_this3.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+            "attrs": {
+              "id": _this3.$props.componentId + "-input",
+              "showIcon": _this3.$props.showIcon,
+              "showClear": _this3.$props.showClear,
+              "iconPosition": _this3.$props.iconPosition,
+              "placeholder": _this3.$props.placeholder,
+              "autoFocus": _this3.$props.autoFocus,
+              "themePreset": _this3.themePreset,
+              "autocomplete": "off"
+            },
+            "ref": _this3.$props.innerRef,
+            "class": getClassName$1(_this3.$props.innerClass, 'input'),
+            "on": _extends({}, getInputEvents({
+              onInput: _this3.onInputChange,
+              onBlur: function onBlur(e) {
+                _this3.$emit('blur', e, _this3.triggerQuery);
+              },
+              onFocus: _this3.handleFocus,
+              onKeyPress: function onKeyPress(e) {
+                _this3.$emit('keyPress', e, _this3.triggerQuery);
+
+                _this3.$emit('key-press', e, _this3.triggerQuery);
+              },
+              onKeyDown: function onKeyDown(e) {
+                return _this3.handleKeyDown(e, highlightedIndex);
+              },
+              onKeyUp: function onKeyUp(e) {
+                _this3.$emit('keyUp', e, _this3.triggerQuery);
+
+                _this3.$emit('key-up', e, _this3.triggerQuery);
+              },
+              onClick: function onClick() {
+                setHighlightedIndex(null);
+              }
+            })),
+            "domProps": _extends({}, getInputProps({
+              value: _this3.$data.currentValue === null ? '' : _this3.$data.currentValue
+            }))
+          }), _this3.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this3.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer()]);
+        }
+      }
+    }) : h("div", {
+      "class": suggestionsContainer
+    }, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+      "class": getClassName$1(this.$props.innerClass, 'input') || '',
+      "attrs": {
+        "placeholder": this.$props.placeholder,
+        "iconPosition": this.$props.iconPosition,
+        "showIcon": this.$props.showIcon,
+        "showClear": this.$props.showClear,
+        "themePreset": this.themePreset
+      },
+      "on": _extends({}, {
+        blur: function blur(e) {
+          _this3.$emit('blur', e, _this3.triggerQuery);
+        },
+        keypress: function keypress(e) {
+          _this3.$emit('keyPress', e, _this3.triggerQuery);
+
+          _this3.$emit('key-press', e, _this3.triggerQuery);
+        },
+        input: this.onInputChange,
+        focus: function focus(e) {
+          _this3.$emit('focus', e, _this3.triggerQuery);
+        },
+        keydown: function keydown(e) {
+          _this3.$emit('keyDown', e, _this3.triggerQuery);
+
+          _this3.$emit('key-down', e, _this3.triggerQuery);
+        },
+        keyup: function keyup(e) {
+          _this3.$emit('keyUp', e, _this3.triggerQuery);
+
+          _this3.$emit('key-up', e, _this3.triggerQuery);
+        }
+      }),
+      "domProps": _extends({}, {
+        autofocus: this.$props.autoFocus,
+        value: this.$data.currentValue ? this.$data.currentValue : ''
+      }),
+      "ref": this.$props.innerRef
+    }), this.renderIcons()]), this.renderInputAddonAfter()])])]);
+  },
+  destroyed: function destroyed() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+};
+
+DataSearch.defaultQuery = function (value, props) {
+  var finalQuery = null;
+
+  if (value) {
+    var fields = normalizeDataField(props.dataField, props.fieldWeights);
+    finalQuery = {
+      bool: {
+        should: DataSearch.shouldQuery(value, fields, props),
+        minimum_should_match: '1'
+      }
+    };
+  }
+
+  if (value === '') {
+    finalQuery = null;
+  }
+
+  if (finalQuery && props.nestedField) {
+    return {
+      query: {
+        nested: {
+          path: props.nestedField,
+          query: finalQuery
+        }
+      }
+    };
+  }
+
+  return finalQuery;
+};
+
+DataSearch.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;
+};
+
+DataSearch.highlightQuery = function (props) {
+  if (props.customHighlight) {
+    return props.customHighlight(props);
+  }
+
+  if (!props.highlight) {
+    return null;
+  }
+
+  var fields = {};
+  var highlightField = props.highlightField ? props.highlightField : props.dataField;
+
+  if (typeof highlightField === 'string') {
+    fields[highlightField] = {};
+  } else if (Array.isArray(highlightField)) {
+    highlightField.forEach(function (item) {
+      fields[item] = {};
+    });
+  }
+
+  return {
+    highlight: _extends({
+      pre_tags: ['<mark>'],
+      post_tags: ['</mark>'],
+      fields: fields
+    }, props.highlightField && {
+      require_field_match: false
+    })
+  };
+};
+
+DataSearch.hasInternalComponent = function () {
+  return true;
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+    suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
+    rawData: state.rawData[props.componentId],
+    aggregationData: state.compositeAggregations[props.componentId] || [],
+    isLoading: !!state.isLoading[props.componentId + "_active"],
+    themePreset: state.config.themePreset,
+    error: state.error[props.componentId],
+    analytics: state.analytics,
+    enableAppbase: state.config.enableAppbase,
+    headers: state.appbaseRef.headers,
+    promotedResults: state.promotedResults[props.componentId] || [],
+    customData: state.customData[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,
+    popularSuggestions: state.querySuggestions[props.componentId],
+    defaultPopularSuggestions: state.defaultPopularSuggestions[props.componentId],
+    componentProps: state.props[props.componentId],
+    lastUsedQuery: state.queryToHits[props.componentId],
+    recentSearches: state.recentSearches.data
+  };
+};
+
+var mapDispatchToProps = {
+  setQueryOptions: setQueryOptions,
+  updateQuery: updateQuery,
+  setCustomQuery: setCustomQuery,
+  setDefaultQuery: setDefaultQuery,
+  setCustomHighlightOptions: setCustomHighlightOptions,
+  recordSuggestionClick: recordSuggestionClick,
+  loadPopularSuggestions: loadPopularSuggestions,
+  getRecentSearches: getRecentSearches
+};
+var DSConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(DataSearch), {
+  componentType: componentTypes.dataSearch,
+  internalComponent: DataSearch.hasInternalComponent()
+});
+
+DataSearch.install = function (Vue) {
+  Vue.component(DataSearch.name, DSConnected);
+}; // Add componentType for SSR
+
+
+DataSearch.componentType = componentTypes.dataSearch;
+
+export { CustomSvg as C, DataSearch as D, InputAddon as I, Mic as M, SearchSvg as S, SuggestionWrapper as a, InputGroup as b, SuggestionItem as c };