@appbaseio/reactivesearch-vue 3.1.0-rc.1 → 3.3.0

package/dist/cjs/{Button-d4da7470.js → Button-f96a0570.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var vueEmotion = require('@appbaseio/vue-emotion');
 var css = require('@emotion/css');
 var polished = require('polished');
@@ -24,27 +25,33 @@ var disabled = function disabled(_ref3) {
   var theme = _ref3.theme;
   return "\n\tbackground-color: " + (theme.colors.backgroundColor ? polished.lighten(0.1, theme.colors.backgroundColor) : '#fafafa') + ";\n\tcolor: #ccc;\n\tcursor: not-allowed;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + (theme.colors.backgroundColor ? polished.lighten(0.2, theme.colors.backgroundColor) : '#fafafa') + ";\n\t}\n";
 };
-var Button = vueEmotion.styled('button')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref4) {
+var info = function info(_ref4) {
   var theme = _ref4.theme;
-  return theme.colors ? theme.colors.backgroundColor : '#eee';
-}, function (_ref5) {
+  return "\n\tborder: 1px solid " + theme.colors.primaryColor + ";\n\tcolor: " + theme.colors.primaryColor + ";\n\tbackground-color: " + theme.colors.primaryTextColor + ";\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: " + polished.darken(0.1, helper.hexToRGBA(theme.colors.primaryTextColor)) + ";\n\t}\n";
+};
+var Button = vueEmotion.styled('button')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref5) {
   var theme = _ref5.theme;
-  return theme.colors ? theme.colors.textColor : '';
+  return theme.colors ? theme.colors.backgroundColor : '#eee';
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.colors && theme.colors.backgroundColor ? polished.darken(0.1, theme.colors.backgroundColor) : '#ccc';
+  return theme.colors ? theme.colors.textColor : '';
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.colors && theme.colors.primaryColor ? polished.rgba(theme.colors.primaryColor, 0.6) : 'unset';
+  return theme.colors && theme.colors.backgroundColor ? polished.darken(0.1, theme.colors.backgroundColor) : '#ccc';
 }, function (_ref8) {
   var theme = _ref8.theme;
+  return theme.colors && theme.colors.primaryColor ? polished.rgba(theme.colors.primaryColor, 0.6) : 'unset';
+}, function (_ref9) {
+  var theme = _ref9.theme;
   return theme.colors && theme.colors.primaryColor ? "0 0 0 2px " + polished.rgba(theme.colors.primaryColor, 0.3) : '';
 }, function (props) {
-  return props.primary ? primary : null;
+  return props.info ? info : null;
 }, function (props) {
   return props.disabled ? disabled : null;
 }, function (props) {
   return props.large && large;
+}, function (props) {
+  return props.primary ? primary : null;
 });
 var loadMoreContainer = css.css({
   margin: '5px 0',

package/dist/cjs/{ComponentWrapper-b5c78446.js → ComponentWrapper-0334c14b.js}

@@ -53,6 +53,9 @@ var ComponentWrapper = function ComponentWrapper(component, options) {
       Object.keys(componentProps).forEach(function (key) {
         parsedProps[index.getCamelCase(key)] = componentProps[key];
       });
+      if (options.componentType === constants.componentTypes.AIAnswer) {
+        parsedProps.enableAI = true;
+      }
       this.componentProps = parsedProps;
       this.componentId = this.componentProps.componentId;
       this.react = this.componentProps.react;

package/dist/cjs/{DropDown-ec31bd3f.js → DropDown-ebe20e81.js}

@@ -8,17 +8,17 @@ var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 var vueEmotion = require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 var index = require('./index-1f41363f.js');
-var Input = require('./Input-497be42a.js');
+var Input = require('./Input-cee51a53.js');
 var computeScrollIntoView = _interopDefault(require('compute-scroll-into-view'));
 var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
 
 var _templateObject;
-var InputWrapper = vueEmotion.styled('span')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n  flex: 1;\n  position: relative;\n"])));
+var InputWrapper = vueEmotion.styled('span')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tflex: 1;\n\tposition: relative;\n\theight: 42px;\n"])));
 
 var _templateObject$1;
-var IconGroup = vueEmotion.styled('div')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._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"])), function (_ref) {
+var IconGroup = vueEmotion.styled('div')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._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\n\t", ";\n"])), function (_ref) {
   var positionType = _ref.positionType;
   if (positionType === 'absolute') {
     return "\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t";
@@ -27,9 +27,12 @@ var IconGroup = vueEmotion.styled('div')(_templateObject$1 || (_templateObject$1
 }, function (_ref2) {
   var groupPosition = _ref2.groupPosition;
   return groupPosition === 'right' ? "\n\t\t\t\t\tright: 0;\n\t\t\t  " : "\n\t\t\t\t\tleft: 0;\n\t\t\t  ";
+}, function (_ref3) {
+  var enableAI = _ref3.enableAI;
+  return enableAI ? "\n\t\ttop: 0%;\n\t    transform: translateY(0);\n    \theight: 42px;\n\t" : '';
 });
 
-var _templateObject$2;
+var _templateObject$2, _templateObject2;
 var IconWrapper = vueEmotion.styled('div')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._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%;\n\tmin-width: 20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform: scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
   var _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? {} : _ref$theme;
@@ -39,6 +42,13 @@ var IconWrapper = vueEmotion.styled('div')(_templateObject$2 || (_templateObject
     theme = _ref2$theme === void 0 ? {} : _ref2$theme;
   return theme.colors ? theme.colors.borderColor : '#000';
 });
+var ButtonIconWrapper = vueEmotion.styled(IconWrapper)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder-radius: 4px;\n\tvertical-align: middle;\n\theight: 25px;\n\tfont-size: 12px;\n\tborder: 1px solid ", ";\n\tcolor: ", ";\n\tmax-width: unset;\n\tpadding: 5px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors ? theme.colors.primaryColor : '#000';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors ? theme.colors.primaryColor : '#000';
+});
 
 /**
  * Scroll node into view if necessary
@@ -409,7 +419,7 @@ var CancelSvg = (function () {
   }, null)]);
 });
 
-var _templateObject$3, _templateObject2;
+var _templateObject$3, _templateObject2$1;
 var small = "\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n";
 var dark = function dark(_ref) {
   var theme = _ref.theme;
@@ -421,7 +431,7 @@ var Select = vueEmotion.styled('button')(_templateObject$3 || (_templateObject$3
   var themePreset = _ref2.themePreset;
   return themePreset === 'dark' && dark;
 });
-var Tick = vueEmotion.styled('span')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
+var Tick = vueEmotion.styled('span')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.primaryColor;
 });
@@ -691,6 +701,7 @@ var Dropdown = {
   }
 };
 
+exports.ButtonIconWrapper = ButtonIconWrapper;
 exports.CancelSvg = CancelSvg;
 exports.Downshift = Downshift;
 exports.Dropdown = Dropdown;

package/dist/cjs/DynamicRangeSlider.js

@@ -10,12 +10,15 @@ require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('redux');
 var index = require('./index-1f41363f.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var Title = require('./Title-8802a218.js');
 var Container = require('./Container-29f049b2.js');
+var VueSlider = _interopDefault(require('vue-slider-component/dist-css/vue-slider-component.umd.min.js'));
+require('vue-slider-component/dist-css/vue-slider-component.css');
+require('vue-slider-component/theme/default.css');
 var ssr = require('./ssr-8dd13d43.js');
 
 var addComponent = reactivecore.Actions.addComponent,
@@ -41,6 +44,7 @@ var DynamicRangeSlider = {
     className: VueTypes.string.def(''),
     rangeLabels: vueTypes.types.func,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customQuery: vueTypes.types.func,
     data: vueTypes.types.data,
     dataField: vueTypes.types.stringRequired,
@@ -301,7 +305,7 @@ var DynamicRangeSlider = {
   },
   render: function render() {
     var _this4 = this;
-    if (!this.range || !this.currentValue) {
+    if (!this.range || !this.currentValue || this.range.start === null || this.range.end === null || this.range.start === this.range.end) {
       return null;
     }
     var _this$range = this.range,
@@ -323,16 +327,18 @@ var DynamicRangeSlider = {
               "class": getClassName(_this4.$props.innerClass, 'slider')
             }, {
               "default": function _default() {
-                return [vue.createVNode(vue.resolveComponent("vue-slider-component"), vue.mergeProps({
+                return [vue.createVNode(VueSlider, vue.mergeProps({
                   "ref": "slider",
                   "modelValue": [Math.floor(Math.max(start, _this4.currentValue[0])), Math.ceil(Math.min(end, _this4.currentValue[1]))],
                   "min": Math.floor(Math.min(start, _this4.currentValue[0])),
                   "max": Math.ceil(Math.max(end, _this4.currentValue[1])),
-                  "onDrag-end": _this4.handleSlider,
+                  "onChange": _this4.handleSlider,
+                  "lazy": true,
                   "dotSize": 20,
                   "height": 4,
                   "enable-cross": false,
-                  "tooltip": "always"
+                  "tooltip": "always",
+                  "useKeyboard": false
                 }, _this4.$props.sliderOptions), null), _this4.labels ? vue.createVNode("div", {
                   "class": "label-container"
                 }, [vue.createVNode("label", {

package/dist/cjs/Input-cee51a53.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
+var vueEmotion = require('@appbaseio/vue-emotion');
+var css = require('@emotion/css');
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var alertBorder = function alertBorder(_ref) {
+  var theme = _ref.theme;
+  return "\n\tborder: 1px solid " + theme.colors.alertColor + ";\n";
+};
+var input = function input(searchBox) {
+  return "\nwidth: 100%;\nline-height: 1.5;\nmin-height: 42px;\npadding: 8px 12px;\nborder: 1px solid #ccc;\nbackground-color: #fafafa;\nfont-size: 0.9rem;\noutline: none;\n&:focus {\n\tbackground-color: #fff;\n}\n" + (searchBox && "\n\tpadding: 8px 12px 9px;\n\tborder: 1px solid transparent;\n\tborder-radius: 6px;\n\tmin-height: unset;\n") + ";\n";
+};
+var dark = function dark(theme) {
+  return "\n\tborder-color: " + theme.colors.borderColor + ";\n";
+};
+var darkInput = function darkInput(_ref2) {
+  var theme = _ref2.theme;
+  return "\n\tbackground-color: " + theme.colors.backgroundColor + ";\n\tcolor: " + theme.colors.textColor + ";\n\t" + dark(theme) + ";\n\n\t&:focus {\n\t\tbackground-color: " + theme.colors.backgroundColor + ";\n\t}\n";
+};
+var Input = vueEmotion.styled('input')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t&[type='search']::-webkit-search-decoration,\n\t&[type='search']::-webkit-search-cancel-button,\n\t&[type='search']::-webkit-search-results-button,\n\t&[type='search']::-webkit-search-results-decoration {\n\t\tdisplay: none;\n\t}\n"])), function (props) {
+  return input(props.searchBox);
+}, function (_ref3) {
+  var themePreset = _ref3.themePreset;
+  return themePreset === 'dark' && darkInput;
+}, function (props) {
+  return props.showIcon && props.iconPosition === 'left' && "\n\t\t\tpadding-left: 36px;\n\t\t";
+}, function (props) {
+  return props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 36px;\n\t\t";
+}, function (props) {
+  return (
+    // for clear icon
+    props.showClear && "\n\t\t\tpadding-right: 36px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for voice search icon
+    props.showVoiceSearch && "\n\t\t\tpadding-right: 36px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for clear icon with search icon
+    props.showClear && props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 66px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for voice search icon with clear icon
+    props.showVoiceSearch && props.showIcon && "\n\t\t\tpadding-right: 66px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for voice search icon with search icon
+    props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 66px;\n\t\t"
+  );
+}, function (props) {
+  return (
+    // for clear icon with search icon and voice search
+    props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 90px;\n\t\t"
+  );
+}, function (props) {
+  return props.alert && alertBorder;
+}, function (props) {
+  return props.isOpen && "\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t";
+});
+var suggestions = function suggestions(themePreset, theme) {
+  return css.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 402px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
+};
+var searchboxSuggestions = function searchboxSuggestions(themePreset, theme) {
+  return css.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\n\tmax-height: min(100vh, 401px);\n\tborder: none;\n\tborder-radius: 6px;\n\tborder-top-left-radius: 0;\n\tborder-top-right-radius: 0;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 10px 15px;\n\tborder-top: 1px solid #f2f0f0;\n\tli {\n\t\ttransition: all 0.3s ease-in;\n\t\tposition: relative;\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: unset;\n\t\t}\n\t\t.trim {\n\t\t\tline-height: 20px;\n\t\t}\n\t\t&.li-item {\n\t\t\tbackground-color: ", ";\n\n\t\t\t", "\n\t\t}\n\t\t&.active-li-item {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: #fff;\n\t\t\tsvg {\n\t\t\t\ttransition: fill 0.3s ease-in;\n\t\t\t\tfill: #fff !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.section-container {\n\t\tpadding-bottom: 5px;\n\t\tborder-bottom: 1px solid #f2f0f0;\n\t\t", ";\n\t\t.section-header {\n\t\t\tpadding: 10px;\n\t\t\tfont-size: 12px;\n\t\t\tcolor: #7f7c7c;\n\t\t\tbackground: #f9f9f9;\n\t\t\t", ";\n\t\t}\n\n\t\t.section-list {\n\t\t\tpadding-left: 0;\n\t\t}\n\t\t.section-list-item {\n\t\t\t&__label,\n\t\t\t&__description {\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\n\t\t\t\t* {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&__label {\n\t\t\t}\n\t\t\t&__description {\n\t\t\t\tmargin-top: 5px;\n\t\t\t\topacity: 0.7;\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\t\t}\n\t}\n"])), suggestions(themePreset, theme), themePreset === 'dark' ? '#424242' : '#fff', themePreset && theme && "svg {\n\t\t\t\tfill: " + (theme.colors ? theme.colors.primaryColor : '#707070') + ";\n\t\t\t}", themePreset === 'dark' ? '#555' : '#2d84f6', themePreset === 'dark' && css.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tbackground: #161616;\n\t\t"]))), themePreset === 'dark' && css.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\t\tcolor: #218fe7;\n\t\t\t\tbackground: #161616;\n\t\t\t"]))));
+};
+var suggestionsContainer = css.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
+var noSuggestions = function noSuggestions(themePreset, theme) {
+  return css.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\tborder-radius: 6px;\n\tborder-top-left-radius: 0;\n\tborder-top-right-radius: 0;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 10px 15px;\n\tborder-top: 1px solid #f2f0f0;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t", "\n"])), themePreset === 'dark' && theme && dark(theme));
+};
+var TextArea = vueEmotion.styled('textarea')(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t&::-webkit-search-decoration,\n\t&::-webkit-search-cancel-button,\n\t&::-webkit-search-results-button,\n\t&::-webkit-search-results-decoration {\n\t\tdisplay: none;\n\t}\n\tresize: none;\n\toverflow: hidden;\n\theight: 42px;\n\tpadding-left: 0;\n\tpadding-right: 0;\n\tborder-color: transparent;\n\n"])), function (props) {
+  return input(props.searchBox);
+}, function (_ref4) {
+  var themePreset = _ref4.themePreset,
+    theme = _ref4.theme;
+  return themePreset === 'dark' && darkInput({
+    theme: theme
+  });
+}, function (props) {
+  return props.alert && alertBorder;
+}, function (props) {
+  return props.isOpen && "\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t";
+});
+var Actions = vueEmotion.styled('div')(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n"])));
+
+exports.Actions = Actions;
+exports.Input = Input;
+exports.TextArea = TextArea;
+exports.noSuggestions = noSuggestions;
+exports.searchboxSuggestions = searchboxSuggestions;
+exports.suggestions = suggestions;
+exports.suggestionsContainer = suggestionsContainer;

package/dist/cjs/MultiDropdownList.js

@@ -10,19 +10,20 @@ require('@vue/babel-helper-vue-transform-on');
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
+require('@appbaseio/reactivecore/lib/utils/helper');
 require('@appbaseio/vue-emotion');
 require('@emotion/css');
 require('polished');
-var Button = require('./Button-d4da7470.js');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var Button = require('./Button-f96a0570.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var Title = require('./Title-8802a218.js');
-var DropDown = require('./DropDown-ec31bd3f.js');
-require('./Input-497be42a.js');
+var DropDown = require('./DropDown-ebe20e81.js');
+require('./Input-cee51a53.js');
 require('compute-scroll-into-view');
 var Container = require('./Container-29f049b2.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
@@ -61,6 +62,7 @@ var MultiDropdownList = {
     beforeValueChange: vueTypes.types.func,
     className: VueTypes.string.def(''),
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customQuery: vueTypes.types.func,
     dataField: vueTypes.types.stringRequired,
     defaultValue: vueTypes.types.stringArray,

package/dist/cjs/MultiList.js

@@ -12,14 +12,14 @@ var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
 require('@emotion/css');
 require('polished');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var Title = require('./Title-8802a218.js');
-var Input = require('./Input-497be42a.js');
+var Input = require('./Input-cee51a53.js');
 var Container = require('./Container-29f049b2.js');
 var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
 var FormControlList = require('./FormControlList-fadd792f.js');
@@ -45,6 +45,7 @@ var MultiList = {
     beforeValueChange: vueTypes.types.func,
     className: VueTypes.string.def(''),
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customQuery: vueTypes.types.func,
     dataField: vueTypes.types.stringRequired,
     defaultQuery: vueTypes.types.func,

package/dist/cjs/MultiRange.js

@@ -12,11 +12,11 @@ var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
 require('polished');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var Title = require('./Title-8802a218.js');
 var Container = require('./Container-29f049b2.js');
@@ -47,6 +47,7 @@ var MultiRange = {
     beforeValueChange: vueTypes.types.func,
     className: VueTypes.string.def(''),
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customQuery: vueTypes.types.func,
     data: vueTypes.types.data,
     dataField: vueTypes.types.stringRequired,

package/dist/cjs/{Pagination-b953a80a.js → Pagination-c53a18ab.js}

@@ -6,8 +6,8 @@ var reactivecore = require('@appbaseio/reactivecore');
 var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
-var Button = require('./Button-d4da7470.js');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var Button = require('./Button-f96a0570.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);

package/dist/cjs/RangeInput.js

@@ -13,16 +13,19 @@ var VueTypes = _interopDefault(require('vue-types'));
 var vueEmotion = require('@appbaseio/vue-emotion');
 require('@emotion/css');
 require('polished');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 require('./Title-8802a218.js');
 var Flex = require('./Flex-ddde6d26.js');
-var Input = require('./Input-497be42a.js');
+var Input = require('./Input-cee51a53.js');
 var Container = require('./Container-29f049b2.js');
+require('vue-slider-component/dist-css/vue-slider-component.umd.min.js');
+require('vue-slider-component/dist-css/vue-slider-component.css');
+require('vue-slider-component/theme/default.css');
 require('./ssr-8dd13d43.js');
 var RangeSlider = require('./RangeSlider.js');
 
@@ -81,6 +84,7 @@ var RangeInput = {
     stepValue: vueTypes.types.number,
     componentStyle: vueTypes.types.style,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     includeNullValues: VueTypes.bool,
     beforeValueChange: vueTypes.types.func,
     customQuery: vueTypes.types.func,

package/dist/cjs/RangeSlider.js

@@ -10,14 +10,17 @@ require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var Title = require('./Title-8802a218.js');
 var Container = require('./Container-29f049b2.js');
+var VueSlider = _interopDefault(require('vue-slider-component/dist-css/vue-slider-component.umd.min.js'));
+require('vue-slider-component/dist-css/vue-slider-component.css');
+require('vue-slider-component/theme/default.css');
 var ssr = require('./ssr-8dd13d43.js');
 
 var updateQuery = reactivecore.Actions.updateQuery,
@@ -51,6 +54,7 @@ var RangeSlider = {
     }),
     rangeLabels: vueTypes.types.rangeLabels,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     customQuery: vueTypes.types.func,
     data: vueTypes.types.data,
     dataField: vueTypes.types.stringRequired,
@@ -197,7 +201,7 @@ var RangeSlider = {
               "class": getClassName(_this2.$props.innerClass, 'slider')
             }, {
               "default": function _default() {
-                return [vue.createVNode(vue.resolveComponent("vue-slider-component"), vue.mergeProps({
+                return [vue.createVNode(VueSlider, vue.mergeProps({
                   "ref": "slider",
                   "modelValue": _this2.currentValue,
                   "min": _this2.$props.range.start,

package/dist/cjs/ReactiveBase.js

@@ -11,7 +11,7 @@ var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var vueEmotion = require('@appbaseio/vue-emotion');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('redux');
 var index = require('./index-1f41363f.js');
 var configureStore = require('@appbaseio/reactivecore/lib');
@@ -315,11 +315,11 @@ var light = {
 var dark = {
   typography: typography,
   colors: {
-    textColor: '#fff',
+    textColor: '#ffffffcf',
     backgroundColor: '#212121',
-    primaryTextColor: '#fff',
+    primaryTextColor: '#ffffffcf',
     primaryColor: '#2196F3',
-    titleColor: '#fff',
+    titleColor: '#ffffffcf',
     alertColor: '#d9534f',
     borderColor: '#666'
   }

package/dist/cjs/ReactiveComponent.js

@@ -9,11 +9,11 @@ var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 
 var _excluded = ["options"];
@@ -31,6 +31,7 @@ var ReactiveComponent = {
   name: 'ReactiveComponent',
   props: {
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     aggregationField: vueTypes.types.string,
     aggregationSize: VueTypes.number,
     size: VueTypes.number,

package/dist/cjs/ReactiveGoogleMap.js

@@ -10,16 +10,17 @@ var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on')
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
+require('@appbaseio/reactivecore/lib/utils/helper');
 var vueEmotion = require('@appbaseio/vue-emotion');
 var css = require('@emotion/css');
 require('polished');
-require('./Button-d4da7470.js');
-var vueTypes = require('./vueTypes-1bf00978.js');
-var Pagination = require('./Pagination-b953a80a.js');
+require('./Button-f96a0570.js');
+var vueTypes = require('./vueTypes-289a891a.js');
+var Pagination = require('./Pagination-c53a18ab.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 var FormControlList = require('./FormControlList-fadd792f.js');
 var VueGoogleMaps = require('vue-google-maps-community-fork');
@@ -108,6 +109,7 @@ var ReactiveMap = {
   props: {
     className: vueTypes.types.string,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     dataField: vueTypes.types.stringRequired,
     react: vueTypes.types.react,
     size: vueTypes.types.number,
@@ -1966,6 +1968,7 @@ var ReactiveGoogleMap = {
   props: {
     className: vueTypes.types.string,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     dataField: vueTypes.types.stringRequired,
     defaultQuery: VueTypes.func,
     loader: vueTypes.types.title,
@@ -2104,6 +2107,7 @@ var ReactiveGoogleMap = {
       "getMapRef": this.getMapRef,
       "renderMap": this.renderMap,
       "componentId": this.componentId,
+      "compoundClause": this.compoundClause,
       "className": this.className,
       "dataField": this.dataField,
       "defaultZoom": this.defaultZoom,

package/dist/cjs/ReactiveList.js

@@ -14,13 +14,13 @@ var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var vueEmotion = require('@appbaseio/vue-emotion');
 var css = require('@emotion/css');
 require('polished');
-require('./Button-d4da7470.js');
-var vueTypes = require('./vueTypes-1bf00978.js');
-var Pagination = require('./Pagination-b953a80a.js');
+require('./Button-f96a0570.js');
+var vueTypes = require('./vueTypes-289a891a.js');
+var Pagination = require('./Pagination-c53a18ab.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
 var index = require('./index-1f41363f.js');
-var ComponentWrapper = require('./ComponentWrapper-b5c78446.js');
+var ComponentWrapper = require('./ComponentWrapper-0334c14b.js');
 var PreferencesConsumer = require('./PreferencesConsumer-7bee3c57.js');
 require('./Title-8802a218.js');
 var ListItem = require('./ListItem-7a682970.js');
@@ -301,6 +301,7 @@ var ReactiveList = {
     // component props
     className: vueTypes.types.string,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     dataField: vueTypes.types.stringRequired,
     aggregationField: vueTypes.types.string,
     aggregationSize: VueTypes.number,
@@ -501,6 +502,11 @@ var ReactiveList = {
       if (this.currentPageState !== newVal && oldVal !== newVal) {
         this.setPage(newVal >= 0 ? newVal : 0);
       }
+    },
+    isLoading: function isLoading(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$emit('loading', newVal);
+      }
     }
   },
   mounted: function mounted() {

package/dist/cjs/ResultCard.js

@@ -10,7 +10,7 @@ var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
 require('@emotion/css');
 require('polished');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 var Title = require('./Title-8802a218.js');
 var Card = require('./Card-63968d94.js');
 

package/dist/cjs/ResultList.js

@@ -10,7 +10,7 @@ var VueTypes = _interopDefault(require('vue-types'));
 require('@appbaseio/vue-emotion');
 require('@emotion/css');
 require('polished');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 var Title = require('./Title-8802a218.js');
 var ListItem = require('./ListItem-7a682970.js');
 

package/dist/cjs/SelectedFilters.js

@@ -10,11 +10,12 @@ var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on')
 require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
+require('@appbaseio/reactivecore/lib/utils/helper');
 require('@appbaseio/vue-emotion');
 require('@emotion/css');
 require('polished');
-var Button = require('./Button-d4da7470.js');
-var vueTypes = require('./vueTypes-1bf00978.js');
+var Button = require('./Button-f96a0570.js');
+var vueTypes = require('./vueTypes-289a891a.js');
 require('redux');
 var index = require('./index-1f41363f.js');
 var Title = require('./Title-8802a218.js');