UNPKG

@appbaseio/vue-searchbox-mongodb

Version:
7,670 lines 253 kB
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
  (global = global || self, factory(global.VueSearchbox = {}, global.Vue));
}(this, (function (exports, Vue) { 'use strict';

  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;

  function _extends() {
    return _extends = Object.assign || function (a) {
      for (var b, c = 1; c < arguments.length; c++) {
        for (var d in b = arguments[c], b) {
          Object.prototype.hasOwnProperty.call(b, d) && (a[d] = b[d]);
        }
      }

      return a;
    }, _extends.apply(this, arguments);
  }

  var normalMerge = ["attrs", "props", "domProps"],
      toArrayMerge = ["class", "style", "directives"],
      functionalMerge = ["on", "nativeOn"],
      mergeJsxProps = function mergeJsxProps(a) {
    return a.reduce(function (c, a) {
      for (var b in a) {
        if (!c[b]) c[b] = a[b];else if (-1 !== normalMerge.indexOf(b)) c[b] = _extends({}, c[b], a[b]);else if (-1 !== toArrayMerge.indexOf(b)) {
          var d = c[b] instanceof Array ? c[b] : [c[b]],
              e = a[b] instanceof Array ? a[b] : [a[b]];
          c[b] = d.concat(e);
        } else if (-1 !== functionalMerge.indexOf(b)) {
          for (var f in a[b]) {
            if (c[b][f]) {
              var g = c[b][f] instanceof Array ? c[b][f] : [c[b][f]],
                  h = a[b][f] instanceof Array ? a[b][f] : [a[b][f]];
              c[b][f] = g.concat(h);
            } else c[b][f] = a[b][f];
          }
        } else if ("hook" == b) for (var i in a[b]) {
          c[b][i] = c[b][i] ? mergeFn(c[b][i], a[b][i]) : a[b][i];
        } else c[b] = a[b];
      }

      return c;
    }, {});
  },
      mergeFn = function mergeFn(a, b) {
    return function () {
      a && a.apply(this, arguments), b && b.apply(this, arguments);
    };
  };

  var helper = mergeJsxProps;

  function _extends$1() {
    _extends$1 = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends$1.apply(this, arguments);
  }

  function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    return target;
  }

  function _taggedTemplateLiteralLoose(strings, raw) {
    if (!raw) {
      raw = strings.slice(0);
    }

    strings.raw = raw;
    return strings;
  }

  /*!
   * isobject <https://github.com/jonschlinkert/isobject>
   *
   * Copyright (c) 2014-2017, Jon Schlinkert.
   * Released under the MIT License.
   */
  function isObject(val) {
    return val != null && typeof val === 'object' && Array.isArray(val) === false;
  }

  /*!
   * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
   *
   * Copyright (c) 2014-2017, Jon Schlinkert.
   * Released under the MIT License.
   */

  function isObjectObject(o) {
    return isObject(o) === true && Object.prototype.toString.call(o) === '[object Object]';
  }

  function isPlainObject(o) {
    var ctor, prot;
    if (isObjectObject(o) === false) return false; // If has modified constructor

    ctor = o.constructor;
    if (typeof ctor !== 'function') return false; // If has modified prototype

    prot = ctor.prototype;
    if (isObjectObject(prot) === false) return false; // If constructor does not have an Object-specific method

    if (prot.hasOwnProperty('isPrototypeOf') === false) {
      return false;
    } // Most likely a plain Object


    return true;
  }

  var ObjProto = Object.prototype;
  var toString = ObjProto.toString;
  var hasOwn = ObjProto.hasOwnProperty;
  var FN_MATCH_REGEXP = /^\s*function (\w+)/; // https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L177

  function getType(fn) {
    var type = fn !== null && fn !== undefined ? fn.type ? fn.type : fn : null;
    var match = type && type.toString().match(FN_MATCH_REGEXP);
    return match && match[1];
  }
  function getNativeType(value) {
    if (value === null || value === undefined) return null;
    var match = value.constructor.toString().match(FN_MATCH_REGEXP);
    return match && match[1];
  }
  /**
   * No-op function
   */

  function noop() {}
  /**
   * A function that always returns true
   */

  var stubTrue = function stubTrue() {
    return true;
  };
  /**
   * Checks for a own property in an object
   *
   * @param {object} obj - Object
   * @param {string} prop - Property to check
   * @returns {boolean}
   */

  var has = function has(obj, prop) {
    return hasOwn.call(obj, prop);
  };
  /**
   * Determines whether the passed value is an integer. Uses `Number.isInteger` if available
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
   * @param {*} value - The value to be tested for being an integer.
   * @returns {boolean}
   */

  var isInteger = Number.isInteger || function isInteger(value) {
    return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
  };
  /**
   * Determines whether the passed value is an Array.
   *
   * @param {*} value - The value to be tested for being an array.
   * @returns {boolean}
   */

  var isArray = Array.isArray || function isArray(value) {
    return toString.call(value) === '[object Array]';
  };
  /**
   * Checks if a value is a function
   *
   * @param {any} value - Value to check
   * @returns {boolean}
   */

  var isFunction = function isFunction(value) {
    return toString.call(value) === '[object Function]';
  };
  /**
   * Adds a `def` method to the object returning a new object with passed in argument as `default` property
   *
   * @param {object} type - Object to enhance
   * @returns {object} the passed-in prop type
   */

  function withDefault(type) {
    return Object.defineProperty(type, 'def', {
      value: function value(def) {
        if (def === undefined && !this["default"]) {
          return this;
        }

        if (!isFunction(def) && !validateType(this, def)) {
          warn(this._vueTypes_name + " - invalid default value: \"" + def + "\"", def);
          return this;
        }

        if (isArray(def)) {
          this["default"] = function () {
            return [].concat(def);
          };
        } else if (isPlainObject(def)) {
          this["default"] = function () {
            return Object.assign({}, def);
          };
        } else {
          this["default"] = def;
        }

        return this;
      },
      enumerable: false,
      writable: false
    });
  }
  /**
   * Adds a `isRequired` getter returning a new object with `required: true` key-value
   *
   * @param {object} type - Object to enhance
   * @returns {object} the passed-in prop type
   */

  function withRequired(type) {
    return Object.defineProperty(type, 'isRequired', {
      get: function get() {
        this.required = true;
        return this;
      },
      enumerable: false
    });
  }
  /**
   * Adds a validate method useful to set the prop `validator` function.
   *
   * @param {object} type Prop type to extend
   * @returns {object} the passed-in prop type
   */

  function withValidate(type) {
    return Object.defineProperty(type, 'validate', {
      value: function value(fn) {
        this.validator = fn.bind(this);
        return this;
      },
      enumerable: false
    });
  }
  /**
   * Adds `isRequired` and `def` modifiers to an object
   *
   * @param {string} name - Type internal name
   * @param {object} obj - Object to enhance
   * @param {boolean} [validateFn=false] - add the `validate()` method to the type object
   * @returns {object}
   */

  function toType(name, obj, validateFn) {
    if (validateFn === void 0) {
      validateFn = false;
    }

    Object.defineProperty(obj, '_vueTypes_name', {
      enumerable: false,
      writable: false,
      value: name
    });
    withDefault(withRequired(obj));

    if (validateFn) {
      withValidate(obj);
    } else {
      Object.defineProperty(obj, 'validate', {
        value: function value() {
          warn(name + " - \"validate\" method not supported on this type");
          return this;
        },
        enumerable: false
      });
    }

    if (isFunction(obj.validator)) {
      obj.validator = obj.validator.bind(obj);
    }

    return obj;
  }
  /**
   * Validates a given value against a prop type object
   *
   * @param {Object|*} type - Type to use for validation. Either a type object or a constructor
   * @param {*} value - Value to check
   * @param {boolean} silent - Silence warnings
   * @returns {boolean}
   */

  function validateType(type, value, silent) {
    if (silent === void 0) {
      silent = false;
    }

    var typeToCheck = type;
    var valid = true;
    var expectedType;

    if (!isPlainObject(type)) {
      typeToCheck = {
        type: type
      };
    }

    var namePrefix = typeToCheck._vueTypes_name ? typeToCheck._vueTypes_name + ' - ' : '';

    if (hasOwn.call(typeToCheck, 'type') && typeToCheck.type !== null) {
      if (typeToCheck.type === undefined) {
        throw new TypeError("[VueTypes error]: Setting type to undefined is not allowed.");
      }

      if (!typeToCheck.required && value === undefined) {
        return valid;
      }

      if (isArray(typeToCheck.type)) {
        valid = typeToCheck.type.some(function (type) {
          return validateType(type, value, true);
        });
        expectedType = typeToCheck.type.map(function (type) {
          return getType(type);
        }).join(' or ');
      } else {
        expectedType = getType(typeToCheck);

        if (expectedType === 'Array') {
          valid = isArray(value);
        } else if (expectedType === 'Object') {
          valid = isPlainObject(value);
        } else if (expectedType === 'String' || expectedType === 'Number' || expectedType === 'Boolean' || expectedType === 'Function') {
          valid = getNativeType(value) === expectedType;
        } else {
          valid = value instanceof typeToCheck.type;
        }
      }
    }

    if (!valid) {
      silent === false && warn(namePrefix + "value \"" + value + "\" should be of type \"" + expectedType + "\"");
      return false;
    }

    if (hasOwn.call(typeToCheck, 'validator') && isFunction(typeToCheck.validator)) {
      // swallow warn
      var oldWarn;

      if (silent) {
        oldWarn = warn;
        warn = noop;
      }

      valid = typeToCheck.validator(value);
      oldWarn && (warn = oldWarn);
      if (!valid && silent === false) warn(namePrefix + "custom validation failed");
      return valid;
    }

    return valid;
  }
  var warn = noop;

  {
    var hasConsole = typeof console !== 'undefined';
    warn = hasConsole ? function warn(msg) {
      // eslint-disable-next-line no-console
      Vue.config.silent === false && console.warn("[VueTypes warn]: " + msg);
    } : noop;
  }

  var typeDefaults = function typeDefaults() {
    return {
      func: function func() {},
      bool: true,
      string: '',
      number: 0,
      array: function array() {
        return [];
      },
      object: function object() {
        return {};
      },
      integer: 0
    };
  };

  var setDefaults = function setDefaults(root) {
    var currentDefaults = typeDefaults();
    return Object.defineProperty(root, 'sensibleDefaults', {
      enumerable: false,
      set: function set(value) {
        if (value === false) {
          currentDefaults = {};
        } else if (value === true) {
          currentDefaults = typeDefaults();
        } else {
          currentDefaults = value;
        }
      },
      get: function get() {
        return currentDefaults;
      }
    });
  };

  function _objectWithoutPropertiesLoose$1(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    return target;
  }
  var VueTypes = {
    get any() {
      return toType('any', {
        type: null
      }, true);
    },

    get func() {
      return toType('function', {
        type: Function
      }, true).def(VueTypes.sensibleDefaults.func);
    },

    get bool() {
      return toType('boolean', {
        type: Boolean
      }, true).def(VueTypes.sensibleDefaults.bool);
    },

    get string() {
      return toType('string', {
        type: String
      }, true).def(VueTypes.sensibleDefaults.string);
    },

    get number() {
      return toType('number', {
        type: Number
      }, true).def(VueTypes.sensibleDefaults.number);
    },

    get array() {
      return toType('array', {
        type: Array
      }, true).def(VueTypes.sensibleDefaults.array);
    },

    get object() {
      return toType('object', {
        type: Object
      }, true).def(VueTypes.sensibleDefaults.object);
    },

    get integer() {
      return toType('integer', {
        type: Number,
        validator: function validator(value) {
          return isInteger(value);
        }
      }).def(VueTypes.sensibleDefaults.integer);
    },

    get symbol() {
      return toType('symbol', {
        type: null,
        validator: function validator(value) {
          return typeof value === 'symbol';
        }
      }, true);
    },

    extend: function extend(props) {
      if (props === void 0) {
        props = {};
      }

      if (isArray(props)) {
        props.forEach(function (p) {
          return VueTypes.extend(p);
        });
        return this;
      }

      var _props = props,
          name = _props.name,
          _props$validate = _props.validate,
          validate = _props$validate === void 0 ? false : _props$validate,
          _props$getter = _props.getter,
          getter = _props$getter === void 0 ? false : _props$getter,
          opts = _objectWithoutPropertiesLoose$1(_props, ["name", "validate", "getter"]);

      if (has(VueTypes, name)) {
        throw new TypeError("[VueTypes error]: Type \"" + name + "\" already defined");
      }

      var type = opts.type,
          _opts$validator = opts.validator,
          validator = _opts$validator === void 0 ? stubTrue : _opts$validator;

      if (type && type._vueTypes_name) {
        // we are using as base type a vue-type object
        // detach the original type
        // we are going to inherit the parent data.
        delete opts.type; // inherit base types, required flag and default flag if set

        var keys = ['type', 'required', 'default'];

        for (var i = 0; i < keys.length; i += 1) {
          var key = keys[i];

          if (type[key] !== undefined) {
            opts[key] = type[key];
          }
        }

        validate = false; // we don't allow validate method on this kind of types

        if (isFunction(type.validator)) {
          opts.validator = function () {
            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
              args[_key] = arguments[_key];
            }

            return type.validator.apply(type, args) && validator.apply(this, args);
          };
        }
      }

      var descriptor;

      if (getter) {
        descriptor = {
          get: function get() {
            return toType(name, Object.assign({}, opts), validate);
          },
          enumerable: true,
          configurable: false
        };
      } else {
        var _validator = opts.validator;
        descriptor = {
          value: function value() {
            var ret = toType(name, Object.assign({}, opts), validate);

            if (_validator) {
              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
                args[_key2] = arguments[_key2];
              }

              ret.validator = _validator.bind.apply(_validator, [ret].concat(args));
            }

            return ret;
          },
          writable: false,
          enumerable: true,
          configurable: false
        };
      }

      return Object.defineProperty(this, name, descriptor);
    },
    custom: function custom(validatorFn, warnMsg) {
      if (warnMsg === void 0) {
        warnMsg = 'custom validation failed';
      }

      if (typeof validatorFn !== 'function') {
        throw new TypeError('[VueTypes error]: You must provide a function as argument');
      }

      return toType(validatorFn.name || '<<anonymous function>>', {
        validator: function validator(value) {
          var valid = validatorFn(value);
          if (!valid) warn(this._vueTypes_name + " - " + warnMsg);
          return valid;
        }
      });
    },
    oneOf: function oneOf(arr) {
      if (!isArray(arr)) {
        throw new TypeError('[VueTypes error]: You must provide an array as argument');
      }

      var msg = "oneOf - value should be one of \"" + arr.join('", "') + "\"";
      var allowedTypes = arr.reduce(function (ret, v) {
        if (v !== null && v !== undefined) {
          ret.indexOf(v.constructor) === -1 && ret.push(v.constructor);
        }

        return ret;
      }, []);
      return toType('oneOf', {
        type: allowedTypes.length > 0 ? allowedTypes : null,
        validator: function validator(value) {
          var valid = arr.indexOf(value) !== -1;
          if (!valid) warn(msg);
          return valid;
        }
      });
    },
    instanceOf: function instanceOf(instanceConstructor) {
      return toType('instanceOf', {
        type: instanceConstructor
      });
    },
    oneOfType: function oneOfType(arr) {
      if (!isArray(arr)) {
        throw new TypeError('[VueTypes error]: You must provide an array as argument');
      }

      var hasCustomValidators = false;
      var nativeChecks = arr.reduce(function (ret, type) {
        if (isPlainObject(type)) {
          if (type._vueTypes_name === 'oneOf') {
            return ret.concat(type.type || []);
          }

          if (isFunction(type.validator)) {
            hasCustomValidators = true;
            return ret;
          }

          if (type.type) {
            if (isArray(type.type)) return ret.concat(type.type);
            ret.push(type.type);
          }

          return ret;
        }

        ret.push(type);
        return ret;
      }, []);

      if (!hasCustomValidators) {
        // we got just native objects (ie: Array, Object)
        // delegate to Vue native prop check
        return toType('oneOfType', {
          type: nativeChecks
        });
      }

      var typesStr = arr.map(function (type) {
        if (type && isArray(type.type)) {
          return type.type.map(getType);
        }

        return getType(type);
      }).reduce(function (ret, type) {
        return ret.concat(isArray(type) ? type : [type]);
      }, []).join('", "');
      return this.custom(function oneOfType(value) {
        var valid = arr.some(function (type) {
          if (type._vueTypes_name === 'oneOf') {
            return type.type ? validateType(type.type, value, true) : true;
          }

          return validateType(type, value, true);
        });
        if (!valid) warn("oneOfType - value type should be one of \"" + typesStr + "\"");
        return valid;
      });
    },
    arrayOf: function arrayOf(type) {
      return toType('arrayOf', {
        type: Array,
        validator: function validator(values) {
          var valid = values.every(function (value) {
            return validateType(type, value);
          });
          if (!valid) warn("arrayOf - value must be an array of \"" + getType(type) + "\"");
          return valid;
        }
      });
    },
    objectOf: function objectOf(type) {
      return toType('objectOf', {
        type: Object,
        validator: function validator(obj) {
          var valid = Object.keys(obj).every(function (key) {
            return validateType(type, obj[key]);
          });
          if (!valid) warn("objectOf - value must be an object of \"" + getType(type) + "\"");
          return valid;
        }
      });
    },
    shape: function shape(obj) {
      var keys = Object.keys(obj);
      var requiredKeys = keys.filter(function (key) {
        return obj[key] && obj[key].required === true;
      });
      var type = toType('shape', {
        type: Object,
        validator: function validator(value) {
          var _this = this;

          if (!isPlainObject(value)) {
            return false;
          }

          var valueKeys = Object.keys(value); // check for required keys (if any)

          if (requiredKeys.length > 0 && requiredKeys.some(function (req) {
            return valueKeys.indexOf(req) === -1;
          })) {
            warn("shape - at least one of required properties \"" + requiredKeys.join('", "') + "\" is not present");
            return false;
          }

          return valueKeys.every(function (key) {
            if (keys.indexOf(key) === -1) {
              if (_this._vueTypes_isLoose === true) return true;
              warn("shape - object is missing \"" + key + "\" property");
              return false;
            }

            var type = obj[key];
            return validateType(type, value[key]);
          });
        }
      });
      Object.defineProperty(type, '_vueTypes_isLoose', {
        enumerable: false,
        writable: true,
        value: false
      });
      Object.defineProperty(type, 'loose', {
        get: function get() {
          this._vueTypes_isLoose = true;
          return this;
        },
        enumerable: false
      });
      return type;
    }
  };
  setDefaults(VueTypes);
  VueTypes.utils = {
    validate: function validate(value, type) {
      return validateType(type, value, true);
    },
    toType: toType
  };

  VueTypes.sensibleDefaults = false;
  var DataField = VueTypes.shape({
    field: VueTypes.string,
    weight: VueTypes.number
  });
  var reactKeyType = VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string), VueTypes.object, VueTypes.arrayOf(VueTypes.object)]); // eslint-disable-next-line

  var types = {
    app: VueTypes.string.isRequired,
    url: VueTypes.string.def('https://scalr.api.appbase.io'),
    enableAppbase: VueTypes.bool.def(false),
    enablePopularSuggestions: VueTypes.bool.def(false),
    analytics: VueTypes.bool.def(false),
    headers: VueTypes.object,
    dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, DataField]))]),
    // aggregationData can be used by listening to event `aggregations`
    aggregationField: VueTypes.string,
    aggregationSize: VueTypes.number,
    nestedField: VueTypes.string,
    size: VueTypes.number.def(10),
    title: VueTypes.string,
    defaultValue: VueTypes.string,
    placeholder: VueTypes.string.def('Search'),
    showIcon: VueTypes.bool.def(true),
    iconPosition: VueTypes.oneOf(['left', 'right']).def('right'),
    icon: VueTypes.any,
    showClear: VueTypes.bool.def(false),
    clearIcon: VueTypes.any,
    autosuggest: VueTypes.bool.def(true),
    strictSelection: VueTypes.bool.def(false),
    defaultSuggestions: VueTypes.arrayOf(VueTypes.object),
    debounce: VueTypes.number.def(0),
    highlight: VueTypes.bool.def(false),
    highlightField: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
    customHighlight: VueTypes.func,
    queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
    fuzziness: VueTypes.oneOf([0, 1, 2, 'AUTO']),
    showVoiceSearch: VueTypes.bool.def(false),
    searchOperators: VueTypes.bool.def(false),
    render: VueTypes.func,
    renderPopularSuggestions: VueTypes.func,
    renderError: VueTypes.oneOfType([VueTypes.string, VueTypes.any]),
    renderNoSuggestion: VueTypes.oneOfType([VueTypes.string, VueTypes.any]),
    renderMic: VueTypes.func,
    innerClass: VueTypes.object,
    style: VueTypes.object,
    defaultQuery: VueTypes.func,
    beforeValueChange: VueTypes.func,
    className: VueTypes.string.def(''),
    loader: VueTypes.object,
    autoFocus: VueTypes.bool.def(false),
    currentURL: VueTypes.string.def(''),
    searchTerm: VueTypes.string.def('search'),
    URLParams: VueTypes.bool.def(false),
    appbaseConfig: VueTypes.shape({
      recordAnalytics: VueTypes.bool,
      enableQueryRules: VueTypes.bool,
      userId: VueTypes.string,
      customEvents: VueTypes.object
    }).def({
      recordAnalytics: false
    }),
    showDistinctSuggestions: VueTypes.bool.def(true),
    queryString: VueTypes.queryString,
    queryTypes: VueTypes.oneOf(['search', 'term', 'geo', 'range']),
    reactType: VueTypes.shape({
      and: reactKeyType,
      or: reactKeyType,
      not: reactKeyType
    }),
    sortType: VueTypes.oneOf(['asc', 'desc', 'count']),
    sourceFields: VueTypes.arrayOf(VueTypes.string),
    focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])),
    expandSuggestionsContainer: VueTypes.bool.def(true)
  };

  function t(t) {
    return null != t && "object" == typeof t && 1 === t.nodeType;
  }

  function e(t, e) {
    return (!e || "hidden" !== t) && "visible" !== t && "clip" !== t;
  }

  function n(t, n) {
    if (t.clientHeight < t.scrollHeight || t.clientWidth < t.scrollWidth) {
      var r = getComputedStyle(t, null);
      return e(r.overflowY, n) || e(r.overflowX, n) || function (t) {
        var e = function (t) {
          if (!t.ownerDocument || !t.ownerDocument.defaultView) return null;

          try {
            return t.ownerDocument.defaultView.frameElement;
          } catch (t) {
            return null;
          }
        }(t);

        return !!e && (e.clientHeight < t.scrollHeight || e.clientWidth < t.scrollWidth);
      }(t);
    }

    return !1;
  }

  function r(t, e, n, r, i, o, l, d) {
    return o < t && l > e || o > t && l < e ? 0 : o <= t && d <= n || l >= e && d >= n ? o - t - r : l > e && d < n || o < t && d > n ? l - e + i : 0;
  }

  function computeScrollIntoView (e, i) {
    var o = window,
        l = i.scrollMode,
        d = i.block,
        u = i.inline,
        h = i.boundary,
        a = i.skipOverflowHiddenElements,
        c = "function" == typeof h ? h : function (t) {
      return t !== h;
    };
    if (!t(e)) throw new TypeError("Invalid target");

    for (var f = document.scrollingElement || document.documentElement, s = [], p = e; t(p) && c(p);) {
      if ((p = p.parentNode) === f) {
        s.push(p);
        break;
      }

      p === document.body && n(p) && !n(document.documentElement) || n(p, a) && s.push(p);
    }

    for (var g = o.visualViewport ? o.visualViewport.width : innerWidth, m = o.visualViewport ? o.visualViewport.height : innerHeight, w = window.scrollX || pageXOffset, v = window.scrollY || pageYOffset, W = e.getBoundingClientRect(), b = W.height, H = W.width, y = W.top, M = W.right, E = W.bottom, V = W.left, x = "start" === d || "nearest" === d ? y : "end" === d ? E : y + b / 2, I = "center" === u ? V + H / 2 : "end" === u ? M : V, C = [], T = 0; T < s.length; T++) {
      var k = s[T],
          B = k.getBoundingClientRect(),
          D = B.height,
          O = B.width,
          R = B.top,
          X = B.right,
          Y = B.bottom,
          L = B.left;
      if ("if-needed" === l && y >= 0 && V >= 0 && E <= m && M <= g && y >= R && E <= Y && V >= L && M <= X) return C;
      var S = getComputedStyle(k),
          j = parseInt(S.borderLeftWidth, 10),
          N = parseInt(S.borderTopWidth, 10),
          q = parseInt(S.borderRightWidth, 10),
          z = parseInt(S.borderBottomWidth, 10),
          A = 0,
          F = 0,
          G = "offsetWidth" in k ? k.offsetWidth - k.clientWidth - j - q : 0,
          J = "offsetHeight" in k ? k.offsetHeight - k.clientHeight - N - z : 0;
      if (f === k) A = "start" === d ? x : "end" === d ? x - m : "nearest" === d ? r(v, v + m, m, N, z, v + x, v + x + b, b) : x - m / 2, F = "start" === u ? I : "center" === u ? I - g / 2 : "end" === u ? I - g : r(w, w + g, g, j, q, w + I, w + I + H, H), A = Math.max(0, A + v), F = Math.max(0, F + w);else {
        A = "start" === d ? x - R - N : "end" === d ? x - Y + z + J : "nearest" === d ? r(R, Y, D, N, z + J, x, x + b, b) : x - (R + D / 2) + J / 2, F = "start" === u ? I - L - j : "center" === u ? I - (L + O / 2) + G / 2 : "end" === u ? I - X + q + G : r(L, X, O, j, q + G, I, I + H, H);
        var K = k.scrollLeft,
            P = k.scrollTop;
        x += P - (A = Math.max(0, Math.min(P + A, k.scrollHeight - D + J))), I += K - (F = Math.max(0, Math.min(K + F, k.scrollWidth - O + G)));
      }
      C.push({
        el: k,
        top: A,
        left: F
      });
    }

    return C;
  }

  var getClassName = function getClassName(classMap, component) {
    return classMap && classMap[component] || '';
  };
  /**
   * To determine wether an element is a function
   * @param {any} element
   */

  var equals = function equals(a, b) {
    if (a === b) return true;
    if (!a || !b || typeof a !== 'object' && typeof b !== 'object') return a === b;
    if (a === null || a === undefined || b === null || b === undefined) return false;
    if (a.prototype !== b.prototype) return false;
    var keys = Object.keys(a);
    if (keys.length !== Object.keys(b).length) return false;
    return keys.every(function (k) {
      return equals(a[k], b[k]);
    });
  };
  var debounce = function debounce(method, delay) {
    clearTimeout(method._tId); // eslint-disable-next-line

    method._tId = setTimeout(function () {
      method();
    }, delay);
  };
  /**
   * Scroll node into view if necessary
   * @param {HTMLElement} node the element that should scroll into view
   * @param {HTMLElement} rootNode the root element of the component
   */
  // eslint-disable-next-line

  var scrollIntoView = function scrollIntoView(node, rootNode) {
    if (node === null) {
      return;
    }

    var actions = computeScrollIntoView(node, {
      boundary: rootNode,
      block: 'nearest',
      scrollMode: 'if-needed'
    });
    actions.forEach(function (_ref2) {
      var el = _ref2.el,
          top = _ref2.top,
          left = _ref2.left;
      el.scrollTop = top;
      el.scrollLeft = left;
    });
  }; // escapes regex for special characters: \ => \\, $ => \$

  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  }
  /**
   * Extracts the renderPopularSuggestions prop from props or slot and returns a valid JSX element
   * @param {Object} data
   * @param _ref
   */

  var getPopularSuggestionsComponent = function getPopularSuggestionsComponent(data, _ref) {
    if (data === void 0) {
      data = {};
    }

    if (_ref === void 0) {
      _ref = {};
    }

    var _ref3 = _ref.$scopedSlots || _ref.$props,
        renderPopularSuggestions = _ref3.renderPopularSuggestions;

    if (renderPopularSuggestions) return renderPopularSuggestions(data);
    return null;
  };
  /**
   * To determine whether a component has renderPopularSuggestions prop or slot defined or not
   * @returns {Boolean}
   */

  var hasPopularSuggestionsRenderer = function hasPopularSuggestionsRenderer(_ref) {
    if (_ref === void 0) {
      _ref = {};
    }

    var _ref4 = _ref.$scopedSlots || _ref.$props,
        renderPopularSuggestions = _ref4.renderPopularSuggestions;

    return Boolean(renderPopularSuggestions);
  };
  /**
   * Extracts the render prop from props or slot and returns a valid JSX element
   * @param {Object} data
   * @param _ref
   */

  var getComponent = function getComponent(data, _ref) {
    if (data === void 0) {
      data = {};
    }

    if (_ref === void 0) {
      _ref = {};
    }

    var _ref5 = _ref.$scopedSlots || _ref.$props,
        render = _ref5.render;

    if (render) return render(data);
    return null;
  };
  /**
   * To determine whether a component has render prop or slot defined or not
   * @returns {Boolean}
   */

  var hasCustomRenderer = function hasCustomRenderer(_ref) {
    if (_ref === void 0) {
      _ref = {};
    }

    var _ref6 = _ref.$scopedSlots || _ref.$props,
        render = _ref6.render;

    return Boolean(render);
  };
  function isEqual(x, y) {
    if (x === y) return true;
    if (!(x instanceof Object) || !(y instanceof Object)) return false;
    if (x.constructor !== y.constructor) return false;
    /* eslint-disable */

    for (var p in x) {
      if (!x.hasOwnProperty(p)) continue;
      if (!y.hasOwnProperty(p)) return false;
      if (x[p] === y[p]) continue;
      if (typeof x[p] !== 'object') return false;
      if (!isEqual(x[p], y[p])) return false;
    }

    for (var _p in y) {
      if (y.hasOwnProperty(_p) && !x.hasOwnProperty(_p)) return false;
    }
    /* eslint-enable */


    return true;
  }
  var checkValidValue = function checkValidValue(value) {
    if (value) {
      if (Array.isArray(value) && !value.length) return false;
      return true;
    }

    return false;
  };
  /**
   * To get the camel case string from kebab case
   * @returns {string}
   */

  var getCamelCase = function getCamelCase(str) {
    if (str === void 0) {
      str = '';
    }

    var arr = str.split('-');
    var capital = arr.map(function (item, index) {
      return index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item;
    }); // ^-- change here.

    var capitalString = capital.join('');
    return capitalString || '';
  };
  var isEmpty = function isEmpty(val) {
    return !(val && val.length && Object.keys(val).length);
  };
  function isNumeric(value) {
    return /^-?\d+$/.test(value);
  } // check if passed shortcut a key combination

  function isHotkeyCombination(hotkey) {
    return typeof hotkey === 'string' && hotkey.indexOf('+') !== -1;
  } // parse focusshortcuts array for key combinations

  function isHotkeyCombinationUsed(focusShortcuts) {
    for (var index = 0; index < focusShortcuts.length; index += 1) {
      if (isHotkeyCombination(focusShortcuts[index])) {
        return true;
      }
    }

    return false;
  } // used for getting correct string char from keycode passed
  // the below algebraic expression is used to get the correct ascii code out of the e.which || e.keycode returned value
  // since the keyboards doesn't understand ascii but scan codes and they differ for certain keys such as '/'
  // stackoverflow ref: https://stackoverflow.com/a/29811987/10822996

  function getCharFromCharCode(passedCharCode) {
    var which = passedCharCode;
    var chrCode = which - 48 * Math.floor(which / 48);
    return String.fromCharCode(which >= 96 ? chrCode : which);
  } // used for parsing focusshortcuts for keycodes passed as string, eg: 'ctrl+/' is same as 'ctrl+47'
  // returns focusShortcuts containing appropriate key charsas depicted on keyboards

  function parseFocusShortcuts(focusShortcutsArray) {
    if (isEmpty(focusShortcutsArray)) return [];
    var parsedFocusShortcutsArray = [];
    focusShortcutsArray.forEach(function (element) {
      if (typeof element === 'string') {
        if (isHotkeyCombination(element)) {
          // splitting the combination into pieces
          var splitCombination = element.split('+');
          var parsedSplitCombination = []; // parsedCombination would have all the keycodes converted into chars

          var parsedCombination = '';

          for (var i = 0; i < splitCombination.length; i += 1) {
            if (isNumeric(splitCombination[i])) {
              parsedSplitCombination.push(getCharFromCharCode(+splitCombination[i]));
            } else {
              parsedSplitCombination.push(splitCombination[i]);
            }
          }

          parsedCombination = parsedSplitCombination.join('+');
          parsedFocusShortcutsArray.push(parsedCombination);
        } else if (isNumeric(element)) {
          parsedFocusShortcutsArray.push(getCharFromCharCode(+element));
        } else {
          // single char shortcut, eg: '/'
          parsedFocusShortcutsArray.push(element);
        }
      } else {
        // if not a string the the shortcut is assumed to be a keycode
        parsedFocusShortcutsArray.push(getCharFromCharCode(element));
      }
    });
    return parsedFocusShortcutsArray;
  }
  var MODIFIER_KEYS = ['shift', 'ctrl', 'alt', 'control', 'option', 'cmd', 'command']; // filter out modifierkeys such as ctrl, alt, command, shift from focusShortcuts prop

  function extractModifierKeysFromFocusShortcuts(focusShortcutsArray) {
    return focusShortcutsArray.filter(function (shortcutKey) {
      return MODIFIER_KEYS.includes(shortcutKey);
    });
  }
  function isModifierKeyUsed(focusShortcutsArray) {
    return !!extractModifierKeysFromFocusShortcuts(focusShortcutsArray).length;
  }

  var URLParamsProvider = {
    name: 'URLParamsProvider',
    inject: ['searchbase'],
    props: {
      id: VueTypes.string.isRequired
    },
    mounted: function mounted() {
      var _this = this;

      var id = this.$props.id;

      if (window) {
        this.init();
        window.addEventListener('popstate', function () {
          var options = {
            triggerCustomQuery: true,
            triggerDefaultQuery: true,
            stateChanges: true
          };

          _this.init();

          var componentInstance = _this.getComponentInstance();

          if (componentInstance) {
            if (_this.params.has(id)) {
              // Set component value
              try {
                var paramValue = JSON.parse(_this.params.get(id));

                if (!isEqual(componentInstance.value, paramValue)) {
                  componentInstance.setValue(paramValue, options);
                }
              } catch (e) {
                console.error(e); // Do not set value if JSON parsing fails.
              }
            } else if (componentInstance.value) {
              // Remove inactive componentInstance
              componentInstance.setValue(null, options);
            }
          }
        });
        var component = this.getComponentInstance();

        if (component) {
          component.subscribeToStateChanges(function (change) {
            _this.init(); // this ensures the url params change are handled
            // when the url changes, which enables us to
            // make `onpopstate` event handler work with history.pushState updates


            _this.checkForURLParamsChange(); // Set URLParams on value change
            // Only set the valid values


            if (checkValidValue(change.value.next)) {
              // stringify the values
              _this.params.set(id, JSON.stringify(change.value.next));
            } else {
              _this.params["delete"](id);
            } // Update URLParam


            _this.pushToHistory();
          }, ['value']);
        }
      }
    },
    beforeDestroy: function beforeDestroy() {
      var id = this.$props.id; // Remove param on unmount

      this.params["delete"](id);
    },
    methods: {
      getComponentInstance: function getComponentInstance() {
        return this.searchbase.getComponent(this.$props.id);
      },
      init: function init() {
        this.searchString = window.location.search;
        this.params = new URLSearchParams(this.searchString);
      },
      checkForURLParamsChange: function checkForURLParamsChange() {
        // we only compare the search string (window.location.search by default)
        // to see if the route has changed (or) not. This handles the following usecase:
        // search on homepage -> route changes -> search results page with same search query
        if (window) {
          var searchString = window.location.search;

          if (searchString !== this.searchString) {
            var event;

            if (typeof Event === 'function') {
              event = new Event('popstate');
            } else {
              // Correctly fire popstate event on IE11 to prevent app crash.
              event = document.createEvent('Event');
              event.initEvent('popstate', true, true);
            }

            window.dispatchEvent(event);
          }
        }
      },
      pushToHistory: function pushToHistory() {
        var paramsSting = this.params.toString() ? "?" + this.params.toString() : '';
        var base = window.location.href.split('?')[0];
        var newURL = "" + base + paramsSting;

        if (window.history.pushState) {
          window.history.pushState({
            path: newURL
          }, '', newURL);
        }

        this.init();
      }
    },
    render: function render() {
      var h = arguments[0];
      return this.$slots["default"] ? h("div", [this.$slots["default"]]) : null;
    }
  };

  URLParamsProvider.install = function (Vue) {
    Vue.component(URLParamsProvider.name, URLParamsProvider);
  };

  var SearchComponent = {
    name: 'search-component',
    inject: ['searchbase'],
    props: {
      index: VueTypes.string,
      url: VueTypes.string,
      mongodb: VueTypes.object,
      credentials: VueTypes.string,
      headers: VueTypes.object,
      appbaseConfig: types.appbaseConfig,
      transformRequest: VueTypes.func,
      transformResponse: VueTypes.func,
      beforeValueChange: VueTypes.func,
      enablePopularSuggestions: VueTypes.bool,
      enablePredictiveSuggestions: VueTypes.bool,
      maxPopularSuggestions: VueTypes.number,
      clearOnQueryChange: VueTypes.bool,
      showDistinctSuggestions: types.showDistinctSuggestions,
      URLParams: VueTypes.bool,
      // RS API properties
      id: VueTypes.string.isRequired,
      value: VueTypes.any,
      type: types.queryTypes,
      react: types.reactType,
      queryFormat: types.queryFormat,
      dataField: types.dataField,
      categoryField: VueTypes.string,
      categoryValue: VueTypes.string,
      nestedField: VueTypes.string,
      from: VueTypes.number,
      size: VueTypes.number,
      sortBy: types.sortType,
      aggregationField: VueTypes.string,
      aggregationSize: VueTypes.number,
      after: VueTypes.object,
      includeNullValues: VueTypes.bool,
      includeFields: types.sourceFields,
      excludeFields: types.sourceFields,
      fuzziness: types.fuzziness,
      searchOperators: VueTypes.bool,
      highlight: VueTypes.bool,
      highlightField: VueTypes.string,
      customHighlight: VueTypes.object,
      interval: VueTypes.number,
      aggregations: VueTypes.arrayOf(VueTypes.string),
      missingLabel: VueTypes.string,
      showMissing: VueTypes.bool,
      defaultQuery: VueTypes.func,
      customQuery: VueTypes.func,
      enableSynonyms: VueTypes.bool,
      selectAllLabel: VueTypes.string,
      pagination: VueTypes.bool,
      queryString: VueTypes.bool,
      preserveResults: VueTypes.bool,
      render: VueTypes.func,
      distinctField: VueTypes.string,
      distinctFieldConfig: VueTypes.object,
      // subscribe on changes,
      subscribeTo: VueTypes.arrayOf(VueTypes.string),
      triggerQueryOnInit: VueTypes.bool.def(true)
    },
    data: function data() {
      return {
        searchState: {}
      };
    },
    created: function created() {
      var _this = this;

      // clone the props for component it is needed because $options gets changed on time
      var componentProps = this.$props;

      if (this.$options && this.$options.propsData) {
        componentProps = _extends$1({}, this.$options.propsData);
      } // handle kebab case for props


      var parsedProps = {};
      Object.keys(componentProps).forEach(function (key) {
        parsedProps[getCamelCase(key)] = componentProps[key];
      });
      this.rawProps = parsedProps;
      var _this$rawProps = this.rawProps,
          id = _this$rawProps.id,
          index = _this$rawProps.index,
          url = _this$rawProps.url,
          mongodb = _this$rawProps.mongodb,
          credentials = _this$rawProps.credentials,
          headers = _this$rawProps.headers,
          appbaseConfig = _this$rawProps.appbaseConfig,
          transformRequest = _this$rawProps.transformRequest,
          transformResponse = _this$rawProps.transformResponse,
          type = _this$rawProps.type,
          react = _this$rawProps.react,
          queryFormat = _this$rawProps.queryFormat,
          dataField = _this$rawProps.dataField,
          categoryField = _this$rawProps.categoryField,
          categoryValue = _this$rawProps.categoryValue,
          nestedField = _this$rawProps.nestedField,
          from = _this$rawProps.from,
          size = _this$rawProps.size,
          sortBy = _this$rawProps.sortBy,
          aggregationField = _this$rawProps.aggregationField,
          aggregationSize = _this$rawProps.aggregationSize,
          after = _this$rawProps.after,
          includeNullValues = _this$rawProps.includeNullValues,
          includeFields = _this$rawProps.includeFields,
          excludeFields = _this$rawProps.excludeFields,
          fuzziness = _this$rawProps.fuzziness,
          searchOperators = _this$rawProps.searchOperators,
          highlight = _this$rawProps.highlight,
          highlightField = _this$rawProps.highlightField,
          customHighlight = _this$rawProps.customHighlight,
          interval = _this$rawProps.interval,
          aggregations = _this$rawProps.aggregations,
          missingLabel = _this$rawProps.missingLabel,
          showMissing = _this$rawProps.showMissing,
          defaultQuery = _this$rawProps.defaultQuery,
          customQuery = _this$rawProps.customQuery,
          enableSynonyms = _this$rawProps.enableSynonyms,
          selectAllLabel = _this$rawProps.selectAllLabel,
          pagination = _this$rawProps.pagination,
          queryString = _this$rawProps.queryString,
          enablePopularSuggestions = _this$rawProps.enablePopularSuggestions,
          maxPopularSuggestions = _this$rawProps.maxPopularSuggestions,
          enablePredictiveSuggestions = _this$rawProps.enablePredictiveSuggestions,
          showDistinctSuggestions = _this$rawProps.showDistinctSuggestions,
          subscribeTo = _this$rawProps.subscribeTo,
          preserveResults = _this$rawProps.preserveResults,
          clearOnQueryChange = _this$rawProps.clearOnQueryChange,
          distinctField = _this$rawProps.distinctField,
          distinctFieldConfig = _this$rawProps.distinctFieldConfig;
      var value = this.rawProps.value;

      if (window && window.location && window.location.search) {
        var params = new URLSearchParams(window.location.search);

        if (params.has(id)) {
          try {
            value = JSON.parse(params.get(id));
          } catch (e) {
            console.error(e); // Do not set value if JSON parsing fails.
          }
        }
      }

      var componentInstance = this.searchbase.register(id, {
        index: index,
        url: url,
        mongodb: mongodb,
        credentials: credentials,
        headers: headers,
        appbaseConfig: appbaseConfig,
        transformRequest: transformRequest,
        transformResponse: transformResponse,
        value: value,
        type: type,
        react: react,
        queryFormat: queryFormat,
        dataField: dataField,
        categoryField: categoryField,
        categoryValue: categoryValue,
        nestedField: nestedField,
        from: from,
        size: size,
        sortBy: sortBy,
        aggregationField: aggregationField,
        aggregationSize: aggregationSize,
        after: after,
        includeNullValues: includeNullValues,
        includeFields: includeFields,
        excludeFields: excludeFields,
        fuzziness: fuzziness,
        searchOperators: searchOperators,
        highlight: highlight,
        highlightField: highlightField,
        customHighlight: customHighlight,
        interval: interval,
        aggregations: aggregations,
        missingLabel: missingLabel,
        showMissing: showMissing,
        defaultQuery: defaultQuery,
        customQuery: customQuery,
        enableSynonyms: enableSynonyms,
        selectAllLabel: selectAllLabel,
        pagination: pagination,
        queryString: queryString,
        enablePopularSuggestions: enablePopularSuggestions,
        maxPopularSuggestions: maxPopularSuggestions,
        enablePredictiveSuggestions: enablePredictiveSuggestions,
        showDistinctSuggestions: showDistinctSuggestions,
        preserveResults: preserveResults,
        clearOnQueryChange: clearOnQueryChange,
        distinctField: distinctField,
        distinctFieldConfig: distinctFieldConfig,
        onValueChange: function onValueChange(prev, next) {
          _this.$emit('value', {
            prev: prev,
            next: next
          });
        },
        onResults: function onResults(prev, next) {
          _this.$emit('results', {
            prev: prev,
            next: next
          });
        },
        onAggregationData: function onAggregationData(prev, next) {
          _this.$emit('aggregationData', {
            prev: prev,
            next: next
          });
        },
        onError: function onError(prev, next) {
          _this.$emit('error', {
            prev: prev,
            next: next
          });
        },
        onRequestStatusChange: function onRequestStatusChange(prev, next) {
          _this.$emit('requestStatus', {
            prev: prev,
            next: next
          });
        },
        onQueryChange: function onQueryChange(prev, next) {
          _this.$emit('query', {
            prev: prev,
            next: next
          });
        },
        onMicStatusChange: function onMicStatusChange(prev, next) {
          _this.$emit('micStatus', {
            prev: prev,
            next: next
          });
        }
      });
      Object.keys(componentInstance.mappedProps).forEach(function (key) {
        _this.$set(_this.searchState, key, componentInstance.mappedProps[key]);
      }); // Subscribe to state changes only when slot is defined

      componentInstance.subscribeToStateChanges(function (change) {
        Object.keys(change).forEach(function () {
          _this.searchState = componentInstance.mappedProps;
        });
      }, subscribeTo);

      if ((value || customQuery) && this.componentInstance) {
        this.componentInstance.triggerCustomQuery();
      }
    },
    mounted: function mounted() {
      var triggerQueryOnInit = this.$props.triggerQueryOnInit;
      var componentInstance = this.getComponentInstance();

      if (triggerQueryOnInit) {
        componentInstance.triggerDefaultQuery();
      }
    },
    methods: {
      getComponentInstance: function getComponentInstance() {
        return this.searchbase.getComponent(this.$props.id);
      }
    },
    render: function render() {
      var h = arguments[0];
      var _this$$props = this.$props,
          id = _this$$props.id,
          URLParams = _this$$props.URLParams;

      if (this.$scopedSlots["default"]) {
        var dom = this.$scopedSlots["default"];

        if (URLParams) {
          return h(URLParamsProvider, {
            "attrs": {
              "id": id
            }
          }, [dom(this.searchState)]);
        }

        return h("div", [dom(this.searchState)]);
      }

      return null;
    }
  };

  SearchComponent.install = function (Vue) {
    Vue.component(SearchComponent.name, SearchComponent);
  };

  var global$1 = typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};

  function memoize(fn) {
    var cache = {};
    return function (arg) {
      if (cache[arg] === undefined) cache[arg] = fn(arg);
      return cache[arg];
    };
  }

  var unitlessKeys = {
    animationIterationCount: 1,
    borderImageOutset: 1,
    borderImageSlice: 1,
    borderImageWidth: 1,
    boxFlex: 1,
    boxFlexGroup: 1,
    boxOrdinalGroup: 1,
    columnCount: 1,
    columns: 1,
    flex: 1,
    flexGrow: 1,
    flexPositive: 1,
    flexShrink: 1,
    flexNegative: 1,
    flexOrder: 1,
    gridRow: 1,
    gridRowEnd: 1,
    gridRowSpan: 1,
    gridRowStart: 1,
    gridColumn: 1,
    gridColumnEnd: 1,
    gridColumnSpan: 1,
    gridColumnStart: 1,
    fontWeight: 1,
    lineHeight: 1,
    opacity: 1,
    order: 1,
    orphans: 1,
    tabSize: 1,
    widows: 1,
    zIndex: 1,
    zoom: 1,
    WebkitLineClamp: 1,
    // SVG-related properties
    fillOpacity: 1,
    floodOpacity: 1,
    stopOpacity: 1,
    strokeDasharray: 1,
    strokeDashoffset: 1,
    strokeMiterlimit: 1,
    strokeOpacity: 1,
    strokeWidth: 1
  };

  /* eslint-disable */
  // murmurhash2 via https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js
  function murmurhash2_32_gc(str) {
    var l = str.length,
        h = l ^ l,
        i = 0,
        k;

    while (l >= 4) {
      k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
      k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
      k ^= k >>> 24;
      k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
      h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
      l -= 4;
      ++i;
    }

    switch (l) {
      case 3:
        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;

      case 2:
        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;

      case 1:
        h ^= str.charCodeAt(i) & 0xff;
        h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
    }

    h ^= h >>> 13;
    h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
    h ^= h >>> 15;
    return (h >>> 0).toString(36);
  }

  function stylis_min(W) {
    function M(d, c, e, h, a) {
      for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
        g = e.charCodeAt(l);
        l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);

        if (0 === b + n + v + m) {
          if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
            switch (g) {
              case 32:
              case 9:
              case 59:
              case 13:
              case 10:
                break;

              default:
                f += e.charAt(l);
            }

            g = 59;
          }

          switch (g) {
            case 123:
              f = f.trim();
              q = f.charCodeAt(0);
              k = 1;

              for (t = ++l; l < B;) {
                switch (g = e.charCodeAt(l)) {
                  case 123:
                    k++;
                    break;

                  case 125:
                    k--;
                    break;

                  case 47:
                    switch (g = e.charCodeAt(l + 1)) {
                      case 42:
                      case 47:
                        a: {
                          for (u = l + 1; u < J; ++u) {
                            switch (e.charCodeAt(u)) {
                              case 47:
                                if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
                                  l = u + 1;
                                  break a;
                                }

                                break;

                              case 10:
                                if (47 === g) {
                                  l = u + 1;
                                  break a;
                                }

                            }
                          }

                          l = u;
                        }

                    }

                    break;

                  case 91:
                    g++;

                  case 40:
                    g++;

                  case 34:
                  case 39:
                    for (; l++ < J && e.charCodeAt(l) !== g;) {}

                }

                if (0 === k) break;
                l++;
              }

              k = e.substring(t, l);
              0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));

              switch (q) {
                case 64:
                  0 < r && (f = f.replace(N, ''));
                  g = f.charCodeAt(1);

                  switch (g) {
                    case 100:
                    case 109:
                    case 115:
                    case 45:
                      r = c;
                      break;

                    default:
                      r = O;
                  }

                  k = M(c, r, k, g, a + 1);
                  t = k.length;
                  0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
                  if (0 < t) switch (g) {
                    case 115:
                      f = f.replace(da, ea);

                    case 100:
                    case 109:
                    case 45:
                      k = f + '{' + k + '}';
                      break;

                    case 107:
                      f = f.replace(fa, '$1 $2');
                      k = f + '{' + k + '}';
                      k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
                      break;

                    default:
                      k = f + k, 112 === h && (k = (p += k, ''));
                  } else k = '';
                  break;

                default:
                  k = M(c, X(c, f, I), k, h, a + 1);
              }

              F += k;
              k = I = r = u = q = 0;
              f = '';
              g = e.charCodeAt(++l);
              break;

            case 125:
            case 59:
              f = (0 < r ? f.replace(N, '') : f).trim();
              if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
                case 0:
                  break;

                case 64:
                  if (105 === g || 99 === g) {
                    G += f + e.charAt(l);
                    break;
                  }

                default:
                  58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
              }
              I = r = u = q = 0;
              f = '';
              g = e.charCodeAt(++l);
          }
        }

        switch (g) {
          case 13:
          case 10:
            47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
            0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
            z = 1;
            D++;
            break;

          case 59:
          case 125:
            if (0 === b + n + v + m) {
              z++;
              break;
            }

          default:
            z++;
            y = e.charAt(l);

            switch (g) {
              case 9:
              case 32:
                if (0 === n + m + b) switch (x) {
                  case 44:
                  case 58:
                  case 9:
                  case 32:
                    y = '';
                    break;

                  default:
                    32 !== g && (y = ' ');
                }
                break;

              case 0:
                y = '\\0';
                break;

              case 12:
                y = '\\f';
                break;

              case 11:
                y = '\\v';
                break;

              case 38:
                0 === n + b + m && (r = I = 1, y = '\f' + y);
                break;

              case 108:
                if (0 === n + b + m + E && 0 < u) switch (l - u) {
                  case 2:
                    112 === x && 58 === e.charCodeAt(l - 3) && (E = x);

                  case 8:
                    111 === K && (E = K);
                }
                break;

              case 58:
                0 === n + b + m && (u = l);
                break;

              case 44:
                0 === b + v + n + m && (r = 1, y += '\r');
                break;

              case 34:
              case 39:
                0 === b && (n = n === g ? 0 : 0 === n ? g : n);
                break;

              case 91:
                0 === n + b + v && m++;
                break;

              case 93:
                0 === n + b + v && m--;
                break;

              case 41:
                0 === n + b + m && v--;
                break;

              case 40:
                if (0 === n + b + m) {
                  if (0 === q) switch (2 * x + 3 * K) {
                    case 533:
                      break;

                    default:
                      q = 1;
                  }
                  v++;
                }

                break;

              case 64:
                0 === b + v + n + m + u + k && (k = 1);
                break;

              case 42:
              case 47:
                if (!(0 < n + m + v)) switch (b) {
                  case 0:
                    switch (2 * g + 3 * e.charCodeAt(l + 1)) {
                      case 235:
                        b = 47;
                        break;

                      case 220:
                        t = l, b = 42;
                    }

                    break;

                  case 42:
                    47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
                }
            }

            0 === b && (f += y);
        }

        K = x;
        x = g;
        l++;
      }

      t = p.length;

      if (0 < t) {
        r = c;
        if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
        p = r.join(',') + '{' + p + '}';

        if (0 !== w * E) {
          2 !== w || L(p, 2) || (E = 0);

          switch (E) {
            case 111:
              p = p.replace(ha, ':-moz-$1') + p;
              break;

            case 112:
              p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
          }

          E = 0;
        }
      }

      return G + p + F;
    }

    function X(d, c, e) {
      var h = c.trim().split(ia);
      c = h;
      var a = h.length,
          m = d.length;

      switch (m) {
        case 0:
        case 1:
          var b = 0;

          for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
            c[b] = Z(d, c[b], e).trim();
          }

          break;

        default:
          var v = b = 0;

          for (c = []; b < a; ++b) {
            for (var n = 0; n < m; ++n) {
              c[v++] = Z(d[n] + ' ', h[b], e).trim();
            }
          }

      }

      return c;
    }

    function Z(d, c, e) {
      var h = c.charCodeAt(0);
      33 > h && (h = (c = c.trim()).charCodeAt(0));

      switch (h) {
        case 38:
          return c.replace(F, '$1' + d.trim());

        case 58:
          return d.trim() + c.replace(F, '$1' + d.trim());

        default:
          if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
      }

      return d + c;
    }

    function P(d, c, e, h) {
      var a = d + ';',
          m = 2 * c + 3 * e + 4 * h;

      if (944 === m) {
        d = a.indexOf(':', 9) + 1;
        var b = a.substring(d, a.length - 1).trim();
        b = a.substring(0, d).trim() + b + ';';
        return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
      }

      if (0 === w || 2 === w && !L(a, 1)) return a;

      switch (m) {
        case 1015:
          return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;

        case 951:
          return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;

        case 963:
          return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;

        case 1009:
          if (100 !== a.charCodeAt(4)) break;

        case 969:
        case 942:
          return '-webkit-' + a + a;

        case 978:
          return '-webkit-' + a + '-moz-' + a + a;

        case 1019:
        case 983:
          return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;

        case 883:
          if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
          if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
          break;

        case 932:
          if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
            case 103:
              return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;

            case 115:
              return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;

            case 98:
              return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
          }
          return '-webkit-' + a + '-ms-' + a + a;

        case 964:
          return '-webkit-' + a + '-ms-flex-' + a + a;

        case 1023:
          if (99 !== a.charCodeAt(8)) break;
          b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
          return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;

        case 1005:
          return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;

        case 1e3:
          b = a.substring(13).trim();
          c = b.indexOf('-') + 1;

          switch (b.charCodeAt(0) + b.charCodeAt(c)) {
            case 226:
              b = a.replace(G, 'tb');
              break;

            case 232:
              b = a.replace(G, 'tb-rl');
              break;

            case 220:
              b = a.replace(G, 'lr');
              break;

            default:
              return a;
          }

          return '-webkit-' + a + '-ms-' + b + a;

        case 1017:
          if (-1 === a.indexOf('sticky', 9)) break;

        case 975:
          c = (a = d).length - 10;
          b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();

          switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {
            case 203:
              if (111 > b.charCodeAt(8)) break;

            case 115:
              a = a.replace(b, '-webkit-' + b) + ';' + a;
              break;

            case 207:
            case 102:
              a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
          }

          return a + ';';

        case 938:
          if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
            case 105:
              return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;

            case 115:
              return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;

            default:
              return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
          }
          break;

        case 973:
        case 989:
          if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;

        case 931:
        case 953:
          if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
          break;

        case 962:
          if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
      }

      return a;
    }

    function L(d, c) {
      var e = d.indexOf(1 === c ? ':' : '{'),
          h = d.substring(0, 3 !== c ? e : 10);
      e = d.substring(e + 1, d.length - 1);
      return R(2 !== c ? h : h.replace(na, '$1'), e, c);
    }

    function ea(d, c) {
      var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
      return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
    }

    function H(d, c, e, h, a, m, b, v, n, q) {
      for (var g = 0, x = c, w; g < A; ++g) {
        switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
          case void 0:
          case !1:
          case !0:
          case null:
            break;

          default:
            x = w;
        }
      }

      if (x !== c) return x;
    }

    function T(d) {
      switch (d) {
        case void 0:
        case null:
          A = S.length = 0;
          break;

        default:
          switch (d.constructor) {
            case Array:
              for (var c = 0, e = d.length; c < e; ++c) {
                T(d[c]);
              }

              break;

            case Function:
              S[A++] = d;
              break;

            case Boolean:
              Y = !!d | 0;
          }

      }

      return T;
    }

    function U(d) {
      d = d.prefix;
      void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
      return U;
    }

    function B(d, c) {
      var e = d;
      33 > e.charCodeAt(0) && (e = e.trim());
      V = e;
      e = [V];

      if (0 < A) {
        var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
        void 0 !== h && 'string' === typeof h && (c = h);
      }

      var a = M(O, e, c, 0, 0);
      0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
      V = '';
      E = 0;
      z = D = 1;
      return a;
    }

    var ca = /^\0+/g,
        N = /[\0\r\f]/g,
        aa = /: */g,
        ka = /zoo|gra/,
        ma = /([,: ])(transform)/g,
        ia = /,\r+?/g,
        F = /([\t\r\n ])*\f?&/g,
        fa = /@(k\w+)\s*(\S*)\s*/,
        Q = /::(place)/g,
        ha = /:(read-only)/g,
        G = /[svh]\w+-[tblr]{2}/,
        da = /\(\s*(.*)\s*\)/g,
        oa = /([\s\S]*?);/g,
        ba = /-self|flex-/g,
        na = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
        la = /stretch|:\s*\w+\-(?:conte|avail)/,
        ja = /([^-])(image-set\()/,
        z = 1,
        D = 1,
        E = 0,
        w = 1,
        O = [],
        S = [],
        A = 0,
        R = null,
        Y = 0,
        V = '';
    B.use = T;
    B.set = U;
    void 0 !== W && U(W);
    return B;
  }

  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }

  var stylisRuleSheet = createCommonjsModule(function (module, exports) {
    (function (factory) {
       module['exports'] = factory() ;
    })(function () {

      return function (insertRule) {
        var delimiter = '/*|*/';
        var needle = delimiter + '}';

        function toSheet(block) {
          if (block) try {
            insertRule(block + '}');
          } catch (e) {}
        }

        return function ruleSheet(context, content, selectors, parents, line, column, length, ns, depth, at) {
          switch (context) {
            // property
            case 1:
              // @import
              if (depth === 0 && content.charCodeAt(0) === 64) return insertRule(content + ';'), '';
              break;
            // selector

            case 2:
              if (ns === 0) return content + delimiter;
              break;
            // at-rule

            case 3:
              switch (ns) {
                // @font-face, @page
                case 102:
                case 112:
                  return insertRule(selectors[0] + content), '';

                default:
                  return content + (at === 0 ? delimiter : '');
              }

            case -2:
              content.split(needle).forEach(toSheet);
          }
        };
      };
    });
  });

  var hyphenateRegex = /[A-Z]|^ms/g;
  var processStyleName = memoize(function (styleName) {
    return styleName.replace(hyphenateRegex, '-$&').toLowerCase();
  });

  var processStyleValue = function processStyleValue(key, value) {
    if (value == null || typeof value === 'boolean') {
      return '';
    }

    if (unitlessKeys[key] !== 1 && key.charCodeAt(1) !== 45 && // custom properties
    !isNaN(value) && value !== 0) {
      return value + 'px';
    }

    return value;
  };

  {
    var contentValuePattern = /(attr|calc|counters?|url)\(/;
    var contentValues = ['normal', 'none', 'counter', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'initial', 'inherit', 'unset'];
    var oldProcessStyleValue = processStyleValue;

    processStyleValue = function processStyleValue(key, value) {
      if (key === 'content') {
        if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
          console.error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
        }
      }

      return oldProcessStyleValue(key, value);
    };
  }

  var classnames = function classnames(args) {
    var len = args.length;
    var i = 0;
    var cls = '';

    for (; i < len; i++) {
      var arg = args[i];
      if (arg == null) continue;
      var toAdd = void 0;

      switch (typeof arg) {
        case 'boolean':
          break;

        case 'function':
          {
            console.error('Passing functions to cx is deprecated and will be removed in the next major version of Emotion.\n' + 'Please call the function before passing it to cx.');
          }

          toAdd = classnames([arg()]);
          break;

        case 'object':
          {
            if (Array.isArray(arg)) {
              toAdd = classnames(arg);
            } else {
              toAdd = '';

              for (var k in arg) {
                if (arg[k] && k) {
                  toAdd && (toAdd += ' ');
                  toAdd += k;
                }
              }
            }

            break;
          }

        default:
          {
            toAdd = arg;
          }
      }

      if (toAdd) {
        cls && (cls += ' ');
        cls += toAdd;
      }
    }

    return cls;
  };

  var isBrowser = typeof document !== 'undefined';
  /*

  high performance StyleSheet for css-in-js systems

  - uses multiple style tags behind the scenes for millions of rules
  - uses `insertRule` for appending in production for *much* faster performance
  - 'polyfills' on server side

  // usage

  import StyleSheet from 'glamor/lib/sheet'
  let styleSheet = new StyleSheet()

  styleSheet.inject()
  - 'injects' the stylesheet into the page (or into memory if on server)

  styleSheet.insert('#box { border: 1px solid red; }')
  - appends a css rule into the stylesheet

  styleSheet.flush()
  - empties the stylesheet of all its contents

  */
  // $FlowFixMe

  function sheetForTag(tag) {
    if (tag.sheet) {
      // $FlowFixMe
      return tag.sheet;
    } // this weirdness brought to you by firefox


    for (var i = 0; i < document.styleSheets.length; i++) {
      if (document.styleSheets[i].ownerNode === tag) {
        // $FlowFixMe
        return document.styleSheets[i];
      }
    }
  }

  function makeStyleTag(opts) {
    var tag = document.createElement('style');
    tag.setAttribute('data-emotion', opts.key || '');

    if (opts.nonce !== undefined) {
      tag.setAttribute('nonce', opts.nonce);
    }

    tag.appendChild(document.createTextNode('')) // $FlowFixMe
    ;
    (opts.container !== undefined ? opts.container : document.head).appendChild(tag);
    return tag;
  }

  var StyleSheet = /*#__PURE__*/function () {
    function StyleSheet(options) {
      this.isSpeedy = "development" === 'production'; // the big drawback here is that the css won't be editable in devtools

      this.tags = [];
      this.ctr = 0;
      this.opts = options;
    }

    var _proto = StyleSheet.prototype;

    _proto.inject = function inject() {
      if (this.injected) {
        throw new Error('already injected!');
      }

      this.tags[0] = makeStyleTag(this.opts);
      this.injected = true;
    };

    _proto.speedy = function speedy(bool) {
      if (this.ctr !== 0) {
        // cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
        throw new Error("cannot change speedy now");
      }

      this.isSpeedy = !!bool;
    };

    _proto.insert = function insert(rule, sourceMap) {
      // this is the ultrafast version, works across browsers
      if (this.isSpeedy) {
        var tag = this.tags[this.tags.length - 1];
        var sheet = sheetForTag(tag);

        try {
          sheet.insertRule(rule, sheet.cssRules.length);
        } catch (e) {
          {
            console.warn('illegal rule', rule); // eslint-disable-line no-console
          }
        }
      } else {
        var _tag = makeStyleTag(this.opts);

        this.tags.push(_tag);

        _tag.appendChild(document.createTextNode(rule + (sourceMap || '')));
      }

      this.ctr++;

      if (this.ctr % 65000 === 0) {
        this.tags.push(makeStyleTag(this.opts));
      }
    };

    _proto.flush = function flush() {
      // $FlowFixMe
      this.tags.forEach(function (tag) {
        return tag.parentNode.removeChild(tag);
      });
      this.tags = [];
      this.ctr = 0; // todo - look for remnants in document.styleSheets

      this.injected = false;
    };

    return StyleSheet;
  }();

  function createEmotion(context, options) {
    if (context.__SECRET_EMOTION__ !== undefined) {
      return context.__SECRET_EMOTION__;
    }

    if (options === undefined) options = {};
    var key = options.key || 'css';

    {
      if (/[^a-z-]/.test(key)) {
        throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
      }
    }

    var current;

    function insertRule(rule) {
      current += rule;

      if (isBrowser) {
        sheet.insert(rule, currentSourceMap);
      }
    }

    var insertionPlugin = stylisRuleSheet(insertRule);
    var stylisOptions;

    if (options.prefix !== undefined) {
      stylisOptions = {
        prefix: options.prefix
      };
    }

    var caches = {
      registered: {},
      inserted: {},
      nonce: options.nonce,
      key: key
    };
    var sheet = new StyleSheet(options);

    if (isBrowser) {
      // 🚀
      sheet.inject();
    }

    var stylis = new stylis_min(stylisOptions);
    stylis.use(options.stylisPlugins)(insertionPlugin);
    var currentSourceMap = '';

    function handleInterpolation(interpolation, couldBeSelectorInterpolation) {
      if (interpolation == null) {
        return '';
      }

      switch (typeof interpolation) {
        case 'boolean':
          return '';

        case 'function':
          if (interpolation.__emotion_styles !== undefined) {
            var selector = interpolation.toString();

            if (selector === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
              throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
            }

            return selector;
          }

          if (this === undefined && "development" !== 'production') {
            console.error('Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
          }

          return handleInterpolation.call(this, this === undefined ? interpolation() : // $FlowFixMe
          interpolation(this.mergedProps, this.context), couldBeSelectorInterpolation);

        case 'object':
          return createStringFromObject.call(this, interpolation);

        default:
          var cached = caches.registered[interpolation];
          return couldBeSelectorInterpolation === false && cached !== undefined ? cached : interpolation;
      }
    }

    var objectToStringCache = new WeakMap();

    function createStringFromObject(obj) {
      if (objectToStringCache.has(obj)) {
        // $FlowFixMe
        return objectToStringCache.get(obj);
      }

      var string = '';

      if (Array.isArray(obj)) {
        obj.forEach(function (interpolation) {
          string += handleInterpolation.call(this, interpolation, false);
        }, this);
      } else {
        Object.keys(obj).forEach(function (key) {
          if (typeof obj[key] !== 'object') {
            if (caches.registered[obj[key]] !== undefined) {
              string += key + "{" + caches.registered[obj[key]] + "}";
            } else {
              string += processStyleName(key) + ":" + processStyleValue(key, obj[key]) + ";";
            }
          } else {
            if (key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
              throw new Error('Component selectors can only be used in conjunction with babel-plugin-emotion.');
            }

            if (Array.isArray(obj[key]) && typeof obj[key][0] === 'string' && caches.registered[obj[key][0]] === undefined) {
              obj[key].forEach(function (value) {
                string += processStyleName(key) + ":" + processStyleValue(key, value) + ";";
              });
            } else {
              string += key + "{" + handleInterpolation.call(this, obj[key], false) + "}";
            }
          }
        }, this);
      }

      objectToStringCache.set(obj, string);
      return string;
    }

    var name;
    var stylesWithLabel;
    var labelPattern = /label:\s*([^\s;\n{]+)\s*;/g;

    var createClassName = function createClassName(styles, identifierName) {
      return murmurhash2_32_gc(styles + identifierName) + identifierName;
    };

    {
      var oldCreateClassName = createClassName;
      var sourceMappingUrlPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;

      createClassName = function createClassName(styles, identifierName) {
        return oldCreateClassName(styles.replace(sourceMappingUrlPattern, function (sourceMap) {
          currentSourceMap = sourceMap;
          return '';
        }), identifierName);
      };
    }

    var createStyles = function createStyles(strings) {
      var stringMode = true;
      var styles = '';
      var identifierName = '';

      if (strings == null || strings.raw === undefined) {
        stringMode = false;
        styles += handleInterpolation.call(this, strings, false);
      } else {
        styles += strings[0];
      }

      for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        interpolations[_key - 1] = arguments[_key];
      }

      interpolations.forEach(function (interpolation, i) {
        styles += handleInterpolation.call(this, interpolation, styles.charCodeAt(styles.length - 1) === 46 // .
        );

        if (stringMode === true && strings[i + 1] !== undefined) {
          styles += strings[i + 1];
        }
      }, this);
      stylesWithLabel = styles;
      styles = styles.replace(labelPattern, function (match, p1) {
        identifierName += "-" + p1;
        return '';
      });
      name = createClassName(styles, identifierName);
      return styles;
    };

    {
      var oldStylis = stylis;

      stylis = function stylis(selector, styles) {
        oldStylis(selector, styles);
        currentSourceMap = '';
      };
    }

    function insert(scope, styles) {
      if (caches.inserted[name] === undefined) {
        current = '';
        stylis(scope, styles);
        caches.inserted[name] = current;
      }
    }

    var css = function css() {
      var styles = createStyles.apply(this, arguments);
      var selector = key + "-" + name;

      if (caches.registered[selector] === undefined) {
        caches.registered[selector] = stylesWithLabel;
      }

      insert("." + selector, styles);
      return selector;
    };

    var keyframes = function keyframes() {
      var styles = createStyles.apply(this, arguments);
      var animation = "animation-" + name;
      insert('', "@keyframes " + animation + "{" + styles + "}");
      return animation;
    };

    var injectGlobal = function injectGlobal() {
      var styles = createStyles.apply(this, arguments);
      insert('', styles);
    };

    function getRegisteredStyles(registeredStyles, classNames) {
      var rawClassName = '';
      classNames.split(' ').forEach(function (className) {
        if (caches.registered[className] !== undefined) {
          registeredStyles.push(className);
        } else {
          rawClassName += className + " ";
        }
      });
      return rawClassName;
    }

    function merge(className, sourceMap) {
      var registeredStyles = [];
      var rawClassName = getRegisteredStyles(registeredStyles, className);

      if (registeredStyles.length < 2) {
        return className;
      }

      return rawClassName + css(registeredStyles, sourceMap);
    }

    function cx() {
      for (var _len2 = arguments.length, classNames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        classNames[_key2] = arguments[_key2];
      }

      return merge(classnames(classNames));
    }

    function hydrateSingleId(id) {
      caches.inserted[id] = true;
    }

    function hydrate(ids) {
      ids.forEach(hydrateSingleId);
    }

    function flush() {
      if (isBrowser) {
        sheet.flush();
        sheet.inject();
      }

      caches.inserted = {};
      caches.registered = {};
    }

    if (isBrowser) {
      var chunks = document.querySelectorAll("[data-emotion-" + key + "]");
      Array.prototype.forEach.call(chunks, function (node) {
        // $FlowFixMe
        sheet.tags[0].parentNode.insertBefore(node, sheet.tags[0]); // $FlowFixMe

        node.getAttribute("data-emotion-" + key).split(' ').forEach(hydrateSingleId);
      });
    }

    var emotion = {
      flush: flush,
      hydrate: hydrate,
      cx: cx,
      merge: merge,
      getRegisteredStyles: getRegisteredStyles,
      injectGlobal: injectGlobal,
      keyframes: keyframes,
      css: css,
      sheet: sheet,
      caches: caches
    };
    context.__SECRET_EMOTION__ = emotion;
    return emotion;
  }

  var context = typeof global$1 !== 'undefined' ? global$1 : {};

  var _createEmotion = createEmotion(context),
      flush = _createEmotion.flush,
      hydrate = _createEmotion.hydrate,
      cx = _createEmotion.cx,
      merge = _createEmotion.merge,
      getRegisteredStyles = _createEmotion.getRegisteredStyles,
      injectGlobal = _createEmotion.injectGlobal,
      keyframes = _createEmotion.keyframes,
      css = _createEmotion.css,
      sheet = _createEmotion.sheet,
      caches = _createEmotion.caches;

  /*!
   * nano-assign v1.0.1
   * (c) 2018-present egoist <0x142857@gmail.com>
   * Released under the MIT License.
   */

  var index = function index(obj) {
    var arguments$1 = arguments;

    for (var i = 1; i < arguments.length; i++) {
      // eslint-disable-next-line guard-for-in, prefer-rest-params
      for (var p in arguments[i]) {
        obj[p] = arguments$1[i][p];
      }
    }

    return obj;
  };

  var nanoAssign_common = index;

  /* eslint-disable */

  var STYLES_KEY = '__emotion_styles';

  function _typeof(obj) {
    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      _typeof = function _typeof(obj) {
        return typeof obj;
      };
    } else {
      _typeof = function _typeof(obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
      };
    }

    return _typeof(obj);
  }

  function stringifyClass(klass) {
    if (Array.isArray(klass)) {
      return klass.join(' ');
    }

    if (_typeof(klass) === 'object') {
      return Object.keys(klass).filter(function (key) {
        return Boolean(klass[key]);
      }).join(' ');
    }

    return klass;
  }

  var index$1 = function index(tag, options) {
    var staticClassName;
    var identifierName;
    var stableClassName;
    var propsDefinitions;

    if (options !== undefined) {
      staticClassName = options.e;
      identifierName = options.label;
      stableClassName = options.target;
      propsDefinitions = options.props;
    }

    var isReal = tag.__emotion_real === tag;
    var baseTag = staticClassName === undefined ? isReal && tag.__emotion_base || tag : tag;
    return function () {
      var styles = isReal && tag[STYLES_KEY] !== undefined ? tag[STYLES_KEY].slice(0) : [];

      if (identifierName !== undefined) {
        styles.push("label:".concat(identifierName, ";"));
      }

      if (staticClassName === undefined) {
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        if (args[0] === null || args[0].raw === undefined) {
          styles.push.apply(styles, args);
        } else {
          styles.push(args[0][0]);
          var len = args.length;
          var i = 1;

          for (; i < len; i++) {
            styles.push(args[i], args[0][i]);
          }
        }
      }

      var Styled = {
        name: "Styled".concat(tag.name || identifierName || 'Component'),
        functional: true,
        inject: {
          theme: {
            from: 'theme_reactivesearch',
            "default": null
          }
        },
        props: propsDefinitions,
        render: function render(h, _ref) {
          var data = _ref.data,
              children = _ref.children,
              props = _ref.props,
              injections = _ref.injections;
          var className = '';
          var classInterpolations = [];
          var exisingClassName = stringifyClass(data["class"]);
          var attrs = {};

          for (var key in data.attrs) {
            if (key[0] !== '$') {
              attrs[key] = data.attrs[key];
            }
          }

          if (exisingClassName) {
            if (staticClassName === undefined) {
              className += getRegisteredStyles(classInterpolations, exisingClassName);
            } else {
              className += "".concat(exisingClassName, " ");
            }
          }

          if (staticClassName === undefined) {
            var ctx = {
              mergedProps: nanoAssign_common({
                theme: injections.theme
              }, props)
            };
            className += css.apply(ctx, styles.concat(classInterpolations));
          } else {
            className += staticClassName;
          }

          if (stableClassName !== undefined) {
            className += " ".concat(stableClassName);
          }

          return h(tag, nanoAssign_common({}, data, {
            attrs: attrs,
            "class": className
          }), children);
        }
      };
      Styled[STYLES_KEY] = styles;
      Styled.__emotion_base = baseTag;
      Styled.__emotion_real = Styled;
      Object.defineProperty(Styled, 'toString', {
        enumerable: false,
        value: function value() {
          if ( stableClassName === undefined) {
            return 'NO_COMPONENT_SELECTOR';
          }

          return ".".concat(stableClassName);
        }
      });
      return Styled;
    };
  };

  function _templateObject() {
    var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 42px;\n  width: 100%;\n"]);

    _templateObject = function _templateObject() {
      return data;
    };

    return data;
  }
  var InputGroup = index$1('div')(_templateObject());
  InputGroup.defaultProps = {
    className: 'input-group'
  };

  function _templateObject$1() {
    var data = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"]);

    _templateObject$1 = function _templateObject() {
      return data;
    };

    return data;
  }
  var InputWrapper = index$1('div')(_templateObject$1());

  function _templateObject$2() {
    var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\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: 2px 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"]);

    _templateObject$2 = function _templateObject() {
      return data;
    };

    return data;
  }
  var InputAddon = index$1('div')(_templateObject$2());
  InputAddon.defaultProps = {
    className: 'input-addon'
  };

  function _templateObject10() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 90px;\n    "]);

    _templateObject10 = function _templateObject10() {
      return data;
    };

    return data;
  }

  function _templateObject9() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 66px;\n    "]);

    _templateObject9 = function _templateObject9() {
      return data;
    };

    return data;
  }

  function _templateObject8() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 66px;\n    "]);

    _templateObject8 = function _templateObject8() {
      return data;
    };

    return data;
  }

  function _templateObject7() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 66px;\n    "]);

    _templateObject7 = function _templateObject7() {
      return data;
    };

    return data;
  }

  function _templateObject6() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 36px;\n    "]);

    _templateObject6 = function _templateObject6() {
      return data;
    };

    return data;
  }

  function _templateObject5() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 36px;\n    "]);

    _templateObject5 = function _templateObject5() {
      return data;
    };

    return data;
  }

  function _templateObject4() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-right: 36px;\n    "]);

    _templateObject4 = function _templateObject4() {
      return data;
    };

    return data;
  }

  function _templateObject3() {
    var data = _taggedTemplateLiteralLoose(["\n      padding-left: 36px;\n    "]);

    _templateObject3 = function _templateObject3() {
      return data;
    };

    return data;
  }

  function _templateObject2() {
    var data = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n"]);

    _templateObject2 = function _templateObject2() {
      return data;
    };

    return data;
  }

  function _templateObject$3() {
    var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 42px;\n  line-height: 42px;\n  padding: 8px 12px;\n  border: 1px solid #ccc;\n  background-color: #fafafa;\n  font-size: 0.9rem;\n  outline: none;\n  box-sizing: border-box;\n\n  &:focus {\n    background-color: #fff;\n  }\n"]);

    _templateObject$3 = function _templateObject() {
      return data;
    };

    return data;
  }
  var input = css(_templateObject$3());
  var Input = index$1('input')(_templateObject2(), input, function (props) {
    return props.showIcon && props.iconPosition === 'left' && css(_templateObject3());
  }, function (props) {
    return props.showIcon && props.iconPosition === 'right' && css(_templateObject4());
  }, function (props) {
    return (// for clear icon
      props.showClear && css(_templateObject5())
    );
  }, function (props) {
    return (// for voice search icon
      props.showVoiceSearch && css(_templateObject6())
    );
  }, function (props) {
    return (// for clear icon with search icon
      props.showClear && props.showIcon && props.iconPosition === 'right' && css(_templateObject7())
    );
  }, function (props) {
    return (// for voice search icon with search icon
      props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && css(_templateObject8())
    );
  }, function (props) {
    return (// for voice search icon with clear icon
      props.showClear && props.showVoiceSearch && css(_templateObject9())
    );
  }, function (props) {
    return (// for clear icon with search icon and voice search
      props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && css(_templateObject10())
    );
  });

  var DownShift = {
    // eslint-disable-next-line
    props: ['isOpen', 'inputValue', 'selectedItem', 'highlightedIndex', 'handleChange', 'itemToString', 'handleMouseup'],
    data: function data() {
      return {
        isMouseDown: false,
        internal_isOpen: false,
        internal_inputValue: '',
        internal_selectedItem: null,
        internal_highlightedIndex: null
      };
    },
    computed: {
      mergedState: function mergedState() {
        var _this = this;

        return Object.keys(this.$props).reduce(function (state, key) {
          var _extends2;

          return _extends$1({}, state, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
        }, {});
      },
      internalItemCount: function internalItemCount() {
        return this.items.length;
      }
    },
    mounted: function mounted() {
      window.addEventListener('mousedown', this.handleWindowMousedown);
      window.addEventListener('mouseup', this.handleWindowMouseup);
    },
    beforeDestroy: function beforeDestroy() {
      window.removeEventListener('mousedown', this.handleWindowMousedown);
      window.removeEventListener('mouseup', this.handleWindowMouseup);
    },
    methods: {
      handleWindowMousedown: function handleWindowMousedown() {
        this.isMouseDown = true;
      },
      handleWindowMouseup: function handleWindowMouseup(event) {
        this.isMouseDown = false;

        if ((event.target === this.$refs.rootNode || !this.$refs.rootNode.contains(event.target)) && this.mergedState.isOpen) {
          // TODO: handle on outer click here
          if (!this.isMouseDown) {
            this.reset();

            if (this.$props.handleMouseup) {
              this.$props.handleMouseup({
                isOpen: false
              });
            }
          }
        }
      },
      keyDownArrowDown: function keyDownArrowDown(event) {
        event.preventDefault();
        var amount = event.shiftKey ? 5 : 1;

        if (this.mergedState.isOpen) {
          this.changeHighlightedIndex(amount);
        } else {
          this.setState({
            isOpen: true
          });
          this.setHighlightedIndex();
        }
      },
      keyDownArrowUp: function keyDownArrowUp(event) {
        event.preventDefault();
        var amount = event.shiftKey ? -5 : -1;

        if (this.mergedState.isOpen) {
          this.changeHighlightedIndex(amount);
        } else {
          this.setState({
            isOpen: true
          });
          this.setHighlightedIndex();
        }
      },
      keyDownEnter: function keyDownEnter(event) {
        if (this.mergedState.isOpen) {
          event.preventDefault();
          this.selectHighlightedItem();
        }
      },
      keyDownEscape: function keyDownEscape(event) {
        event.preventDefault();
        this.reset();
      },
      selectHighlightedItem: function selectHighlightedItem() {
        return this.selectItemAtIndex(this.mergedState.highlightedIndex);
      },
      selectItemAtIndex: function selectItemAtIndex(itemIndex) {
        var item = this.items[itemIndex];

        if (item == null) {
          return;
        }

        this.selectItem(item);
      },
      selectItem: function selectItem(item) {
        if (this.$props.handleChange) {
          this.$props.handleChange(item);
        }

        this.setState({
          isOpen: false,
          highlightedIndex: null,
          selectedItem: item,
          inputValue: this.isControlledProp('selectedItem') ? '' : item
        });
      },
      changeHighlightedIndex: function changeHighlightedIndex(moveAmount) {
        if (this.internalItemCount < 0) {
          return;
        }

        var highlightedIndex = this.mergedState.highlightedIndex;
        var baseIndex = highlightedIndex;

        if (baseIndex === null) {
          baseIndex = moveAmount > 0 ? -1 : this.internalItemCount + 1;
        }

        var newIndex = baseIndex + moveAmount;

        if (newIndex < 0) {
          newIndex = this.internalItemCount;
        } else if (newIndex > this.internalItemCount) {
          newIndex = 0;
        }

        this.setHighlightedIndex(newIndex);
      },
      setHighlightedIndex: function setHighlightedIndex(highlightedIndex) {
        if (highlightedIndex === void 0) {
          highlightedIndex = null;
        }

        this.setState({
          highlightedIndex: highlightedIndex
        });
        var element = document.getElementById("Downshift" + highlightedIndex);
        scrollIntoView(element, this.rootNode); // Implement scrollIntroView thingy
      },
      reset: function reset() {
        var selectedItem = this.mergedState.selectedItem;
        this.setState({
          isOpen: false,
          highlightedIndex: null,
          inputValue: selectedItem
        });
      },
      getItemProps: function getItemProps(_ref) {
        var index = _ref.index,
            item = _ref.item;
        var newIndex = index;

        if (index === undefined) {
          if (this.$props.itemToString) {
            this.items.push(this.$props.itemToString(item));
          } else {
            this.items.push(item);
          }

          newIndex = this.items.indexOf(item);
        } else {
          this.items[newIndex] = item;
        }

        return {
          id: "Downshift" + newIndex
        };
      },
      getItemEvents: function getItemEvents(_ref2) {
        var index = _ref2.index,
            item = _ref2.item;
        var newIndex = index;

        if (index === undefined) {
          newIndex = this.items.indexOf(item);
        }

        var vm = this;
        return {
          mouseenter: function mouseenter() {
            vm.setHighlightedIndex(newIndex);
          },
          click: function click(event) {
            event.stopPropagation();
            vm.selectItemAtIndex(newIndex);
          }
        };
      },
      getInputProps: function getInputProps(_ref3) {
        var value = _ref3.value;
        var inputValue = this.mergedState.inputValue;

        if (value !== inputValue) {
          this.setState({
            inputValue: value
          });
        }

        return {
          value: inputValue
        };
      },
      getButtonProps: function getButtonProps(_ref4) {
        var _this2 = this;

        var onClick = _ref4.onClick,
            onKeyDown = _ref4.onKeyDown,
            onKeyUp = _ref4.onKeyUp,
            onBlur = _ref4.onBlur;
        return {
          click: function click(event) {
            _this2.setState({
              isOpen: true,
              inputValue: event.target.value
            });

            if (onClick) {
              onClick(event);
            }
          },
          keydown: function keydown(event) {
            if (event.key && _this2["keyDown" + event.key]) {
              _this2["keyDown" + event.key].call(_this2, event);
            }

            if (onKeyDown) {
              onKeyDown(event);
            }
          },
          keyup: function keyup(event) {
            if (onKeyUp) {
              onKeyUp(event);
            }
          },
          blur: function blur(event) {
            if (onBlur) {
              onBlur(event);
            }
          }
        };
      },
      getInputEvents: function getInputEvents(_ref5) {
        var _this3 = this;

        var onInput = _ref5.onInput,
            onBlur = _ref5.onBlur,
            onFocus = _ref5.onFocus,
            onKeyPress = _ref5.onKeyPress,
            onKeyDown = _ref5.onKeyDown,
            onKeyUp = _ref5.onKeyUp;
        return {
          input: function input(event) {
            _this3.setState({
              isOpen: true,
              inputValue: event.target.value
            });

            if (onInput) {
              onInput(event);
            }
          },
          focus: function focus(event) {
            if (onFocus) {
              onFocus(event);
            }
          },
          keydown: function keydown(event) {
            if (event.key && _this3["keyDown" + event.key]) {
              _this3["keyDown" + event.key].call(_this3, event);
            }

            if (onKeyDown) {
              onKeyDown(event);
            }
          },
          keypress: function keypress(event) {
            if (onKeyPress) {
              onKeyPress(event);
            }
          },
          keyup: function keyup(event) {
            if (onKeyUp) {
              onKeyUp(event);
            }
          },
          blur: function blur(event) {
            if (onBlur) {
              onBlur(event);
            } // TODO: implement isMouseDown
            // this.reset()

          }
        };
      },
      getHelpersAndState: function getHelpersAndState() {
        var getItemProps = this.getItemProps,
            getItemEvents = this.getItemEvents,
            getInputProps = this.getInputProps,
            getInputEvents = this.getInputEvents,
            getButtonProps = this.getButtonProps;
        return _extends$1({
          getItemProps: getItemProps,
          getItemEvents: getItemEvents,
          getInputProps: getInputProps,
          getInputEvents: getInputEvents,
          getButtonProps: getButtonProps
        }, this.mergedState);
      },
      isControlledProp: function isControlledProp(prop) {
        return this.$props[prop] !== undefined;
      },
      setState: function setState(stateToSet) {
        var _this4 = this;

        // eslint-disable-next-line
        Object.keys(stateToSet).map(function (key) {
          // eslint-disable-next-line
          _this4.isControlledProp(key) ? _this4.$emit(key + "Change", stateToSet[key]) : _this4["internal_" + key] = stateToSet[key];
        });
        this.$emit('stateChange', this.mergedState);
      }
    },
    render: function render() {
      var h = arguments[0];
      this.items = [];
      return h("div", {
        "ref": "rootNode"
      }, [this.$scopedSlots["default"] && this.$scopedSlots["default"](_extends$1({}, this.getHelpersAndState()))]);
    }
  };

  function _templateObject2$1() {
    var data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  .cancel-icon {\n    cursor: pointer;\n  }\n  .no-suggestions {\n    border: 1px solid #ccc;\n    border-top: 0;\n    font-size: 0.9rem;\n    padding: 10px;\n  }\n"]);

    _templateObject2$1 = function _templateObject2() {
      return data;
    };

    return data;
  }

  function _templateObject$4() {
    var data = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 100%;\n  border: 1px solid #ccc;\n  background-color: #fff;\n  font-size: 0.9rem;\n  z-index: 3;\n  position: absolute;\n  top: 41px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  max-height: 400px;\n  overflow-y: auto;\n  box-sizing: border-box;\n\n  &.small {\n    top: 30px;\n  }\n\n  li {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 10px;\n    user-select: none;\n\n    .trim {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &:hover,\n    &:focus {\n      background-color: #eee;\n    }\n\n    .highlight-class {\n      font-weight: 600;\n      padding: 0;\n      background-color: transparent;\n      color: inherit;\n    }\n  }\n"]);

    _templateObject$4 = function _templateObject() {
      return data;
    };

    return data;
  }
  var suggestions = css(_templateObject$4());
  var suggestionsContainer = css(_templateObject2$1());

  var SuggestionItem = {
    props: ['suggestion', 'currentValue'],
    render: function render() {
      var h = arguments[0];
      var _this$$props = this.$props,
          suggestion = _this$$props.suggestion,
          currentValue = _this$$props.currentValue;
      var label = suggestion.label,
          value = suggestion.value,
          isPredictiveSuggestion = suggestion.isPredictiveSuggestion;
      var modSearchWords = currentValue.split(' ').map(function (word) {
        return escapeRegExp(word);
      });
      var stringToReplace = modSearchWords.join('|');

      if (label) {
        // label has highest precedence
        if (typeof label === 'string') {
          try {
            return h("div", {
              "class": "trim",
              "domProps": {
                "innerHTML": isPredictiveSuggestion ? label : label.replace(new RegExp(stringToReplace, 'ig'), function (matched) {
                  return "<mark class=\"highlight-class\">" + matched + "</mark>";
                })
              }
            });
          } catch (e) {
            return label;
          }
        }

        return label;
      }

      return value;
    }
  };

  function _templateObject$5() {
    var data = _taggedTemplateLiteralLoose(["\n  margin: 0 0 8px;\n  font-size: 1rem;\n  color: #424242;\n"]);

    _templateObject$5 = function _templateObject() {
      return data;
    };

    return data;
  }
  var Title = index$1('h2')(_templateObject$5());

  var CancelSvg = {
    functional: true,
    render: function render(h) {
      return h("svg", {
        "attrs": {
          "alt": "Clear",
          "xmlns": "http://www.w3.org/2000/svg",
          "height": "20px",
          "viewBox": "0 0 24 24",
          "width": "20px",
          "fill": "#000000"
        },
        "class": "cancel-icon"
      }, [h("title", ["Clear"]), h("path", {
        "attrs": {
          "d": "M0 0h24v24H0V0z",
          "fill": "none"
        }
      }), h("path", {
        "attrs": {
          "d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
        }
      })]);
    }
  };

  function _templateObject$6() {
    var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;min-width:20px;\n\n\tsvg.search-icon {\n\t\tfill: #0B6AFF;\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: #595959;\n\t}\n"]);

    _templateObject$6 = function _templateObject() {
      return data;
    };

    return data;
  }
  var IconWrapper = index$1('div')(_templateObject$6());

  function _templateObject4$1() {
    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t  "]);

    _templateObject4$1 = function _templateObject4() {
      return data;
    };

    return data;
  }

  function _templateObject3$1() {
    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t  "]);

    _templateObject3$1 = function _templateObject3() {
      return data;
    };

    return data;
  }

  function _templateObject2$2() {
    var data = _taggedTemplateLiteralLoose(["\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t"]);

    _templateObject2$2 = function _templateObject2() {
      return data;
    };

    return data;
  }

  function _templateObject$7() {
    var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n"]);

    _templateObject$7 = function _templateObject() {
      return data;
    };

    return data;
  }
  var IconGroup = index$1('div')(_templateObject$7(), function (_ref) {
    var positionType = _ref.positionType;

    if (positionType === 'absolute') {
      return css(_templateObject2$2());
    }

    return null;
  }, function (_ref2) {
    var groupPosition = _ref2.groupPosition;
    return groupPosition === 'right' ? css(_templateObject3$1()) : css(_templateObject4$1());
  });

  var SearchSvg = {
    functional: true,
    render: function render(h) {
      return h("svg", {
        "attrs": {
          "alt": "Search",
          "height": "12",
          "xmlns": "http://www.w3.org/2000/svg",
          "viewBox": "0 0 15 15"
        },
        "class": "search-icon",
        "style": {
          transform: 'scale(1.25)',
          position: 'relative'
        }
      }, [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'
        }
      })]);
    }
  };

  function _templateObject$8() {
    var data = _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"]);

    _templateObject$8 = function _templateObject() {
      return data;
    };

    return data;
  }

  injectGlobal(_templateObject$8());
  var ListenSvg = {
    name: 'ListenSvg',
    props: ['className', 'handleMicClick'],
    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)'
        },
        "on": {
          "click": this.$props.handleMicClick
        }
      }, [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"
        }
      })])])])]);
    }
  };

  function _templateObject$9() {
    var data = _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"]);

    _templateObject$9 = function _templateObject() {
      return data;
    };

    return data;
  }

  injectGlobal(_templateObject$9());
  var MuteSvg = {
    name: 'MuteSvg',
    props: ['className', 'handleMicClick'],
    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
        },
        "on": {
          "click": this.$props.handleMicClick
        }
      }, [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"
        }
      })])])]);
    }
  };

  function _templateObject$a() {
    var data = _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"]);

    _templateObject$a = function _templateObject() {
      return data;
    };

    return data;
  }

  injectGlobal(_templateObject$a());
  var MicSvg = {
    name: 'MicSvg',
    props: ['className', 'handleMicClick'],
    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)'
        },
        "on": {
          "click": this.$props.handleMicClick
        }
      }, [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 STATUS = {
    inactive: "INACTIVE",
    stopped: "STOPPED",
    active: "ACTIVE",
    denied: "DENIED"
  };
  var Icon = {
    props: ["status", "handleMicClick", "className", "applyClearStyle"],
    render: function render() {
      var h = arguments[0];
      var _this$$props = this.$props,
          status = _this$$props.status,
          className = _this$$props.className,
          handleMicClick = _this$$props.handleMicClick;

      switch (status) {
        case STATUS.active:
          return h(ListenSvg, {
            "attrs": {
              "className": className,
              "handleMicClick": handleMicClick
            }
          });

        case STATUS.stopped:
        case STATUS.denied:
          return h(MuteSvg, {
            "attrs": {
              "className": className,
              "handleMicClick": handleMicClick
            }
          });

        default:
          return h(MicSvg, {
            "attrs": {
              "className": className,
              "handleMicClick": handleMicClick
            }
          });
      } // switch (status) {
      //   case STATUS.active:
      //     url = "https://media.giphy.com/media/ZZr4lCvpuMP58PXzY1/giphy.gif";
      //     break;
      //   case STATUS.stopped:
      //     break;
      //   case STATUS.denied:
      //     url =
      //       "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/microphone-off-512.png";
      //     break;
      //   default:
      //     url =
      //       "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/microphone-512.png";
      // }
      // return (
      //   <img
      //     class={className}
      //     onClick={handleMicClick}
      //     src={url}
      //     style={{ width: "18px" }}
      //   />
      // );

    }
  };
  var Mic = {
    props: ["iconPosition", "handleMicClick", "className", "status", "showIcon", "applyClearStyle"],
    render: function render() {
      var h = arguments[0];
      var _this$$props2 = this.$props,
          iconPosition = _this$$props2.iconPosition,
          className = _this$$props2.className,
          handleMicClick = _this$$props2.handleMicClick,
          status = _this$$props2.status,
          applyClearStyle = _this$$props2.applyClearStyle,
          showIcon = _this$$props2.showIcon;
      return h(IconWrapper, [h(Icon, {
        "attrs": {
          "className": className,
          "handleMicClick": handleMicClick,
          "status": status
        }
      })]);
    }
  };

  var SearchIcon = {
    props: ['showIcon', 'icon'],
    render: function render() {
      var h = arguments[0];
      var _this$$props = this.$props,
          showIcon = _this$$props.showIcon,
          icon = _this$$props.icon;

      if (showIcon) {
        return icon || h(SearchSvg);
      }

      return null;
    }
  };
  var Icons = {
    props: ['clearValue', 'iconPosition', 'showClear', 'clearIcon', 'currentValue', 'handleSearchIconClick', 'showIcon', 'icon', 'enableVoiceSearch', 'innerClass', 'getMicInstance', 'micStatus', 'handleMicClick'],
    render: function render() {
      var h = arguments[0];
      var _this$$props2 = this.$props,
          clearValue = _this$$props2.clearValue,
          iconPosition = _this$$props2.iconPosition,
          showClear = _this$$props2.showClear,
          clearIcon = _this$$props2.clearIcon,
          currentValue = _this$$props2.currentValue,
          handleSearchIconClick = _this$$props2.handleSearchIconClick,
          showIcon = _this$$props2.showIcon,
          icon = _this$$props2.icon,
          enableVoiceSearch = _this$$props2.enableVoiceSearch,
          innerClass = _this$$props2.innerClass,
          micStatus = _this$$props2.micStatus,
          handleMicClick = _this$$props2.handleMicClick;
      return h("div", [h(IconGroup, {
        "attrs": {
          "groupPosition": "right",
          "positionType": "absolute"
        }
      }, [currentValue && showClear && h(IconWrapper, {
        "on": {
          "click": clearValue
        },
        "attrs": {
          "showIcon": showIcon,
          "isClearIcon": true
        }
      }, [clearIcon || h(CancelSvg)]), enableVoiceSearch && h(Mic, {
        "attrs": {
          "className": getClassName(innerClass, 'mic') || null,
          "status": micStatus,
          "handleMicClick": handleMicClick
        }
      }), iconPosition === 'right' && h(IconWrapper, {
        "attrs": {
          "showIcon": showIcon,
          "iconPosition": iconPosition
        },
        "on": {
          "click": handleSearchIconClick
        }
      }, [h(SearchIcon, {
        "attrs": {
          "showIcon": showIcon,
          "icon": icon
        }
      })])]), h(IconGroup, {
        "attrs": {
          "groupPosition": "left",
          "positionType": "absolute"
        }
      }, [iconPosition === 'left' && h(IconWrapper, {
        "attrs": {
          "showIcon": showIcon,
          "iconPosition": iconPosition
        },
        "on": {
          "click": handleSearchIconClick
        }
      }, [h(SearchIcon, {
        "attrs": {
          "showIcon": showIcon,
          "icon": icon
        }
      })])])]);
    }
  };

  // A map of causes leading to changes in components
  var ENTER_PRESS = 'ENTER_PRESS';
  var SUGGESTION_SELECT = 'SUGGESTION_SELECT';
  var CLEAR_VALUE = 'CLEAR_VALUE';
  var SEARCH_ICON_CLICK = 'SEARCH_ICON_CLICK';
  var causes = {
    ENTER_PRESS: ENTER_PRESS,
    SUGGESTION_SELECT: SUGGESTION_SELECT,
    CLEAR_VALUE: CLEAR_VALUE,
    SEARCH_ICON_CLICK: SEARCH_ICON_CLICK
  };

  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 Searches",
            "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"
          }
        })]);
      }

      return h("svg", {
        "attrs": {
          "xmlns": "http://www.w3.org/2000/svg",
          "alt": "Popular Searches",
          "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"
        }
      })]);
    }
  };

  var SearchBox = {
    name: 'search-box',
    inject: ['searchbase'],
    props: {
      // common props for search component and search box
      index: VueTypes.string,
      // search component props
      url: VueTypes.string,
      mongodb: VueTypes.object,
      credentials: VueTypes.string,
      headers: VueTypes.object,
      appbaseConfig: types.appbaseConfig,
      transformRequest: VueTypes.func,
      transformResponse: VueTypes.func,
      beforeValueChange: VueTypes.func,
      enablePopularSuggestions: VueTypes.bool,
      maxPopularSuggestions: VueTypes.number,
      maxRecentSearches: VueTypes.number,
      enablePredictiveSuggestions: VueTypes.bool,
      enableRecentSearches: VueTypes.bool,
      clearOnQueryChange: VueTypes.bool,
      showDistinctSuggestions: types.showDistinctSuggestions,
      URLParams: VueTypes.bool,
      // RS API properties
      id: VueTypes.string.isRequired,
      value: VueTypes.string.def(undefined),
      type: types.queryTypes,
      react: types.reactType,
      queryFormat: types.queryFormat,
      dataField: types.dataField,
      categoryField: VueTypes.string,
      categoryValue: VueTypes.string,
      nestedField: VueTypes.string,
      from: VueTypes.number,
      size: VueTypes.number,
      sortBy: types.sortType,
      aggregationField: VueTypes.string,
      aggregationSize: VueTypes.number,
      after: VueTypes.object,
      includeNullValues: VueTypes.bool,
      includeFields: types.sourceFields,
      excludeFields: types.sourceFields,
      fuzziness: types.fuzziness,
      searchOperators: VueTypes.bool,
      highlight: VueTypes.bool,
      highlightField: VueTypes.string,
      customHighlight: VueTypes.object,
      interval: VueTypes.number,
      aggregations: VueTypes.arrayOf(VueTypes.string),
      missingLabel: VueTypes.string,
      showMissing: VueTypes.bool,
      defaultQuery: VueTypes.func,
      customQuery: VueTypes.func,
      enableSynonyms: VueTypes.bool,
      selectAllLabel: VueTypes.string,
      pagination: VueTypes.bool,
      queryString: VueTypes.bool,
      distinctField: VueTypes.string,
      distinctFieldConfig: VueTypes.object,
      // subscribe on changes,
      subscribeTo: VueTypes.arrayOf(VueTypes.string),
      triggerQueryOnInit: VueTypes.bool.def(true),
      // searchbox specific
      title: types.title,
      defaultValue: types.defaultValue,
      placeholder: types.placeholder,
      showIcon: types.showIcon,
      iconPosition: types.iconPosition,
      icon: types.icon,
      showClear: types.showClear,
      clearIcon: types.clearIcon,
      autosuggest: types.autosuggest,
      strictSelection: types.strictSelection,
      defaultSuggestions: types.defaultSuggestions,
      recentSearches: types.defaultSuggestions,
      debounce: types.debounce,
      showVoiceSearch: types.showVoiceSearch,
      render: types.render,
      renderError: types.renderError,
      renderNoSuggestion: types.renderNoSuggestion,
      renderPopularSuggestions: types.renderPopularSuggestions,
      renderMic: types.renderMic,
      innerClass: types.innerClass,
      className: types.className,
      loader: types.loader,
      autoFocus: types.autoFocus,
      // Internal props from search component
      loading: VueTypes.bool,
      error: VueTypes.any,
      micStatus: VueTypes.string,
      instanceValue: VueTypes.string,
      //
      focusShortcuts: VueTypes.focusShortcuts,
      addonBefore: VueTypes.any,
      addonAfter: VueTypes.any,
      expandSuggestionsContainer: types.expandSuggestionsContainer
    },
    data: function data() {
      this.state = {
        isOpen: false
      };
      return _extends$1({}, this.state, {
        hotkeys: undefined,
        shouldUtilizeHotkeysLib: false
      });
    },
    beforeMount: function beforeMount() {
      var focusShortcuts = this.$props.focusShortcuts; // dynamically import hotkey-js

      if (!isEmpty(focusShortcuts)) {
        this.shouldUtilizeHotkeysLib = isHotkeyCombinationUsed(focusShortcuts) || isModifierKeyUsed(focusShortcuts);

        if (this.shouldUtilizeHotkeysLib) {
          try {
            // eslint-disable-next-line
            this.hotkeys = require('hotkeys-js')["default"];
          } catch (error) {
            // eslint-disable-next-line
            console.warn('Warning(SearchBox): The `hotkeys-js` library seems to be missing, it is required when using key combinations( eg: `ctrl+a`) in focusShortcuts prop.');
          }
        }
      }
    },
    mounted: function mounted() {
      document.addEventListener('keydown', this.onKeyDown);
      this.registerHotkeysListener();

      if (this.aggregationField) {
        console.warn('Warning(SearchBox): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
      }

      if (this.enableRecentSearches && this.autosuggest) {
        var _this$getComponentIns = this.getComponentInstance(),
            getRecentSearches = _this$getComponentIns.getRecentSearches;

        getRecentSearches({
          size: this.maxRecentSearches || 5,
          minChars: 3
        });
      }
    },
    destroyed: function destroyed() {
      document.removeEventListener('keydown', this.onKeyDown);
    },
    computed: {
      hasCustomRenderer: function hasCustomRenderer$1() {
        return hasCustomRenderer(this);
      },
      stats: function stats() {
        var results = this.$props.results;
        var total = results.numberOfResults;
        var time = results.time,
            hidden = results.hidden,
            promotedData = results.promotedData;
        var size = this.$props.size || 10;
        return _extends$1({
          numberOfResults: total
        }, size > 0 ? {
          numberOfPages: Math.ceil(total / size)
        } : null, {
          time: time,
          hidden: hidden,
          promoted: promotedData && promotedData.length
        });
      }
    },
    methods: {
      getComponentInstance: function getComponentInstance() {
        var id = this.$props.id;
        return this.searchbase.getComponent(id);
      },
      getPopularSuggestionsList: function getPopularSuggestionsList() {
        var _this$getComponentIns2 = this.getComponentInstance(),
            suggestions = _this$getComponentIns2.suggestions;

        return (suggestions || []).filter(function (suggestion) {
          return suggestion.source._popular_suggestion;
        });
      },
      getSuggestionsList: function getSuggestionsList() {
        var _this$$props = this.$props,
            defaultSuggestions = _this$$props.defaultSuggestions,
            instanceValue = _this$$props.instanceValue;

        if (!instanceValue && defaultSuggestions) {
          return defaultSuggestions;
        }

        if (!instanceValue) {
          return [];
        }

        var _this$getComponentIns3 = this.getComponentInstance(),
            suggestions = _this$getComponentIns3.suggestions;

        return (suggestions || []).filter(function (suggestion) {
          return !suggestion.source._popular_suggestion;
        });
      },
      _applySetter: function _applySetter(prev, next, setterFunc) {
        if (!equals(prev, next)) {
          var component = this.getComponentInstance();
          component[setterFunc](next);
        }
      },
      onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
        if (currentValue === void 0) {
          currentValue = this.$props.instanceValue;
        }

        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));
      },
      onInputChange: function onInputChange(event) {
        this.setValue({
          value: event.target.value,
          event: event
        });
      },
      onSuggestionSelected: function onSuggestionSelected(suggestion) {
        this.setValue({
          value: suggestion && suggestion.value,
          isOpen: false,
          triggerCustomQuery: true
        });
        this.onValueSelectedHandler(suggestion.value, causes.SUGGESTION_SELECT, suggestion.source);
      },
      triggerDefaultQuery: function triggerDefaultQuery() {
        var componentInstance = this.getComponentInstance();

        if (componentInstance) {
          componentInstance.triggerDefaultQuery();
        }
      },
      triggerCustomQuery: function triggerCustomQuery() {
        var componentInstance = this.getComponentInstance();

        if (componentInstance) {
          componentInstance.triggerCustomQuery();
        }
      },
      isControlled: function isControlled() {
        if (this.$props.value !== undefined && this.$listeners.change) {
          return true;
        }

        return false;
      },
      setValue: function setValue(_ref) {
        var value = _ref.value,
            _ref$isOpen = _ref.isOpen,
            isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
            rest = _objectWithoutPropertiesLoose(_ref, ["value", "isOpen"]);

        var debounce$1 = this.$props.debounce;
        this.isOpen = isOpen;
        var componentInstance = this.getComponentInstance();

        if (this.enableRecentSearches && !value && componentInstance.value && this.autosuggest) {
          componentInstance.getRecentSearches({
            size: this.maxRecentSearches || 5,
            minChars: 3
          });
        }

        if (this.isControlled()) {
          componentInstance.setValue(value, {
            triggerDefaultQuery: false,
            triggerCustomQuery: false
          });
          this.$emit('change', value, componentInstance, rest.event);
        } else if (debounce$1 > 0) {
          componentInstance.setValue(value, {
            triggerDefaultQuery: false,
            triggerCustomQuery: false,
            stateChanges: true
          });

          if (this.autosuggest) {
            // Clear results for empty query
            if (value) {
              debounce(this.triggerDefaultQuery, debounce$1);
            } else {
              componentInstance.clearResults();
            }

            debounce(this.triggerDefaultQuery, debounce$1);
          } else {
            debounce(this.triggerCustomQuery, debounce$1);
          }

          if (rest.triggerCustomQuery) {
            debounce(this.triggerCustomQuery, debounce$1);
          }
        } else {
          this.triggerSuggestionsQuery(value, rest == null ? void 0 : rest.triggerCustomQuery);

          if (!this.autosuggest) {
            this.triggerCustomQuery();
          }
        }
      },
      triggerSuggestionsQuery: function triggerSuggestionsQuery(value, triggerCustomQuery) {
        var componentInstance = this.getComponentInstance();

        if (componentInstance) {
          if (value) {
            componentInstance.setValue(value, {
              triggerCustomQuery: triggerCustomQuery,
              triggerDefaultQuery: true,
              stateChanges: true
            });
          } else {
            componentInstance.setValue(value, {
              triggerCustomQuery: triggerCustomQuery,
              triggerDefaultQuery: false,
              stateChanges: true
            });
          }
        }
      },
      handleFocus: function handleFocus(event) {
        this.isOpen = true;
        this.withTriggerQuery('focus', event);
      },
      handleStateChange: function handleStateChange(changes) {
        var isOpen = changes.isOpen;
        this.isOpen = isOpen;
      },
      handleKeyDown: function handleKeyDown(event, highlightedIndex) {
        // if a suggestion was selected, delegate the handling
        // to suggestion handler
        if (event.key === 'Enter' && highlightedIndex === null) {
          this.setValue({
            value: event.target.value,
            isOpen: false,
            triggerCustomQuery: true
          });
          this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
        }

        this.withTriggerQuery('keyDown', event);
      },
      handleMicClick: function handleMicClick() {
        var componentInstance = this.getComponentInstance();
        componentInstance.onMicClick(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$$props2 = this.$props,
            iconPosition = _this$$props2.iconPosition,
            showClear = _this$$props2.showClear,
            clearIcon = _this$$props2.clearIcon,
            innerClass = _this$$props2.innerClass,
            showVoiceSearch = _this$$props2.showVoiceSearch,
            icon = _this$$props2.icon,
            showIcon = _this$$props2.showIcon;
        var _this$$props3 = this.$props,
            instanceValue = _this$$props3.instanceValue,
            micStatus = _this$$props3.micStatus;
        return h(Icons, {
          "attrs": {
            "clearValue": this.clearValue,
            "iconPosition": iconPosition,
            "showClear": showClear,
            "clearIcon": clearIcon,
            "currentValue": instanceValue,
            "handleSearchIconClick": this.handleSearchIconClick,
            "icon": icon,
            "showIcon": showIcon,
            "innerClass": innerClass,
            "enableVoiceSearch": showVoiceSearch,
            "micStatus": micStatus,
            "handleMicClick": this.handleMicClick
          }
        });
      },
      renderNoSuggestionComponent: function renderNoSuggestionComponent() {
        var h = this.$createElement;
        var _this$$props4 = this.$props,
            innerClass = _this$$props4.innerClass,
            renderError = _this$$props4.renderError,
            loading = _this$$props4.loading,
            error = _this$$props4.error,
            instanceValue = _this$$props4.instanceValue;
        var isOpen = this.$data.isOpen;
        var suggestionsList = this.getSuggestionsList();
        var renderNoSuggestion = this.$scopedSlots.renderNoSuggestion || this.$props.renderNoSuggestion;

        if (renderNoSuggestion && isOpen && !suggestionsList.length && !loading && instanceValue && !(renderError && error)) {
          return h("div", {
            "class": "no-suggestions " + getClassName(innerClass, 'noSuggestion')
          }, [typeof renderNoSuggestion === 'function' ? renderNoSuggestion(instanceValue) : renderNoSuggestion]);
        }

        return null;
      },
      renderErrorComponent: function renderErrorComponent() {
        var h = this.$createElement;
        var _this$$props5 = this.$props,
            innerClass = _this$$props5.innerClass,
            error = _this$$props5.error,
            loading = _this$$props5.loading,
            instanceValue = _this$$props5.instanceValue;
        var renderError = this.$scopedSlots.renderError || this.$props.renderError;

        if (error && renderError && instanceValue && !loading) {
          return h("div", {
            "class": getClassName(innerClass, 'error')
          }, [typeof renderError === 'function' ? renderError(error) : renderError]);
        }

        return null;
      },
      clearValue: function clearValue() {
        this.setValue({
          value: '',
          isOpen: false,
          triggerCustomQuery: true
        });
        this.onValueSelectedHandler(null, causes.CLEAR_VALUE);
      },
      handleSearchIconClick: function handleSearchIconClick() {
        var instanceValue = this.$props.instanceValue;

        if (instanceValue.trim()) {
          this.setValue({
            value: instanceValue,
            isOpen: false,
            triggerCustomQuery: true
          });
          this.onValueSelectedHandler(instanceValue, causes.SEARCH_ICON_CLICK);
        }
      },
      getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
        return highlightedIndex === index ? '#eee' : '#fff';
      },
      getComponent: function getComponent$1(downshiftProps, isPopularSuggestionsRender) {
        if (downshiftProps === void 0) {
          downshiftProps = {};
        }

        if (isPopularSuggestionsRender === void 0) {
          isPopularSuggestionsRender = false;
        }

        var _this$$props6 = this.$props,
            instanceValue = _this$$props6.instanceValue,
            loading = _this$$props6.loading,
            error = _this$$props6.error,
            results = _this$$props6.results,
            recentSearches = _this$$props6.recentSearches;
        var popularSuggestionsList = this.getPopularSuggestionsList();
        var suggestionsList = this.getSuggestionsList();
        var data = {
          loading: loading,
          error: error,
          value: instanceValue,
          downshiftProps: downshiftProps,
          data: suggestionsList,
          promotedData: results.promotedData,
          customData: results.customData,
          resultStats: this.stats,
          rawData: results.rawData,
          recentSearches: recentSearches,
          popularSuggestions: popularSuggestionsList
        };

        if (isPopularSuggestionsRender) {
          return getPopularSuggestionsComponent({
            downshiftProps: downshiftProps,
            data: popularSuggestionsList,
            value: instanceValue,
            loading: loading,
            error: error
          }, this);
        }

        return getComponent(data, this);
      },
      focusSearchBox: function focusSearchBox(event) {
        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.searchInputField.focus();
      },
      onKeyDown: function onKeyDown(event) {
        var _this$$props$focusSho = this.$props.focusShortcuts,
            focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;

        if (isEmpty(focusShortcuts) || this.shouldUtilizeHotkeysLib && typeof this.hotkeys === 'function') {
          return;
        }

        var shortcuts = focusShortcuts.map(function (key) {
          if (typeof key === 'string') {
            return isNumeric(key) ? parseInt(key, 10) : key.toUpperCase().charCodeAt(0);
          }

          return key;
        }); // the below algebraic expression is used to get the correct ascii code out of the e.which || e.keycode returned value
        // since the keyboards doesn't understand ascii but scan codes and they differ for certain keys such as '/'
        // stackoverflow ref: https://stackoverflow.com/a/29811987/10822996

        var which = event.which || event.keyCode;
        var chrCode = which - 48 * Math.floor(which / 48);

        if (shortcuts.indexOf(which >= 96 ? chrCode : which) === -1) {
          // not the right shortcut
          return;
        }

        this.focusSearchBox(event);
        event.stopPropagation();
        event.preventDefault();
      },
      withTriggerQuery: function withTriggerQuery(eventName, event) {
        this.$emit(eventName, this.getComponentInstance(), event);
      },
      registerHotkeysListener: function registerHotkeysListener() {
        var _this = this;

        var focusShortcuts = this.$props.focusShortcuts;

        if (!this.shouldUtilizeHotkeysLib || !(typeof this.hotkeys === 'function') || isEmpty(focusShortcuts)) {
          return;
        } // for single press keys (a-z, A-Z) &, hotkeys' combinations such as 'cmd+k', 'ctrl+shft+a', etc


        this.hotkeys(parseFocusShortcuts(focusShortcuts).join(','),
        /* eslint-disable no-shadow */
        // eslint-disable-next-line no-unused-vars
        function (event, handler) {
          // Prevent the default refresh event under WINDOWS system
          event.preventDefault();

          _this.focusSearchBox(event);
        }); // if one of modifier keys are used, they are handled below

        this.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 (_this.hotkeys[element]) {
              _this.focusSearchBox(event);

              break;
            }
          }
        });
      }
    },
    render: function render() {
      var _this2 = this;

      var h = arguments[0];
      var _this$$props7 = this.$props,
          className = _this$$props7.className,
          innerClass = _this$$props7.innerClass,
          showIcon = _this$$props7.showIcon,
          showClear = _this$$props7.showClear,
          showVoiceSearch = _this$$props7.showVoiceSearch,
          iconPosition = _this$$props7.iconPosition,
          title = _this$$props7.title,
          defaultSuggestions = _this$$props7.defaultSuggestions,
          autosuggest = _this$$props7.autosuggest,
          placeholder = _this$$props7.placeholder,
          autoFocus = _this$$props7.autoFocus,
          innerRef = _this$$props7.innerRef,
          size = _this$$props7.size,
          instanceValue = _this$$props7.instanceValue,
          recentSearches = _this$$props7.recentSearches,
          expandSuggestionsContainer = _this$$props7.expandSuggestionsContainer;
      var _this$$scopedSlots = this.$scopedSlots,
          recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
          popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
      var suggestionsList = this.getSuggestionsList();
      var popularSuggestionsList = this.getPopularSuggestionsList();
      var hasSuggestions = defaultSuggestions && defaultSuggestions.length || recentSearches && recentSearches.length;
      return h("div", {
        "class": className
      }, [title && h(Title, {
        "class": getClassName(innerClass, 'title') || ''
      }, [title]), hasSuggestions || autosuggest ? h(DownShift, {
        "attrs": {
          "id": "searchbox-downshift",
          "handleChange": this.onSuggestionSelected,
          "handleMouseup": this.handleStateChange,
          "isOpen": this.isOpen
        },
        "scopedSlots": {
          "default": function _default(_ref2) {
            var getInputEvents = _ref2.getInputEvents,
                getInputProps = _ref2.getInputProps,
                getItemProps = _ref2.getItemProps,
                getItemEvents = _ref2.getItemEvents,
                isOpen = _ref2.isOpen,
                highlightedIndex = _ref2.highlightedIndex;

            var renderSuggestionsContainer = function renderSuggestionsContainer() {
              return h("div", [_this2.hasCustomRenderer && _this2.getComponent({
                isOpen: isOpen,
                getItemProps: getItemProps,
                getItemEvents: getItemEvents,
                highlightedIndex: highlightedIndex
              }), _this2.renderErrorComponent(), !_this2.hasCustomRenderer && isOpen ? h("ul", {
                "class": suggestions + " " + getClassName(innerClass, 'list')
              }, [suggestionsList.slice(0, size).map(function (item, index) {
                return h("li", {
                  "domProps": _extends$1({}, getItemProps({
                    item: item
                  })),
                  "on": _extends$1({}, getItemEvents({
                    item: item
                  })),
                  "key": index + 1 + "-" + item.value,
                  "style": {
                    backgroundColor: _this2.getBackgroundColor(highlightedIndex, index)
                  }
                }, [h(SuggestionItem, {
                  "attrs": {
                    "currentValue": instanceValue,
                    "suggestion": item
                  }
                })]);
              }), !instanceValue ? (recentSearches || []).map(function (sugg, index) {
                return h("li", {
                  "domProps": _extends$1({}, getItemProps({
                    item: sugg
                  })),
                  "on": _extends$1({}, getItemEvents({
                    item: sugg
                  })),
                  "key": index + 1 + "-" + sugg.value,
                  "style": {
                    backgroundColor: _this2.getBackgroundColor(highlightedIndex, index + suggestionsList.length),
                    justifyContent: 'flex-start'
                  }
                }, [h("div", {
                  "style": {
                    padding: '0 10px 0 0'
                  }
                }, [h(CustomSvg, {
                  "attrs": {
                    "iconId": index + 1 + "-" + sugg.value + "-icon",
                    "className": getClassName(innerClass, 'recent-search-icon') || null,
                    "icon": recentSearchesIcon,
                    "type": "recent-search-icon"
                  }
                })]), h(SuggestionItem, {
                  "attrs": {
                    "currentValue": instanceValue,
                    "suggestion": sugg
                  }
                })]);
              }) : null, hasPopularSuggestionsRenderer(_this2) ? _this2.getComponent({
                isOpen: isOpen,
                getItemProps: getItemProps,
                getItemEvents: getItemEvents,
                highlightedIndex: highlightedIndex
              }, true) : (popularSuggestionsList || []).map(function (sugg, index) {
                return h("li", {
                  "domProps": _extends$1({}, getItemProps({
                    item: sugg
                  })),
                  "on": _extends$1({}, getItemEvents({
                    item: sugg
                  })),
                  "key": index + suggestionsList.length + (!instanceValue ? recentSearches.length : 0) + 1 + "-" + sugg.value,
                  "style": {
                    backgroundColor: _this2.getBackgroundColor(highlightedIndex, index + suggestionsList.length + (!instanceValue ? recentSearches.length : 0)),
                    justifyContent: 'flex-start'
                  }
                }, [h("div", {
                  "style": {
                    padding: '0 10px 0 0'
                  }
                }, [h(CustomSvg, {
                  "attrs": {
                    "iconId": index + 1 + "-" + sugg.value + "-icon",
                    "className": getClassName(innerClass, 'popular-search-icon') || null,
                    "icon": popularSearchesIcon,
                    "type": "popular-search-icon"
                  }
                })]), h(SuggestionItem, {
                  "attrs": {
                    "currentValue": instanceValue,
                    "suggestion": sugg
                  }
                })]);
              })]) : _this2.renderNoSuggestionComponent()]);
            };

            return h("div", {
              "class": suggestionsContainer
            }, [h(InputGroup, [_this2.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
              "ref": "searchInputField",
              "attrs": {
                "showIcon": showIcon,
                "showClear": showClear,
                "showVoiceSearch": showVoiceSearch,
                "iconPosition": iconPosition,
                "placeholder": placeholder,
                "currentValue": instanceValue,
                "autoFocus": autoFocus
              },
              "class": getClassName(innerClass, 'input'),
              "on": _extends$1({}, getInputEvents({
                onInput: _this2.onInputChange,
                onBlur: function onBlur(e) {
                  _this2.withTriggerQuery('blur', e);
                },
                onFocus: _this2.handleFocus,
                onKeyPress: function onKeyPress(e) {
                  _this2.withTriggerQuery('key-press', e);
                },
                onKeyDown: function onKeyDown(e) {
                  return _this2.handleKeyDown(e, highlightedIndex);
                },
                onKeyUp: function onKeyUp(e) {
                  _this2.withTriggerQuery('key-up', e);
                }
              })),
              "domProps": _extends$1({}, getInputProps({
                value: instanceValue || ''
              }))
            }), _this2.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), _this2.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer()]);
          }
        }
      }) : h("div", {
        "class": suggestionsContainer
      }, [h(InputGroup, [this.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
        "ref": "searchInputField",
        "class": getClassName(innerClass, 'input') || '',
        "attrs": {
          "placeholder": placeholder,
          "autoFocus": autoFocus,
          "iconPosition": iconPosition,
          "showIcon": showIcon,
          "showClear": showClear,
          "showVoiceSearch": showVoiceSearch,
          "innerRef": innerRef
        },
        "on": _extends$1({}, {
          blur: function blur(e) {
            _this2.$emit('blur', e);
          },
          keypress: function keypress(e) {
            _this2.$emit('keyPress', e);
          },
          input: this.onInputChange,
          focus: function focus(e) {
            _this2.$emit('focus', e);
          },
          keydown: function keydown(e) {
            _this2.$emit('keyDown', e);
          },
          keyup: function keyup(e) {
            _this2.$emit('keyUp', e);
          }
        }),
        "domProps": _extends$1({}, {
          autofocus: autoFocus,
          value: instanceValue || ''
        })
      }), this.renderIcons()]), this.renderInputAddonAfter()])])]);
    }
  };
  var SearchBoxWrapper = {
    name: 'search-box-wrapper',
    functional: true,
    render: function render(h, context) {
      return h(SearchComponent, helper([{
        "attrs": {
          "value": "",
          "triggerQueryOnInit": !!context.props.enablePopularSuggestions,
          "clearOnQueryChange": true
        }
      }, {
        on: context.listeners,
        props: context.props,
        scopedSlots: {
          "default": function _default(_ref3) {
            var loading = _ref3.loading,
                error = _ref3.error,
                micStatus = _ref3.micStatus,
                results = _ref3.results,
                value = _ref3.value,
                recentSearches = _ref3.recentSearches;
            return h(SearchBox, helper([{
              "attrs": {
                "loading": loading,
                "error": error,
                "micStatus": micStatus,
                "results": results,
                "recentSearches": recentSearches,
                "instanceValue": value
              }
            }, {
              attrs: context.data.attrs,
              on: context.listeners,
              scopedSlots: context.scopedSlots,
              slots: context.slots
            }]));
          }
        }
      }, {
        "attrs": {
          "subscribeTo": ['micStatus', 'error', 'requestPending', 'results', 'value', 'recentSearches']
        }
      }]));
    }
  };

  SearchBoxWrapper.install = function (Vue) {
    Vue.component(SearchBox.name, SearchBoxWrapper);
  };

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function _extends$2() {
    _extends$2 = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends$2.apply(this, arguments);
  }

  function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    subClass.__proto__ = superClass;
  }

  function _objectWithoutPropertiesLoose$2(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    return target;
  }

  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }

    return self;
  }

  var Observable = /*#__PURE__*/function () {
    function Observable() {
      this.observers = [];
    }

    var _proto = Observable.prototype;

    _proto.subscribe = function subscribe(fn, propertiesToSubscribe) {
      this.observers.push({
        callback: fn,
        properties: propertiesToSubscribe
      });
    };

    _proto.unsubscribe = function unsubscribe(fn) {
      if (fn) {
        this.observers = this.observers.filter(function (item) {
          if (item.callback !== fn) {
            return item;
          }

          return null;
        });
      } else {
        this.observers = [];
      }
    };

    _proto.next = function next(o, property, thisObj) {
      var scope = thisObj;

      if (!scope && window) {
        scope = window;
      }

      this.observers.forEach(function (item) {
        // filter by subscribed properties
        if (item.properties === undefined) {
          item.callback.call(scope, o);
        } else if (item.properties instanceof Array && item.properties.length && item.properties.includes(property)) {
          item.callback.call(scope, o);
        } else if (typeof item.properties === 'string' && item.properties && item.properties === property) {
          item.callback.call(scope, o);
        }
      });
    };

    return Observable;
  }();

  function getErrorMessage(msg) {
    return "SearchBase: " + msg;
  }

  var errorMessages = {
    invalidIndex: getErrorMessage('Please provide a valid index.'),
    invalidURL: getErrorMessage('Please provide a valid url.'),
    invalidComponentId: getErrorMessage('Please provide component id.'),
    invalidDataField: getErrorMessage('Please provide data field.'),
    dataFieldAsArray: getErrorMessage('Only components with `search` type supports the multiple data fields. Please define `dataField` as a string.')
  };
  var popularSuggestionFields = ['key', 'key.autosuggest'];
  var queryTypes = {
    Search: 'search',
    Term: 'term',
    Geo: 'geo',
    Range: 'range'
  };

  var withClickIds = function withClickIds(results) {
    if (results === void 0) {
      results = [];
    }

    return results.map(function (result, index) {
      return _extends$2({}, result, {
        _click_id: index + 1
      });
    });
  };

  var highlightResults = function highlightResults(result) {
    var data = _extends$2({}, result);

    if (data.highlight) {
      Object.keys(data.highlight).forEach(function (highlightItem) {
        var _extends2;

        var highlightValue = data.highlight[highlightItem][0];
        data._source = _extends$2({}, data._source, (_extends2 = {}, _extends2[highlightItem] = highlightValue, _extends2));
      });
    }

    return data;
  };

  var parseHits = function parseHits(hits) {
    var results = [];

    if (hits) {
      results = [].concat(hits).map(function (item) {
        var data = highlightResults(item);
        var result = Object.keys(data).filter(function (key) {
          return key !== '_source';
        }).reduce(function (obj, key) {
          // eslint-disable-next-line
          obj[key] = data[key];
          return obj;
        }, _extends$2({}, data._source));
        return result;
      });
    }

    return results;
  };

  var getNormalizedField = function getNormalizedField(field) {
    if (field) {
      // if data field is string
      if (!Array.isArray(field)) {
        return [field];
      }

      if (field.length) {
        var fields = [];
        field.forEach(function (dataField) {
          if (typeof dataField === 'string') {
            fields.push(dataField);
          } else if (dataField.field) {
            // if data field is an array of objects
            fields.push(dataField.field);
          }
        });
        return fields;
      }
    }

    return undefined;
  };

  function isNumber(n) {
    return !Number.isNaN(parseFloat(n)) && Number.isFinite(n);
  }

  var getNormalizedWeights = function getNormalizedWeights(field) {
    if (field && Array.isArray(field) && field.length) {
      var weights = [];
      field.forEach(function (dataField) {
        if (isNumber(dataField.weight)) {
          // if data field is an array of objects
          weights.push(dataField.weight);
        } else {
          // Add default weight as 1 to maintain order
          weights.push(1);
        }
      });
      return weights;
    }

    return undefined;
  };

  function flatReactProp(reactProp, componentID) {
    var flattenReact = [];

    var flatReact = function flatReact(react) {
      if (react && Object.keys(react)) {
        Object.keys(react).forEach(function (r) {
          if (react[r]) {
            if (typeof react[r] === 'string') {
              flattenReact = [].concat(flattenReact, [react[r]]);
            } else if (Array.isArray(react[r])) {
              flattenReact = [].concat(flattenReact, react[r]);
            } else if (typeof react[r] === 'object') {
              flatReact(react[r]);
            }
          }
        });
      }
    };

    flatReact(reactProp); // Remove cyclic dependencies i.e dependencies on it's own

    flattenReact = flattenReact.filter(function (react) {
      return react !== componentID;
    });
    return flattenReact;
  } // flattens a nested array


  var flatten = function flatten(arr) {
    return arr.reduce(function (flat, toFlatten) {
      return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
    }, []);
  }; // helper function to extract suggestions


  var extractSuggestion = function extractSuggestion(val) {
    if (typeof val === 'object') {
      if (Array.isArray(val)) {
        return flatten(val);
      }

      return null;
    }

    return val;
  };

  function escapeRegExp$1(string) {
    if (string === void 0) {
      string = '';
    }

    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  }

  var getPredictiveSuggestions = function getPredictiveSuggestions(_ref) {
    var suggestions = _ref.suggestions,
        currentValue = _ref.currentValue,
        wordsToShowAfterHighlight = _ref.wordsToShowAfterHighlight;
    var suggestionMap = {};

    if (currentValue) {
      var currentValueTrimmed = currentValue.trim();
      var parsedSuggestion = suggestions.reduce(function (agg, _ref2) {
        var label = _ref2.label,
            rest = _objectWithoutPropertiesLoose$2(_ref2, ["label"]); // to handle special strings with pattern '<mark>xyz</mark> <a href="test'


        var parsedContent = new DOMParser().parseFromString(label, 'text/html').documentElement.textContent; // to match the partial start of word.
        // example if searchTerm is `select` and string contains `selected`

        var regexString = "^(" + escapeRegExp$1(currentValueTrimmed) + ")\\w+";
        var regex = new RegExp(regexString, 'i');
        var regexExecution = regex.exec(parsedContent); // if execution value is null it means either there is no match or there are chances
        // that exact word is present

        if (!regexExecution) {
          // regex to match exact word
          regexString = "^(" + escapeRegExp$1(currentValueTrimmed) + ")";
          regex = new RegExp(regexString, 'i');
          regexExecution = regex.exec(parsedContent);
        }

        if (regexExecution) {
          var matchedString = parsedContent.slice(regexExecution.index, parsedContent.length);
          var highlightedWord = matchedString.slice(currentValueTrimmed.length).split(' ').slice(0, wordsToShowAfterHighlight + 1).join(' ');
          var suggestionPhrase = currentValueTrimmed + "<mark class=\"highlight\">" + highlightedWord + "</mark>";
          var suggestionValue = "" + currentValueTrimmed + highlightedWord; // to show unique results only

          if (!suggestionMap[suggestionPhrase]) {
            suggestionMap[suggestionPhrase] = 1;
            return [].concat(agg, [_extends$2({}, rest, {
              label: suggestionPhrase,
              value: suggestionValue,
              isPredictiveSuggestion: true
            })]);
          }

          return agg;
        }

        return agg;
      }, []);
      return parsedSuggestion;
    }

    return [];
  };
  /**
   *
   * @param {array} fields DataFields passed on Search Components
   * @param {array} suggestions Raw Suggestions received from ES
   * @param {string} currentValue Search Term
   * @param {boolean} showDistinctSuggestions When set to true will only return 1 suggestion per document
   * @param {boolean} enablePredictiveSuggestions When set to true will return the predictive suggestions list instead of the deafult list
   */


  var getSuggestions = function getSuggestions(fields, suggestions, value, showDistinctSuggestions, enablePredictiveSuggestions) {
    if (fields === void 0) {
      fields = [];
    }

    if (value === void 0) {
      value = '';
    }

    if (showDistinctSuggestions === void 0) {
      showDistinctSuggestions = true;
    }

    if (enablePredictiveSuggestions === void 0) {
      enablePredictiveSuggestions = false;
    }

    var suggestionsList = [];
    var labelsList = [];
    var skipWordMatch = false; //  Use to skip the word match logic, important for synonym

    var currentValue = value || '';

    var populateSuggestionsList = function populateSuggestionsList(val, parsedSource, source) {
      // check if the suggestion includes the current value
      // and not already included in other suggestions
      var isWordMatch = skipWordMatch || currentValue.trim().split(' ').some(function (term) {
        return String(val).toLowerCase().includes(term);
      }); // promoted results should always include in suggestions even there is no match

      if (isWordMatch && !labelsList.includes(val) || source._promoted) {
        var defaultOption = {
          label: val,
          value: val,
          source: source
        };

        var option = _extends$2({}, defaultOption);

        labelsList = [].concat(labelsList, [val]);
        suggestionsList = [].concat(suggestionsList, [option]);

        if (showDistinctSuggestions) {
          return true;
        }
      }

      return false;
    };

    var parseField = function parseField(parsedSource, field, source) {
      if (field === void 0) {
        field = '';
      }

      if (source === void 0) {
        source = parsedSource;
      }

      if (typeof parsedSource === 'object') {
        var fieldNodes = field.split('.');
        var label = parsedSource[fieldNodes[0]];

        if (label) {
          if (fieldNodes.length > 1) {
            // nested fields of the 'foo.bar.zoo' variety
            var children = field.substring(fieldNodes[0].length + 1);

            if (Array.isArray(label)) {
              label.forEach(function (arrayItem) {
                parseField(arrayItem, children, source);
              });
            } else {
              parseField(label, children, source);
            }
          } else {
            var val = extractSuggestion(label);

            if (val) {
              if (Array.isArray(val)) {
                if (showDistinctSuggestions) {
                  return val.some(function (suggestion) {
                    return populateSuggestionsList(suggestion, parsedSource, source);
                  });
                }

                val.forEach(function (suggestion) {
                  return populateSuggestionsList(suggestion, parsedSource, source);
                });
              }

              return populateSuggestionsList(val, parsedSource, source);
            }
          }
        }
      }

      return false;
    };

    var traverseSuggestions = function traverseSuggestions() {
      if (showDistinctSuggestions) {
        suggestions.forEach(function (item) {
          fields.some(function (field) {
            return parseField(item, field);
          });
        });
      } else {
        suggestions.forEach(function (item) {
          fields.forEach(function (field) {
            parseField(item, field);
          });
        });
      }
    };

    traverseSuggestions();

    if (suggestionsList.length < suggestions.length && !skipWordMatch) {
      /*
      When we have synonym we set skipWordMatch to false as it may discard
      the suggestion if word doesnt match term.
      For eg: iphone, ios are synonyms and on searching iphone isWordMatch
      in  populateSuggestionList may discard ios source which decreases no.
      of items in suggestionsList
      */
      skipWordMatch = true;
      traverseSuggestions();
    }

    if (enablePredictiveSuggestions) {
      return getPredictiveSuggestions({
        suggestions: suggestionsList,
        currentValue: value,
        wordsToShowAfterHighlight: true
      });
    }

    return suggestionsList;
  };

  function parseCompAggToHits(aggFieldName, buckets) {
    if (buckets === void 0) {
      buckets = [];
    }

    return buckets.map(function (bucket) {
      // eslint-disable-next-line camelcase
      var doc_count = bucket.doc_count,
          key = bucket.key,
          data = bucket[aggFieldName];
      return _extends$2({
        _doc_count: doc_count,
        // To handle the aggregation results for term and composite aggs
        _key: key[aggFieldName] !== undefined ? key[aggFieldName] : key
      }, data);
    });
  }

  function isEqual$1(x, y) {
    if (x === y) return true;
    if (!(x instanceof Object) || !(y instanceof Object)) return false;
    if (x.constructor !== y.constructor) return false;
    /* eslint-disable */

    for (var p in x) {
      if (!x.hasOwnProperty(p)) continue;
      if (!y.hasOwnProperty(p)) return false;
      if (x[p] === y[p]) continue;
      if (typeof x[p] !== 'object') return false;
      if (!isEqual$1(x[p], y[p])) return false;
    }

    for (var _p in y) {
      if (y.hasOwnProperty(_p) && !x.hasOwnProperty(_p)) return false;
    }
    /* eslint-enable */


    return true;
  }

  var searchBaseMappings = {
    id: 'id',
    type: 'type',
    react: 'react',
    queryFormat: 'queryFormat',
    dataField: 'dataField',
    categoryField: 'categoryField',
    categoryValue: 'categoryValue',
    nestedField: 'nestedField',
    from: 'from',
    size: 'size',
    sortBy: 'sortBy',
    value: 'value',
    aggregationField: 'aggregationField',
    aggregationSize: 'aggregationSize',
    after: 'after',
    includeNullValues: 'includeNullValues',
    includeFields: 'includeFields',
    excludeFields: 'excludeFields',
    fuzziness: 'fuzziness',
    searchOperators: 'searchOperators',
    highlight: 'highlight',
    highlightField: 'highlightField',
    customHighlight: 'customHighlight',
    interval: 'interval',
    aggregations: 'aggregations',
    missingLabel: 'missingLabel',
    showMissing: 'showMissing',
    enableSynonyms: 'enableSynonyms',
    selectAllLabel: 'selectAllLabel',
    pagination: 'pagination',
    queryString: 'queryString',
    enablePopularSuggestions: 'enablePopularSuggestions',
    showDistinctSuggestions: 'showDistinctSuggestions',
    error: 'error',
    defaultQuery: 'defaultQuery',
    customQuery: 'customQuery',
    requestStatus: 'requestStatus',
    results: 'results',
    aggregationData: 'aggregationData',
    micStatus: 'micStatus',
    micInstance: 'micInstance',
    micActive: 'micActive',
    micInactive: 'micInactive',
    micDenied: 'micDenied',
    query: 'query',
    requestPending: 'loading',
    appbaseSettings: 'appbaseConfig',
    suggestions: 'suggestions',
    queryId: 'queryId',
    recentSearches: 'recentSearches',
    distinctField: 'distinctField',
    distinctFieldConfig: 'distinctFieldConfig',
    // ---------------- Methods -----------------------
    onMicClick: 'handleMicClick',
    triggerDefaultQuery: 'triggerDefaultQuery',
    triggerCustomQuery: 'triggerCustomQuery',
    subscribeToStateChanges: 'subscribeToStateChanges',
    unsubscribeToStateChanges: 'unsubscribeToStateChanges',
    // ---------------- Setter Methods ----------------
    setDataField: 'setDataField',
    setValue: 'setValue',
    setSize: 'setSize',
    setFrom: 'setFrom',
    setFuzziness: 'setFuzziness',
    setIncludeFields: 'setIncludeFields',
    setExcludeFields: 'setExcludeFields',
    setSortBy: 'setSortBy',
    setReact: 'setReact',
    setDefaultQuery: 'setDefaultQuery',
    setCustomQuery: 'setCustomQuery',
    setAfter: 'setAfter'
  };

  function btoa(input) {
    if (input === void 0) {
      input = '';
    }

    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    var str = input;
    var output = ''; // eslint-disable-next-line

    for (var block = 0, charCode, i = 0, map = chars; str.charAt(i | 0) || (map = '=', i % 1); // eslint-disable-line no-bitwise
    output += map.charAt(63 & block >> 8 - i % 1 * 8) // eslint-disable-line no-bitwise
    ) {
      charCode = str.charCodeAt(i += 3 / 4);

      if (charCode > 0xff) {
        throw new Error('"btoa" failed: The string to be encoded contains characters outside of the Latin1 range.');
      }

      block = block << 8 | charCode; // eslint-disable-line no-bitwise
    }

    return output;
  }
  /**
   * Base class is the abstract class for SearchBase and SearchComponent classes.
   */


  var Base = /*#__PURE__*/function () {
    // to enable the recording of analytics
    // custom headers object
    // es index name
    // es url
    // auth credentials if any
    // mongodb

    /* ---- callbacks to create the side effects while querying ----- */
    // query search ID
    function Base(_ref) {
      var index = _ref.index,
          url = _ref.url,
          credentials = _ref.credentials,
          mongodb = _ref.mongodb,
          headers = _ref.headers,
          appbaseConfig = _ref.appbaseConfig,
          transformRequest = _ref.transformRequest,
          transformResponse = _ref.transformResponse;

      if (!url) {
        throw new Error(errorMessages.invalidURL);
      }

      this.index = index;
      this.url = url;
      this.credentials = credentials || '';
      this.mongodb = mongodb;

      if (appbaseConfig) {
        this.appbaseConfig = appbaseConfig;
      }

      if (transformRequest) {
        this.transformRequest = transformRequest;
      }

      if (transformResponse) {
        this.transformResponse = transformResponse;
      } // Initialize headers


      this.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      };

      if (headers) {
        this.setHeaders(headers);
      }

      if (this.credentials) {
        this.headers = _extends$2({}, this.headers, {
          Authorization: "Basic " + btoa(this.credentials)
        });
      }
    } // To to set the custom headers


    var _proto = Base.prototype;

    _proto.setHeaders = function setHeaders(headers) {
      this.headers = _extends$2({}, this.headers, headers);
    } // To set the query ID
    ;

    _proto.setQueryID = function setQueryID(queryID) {
      this._queryId = queryID;
    };

    return Base;
  }();

  var Results = /*#__PURE__*/function () {
    // An array of results obtained from the applied query.
    // Raw response returned by ES query
    // Results parser
    function Results(data) {
      var _this = this;

      _defineProperty(this, "setRaw", function (rawResponse) {
        // set response
        _this.raw = rawResponse;

        if (rawResponse.hits && rawResponse.hits.hits) {
          _this.setData(rawResponse.hits.hits);
        }
      });

      this.data = data || [];
    } // Total number of results found


    var _proto = Results.prototype; // Method to set data explicitly

    _proto.setData = function setData(data) {
      // parse hits
      var filteredResults = parseHits(data); // filter results & remove duplicates if any

      if (this.promotedData.length) {
        var ids = this.promotedData.map(function (item) {
          return item._id;
        }).filter(Boolean);

        if (ids) {
          filteredResults = filteredResults.filter(function (item) {
            return !ids.includes(item._id);
          });
        }

        filteredResults = [].concat(this.promotedData.map(function (dataItem) {
          return _extends$2({}, dataItem, {
            _promoted: true
          });
        }), filteredResults);
      } // set data


      if (this.parseResults) {
        this.data = this.parseResults(filteredResults, data);
      } else {
        this.data = filteredResults;
      } // Add click ids in data


      this.data = withClickIds(this.data);
    };

    _createClass(Results, [{
      key: "numberOfResults",
      get: function get() {
        // calculate from raw response
        if (this.raw && this.raw.hits) {
          return typeof this.raw.hits.total === 'object' ? this.raw.hits.total.value : this.raw.hits.total;
        }

        return 0;
      } // Total time taken by request (in ms)

    }, {
      key: "time",
      get: function get() {
        // calculate from raw response
        if (this.raw) {
          return this.raw.took;
        }

        return 0;
      } // no of hidden results found

    }, {
      key: "hidden",
      get: function get() {
        if (this.raw && this.raw.hits) {
          return this.raw.hits.hidden || 0;
        }

        return 0;
      } // An array of promoted results obtained from the applied query.

    }, {
      key: "promotedData",
      get: function get() {
        if (this.raw && this.raw.promoted) {
          return this.raw.promoted || [];
        }

        return [];
      } // no of promoted results found

    }, {
      key: "promoted",
      get: function get() {
        return this.promotedData.length || 0;
      } // An object of raw response as-is from elasticsearch query

    }, {
      key: "rawData",
      get: function get() {
        return this.raw || {};
      } // object of custom data applied through queryRules
      // only works when `enableAppbase=true`

    }, {
      key: "customData",
      get: function get() {
        if (this.raw && this.raw.customData) {
          return this.raw.customData || {};
        }

        return {};
      }
    }]);

    return Results;
  }();

  var Aggregations = /*#__PURE__*/function () {
    // An array of composite aggregations obtained from the applied aggs in options.
    // useful when loading data of greater size
    // Raw aggregations returned by ES query
    function Aggregations(data) {
      this.data = data || [];
    } // An object of raw response as-is from elasticsearch query


    var _proto = Aggregations.prototype;

    _proto.setRaw = function setRaw(rawResponse) {
      // set response
      this.raw = rawResponse;
      if (rawResponse.after_key) this.setAfterKey(rawResponse.after_key);
    };

    _proto.setAfterKey = function setAfterKey(key) {
      this.afterKey = key;
    } // Method to set data explicitly
    ;

    _proto.setData = function setData(aggField, data, append) {
      if (append === void 0) {
        append = false;
      } // parse aggregation buckets


      var parsedData = parseCompAggToHits(aggField, data); // Merge data

      if (append) {
        this.data = [].concat(this.data, parsedData);
      } else {
        this.data = parsedData;
      }
    };

    _createClass(Aggregations, [{
      key: "rawData",
      get: function get() {
        return this.raw || {};
      }
    }]);

    return Aggregations;
  }();

  var defaultOptions = {
    triggerDefaultQuery: true,
    triggerCustomQuery: false,
    stateChanges: true
  };
  var defaultOption = {
    stateChanges: true
  };
  var MIC_STATUS = {
    inactive: 'INACTIVE',
    active: 'ACTIVE',
    denied: 'DENIED'
  };
  var REQUEST_STATUS = {
    inactive: 'INACTIVE',
    pending: 'PENDING',
    error: 'ERROR'
  };
  var suggestionQueryID = 'DataSearch__suggestions';
  /**
   * SearchComponent class is responsible for the following things:
   * - It provides the methods to trigger the query
   * - It maintains the request state for e.g loading, error etc.
   * - It handles the `custom` and `default` queries
   * - Basically the SearchComponent class provides all the utilities to build any ReactiveSearch component
   */

  var SearchComponent$1 = /*#__PURE__*/function (_Base) {
    _inheritsLoose(SearchComponent, _Base); // RS API properties
    // other properties
    // To enable the popular suggestions
    // size of the popular suggestions
    // To show the distinct suggestions
    // To show the predictive suggestions
    // preserve the data for infinite loading
    // to clear the dependent facets values on query change
    // query error
    // state changes subject
    // request status
    // results
    // aggregations
    // recent searches

    /* ------ Private properties only for the internal use ----------- */
    // Counterpart of the query
    // TODO: Check on the below properties
    // mic status
    // mic instance
    // query search ID
    // tracks the last request time for default query
    // tracks the last request time for custom query

    /* ---- callbacks to create the side effects while querying ----- */

    /* ------------- change events -------------------------------- */
    // called when value changes
    // called when results change
    // called when composite aggregationData change
    // called when there is an error while fetching results
    // called when request status changes
    // called when query changes
    // called when mic status changes


    function SearchComponent(_ref) {
      var _this;

      var index = _ref.index,
          url = _ref.url,
          credentials = _ref.credentials,
          mongodb = _ref.mongodb,
          appbaseConfig = _ref.appbaseConfig,
          headers = _ref.headers,
          transformRequest = _ref.transformRequest,
          transformResponse = _ref.transformResponse,
          beforeValueChange = _ref.beforeValueChange,
          onValueChange = _ref.onValueChange,
          onResults = _ref.onResults,
          onAggregationData = _ref.onAggregationData,
          onError = _ref.onError,
          onRequestStatusChange = _ref.onRequestStatusChange,
          onQueryChange = _ref.onQueryChange,
          onMicStatusChange = _ref.onMicStatusChange,
          enablePopularSuggestions = _ref.enablePopularSuggestions,
          maxPopularSuggestions = _ref.maxPopularSuggestions,
          _results = _ref.results,
          showDistinctSuggestions = _ref.showDistinctSuggestions,
          enablePredictiveSuggestions = _ref.enablePredictiveSuggestions,
          preserveResults = _ref.preserveResults,
          clearOnQueryChange = _ref.clearOnQueryChange,
          rsAPIConfig = _objectWithoutPropertiesLoose$2(_ref, ["index", "url", "credentials", "mongodb", "appbaseConfig", "headers", "transformRequest", "transformResponse", "beforeValueChange", "onValueChange", "onResults", "onAggregationData", "onError", "onRequestStatusChange", "onQueryChange", "onMicStatusChange", "enablePopularSuggestions", "maxPopularSuggestions", "results", "showDistinctSuggestions", "enablePredictiveSuggestions", "preserveResults", "clearOnQueryChange"]);

      _this = _Base.call(this, {
        index: index,
        url: url,
        credentials: credentials,
        mongodb: mongodb,
        headers: headers,
        appbaseConfig: appbaseConfig,
        transformRequest: transformRequest,
        transformResponse: transformResponse
      }) || this;

      _defineProperty(_assertThisInitialized(_this), "onMicClick", function (micOptions, options) {
        if (micOptions === void 0) {
          micOptions = {};
        }

        if (options === void 0) {
          options = {
            triggerDefaultQuery: false,
            triggerCustomQuery: false,
            stateChanges: true
          };
        }

        var prevStatus = _this._micStatus;

        if (typeof window !== 'undefined') {
          window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition || null;
        }

        if (window && window.SpeechRecognition && prevStatus !== MIC_STATUS.denied) {
          if (prevStatus === MIC_STATUS.active) {
            _this._setMicStatus(MIC_STATUS.inactive, options);
          }

          var _window = window,
              SpeechRecognition = _window.SpeechRecognition;

          if (_this._micInstance) {
            _this._stopMic();

            return;
          }

          _this._micInstance = new SpeechRecognition();
          _this._micInstance.continuous = true;
          _this._micInstance.interimResults = true;
          Object.assign(_this._micInstance, micOptions);

          _this._micInstance.start();

          _this._micInstance.onstart = function () {
            _this._setMicStatus(MIC_STATUS.active, options);
          };

          _this._micInstance.onresult = function (_ref2) {
            var results = _ref2.results;

            if (results && results[0] && results[0].isFinal) {
              _this._stopMic();
            }

            _this._handleVoiceResults({
              results: results
            }, options);
          };

          _this._micInstance.onerror = function (e) {
            if (e.error === 'no-speech' || e.error === 'audio-capture') {
              _this._setMicStatus(MIC_STATUS.inactive, options);
            } else if (e.error === 'not-allowed') {
              _this._setMicStatus(MIC_STATUS.denied, options);
            }

            console.error(e);
          };
        }
      });

      _defineProperty(_assertThisInitialized(_this), "setDataField", function (dataField, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.dataField;
        _this.dataField = dataField;

        _this._applyOptions(options, 'dataField', prev, dataField);
      });

      _defineProperty(_assertThisInitialized(_this), "setParent", function (parent) {
        _this._parent = parent;
      });

      _defineProperty(_assertThisInitialized(_this), "setValue", function (value, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var performUpdate = function performUpdate() {
          var prev = _this.value;
          _this.value = value;

          _this._applyOptions(options, 'value', prev, _this.value);
        };

        if (_this.beforeValueChange) {
          _this.beforeValueChange(value).then(performUpdate)["catch"](function (e) {
            console.warn('beforeValueChange rejected the promise with ', e);
          });
        } else {
          performUpdate();
        }
      });

      _defineProperty(_assertThisInitialized(_this), "setSize", function (size, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.size;
        _this.size = size;

        _this._applyOptions(options, 'size', prev, _this.size);
      });

      _defineProperty(_assertThisInitialized(_this), "setFrom", function (from, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.from;
        _this.from = from;

        _this._applyOptions(options, 'from', prev, _this.from);
      });

      _defineProperty(_assertThisInitialized(_this), "setFuzziness", function (fuzziness, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.fuzziness;
        _this.fuzziness = fuzziness;

        _this._applyOptions(options, 'fuzziness', prev, _this.fuzziness);
      });

      _defineProperty(_assertThisInitialized(_this), "setIncludeFields", function (includeFields, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.includeFields;
        _this.includeFields = includeFields;

        _this._applyOptions(options, 'includeFields', prev, includeFields);
      });

      _defineProperty(_assertThisInitialized(_this), "setExcludeFields", function (excludeFields, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.excludeFields;
        _this.excludeFields = excludeFields;

        _this._applyOptions(options, 'excludeFields', prev, excludeFields);
      });

      _defineProperty(_assertThisInitialized(_this), "setSortBy", function (sortBy, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.sortBy;
        _this.sortBy = sortBy;

        _this._applyOptions(options, 'sortBy', prev, sortBy);
      });

      _defineProperty(_assertThisInitialized(_this), "setReact", function (react, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.react;
        _this.react = react;

        _this._applyOptions(options, 'react', prev, react);
      });

      _defineProperty(_assertThisInitialized(_this), "setDefaultQuery", function (defaultQuery, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.defaultQuery;
        _this.defaultQuery = defaultQuery;

        _this._applyOptions(options, 'defaultQuery', prev, defaultQuery);
      });

      _defineProperty(_assertThisInitialized(_this), "setCustomQuery", function (customQuery, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.customQuery;
        _this.customQuery = customQuery;

        _this._applyOptions(options, 'customQuery', prev, customQuery);
      });

      _defineProperty(_assertThisInitialized(_this), "setAfter", function (after, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prev = _this.after;
        _this.after = after;

        _this.aggregationData.setAfterKey(after);

        _this._applyOptions(options, 'after', prev, after);
      });

      _defineProperty(_assertThisInitialized(_this), "triggerDefaultQuery", function (options) {
        if (options === void 0) {
          options = defaultOption;
        } // To prevent duplicate queries


        if (isEqual$1(_this._query, _this.componentQuery)) {
          return Promise.resolve(true);
        }

        var handleError = function handleError(err) {
          _this._setError(err, {
            stateChanges: options.stateChanges
          });

          console.error(err);
          return Promise.reject(err);
        };

        try {
          _this._updateQuery();

          _this._setRequestStatus(REQUEST_STATUS.pending); // Set the latest request time


          _this._lastRequestTimeDefaultQuery = new Date().getTime();
          return _this._fetchRequest({
            query: Array.isArray(_this.query) ? _this.query : [_this.query],
            settings: _this.appbaseSettings
          }).then(function (results) {
            if (_this._lastRequestTimeDefaultQuery < results._timestamp) {
              var _prev = _this.results;
              var rawResults = results && results[_this.id];

              var afterResponse = function afterResponse() {
                if (rawResults.aggregations) {
                  _this._handleAggregationResponse(rawResults.aggregations, _extends$2({
                    defaultOptions: defaultOptions
                  }, options));
                }

                _this._setRequestStatus(REQUEST_STATUS.inactive);

                _this._applyOptions({
                  stateChanges: options.stateChanges
                }, 'results', _prev, _this.results);
              };

              if ((!_this.type || _this.type === queryTypes.Search) && _this.enablePopularSuggestions) {
                _this._fetchRequest(_this.getSuggestionsQuery(), true).then(function (rawPopularSuggestions) {
                  var popularSuggestionsData = rawPopularSuggestions[suggestionQueryID]; // Merge popular suggestions as the top suggestions

                  if (popularSuggestionsData && popularSuggestionsData.hits && popularSuggestionsData.hits.hits && rawResults.hits && rawResults.hits.hits) {
                    rawResults.hits.hits = [].concat((popularSuggestionsData.hits.hits || []).map(function (hit) {
                      return _extends$2({}, hit, {
                        // Set the popular suggestion tag for suggestion hits
                        _popular_suggestion: true
                      });
                    }), rawResults.hits.hits);
                  }

                  _this._appendResults(rawResults);

                  afterResponse();
                })["catch"](handleError);
              } else {
                _this._appendResults(rawResults);

                afterResponse();
              }

              return Promise.resolve(rawResults);
            }

            return Promise.resolve([]);
          })["catch"](handleError);
        } catch (err) {
          return handleError(err);
        }
      });

      _defineProperty(_assertThisInitialized(_this), "triggerCustomQuery", function (options) {
        if (options === void 0) {
          options = defaultOption;
        } // Generate query again after resetting changes


        var _this$_generateQuery = _this._generateQuery(),
            requestBody = _this$_generateQuery.requestBody,
            orderOfQueries = _this$_generateQuery.orderOfQueries;

        if (requestBody.length) {
          if (isEqual$1(_this._query, requestBody)) {
            return Promise.resolve(true);
          }

          var handleError = function handleError(err) {
            _this._setError(err, {
              stateChanges: options.stateChanges
            });

            console.error(err);
            return Promise.reject(err);
          };

          try {
            // set the request loading to true for all the requests
            orderOfQueries.forEach(function (id) {
              var componentInstance = _this._parent.getComponent(id);

              if (componentInstance) {
                // Reset `from` and `after` values
                componentInstance.setFrom(0, {
                  stateChanges: true,
                  triggerDefaultQuery: false,
                  triggerCustomQuery: false
                });
                componentInstance.setAfter(undefined, {
                  stateChanges: true,
                  triggerDefaultQuery: false,
                  triggerCustomQuery: false
                }); // Reset value for dependent components after fist query is made
                // We wait for first query to not clear filters applied by URL params

                if (_this.clearOnQueryChange && _this._query) {
                  componentInstance.setValue(undefined, {
                    stateChanges: true,
                    triggerDefaultQuery: false,
                    triggerCustomQuery: false
                  });
                }

                componentInstance._setRequestStatus(REQUEST_STATUS.pending); // Update the query


                componentInstance._updateQuery();
              }
            }); // Set the latest request time

            _this._lastRequestTimeCustomQuery = new Date().getTime(); // Re-generate query after changes

            var _this$_generateQuery2 = _this._generateQuery(),
                finalRequest = _this$_generateQuery2.requestBody;

            return _this._fetchRequest({
              query: finalRequest,
              settings: _this.appbaseSettings
            }).then(function (results) {
              if (_this._lastRequestTimeCustomQuery < results._timestamp) {
                // Update the state for components
                orderOfQueries.forEach(function (id) {
                  var componentInstance = _this._parent.getComponent(id);

                  if (componentInstance) {
                    componentInstance._setRequestStatus(REQUEST_STATUS.inactive); // Update the results


                    var _prev2 = componentInstance.results; // Collect results from the response for a particular component

                    var rawResults = results && results[id]; // Set results

                    if (rawResults.hits) {
                      componentInstance.results.setRaw(rawResults);

                      componentInstance._applyOptions({
                        stateChanges: options.stateChanges
                      }, 'results', _prev2, componentInstance.results);
                    }

                    if (rawResults.aggregations) {
                      componentInstance._handleAggregationResponse(rawResults.aggregations, _extends$2({
                        defaultOptions: defaultOptions
                      }, options), false);
                    }
                  }
                });
                return Promise.resolve(results);
              }

              return Promise.resolve([]);
            })["catch"](handleError);
          } catch (err) {
            return handleError(err);
          }
        } else {
          return Promise.resolve({});
        }
      });

      _defineProperty(_assertThisInitialized(_this), "subscribeToStateChanges", function (fn, propertiesToSubscribe) {
        _this.stateChanges.subscribe(fn, propertiesToSubscribe);
      });

      _defineProperty(_assertThisInitialized(_this), "unsubscribeToStateChanges", function (fn) {
        _this.stateChanges.unsubscribe(fn);
      });

      _defineProperty(_assertThisInitialized(_this), "clearResults", function (options) {
        if (options === void 0) {
          options = defaultOption;
        }

        var prev = _this.results;

        _this.results.setRaw({
          hits: {
            hits: []
          }
        });

        _this._applyOptions({
          stateChanges: options.stateChanges
        }, 'results', prev, _this.results);
      });

      _defineProperty(_assertThisInitialized(_this), "getRecentSearches", function (queryOptions, options) {
        if (queryOptions === void 0) {
          queryOptions = {
            size: 5,
            minChars: 3
          };
        }

        if (options === void 0) {
          options = defaultOption;
        }

        var requestOptions = {
          headers: _extends$2({}, _this.headers)
        };
        var queryString = '';

        var addParam = function addParam(key, value) {
          if (queryString) {
            queryString += "&" + key + "=" + value;
          } else {
            queryString += key + "=" + value;
          }
        };

        if (_this.appbaseSettings && _this.appbaseSettings.userId) {
          addParam('user_id', _this.appbaseSettings.userId);
        }

        if (queryOptions) {
          if (queryOptions.size) {
            addParam('size', String(queryOptions.size));
          }

          if (queryOptions.from) {
            addParam('from', queryOptions.from);
          }

          if (queryOptions.to) {
            addParam('to', queryOptions.to);
          }

          if (queryOptions.minChars) {
            addParam('min_chars', String(queryOptions.minChars));
          }

          if (queryOptions.customEvents) {
            Object.keys(queryOptions.customEvents).forEach(function (key) {
              // $FlowFixMe
              addParam(key, queryOptions.customEvents[key]);
            });
          }
        }

        return new Promise(function (resolve, reject) {
          fetch(_this.url + "/_analytics/recent-searches?" + queryString, requestOptions).then(function (res) {
            if (res.status >= 500) {
              return reject(res);
            }

            if (res.status >= 400) {
              return reject(res);
            }

            return res.json().then(function (recentSearches) {
              var prev = _this.recentSearches;
              _this.recentSearches = recentSearches.map(function (searchObject) {
                return {
                  label: searchObject.key,
                  value: searchObject.key
                };
              });

              _this._applyOptions({
                stateChanges: options.stateChanges
              }, 'recentSearches', prev, _this.recentSearches);

              resolve(_this.recentSearches); // Populate the recent searches
            })["catch"](function (e) {
              console.warn('SearchBase: error while fetching the recent searches ', e);
              return reject(e);
            });
          })["catch"](function (e) {
            console.warn('SearchBase: error while fetching the recent searches ', e);
            return reject(e);
          });
        });
      });

      _defineProperty(_assertThisInitialized(_this), "_handleVoiceResults", function (_ref3, options) {
        var results = _ref3.results;

        if (options === void 0) {
          options = defaultOptions;
        }

        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(), _extends$2({}, options, {
            triggerCustomQuery: true,
            triggerDefaultQuery: true
          }));
        }
      });

      _defineProperty(_assertThisInitialized(_this), "_stopMic", function () {
        if (_this._micInstance) {
          _this._micInstance.stop();

          _this._micInstance = null;

          _this._setMicStatus(MIC_STATUS.inactive);
        }
      });

      _defineProperty(_assertThisInitialized(_this), "_setMicStatus", function (status, options) {
        if (options === void 0) {
          options = defaultOptions;
        }

        var prevStatus = _this._micStatus;
        _this._micStatus = status;

        _this._applyOptions(options, 'micStatus', prevStatus, _this._micStatus);
      });

      var _id = rsAPIConfig.id,
          type = rsAPIConfig.type,
          _react = rsAPIConfig.react,
          queryFormat = rsAPIConfig.queryFormat,
          _dataField = rsAPIConfig.dataField,
          categoryField = rsAPIConfig.categoryField,
          categoryValue = rsAPIConfig.categoryValue,
          nestedField = rsAPIConfig.nestedField,
          _from = rsAPIConfig.from,
          _size = rsAPIConfig.size,
          _sortBy = rsAPIConfig.sortBy,
          _value = rsAPIConfig.value,
          aggregationField = rsAPIConfig.aggregationField,
          aggregationSize = rsAPIConfig.aggregationSize,
          _after = rsAPIConfig.after,
          includeNullValues = rsAPIConfig.includeNullValues,
          _includeFields = rsAPIConfig.includeFields,
          _excludeFields = rsAPIConfig.excludeFields,
          _fuzziness = rsAPIConfig.fuzziness,
          searchOperators = rsAPIConfig.searchOperators,
          highlight = rsAPIConfig.highlight,
          highlightField = rsAPIConfig.highlightField,
          customHighlight = rsAPIConfig.customHighlight,
          interval = rsAPIConfig.interval,
          aggregations = rsAPIConfig.aggregations,
          missingLabel = rsAPIConfig.missingLabel,
          showMissing = rsAPIConfig.showMissing,
          _defaultQuery = rsAPIConfig.defaultQuery,
          _customQuery = rsAPIConfig.customQuery,
          execute = rsAPIConfig.execute,
          enableSynonyms = rsAPIConfig.enableSynonyms,
          selectAllLabel = rsAPIConfig.selectAllLabel,
          pagination = rsAPIConfig.pagination,
          _queryString = rsAPIConfig.queryString,
          distinctField = rsAPIConfig.distinctField,
          distinctFieldConfig = rsAPIConfig.distinctFieldConfig;

      if (!_id) {
        throw new Error(errorMessages.invalidComponentId);
      } // dataField is required for components other then search


      if (type && type !== queryTypes.Search) {
        if (Array.isArray(_dataField)) {
          throw new Error(errorMessages.dataFieldAsArray);
        }
      }

      _this.id = _id;
      _this.type = type;
      _this.react = _react;
      _this.queryFormat = queryFormat;
      _this.dataField = _dataField;
      _this.categoryField = categoryField;
      _this.categoryValue = categoryValue;
      _this.nestedField = nestedField;
      _this.from = _from;
      _this.size = _size;
      _this.sortBy = _sortBy;
      _this.aggregationField = aggregationField;
      _this.aggregationSize = aggregationSize;
      _this.after = _after;
      _this.includeNullValues = includeNullValues;
      _this.includeFields = _includeFields;
      _this.excludeFields = _excludeFields;
      _this.fuzziness = _fuzziness;
      _this.searchOperators = searchOperators;
      _this.highlight = highlight;
      _this.highlightField = highlightField;
      _this.customHighlight = customHighlight;
      _this.interval = interval;
      _this.aggregations = aggregations;
      _this.missingLabel = missingLabel;
      _this.showMissing = showMissing;
      _this.execute = execute;
      _this.enableSynonyms = enableSynonyms;
      _this.selectAllLabel = selectAllLabel;
      _this.pagination = pagination;
      _this.queryString = _queryString;
      _this.defaultQuery = _defaultQuery;
      _this.customQuery = _customQuery;
      _this.beforeValueChange = beforeValueChange;
      _this.onValueChange = onValueChange;
      _this.onResults = onResults;
      _this.onAggregationData = onAggregationData;
      _this.onError = onError;
      _this.onRequestStatusChange = onRequestStatusChange;
      _this.onQueryChange = onQueryChange;
      _this.onMicStatusChange = onMicStatusChange;
      _this.distinctField = distinctField;
      _this.distinctFieldConfig = distinctFieldConfig; // other properties

      _this.enablePopularSuggestions = enablePopularSuggestions;
      _this.maxPopularSuggestions = maxPopularSuggestions;
      _this.showDistinctSuggestions = showDistinctSuggestions;
      _this.enablePredictiveSuggestions = enablePredictiveSuggestions;
      _this.preserveResults = preserveResults;
      _this.clearOnQueryChange = clearOnQueryChange; // Initialize the state changes observable

      _this.stateChanges = new Observable();
      _this.results = new Results(_results);
      _this.aggregationData = new Aggregations();

      if (_value) {
        _this.setValue(_value, {
          stateChanges: true
        });
      } else {
        _this.value = _value;
      }

      return _this;
    } // getters


    var _proto = SearchComponent.prototype;

    _proto.getSuggestionsQuery = function getSuggestionsQuery() {
      return {
        query: [{
          id: suggestionQueryID,
          dataField: popularSuggestionFields,
          size: this.maxPopularSuggestions || 5,
          value: this.value,
          defaultQuery: {
            query: {
              bool: {
                minimum_should_match: 1,
                should: [{
                  function_score: {
                    field_value_factor: {
                      field: 'count',
                      modifier: 'sqrt',
                      missing: 1
                    }
                  }
                }, {
                  multi_match: {
                    fields: ['key^9', 'key.autosuggest^1', 'key.keyword^10'],
                    fuzziness: 0,
                    operator: 'or',
                    query: this.value,
                    type: 'best_fields'
                  }
                }, {
                  multi_match: {
                    fields: ['key^9', 'key.autosuggest^1', 'key.keyword^10'],
                    operator: 'or',
                    query: this.value,
                    type: 'phrase'
                  }
                }, {
                  multi_match: {
                    fields: ['key^9'],
                    operator: 'or',
                    query: this.value,
                    type: 'phrase_prefix'
                  }
                }]
              }
            }
          }
        }]
      };
    } // Method to subscribe the state changes
    ;
    /* -------- Private methods only for the internal use -------- */


    _proto._appendResults = function _appendResults(rawResults) {
      if (this.preserveResults && rawResults && Array.isArray(rawResults.hits && rawResults.hits.hits) && Array.isArray(this.results.rawData && this.results.rawData.hits && this.results.rawData.hits.hits)) {
        this.results.setRaw(_extends$2({}, rawResults, {
          hits: _extends$2({}, rawResults.hits, {
            hits: [].concat(this.results.rawData.hits.hits, rawResults.hits.hits)
          })
        }));
      } else {
        this.results.setRaw(rawResults);
      }
    } // Method to apply the changed based on set options
    ;

    _proto._applyOptions = function _applyOptions(options, key, prevValue, nextValue) {
      // // Trigger mic events
      if (key === 'micStatus' && this.onMicStatusChange) {
        this.onMicStatusChange(nextValue, prevValue);
      } // Trigger events


      if (key === 'query' && this.onQueryChange) {
        this.onQueryChange(nextValue, prevValue);
      }

      if (key === 'value' && this.onValueChange) {
        this.onValueChange(nextValue, prevValue);
      }

      if (key === 'error' && this.onError) {
        this.onError(nextValue);
      }

      if (key === 'results' && this.onResults) {
        this.onResults(nextValue, prevValue);
      }

      if (key === 'aggregationData' && this.onAggregationData) {
        this.onAggregationData(nextValue, prevValue);
      }

      if (key === 'requestStatus' && this.onRequestStatusChange) {
        this.onRequestStatusChange(nextValue, prevValue);
      }

      if (options.triggerDefaultQuery) {
        this.triggerDefaultQuery();
      }

      if (options.triggerCustomQuery) {
        this.triggerCustomQuery();
      }

      if (options.stateChanges !== false) {
        var _this$stateChanges$ne;

        this.stateChanges.next((_this$stateChanges$ne = {}, _this$stateChanges$ne[key] = {
          prev: prevValue,
          next: nextValue
        }, _this$stateChanges$ne), key, this);
      }
    };

    _proto._getMongoRequest = function _getMongoRequest() {
      var mongodb = {};

      if (this.index) {
        mongodb.index = this.index;
      }

      if (this.mongodb) {
        if (this.mongodb.db) {
          mongodb.db = this.mongodb.db;
        }

        if (this.mongodb.collection) {
          mongodb.collection = this.mongodb.collection;
        }
      }

      return mongodb;
    };

    _proto._fetchRequest = function _fetchRequest(requestBody, isPopularSuggestionsAPI) {
      var _this2 = this; // remove undefined properties from request body


      var requestOptions = {
        method: 'POST',
        body: JSON.stringify(_extends$2({}, requestBody, {
          mongodb: this._getMongoRequest()
        })),
        headers: _extends$2({}, this.headers)
      };
      return new Promise(function (resolve, reject) {
        _this2._handleTransformRequest(requestOptions).then(function (finalRequestOptions) {
          // set timestamp in request
          var timestamp = Date.now();
          return fetch(_this2.url, finalRequestOptions).then(function (res) {
            var responseHeaders = res.headers; // check if search component is present

            if (res.headers) {
              var queryID = res.headers.get('X-Search-Id');

              if (queryID) {
                // if parent exists then set the queryID to parent
                if (_this2._parent) {
                  _this2._parent.setQueryID(queryID);
                } else {
                  _this2.setQueryID(queryID);
                }
              }
            }

            if (res.status >= 500) {
              return reject(res);
            }

            if (res.status >= 400) {
              return reject(res);
            }

            return res.json().then(function (data) {
              _this2._handleTransformResponse(data).then(function (transformedData) {
                if (transformedData && Object.prototype.hasOwnProperty.call(transformedData, 'error')) {
                  reject(transformedData);
                }

                var response = _extends$2({}, transformedData, {
                  _timestamp: timestamp,
                  _headers: responseHeaders
                });

                return resolve(response);
              })["catch"](function (e) {
                console.warn('SearchBase: transformResponse rejected the promise with ', e);
                return reject(e);
              });
            });
          })["catch"](function (e) {
            return reject(e);
          });
        })["catch"](function (e) {
          console.warn('SearchBase: transformRequest rejected the promise with ', e);
          return reject(e);
        });
      });
    } // Method to generate the final query based on the component's value changes
    ;

    _proto._generateQuery = function _generateQuery() {
      var _this3 = this;
      /**
       * This method performs the following tasks to generate the query
       * 1. Get all the watcher components for a particular component ID
       * 2. Make the request payload
       * 3. Execute the final query
       * 4. Update results and trigger events => Call `setResults` or `setAggregations` based on the results
       */


      if (this._parent) {
        var components = this._parent.getComponents();

        var watcherComponents = []; // Find all the  watcher components

        Object.keys(components).forEach(function (id) {
          var componentInstance = components[id];

          if (componentInstance && componentInstance.react) {
            var flattenReact = flatReactProp(componentInstance.react, id);

            if (flattenReact.indexOf(_this3.id) > -1) {
              watcherComponents.push(id);
            }
          }
        });
        var requestQuery = {}; // Generate the request body for watchers

        watcherComponents.forEach(function (watcherId) {
          var component = _this3._parent.getComponent(watcherId);

          if (component) {
            requestQuery[watcherId] = component.componentQuery; // collect queries for all components defined in the `react` property
            // that have some value defined

            var flattenReact = flatReactProp(component.react, component.id);
            flattenReact.forEach(function (id) {
              // only add if not present
              if (!requestQuery[id]) {
                var dependentComponent = _this3._parent.getComponent(id);

                if (dependentComponent && dependentComponent.value) {
                  // Set the execute to `false` for dependent components
                  var query = dependentComponent.componentQuery;
                  query.execute = false; // Add the query to request payload

                  requestQuery[id] = query;
                }
              }
            });
          }
        });
        return {
          requestBody: Object.values(requestQuery),
          orderOfQueries: watcherComponents
        };
      }

      return {
        requestBody: [],
        orderOfQueries: []
      };
    };

    _proto._handleTransformResponse = function _handleTransformResponse(res) {
      if (this.transformResponse && typeof this.transformResponse === 'function') {
        return this.transformResponse(res);
      }

      return new Promise(function (resolve) {
        return resolve(res);
      });
    };

    _proto._handleTransformRequest = function _handleTransformRequest(requestOptions) {
      if (this.transformRequest && typeof this.transformRequest === 'function') {
        return this.transformRequest(requestOptions);
      }

      return new Promise(function (resolve) {
        return resolve(requestOptions);
      });
    };

    _proto._handleAggregationResponse = function _handleAggregationResponse(aggsResponse, options, append) {
      if (options === void 0) {
        options = defaultOptions;
      }

      if (append === void 0) {
        append = true;
      }

      var aggregationField = this.aggregationField;

      if (!aggregationField && typeof this.dataField === 'string') {
        aggregationField = this.dataField;
      }

      var prev = this.aggregationData;
      this.aggregationData.setRaw(aggsResponse[aggregationField]);
      this.aggregationData.setData(aggregationField, aggsResponse[aggregationField].buckets, this.preserveResults && append);

      this._applyOptions({
        stateChanges: options.stateChanges
      }, 'aggregationData', prev, this.aggregationData);
    };

    _proto._setError = function _setError(error, options) {
      if (options === void 0) {
        options = defaultOptions;
      }

      this._setRequestStatus(REQUEST_STATUS.error);

      var prev = this.error;
      this.error = error;

      this._applyOptions(options, 'error', prev, this.error);
    };

    _proto._setRequestStatus = function _setRequestStatus(requestStatus) {
      var prev = this.requestStatus;
      this.requestStatus = requestStatus;

      this._applyOptions({
        stateChanges: true
      }, 'requestStatus', prev, this.requestStatus);
    } // Method to set the default query value
    ;

    _proto._updateQuery = function _updateQuery(query) {
      var _this4 = this;

      var prevQuery;
      prevQuery = _extends$2({}, this._query);
      var finalQuery = [this.componentQuery];
      var flattenReact = flatReactProp(this.react, this.id);
      flattenReact.forEach(function (id) {
        // only add if not present
        var watcherComponent = _this4._parent.getComponent(id);

        if (watcherComponent && watcherComponent.value) {
          // Set the execute to `false` for watcher components
          var watcherQuery = watcherComponent.componentQuery;
          watcherQuery.execute = false; // Add the query to request payload

          finalQuery.push(watcherQuery);
        }
      });
      this._query = query || finalQuery;

      this._applyOptions({
        stateChanges: false
      }, 'query', prevQuery, this._query);
    } // mic
    ;

    _createClass(SearchComponent, [{
      key: "micStatus",
      get: function get() {
        return this._micStatus;
      }
    }, {
      key: "micInstance",
      get: function get() {
        return this._micInstance;
      }
    }, {
      key: "micActive",
      get: function get() {
        return this._micStatus === MIC_STATUS.active;
      }
    }, {
      key: "micInactive",
      get: function get() {
        return this._micStatus === MIC_STATUS.inactive;
      }
    }, {
      key: "micDenied",
      get: function get() {
        return this._micStatus === MIC_STATUS.denied;
      }
    }, {
      key: "query",
      get: function get() {
        return this._query;
      }
    }, {
      key: "requestPending",
      get: function get() {
        return this.requestStatus === REQUEST_STATUS.pending;
      }
    }, {
      key: "appbaseSettings",
      get: function get() {
        var _ref4 = this.appbaseConfig || {},
            recordAnalytics = _ref4.recordAnalytics,
            customEvents = _ref4.customEvents,
            enableQueryRules = _ref4.enableQueryRules,
            userId = _ref4.userId;

        return {
          recordAnalytics: recordAnalytics,
          customEvents: customEvents,
          enableQueryRules: enableQueryRules,
          userId: userId
        };
      } // To get the parsed suggestions from the results

    }, {
      key: "suggestions",
      get: function get() {
        if (this.type && this.type !== queryTypes.Search) {
          return [];
        }

        if (this.results) {
          var fields = getNormalizedField(this.dataField) || [];

          if (fields.length === 0 && this.results.data && Array.isArray(this.results.data) && this.results.data.length > 0 && this.results.data[0]) {
            // Extract fields from _source
            fields = Object.keys(this.results.data[0]).filter(function (key) {
              return !['_id', '_click_id', '_index', '_score', '_type'].includes(key);
            });
          }

          if (this.enablePopularSuggestions) {
            // extract suggestions from popular suggestion fields too
            fields = [].concat(fields, popularSuggestionFields);
          }

          return getSuggestions(fields, this.results.data, this.value, this.showDistinctSuggestions, this.enablePredictiveSuggestions).slice(0, this.size);
        }

        return [];
      } // Method to get the raw query based on the current state

    }, {
      key: "componentQuery",
      get: function get() {
        return {
          id: this.id,
          type: this.type,
          dataField: getNormalizedField(this.dataField),
          react: this.react,
          highlight: this.highlight,
          highlightField: getNormalizedField(this.highlightField),
          fuzziness: this.fuzziness,
          searchOperators: this.searchOperators,
          includeFields: this.includeFields,
          excludeFields: this.excludeFields,
          size: this.size,
          from: this.from,
          queryFormat: this.queryFormat,
          sortBy: this.sortBy,
          fieldWeights: getNormalizedWeights(this.dataField),
          includeNullValues: this.includeNullValues,
          aggregationField: this.aggregationField,
          aggregationSize: this.aggregationSize,
          categoryField: this.categoryField,
          missingLabel: this.missingLabel,
          showMissing: this.showMissing,
          nestedField: this.nestedField,
          interval: this.interval,
          customHighlight: this.customHighlight,
          customQuery: this.customQuery ? this.customQuery(this) : undefined,
          defaultQuery: this.defaultQuery ? this.defaultQuery(this) : undefined,
          value: this.value,
          categoryValue: this.categoryValue,
          after: this.after,
          aggregations: this.aggregations,
          enableSynonyms: this.enableSynonyms,
          selectAllLabel: this.selectAllLabel,
          pagination: this.pagination,
          queryString: this.queryString,
          distinctField: this.distinctField,
          distinctFieldConfig: this.distinctFieldConfig,
          index: this.index
        };
      }
    }, {
      key: "queryId",
      get: function get() {
        // Get query ID from parent(searchbase) if exist
        if (this._parent && this._parent._queryId) {
          return this._parent._queryId;
        } // For single components just return the queryId from the component


        if (this._queryId) {
          return this._queryId;
        }

        return '';
      }
    }, {
      key: "mappedProps",
      get: function get() {
        var _this5 = this;

        var mappedProps = {};
        Object.keys(searchBaseMappings).forEach(function (key) {
          // $FlowFixMe
          mappedProps[searchBaseMappings[key]] = _this5[key];
        });
        return mappedProps;
      }
      /* -------- Public methods -------- */
      // mic click handler

    }]);

    return SearchComponent;
  }(Base);
  /**
   * SearchBase class will act like the ReactiveBase component.
   * It works as a centralized store that will have the info about active/registered components.
   */


  var SearchBase = /*#__PURE__*/function (_Base) {
    _inheritsLoose(SearchBase, _Base);
    /* ------ Private properties only for the internal use ----------- */
    // active components


    function SearchBase(_ref) {
      var _this;

      var index = _ref.index,
          url = _ref.url,
          mongodb = _ref.mongodb,
          credentials = _ref.credentials,
          headers = _ref.headers,
          appbaseConfig = _ref.appbaseConfig,
          transformRequest = _ref.transformRequest,
          transformResponse = _ref.transformResponse;
      _this = _Base.call(this, {
        index: index,
        url: url,
        mongodb: mongodb,
        credentials: credentials,
        headers: headers,
        appbaseConfig: appbaseConfig,
        transformRequest: transformRequest,
        transformResponse: transformResponse
      }) || this;

      _defineProperty(_assertThisInitialized(_this), "register", function (componentId, component) {
        if (!componentId) {
          throw new Error(errorMessages.invalidComponentId);
        }

        if (_this._components[componentId]) {
          // return existing instance
          return _this._components[componentId];
        }

        var componentInstance = component;

        if (component && !(component instanceof SearchComponent$1)) {
          // create instance from object with all the options
          componentInstance = new SearchComponent$1(_extends$2({}, component, {
            id: componentId,
            index: component.index || _this.index,
            url: component.url || _this.url,
            mongodb: component.mongodb || _this.mongodb,
            credentials: component.credentials || _this.credentials,
            headers: component.headers || _this.headers,
            transformRequest: component.transformRequest || _this.transformRequest,
            transformResponse: component.transformResponse || _this.transformResponse,
            appbaseConfig: component.appbaseConfig || _this.appbaseConfig
          }));
        } else {
          // set the id property on instance
          componentInstance.id = componentId;
        } // register component


        _this._components[componentId] = componentInstance; // set the search base instance as parent

        componentInstance.setParent(_assertThisInitialized(_this));
        return componentInstance;
      });

      _defineProperty(_assertThisInitialized(_this), "unregister", function (componentId) {
        if (componentId) {
          delete _this._components[componentId];
        }
      });

      _defineProperty(_assertThisInitialized(_this), "getComponent", function (componentId) {
        return _this._components[componentId];
      });

      _defineProperty(_assertThisInitialized(_this), "getComponents", function () {
        return _this._components;
      });

      _this._components = {};
      return _this;
    } // To register a component


    return SearchBase;
  }(Base);

  var SearchBase$1 = {
    name: 'search-base',
    props: {
      index: VueTypes.string,
      url: types.url,
      mongodb: VueTypes.object,
      credentials: VueTypes.string,
      headers: types.headers,
      appbaseConfig: types.appbaseConfig,
      transformRequest: VueTypes.func,
      transformResponse: VueTypes.func
    },
    provide: function provide() {
      this.searchbase = new SearchBase({
        index: this.$props.index,
        url: this.$props.url,
        mongodb: this.$props.mongodb,
        credentials: this.$props.credentials,
        headers: this.$props.headers,
        appbaseConfig: this.$props.appbaseConfig,
        transformRequest: this.$props.transformRequest,
        transformResponse: this.$props.transformResponse
      });
      return {
        searchbase: this.searchbase
      };
    },
    render: function render() {
      var h = arguments[0];
      return h("div", [this.$slots["default"]]);
    }
  };

  SearchBase$1.install = function (Vue) {
    Vue.component(SearchBase$1.name, SearchBase$1);
  };

  var version = "0.0.2";

  var components = [SearchBoxWrapper, SearchBase$1, SearchComponent];

  var install = function install(Vue) {
    components.map(function (component) {
      Vue.use(component);
      return null;
    });
  };

  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }
  var index$2 = {
    version: version,
    install: install
  };

  exports.SearchBase = SearchBase$1;
  exports.SearchBox = SearchBoxWrapper;
  exports.SearchComponent = SearchComponent;
  exports.default = index$2;
  exports.install = install;
  exports.version = version;

  Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=vue-searchbox.umd.js.map