@appbaseio/vue-searchbox-mongodb
Version:
Lightweight searchbox component for Vue
3,114 lines • 110 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _mergeJSXProps2 = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
var VueTypes = _interopDefault(require('vue-types'));
var computeScrollIntoView = _interopDefault(require('compute-scroll-into-view'));
var styled = require('@appbaseio/vue-emotion');
var styled__default = _interopDefault(styled);
var emotion = require('emotion');
var searchbaseMongodb = require('@appbaseio/searchbase-mongodb');
function _extends() {
_extends = 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.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;
}
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)
};
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({}, 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);
};
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 = styled__default('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 = styled__default('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 = styled__default('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 = emotion.css(_templateObject$3());
var Input = styled__default('input')(_templateObject2(), input, function (props) {
return props.showIcon && props.iconPosition === 'left' && emotion.css(_templateObject3());
}, function (props) {
return props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject4());
}, function (props) {
return (// for clear icon
props.showClear && emotion.css(_templateObject5())
);
}, function (props) {
return (// for voice search icon
props.showVoiceSearch && emotion.css(_templateObject6())
);
}, function (props) {
return (// for clear icon with search icon
props.showClear && props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject7())
);
}, function (props) {
return (// for voice search icon with search icon
props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject8())
);
}, function (props) {
return (// for voice search icon with clear icon
props.showClear && props.showVoiceSearch && emotion.css(_templateObject9())
);
}, function (props) {
return (// for clear icon with search icon and voice search
props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && emotion.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({}, 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({
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({}, 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 = emotion.css(_templateObject$4());
var suggestionsContainer = emotion.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 = styled__default('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 = styled__default('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 = styled__default('div')(_templateObject$7(), function (_ref) {
var positionType = _ref.positionType;
if (positionType === 'absolute') {
return styled.css(_templateObject2$2());
}
return null;
}, function (_ref2) {
var groupPosition = _ref2.groupPosition;
return groupPosition === 'right' ? styled.css(_templateObject3$1()) : styled.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;
}
styled.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;
}
styled.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;
}
styled.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({}, 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({
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({}, getItemProps({
item: item
})),
"on": _extends({}, 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({}, getItemProps({
item: sugg
})),
"on": _extends({}, 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({}, getItemProps({
item: sugg
})),
"on": _extends({}, 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({}, 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({}, 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({}, {
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({}, {
autofocus: autoFocus,
value: instanceValue || ''
})
}), this.renderIcons()]), this.renderInputAddonAfter()])])]);
}
};
var SearchBoxWrapper = {
name: 'search-box-wrapper',
functional: true,
render: function render(h, context) {
return h(SearchComponent, _mergeJSXProps2([{
"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, _mergeJSXProps2([{
"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);
};
var SearchBase = {
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 searchbaseMongodb.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.install = function (Vue) {
Vue.component(SearchBase.name, SearchBase);
};
var version = "0.0.2";
var components = [SearchBoxWrapper, SearchBase, 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 = {
version: version,
install: install
};
exports.SearchBase = SearchBase;
exports.SearchBox = SearchBoxWrapper;
exports.SearchComponent = SearchComponent;
exports.default = index;
exports.install = install;
exports.version = version;