@appbaseio/reactivesearch-vue 3.0.0-rc.5.alpha.4 → 3.0.0-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@appbaseio/reactivesearch-vue.umd.js +39803 -35283
- package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js +32 -32
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
- package/dist/cjs/{Button-d4da7470.js → Button-9e179864.js} +13 -6
- package/dist/cjs/{ComponentWrapper-9146d811.js → ComponentWrapper-0b9ffb1a.js} +3 -0
- package/dist/cjs/DropDown-aef75c14.js +702 -0
- package/dist/cjs/DynamicRangeSlider.js +1 -1
- package/dist/cjs/{Input-497be42a.js → Input-56eba499.js} +71 -1
- package/dist/cjs/MultiDropdownList.js +6 -6
- package/dist/cjs/MultiList.js +3 -3
- package/dist/cjs/MultiRange.js +2 -2
- package/dist/cjs/{Pagination-b953a80a.js → Pagination-58a0cf3f.js} +2 -2
- package/dist/cjs/RangeInput.js +3 -3
- package/dist/cjs/RangeSlider.js +2 -2
- package/dist/cjs/ReactiveBase.js +4 -4
- package/dist/cjs/ReactiveComponent.js +2 -2
- package/dist/cjs/ReactiveGoogleMap.js +6 -5
- package/dist/cjs/ReactiveList.js +4 -4
- package/dist/cjs/ResultCard.js +1 -1
- package/dist/cjs/ResultList.js +1 -1
- package/dist/cjs/SelectedFilters.js +3 -2
- package/dist/cjs/SingleDropdownList.js +6 -6
- package/dist/cjs/SingleList.js +3 -3
- package/dist/cjs/SingleRange.js +2 -2
- package/dist/cjs/ToggleButton.js +4 -3
- package/dist/cjs/index.js +14 -13
- package/dist/cjs/install-70991c13.js +3820 -0
- package/dist/cjs/install.js +9 -9
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/{vueTypes-1bf00978.js → vueTypes-a5f1745e.js} +18 -0
- package/dist/es/{Button-fd869491.js → Button-c2ff5178.js} +13 -6
- package/dist/es/{ComponentWrapper-8a3c388d.js → ComponentWrapper-a2635cfc.js} +3 -0
- package/dist/es/DropDown-39fedff8.js +693 -0
- package/dist/es/DynamicRangeSlider.js +1 -1
- package/dist/es/{Input-f7499ef8.js → Input-11d211d2.js} +71 -2
- package/dist/es/MultiDropdownList.js +6 -6
- package/dist/es/MultiList.js +3 -3
- package/dist/es/MultiRange.js +2 -2
- package/dist/es/{Pagination-c2745bec.js → Pagination-ae401c33.js} +2 -2
- package/dist/es/RangeInput.js +3 -3
- package/dist/es/RangeSlider.js +2 -2
- package/dist/es/ReactiveBase.js +4 -4
- package/dist/es/ReactiveComponent.js +2 -2
- package/dist/es/ReactiveGoogleMap.js +6 -5
- package/dist/es/ReactiveList.js +4 -4
- package/dist/es/ResultCard.js +1 -1
- package/dist/es/ResultList.js +1 -1
- package/dist/es/SelectedFilters.js +3 -2
- package/dist/es/SingleDropdownList.js +6 -6
- package/dist/es/SingleList.js +3 -3
- package/dist/es/SingleRange.js +2 -2
- package/dist/es/ToggleButton.js +4 -3
- package/dist/es/index.js +11 -11
- package/dist/es/install-8296e8da.js +3812 -0
- package/dist/es/install.js +9 -9
- package/dist/es/version.js +1 -1
- package/dist/es/{vueTypes-f1923c72.js → vueTypes-09cab4d3.js} +18 -0
- package/package.json +7 -5
- package/dist/cjs/CancelSvg-ab0f8b23.js +0 -409
- package/dist/cjs/DropDown-e7125b72.js +0 -299
- package/dist/cjs/SearchBox.js +0 -1853
- package/dist/cjs/install-3c4520bf.js +0 -874
- package/dist/es/CancelSvg-e7ae49e9.js +0 -401
- package/dist/es/DropDown-13afb4d2.js +0 -295
- package/dist/es/SearchBox.js +0 -1847
- package/dist/es/install-ff8b0750.js +0 -868
|
@@ -0,0 +1,3820 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
4
|
+
|
|
5
|
+
var reactivecore = require('@appbaseio/reactivecore');
|
|
6
|
+
var constants = require('@appbaseio/reactivecore/lib/utils/constants');
|
|
7
|
+
var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
|
|
8
|
+
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
|
|
9
|
+
var vue = require('vue');
|
|
10
|
+
var VueTypes = _interopDefault(require('vue-types'));
|
|
11
|
+
var helper = require('@appbaseio/reactivecore/lib/utils/helper');
|
|
12
|
+
var vueEmotion = require('@appbaseio/vue-emotion');
|
|
13
|
+
var css = require('@emotion/css');
|
|
14
|
+
var polished = require('polished');
|
|
15
|
+
var Button = require('./Button-9e179864.js');
|
|
16
|
+
var vueTypes = require('./vueTypes-a5f1745e.js');
|
|
17
|
+
var ReactiveList = require('./ReactiveList.js');
|
|
18
|
+
var transform = require('@appbaseio/reactivecore/lib/utils/transform');
|
|
19
|
+
var index = require('./index-779ed366.js');
|
|
20
|
+
var ComponentWrapper = require('./ComponentWrapper-0b9ffb1a.js');
|
|
21
|
+
var PreferencesConsumer = require('./PreferencesConsumer-85dee673.js');
|
|
22
|
+
var Title = require('./Title-8802a218.js');
|
|
23
|
+
var ListItem = require('./ListItem-7a682970.js');
|
|
24
|
+
var Flex = require('./Flex-ddde6d26.js');
|
|
25
|
+
var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
|
|
26
|
+
var ReactiveBase = require('./ReactiveBase.js');
|
|
27
|
+
var hotkeys = _interopDefault(require('hotkeys-js'));
|
|
28
|
+
var remarkable = require('remarkable');
|
|
29
|
+
var DropDown = require('./DropDown-aef75c14.js');
|
|
30
|
+
var Input = require('./Input-56eba499.js');
|
|
31
|
+
var Container = require('./Container-29f049b2.js');
|
|
32
|
+
var Highlight = _interopDefault(require('vue-highlight-words'));
|
|
33
|
+
var query = require('@appbaseio/reactivecore/lib/actions/query');
|
|
34
|
+
var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
|
|
35
|
+
var FormControlList = require('./FormControlList-fadd792f.js');
|
|
36
|
+
var utils = require('./utils-c9bd5628.js');
|
|
37
|
+
var SingleList = require('./SingleList.js');
|
|
38
|
+
var MultiList = require('./MultiList.js');
|
|
39
|
+
var types = _interopDefault(require('@appbaseio/reactivecore/lib/utils/types'));
|
|
40
|
+
var SingleDropdownList = require('./SingleDropdownList.js');
|
|
41
|
+
var MultiDropdownList = require('./MultiDropdownList.js');
|
|
42
|
+
var ToggleButton = require('./ToggleButton.js');
|
|
43
|
+
var ReactiveComponent = require('./ReactiveComponent.js');
|
|
44
|
+
var DynamicRangeSlider = require('./DynamicRangeSlider.js');
|
|
45
|
+
var SingleRange = require('./SingleRange.js');
|
|
46
|
+
var MultiRange = require('./MultiRange.js');
|
|
47
|
+
var RangeSlider = require('./RangeSlider.js');
|
|
48
|
+
var RangeInput = require('./RangeInput.js');
|
|
49
|
+
var SelectedFilters = require('./SelectedFilters.js');
|
|
50
|
+
var ResultCard = require('./ResultCard.js');
|
|
51
|
+
var ResultList = require('./ResultList.js');
|
|
52
|
+
var StateProvider = require('./StateProvider.js');
|
|
53
|
+
|
|
54
|
+
var _templateObject;
|
|
55
|
+
var InputGroup = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: stretch;\n\twidth: 100%;\n"])));
|
|
56
|
+
InputGroup.defaultProps = {
|
|
57
|
+
className: 'input-group'
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var _templateObject$1;
|
|
61
|
+
var InputAddon = vueEmotion.styled('span')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #fafafa;\n border: 1px solid #ccc;\n border-radius: 2px;\n color: rgba(0, 0, 0, 0.85);\n font-size: 14px;\n font-weight: 400;\n padding: 0 11px;\n position: relative;\n transition: all 0.3s;\n box-sizing: border-box;\n overflow: hidden;\n\n &:first-of-type {\n border-right: none;\n }\n &:last-of-type {\n border-left: none;\n }\n"])));
|
|
62
|
+
InputAddon.defaultProps = {
|
|
63
|
+
className: 'input-addon'
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var getClassName = reactivecore.helper.getClassName;
|
|
67
|
+
var SuggestionWrapper = {
|
|
68
|
+
name: 'SuggestionWrapper',
|
|
69
|
+
props: {
|
|
70
|
+
innerClassName: vueTypes.types.string,
|
|
71
|
+
themePreset: vueTypes.types.themePreset,
|
|
72
|
+
innerClass: vueTypes.types.style
|
|
73
|
+
},
|
|
74
|
+
render: function render() {
|
|
75
|
+
var _this$$props = this.$props,
|
|
76
|
+
themePreset = _this$$props.themePreset,
|
|
77
|
+
innerClass = _this$$props.innerClass,
|
|
78
|
+
innerClassName = _this$$props.innerClassName;
|
|
79
|
+
return vue.createVNode("div", {
|
|
80
|
+
"class": Input.noSuggestions(themePreset) + " " + getClassName(innerClass, innerClassName || '')
|
|
81
|
+
}, [vue.createVNode("li", null, [this.$slots["default"]()])]);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
var _templateObject$2;
|
|
86
|
+
var highlightStyle = {
|
|
87
|
+
fontWeight: 600,
|
|
88
|
+
padding: 0,
|
|
89
|
+
backgroundColor: 'transparent',
|
|
90
|
+
color: 'inherit'
|
|
91
|
+
};
|
|
92
|
+
var PredictiveSuggestion = vueEmotion.styled('span')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
|
|
93
|
+
var SuggestionItem = {
|
|
94
|
+
name: 'SuggestionItem',
|
|
95
|
+
props: {
|
|
96
|
+
currentValue: vueTypes.types.string,
|
|
97
|
+
suggestion: vueTypes.types.any
|
|
98
|
+
},
|
|
99
|
+
render: function render() {
|
|
100
|
+
var _this = this;
|
|
101
|
+
var _this$suggestion = this.suggestion,
|
|
102
|
+
label = _this$suggestion.label,
|
|
103
|
+
value = _this$suggestion.value,
|
|
104
|
+
title = _this$suggestion.title,
|
|
105
|
+
description = _this$suggestion.description,
|
|
106
|
+
image = _this$suggestion.image,
|
|
107
|
+
isPredictiveSuggestion = _this$suggestion.isPredictiveSuggestion,
|
|
108
|
+
_suggestion_type = _this$suggestion._suggestion_type,
|
|
109
|
+
_category = _this$suggestion._category;
|
|
110
|
+
if (label) {
|
|
111
|
+
// label has highest precedence
|
|
112
|
+
return typeof label === 'string' ? vue.createVNode("div", {
|
|
113
|
+
"class": "trim"
|
|
114
|
+
}, [(_category ? false : isPredictiveSuggestion
|
|
115
|
+
// eslint-disable-next-line
|
|
116
|
+
|| !!_suggestion_type) ? vue.createVNode(PredictiveSuggestion, {
|
|
117
|
+
"innerHTML": label
|
|
118
|
+
}, null) : vue.createVNode(Highlight, {
|
|
119
|
+
"searchWords": _category ? [_category] : this.currentValue.split(' '),
|
|
120
|
+
"textToHighlight": label,
|
|
121
|
+
"autoEscape": true,
|
|
122
|
+
"highlightStyle": highlightStyle
|
|
123
|
+
}, null)]) : label;
|
|
124
|
+
}
|
|
125
|
+
if (title || image || description) {
|
|
126
|
+
return vue.createVNode(Flex.Flex, {
|
|
127
|
+
"alignItems": "center",
|
|
128
|
+
"css": {
|
|
129
|
+
width: '100%'
|
|
130
|
+
}
|
|
131
|
+
}, {
|
|
132
|
+
"default": function _default() {
|
|
133
|
+
return [image && vue.createVNode("div", {
|
|
134
|
+
"css": {
|
|
135
|
+
margin: 'auto',
|
|
136
|
+
marginRight: 10
|
|
137
|
+
}
|
|
138
|
+
}, [vue.createVNode("img", {
|
|
139
|
+
"src": image,
|
|
140
|
+
"alt": " ",
|
|
141
|
+
"height": "50px",
|
|
142
|
+
"width": "50px",
|
|
143
|
+
"css": {
|
|
144
|
+
objectFit: 'contain'
|
|
145
|
+
}
|
|
146
|
+
}, null)]), vue.createVNode(Flex.Flex, {
|
|
147
|
+
"direction": "column",
|
|
148
|
+
"css": {
|
|
149
|
+
width: image ? 'calc(100% - 60px)' : '100%'
|
|
150
|
+
}
|
|
151
|
+
}, {
|
|
152
|
+
"default": function _default() {
|
|
153
|
+
return [title && vue.createVNode("div", {
|
|
154
|
+
"class": "trim"
|
|
155
|
+
}, [vue.createVNode(Highlight, {
|
|
156
|
+
"searchWords": _this.currentValue.split(' '),
|
|
157
|
+
"textToHighlight": title,
|
|
158
|
+
"highlightStyle": highlightStyle,
|
|
159
|
+
"class": css.css({
|
|
160
|
+
fontSize: '1rem'
|
|
161
|
+
})
|
|
162
|
+
}, null)]), description && vue.createVNode("div", {
|
|
163
|
+
"class": ['trim', css.css({
|
|
164
|
+
marginTop: 3
|
|
165
|
+
})]
|
|
166
|
+
}, [vue.createVNode(Highlight, {
|
|
167
|
+
"searchWords": _this.currentValue.split(' '),
|
|
168
|
+
"textToHighlight": description,
|
|
169
|
+
"highlightStyle": highlightStyle
|
|
170
|
+
}, null)])];
|
|
171
|
+
}
|
|
172
|
+
})];
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
return value;
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
var SearchSvg = {
|
|
181
|
+
name: 'SearchSvg',
|
|
182
|
+
props: ['styles'],
|
|
183
|
+
render: function render() {
|
|
184
|
+
return vue.createVNode("svg", {
|
|
185
|
+
"alt": "Search",
|
|
186
|
+
"class": "search-icon",
|
|
187
|
+
"height": "12",
|
|
188
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
189
|
+
"viewBox": "0 0 15 15",
|
|
190
|
+
"style": _rollupPluginBabelHelpers._extends({
|
|
191
|
+
transform: 'scale(1.35)',
|
|
192
|
+
position: 'relative'
|
|
193
|
+
}, this.$props.styles ? this.$props.styles : {})
|
|
194
|
+
}, [vue.createVNode("title", null, [vue.createTextVNode("Search")]), vue.createVNode("path", {
|
|
195
|
+
"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'
|
|
196
|
+
}, null)]);
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
var _templateObject$3;
|
|
201
|
+
|
|
202
|
+
// eslint-disable-next-line
|
|
203
|
+
vueEmotion.createGlobalStyle(_templateObject$3 || (_templateObject$3 = _rollupPluginBabelHelpers._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"])));
|
|
204
|
+
var MicSvg = {
|
|
205
|
+
name: 'MicSvg',
|
|
206
|
+
props: ['className'],
|
|
207
|
+
render: function render() {
|
|
208
|
+
return vue.createVNode("svg", {
|
|
209
|
+
"viewBox": "0 0 480 480",
|
|
210
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
211
|
+
"id": "el_xS0FRzQjJ",
|
|
212
|
+
"width": 28,
|
|
213
|
+
"height": 28,
|
|
214
|
+
"className": this.$props.className,
|
|
215
|
+
"style": {
|
|
216
|
+
transform: 'scale(1.5)'
|
|
217
|
+
}
|
|
218
|
+
}, [vue.createVNode("g", {
|
|
219
|
+
"id": "el_TvxDfTAtKp",
|
|
220
|
+
"fillRule": "evenodd"
|
|
221
|
+
}, [vue.createVNode("g", {
|
|
222
|
+
"id": "el_D93PK3GbmJ",
|
|
223
|
+
"fillRule": "nonzero",
|
|
224
|
+
"style": {
|
|
225
|
+
fill: '#595959'
|
|
226
|
+
}
|
|
227
|
+
}, [vue.createVNode("path", {
|
|
228
|
+
"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",
|
|
229
|
+
"id": "el_uly3EwA2O3"
|
|
230
|
+
}, null), vue.createVNode("path", {
|
|
231
|
+
"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",
|
|
232
|
+
"id": "el_tnDbR4ytu4"
|
|
233
|
+
}, null)])])]);
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
var _templateObject$4;
|
|
238
|
+
|
|
239
|
+
// eslint-disable-next-line
|
|
240
|
+
vueEmotion.createGlobalStyle(_templateObject$4 || (_templateObject$4 = _rollupPluginBabelHelpers._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"])));
|
|
241
|
+
var MuteSvg = {
|
|
242
|
+
name: 'MuteSvg',
|
|
243
|
+
props: ['className'],
|
|
244
|
+
render: function render() {
|
|
245
|
+
return vue.createVNode("svg", {
|
|
246
|
+
"style": {
|
|
247
|
+
transform: 'scale(1.5)'
|
|
248
|
+
},
|
|
249
|
+
"viewBox": "0 0 480 480",
|
|
250
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
251
|
+
"id": "el_D1rEpH2zj",
|
|
252
|
+
"width": 28,
|
|
253
|
+
"height": 28,
|
|
254
|
+
"className": this.$props.className
|
|
255
|
+
}, [vue.createVNode("g", {
|
|
256
|
+
"id": "el_X81iT9kZYo",
|
|
257
|
+
"fillRule": "evenodd"
|
|
258
|
+
}, [vue.createVNode("g", {
|
|
259
|
+
"id": "el_gMpyalCphp"
|
|
260
|
+
}, [vue.createVNode("path", {
|
|
261
|
+
"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",
|
|
262
|
+
"id": "el_c7H-3u-D4l",
|
|
263
|
+
"fillRule": "nonzero",
|
|
264
|
+
"style": {
|
|
265
|
+
fill: '#595959'
|
|
266
|
+
}
|
|
267
|
+
}, null), vue.createVNode("path", {
|
|
268
|
+
"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",
|
|
269
|
+
"id": "el_qhFcdAAFwo",
|
|
270
|
+
"fillRule": "nonzero",
|
|
271
|
+
"style": {
|
|
272
|
+
fill: '#595959'
|
|
273
|
+
}
|
|
274
|
+
}, null), vue.createVNode("path", {
|
|
275
|
+
"d": "M11.5,206.5 L142.5,12.5",
|
|
276
|
+
"id": "el_M8X8g37WOI",
|
|
277
|
+
"strokeLinecap": "round",
|
|
278
|
+
"strokeLinejoin": "round"
|
|
279
|
+
}, null)])])]);
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
var _templateObject$5;
|
|
284
|
+
|
|
285
|
+
// eslint-disable-next-line
|
|
286
|
+
vueEmotion.createGlobalStyle(_templateObject$5 || (_templateObject$5 = _rollupPluginBabelHelpers._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"])));
|
|
287
|
+
var ListenSvg = {
|
|
288
|
+
name: 'ListenSvg',
|
|
289
|
+
props: ['className'],
|
|
290
|
+
render: function render() {
|
|
291
|
+
return vue.createVNode("svg", {
|
|
292
|
+
"viewBox": "0 0 480 480",
|
|
293
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
294
|
+
"xmlnsXlink": "http://www.w3.org/1999/xlink",
|
|
295
|
+
"id": "el_hiibMG0x-",
|
|
296
|
+
"width": 28,
|
|
297
|
+
"height": 29,
|
|
298
|
+
"className": this.$props.className,
|
|
299
|
+
"style": {
|
|
300
|
+
transform: 'scale(1.5)'
|
|
301
|
+
}
|
|
302
|
+
}, [vue.createVNode("defs", null, [vue.createVNode("path", {
|
|
303
|
+
"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",
|
|
304
|
+
"id": "path-1"
|
|
305
|
+
}, null), vue.createVNode("path", {
|
|
306
|
+
"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",
|
|
307
|
+
"id": "path-3"
|
|
308
|
+
}, null), vue.createVNode("path", {
|
|
309
|
+
"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",
|
|
310
|
+
"id": "path-5"
|
|
311
|
+
}, null), vue.createVNode("path", {
|
|
312
|
+
"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",
|
|
313
|
+
"id": "path-7"
|
|
314
|
+
}, null), vue.createVNode("path", {
|
|
315
|
+
"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",
|
|
316
|
+
"id": "path-9"
|
|
317
|
+
}, null), vue.createVNode("path", {
|
|
318
|
+
"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",
|
|
319
|
+
"id": "path-11"
|
|
320
|
+
}, null), vue.createVNode("path", {
|
|
321
|
+
"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",
|
|
322
|
+
"id": "path-13"
|
|
323
|
+
}, null), vue.createVNode("path", {
|
|
324
|
+
"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",
|
|
325
|
+
"id": "path-15"
|
|
326
|
+
}, null)]), vue.createVNode("g", {
|
|
327
|
+
"id": "el_QJeJ_2CDw5",
|
|
328
|
+
"fillRule": "evenodd"
|
|
329
|
+
}, [vue.createVNode("g", {
|
|
330
|
+
"id": "el_UYYCfubTRf"
|
|
331
|
+
}, [vue.createVNode("path", {
|
|
332
|
+
"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",
|
|
333
|
+
"id": "el_uzZNtK32Zi",
|
|
334
|
+
"fillRule": "nonzero",
|
|
335
|
+
"style": {
|
|
336
|
+
fill: '#0B6AFF'
|
|
337
|
+
}
|
|
338
|
+
}, null), vue.createVNode("path", {
|
|
339
|
+
"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",
|
|
340
|
+
"id": "el_EYKQ2N9Kgy",
|
|
341
|
+
"fillRule": "nonzero"
|
|
342
|
+
}, null), vue.createVNode("g", {
|
|
343
|
+
"id": "el_6SDP2LAgKC"
|
|
344
|
+
}, [vue.createVNode("mask", {
|
|
345
|
+
"id": "mask-2",
|
|
346
|
+
"fill": "#fff"
|
|
347
|
+
}, [vue.createVNode("use", {
|
|
348
|
+
"xlink:href": "#path-1"
|
|
349
|
+
}, null)]), vue.createVNode("path", {
|
|
350
|
+
"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",
|
|
351
|
+
"id": "el_-Vm65Ltfy7",
|
|
352
|
+
"fillRule": "nonzero",
|
|
353
|
+
"mask": "url(#mask-2)"
|
|
354
|
+
}, null), vue.createVNode("rect", {
|
|
355
|
+
"id": "el_q04iZcSim4",
|
|
356
|
+
"mask": "url(#mask-2)",
|
|
357
|
+
"x": "0.279",
|
|
358
|
+
"width": "77",
|
|
359
|
+
"height": "130"
|
|
360
|
+
}, null)]), vue.createVNode("g", {
|
|
361
|
+
"id": "el_6WKby7wXqV"
|
|
362
|
+
}, [vue.createVNode("mask", {
|
|
363
|
+
"id": "mask-4",
|
|
364
|
+
"fill": "#fff"
|
|
365
|
+
}, [vue.createVNode("use", {
|
|
366
|
+
"xlink:href": "#path-3"
|
|
367
|
+
}, null)]), vue.createVNode("path", {
|
|
368
|
+
"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",
|
|
369
|
+
"id": "el_9bggsfQOtU",
|
|
370
|
+
"fillRule": "nonzero",
|
|
371
|
+
"mask": "url(#mask-4)"
|
|
372
|
+
}, null), vue.createVNode("rect", {
|
|
373
|
+
"id": "el_NKxqi9eIym",
|
|
374
|
+
"mask": "url(#mask-4)",
|
|
375
|
+
"x": "0.279",
|
|
376
|
+
"width": "77",
|
|
377
|
+
"height": "115"
|
|
378
|
+
}, null)]), vue.createVNode("g", {
|
|
379
|
+
"id": "el_Wi-my975tM"
|
|
380
|
+
}, [vue.createVNode("mask", {
|
|
381
|
+
"id": "mask-6",
|
|
382
|
+
"fill": "#fff"
|
|
383
|
+
}, [vue.createVNode("use", {
|
|
384
|
+
"xlink:href": "#path-5"
|
|
385
|
+
}, null)]), vue.createVNode("path", {
|
|
386
|
+
"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",
|
|
387
|
+
"id": "el_zclQ34fvf7",
|
|
388
|
+
"fillRule": "nonzero",
|
|
389
|
+
"mask": "url(#mask-6)"
|
|
390
|
+
}, null), vue.createVNode("rect", {
|
|
391
|
+
"id": "el_1OsvRT8HkeZ",
|
|
392
|
+
"mask": "url(#mask-6)",
|
|
393
|
+
"x": "0.279",
|
|
394
|
+
"width": "77",
|
|
395
|
+
"height": "100"
|
|
396
|
+
}, null)]), vue.createVNode("g", {
|
|
397
|
+
"id": "el_DkfFFTaFxy8"
|
|
398
|
+
}, [vue.createVNode("mask", {
|
|
399
|
+
"id": "mask-8",
|
|
400
|
+
"fill": "#fff"
|
|
401
|
+
}, [vue.createVNode("use", {
|
|
402
|
+
"xlink:href": "#path-7"
|
|
403
|
+
}, null)]), vue.createVNode("path", {
|
|
404
|
+
"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",
|
|
405
|
+
"id": "el_aa9sjx4H0vA",
|
|
406
|
+
"fillRule": "nonzero",
|
|
407
|
+
"mask": "url(#mask-8)"
|
|
408
|
+
}, null), vue.createVNode("rect", {
|
|
409
|
+
"id": "el_tea114vWg0J",
|
|
410
|
+
"mask": "url(#mask-8)",
|
|
411
|
+
"x": "0.279",
|
|
412
|
+
"width": "77",
|
|
413
|
+
"height": "85"
|
|
414
|
+
}, null)]), vue.createVNode("g", {
|
|
415
|
+
"id": "el_34IgwiMB5rf"
|
|
416
|
+
}, [vue.createVNode("mask", {
|
|
417
|
+
"id": "mask-10",
|
|
418
|
+
"fill": "#fff"
|
|
419
|
+
}, [vue.createVNode("use", {
|
|
420
|
+
"xlink:href": "#path-9"
|
|
421
|
+
}, null)]), vue.createVNode("path", {
|
|
422
|
+
"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",
|
|
423
|
+
"id": "el_z5u6RAFhx7d",
|
|
424
|
+
"fillRule": "nonzero",
|
|
425
|
+
"mask": "url(#mask-10)"
|
|
426
|
+
}, null), vue.createVNode("rect", {
|
|
427
|
+
"id": "el_7nfuWmA5Uhy",
|
|
428
|
+
"mask": "url(#mask-10)",
|
|
429
|
+
"x": "0.279",
|
|
430
|
+
"width": "77",
|
|
431
|
+
"height": "70"
|
|
432
|
+
}, null)]), vue.createVNode("g", {
|
|
433
|
+
"id": "el_DeebuCsPTGA"
|
|
434
|
+
}, [vue.createVNode("mask", {
|
|
435
|
+
"id": "mask-12",
|
|
436
|
+
"fill": "#fff"
|
|
437
|
+
}, [vue.createVNode("use", {
|
|
438
|
+
"xlink:href": "#path-11"
|
|
439
|
+
}, null)]), vue.createVNode("path", {
|
|
440
|
+
"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",
|
|
441
|
+
"id": "el__ZcqlS20zcw",
|
|
442
|
+
"fillRule": "nonzero",
|
|
443
|
+
"mask": "url(#mask-12)"
|
|
444
|
+
}, null), vue.createVNode("rect", {
|
|
445
|
+
"id": "el_8DnEQnD7VWV",
|
|
446
|
+
"mask": "url(#mask-12)",
|
|
447
|
+
"x": "0.279",
|
|
448
|
+
"width": "77",
|
|
449
|
+
"height": "55"
|
|
450
|
+
}, null)]), vue.createVNode("g", {
|
|
451
|
+
"id": "el_ZOjjrPTvyrv"
|
|
452
|
+
}, [vue.createVNode("mask", {
|
|
453
|
+
"id": "mask-14",
|
|
454
|
+
"fill": "#fff"
|
|
455
|
+
}, [vue.createVNode("use", {
|
|
456
|
+
"xlink:href": "#path-13"
|
|
457
|
+
}, null)]), vue.createVNode("path", {
|
|
458
|
+
"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",
|
|
459
|
+
"id": "el_FYYKCI_u24e",
|
|
460
|
+
"fillRule": "nonzero",
|
|
461
|
+
"mask": "url(#mask-14)"
|
|
462
|
+
}, null), vue.createVNode("rect", {
|
|
463
|
+
"id": "el_XZty4MnTp5Y",
|
|
464
|
+
"mask": "url(#mask-14)",
|
|
465
|
+
"x": "0.279",
|
|
466
|
+
"width": "77",
|
|
467
|
+
"height": "40"
|
|
468
|
+
}, null)]), vue.createVNode("g", {
|
|
469
|
+
"id": "el_2FATegVmf0K"
|
|
470
|
+
}, [vue.createVNode("mask", {
|
|
471
|
+
"id": "mask-16",
|
|
472
|
+
"fill": "#fff"
|
|
473
|
+
}, [vue.createVNode("use", {
|
|
474
|
+
"xlink:href": "#path-15"
|
|
475
|
+
}, null)]), vue.createVNode("path", {
|
|
476
|
+
"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",
|
|
477
|
+
"id": "el_RMT1KUfbdF8",
|
|
478
|
+
"fillRule": "nonzero",
|
|
479
|
+
"mask": "url(#mask-16)"
|
|
480
|
+
}, null), vue.createVNode("rect", {
|
|
481
|
+
"id": "el_RgLcovvFiO1",
|
|
482
|
+
"mask": "url(#mask-16)",
|
|
483
|
+
"x": "0.279",
|
|
484
|
+
"width": "77",
|
|
485
|
+
"height": "25"
|
|
486
|
+
}, null)])])])]);
|
|
487
|
+
}
|
|
488
|
+
};
|
|
489
|
+
|
|
490
|
+
var STATUS = {
|
|
491
|
+
inactive: 'INACTIVE',
|
|
492
|
+
stopped: 'STOPPED',
|
|
493
|
+
active: 'ACTIVE',
|
|
494
|
+
denied: 'DENIED'
|
|
495
|
+
};
|
|
496
|
+
var Mic = {
|
|
497
|
+
name: 'Mic',
|
|
498
|
+
props: {
|
|
499
|
+
children: vueTypes.types.title,
|
|
500
|
+
lang: VueTypes.string.def('en-US'),
|
|
501
|
+
iconPosition: VueTypes.string.def('left'),
|
|
502
|
+
handleResult: vueTypes.types.func,
|
|
503
|
+
onNoMatch: vueTypes.types.func,
|
|
504
|
+
onError: vueTypes.types.func,
|
|
505
|
+
getInstance: vueTypes.types.func,
|
|
506
|
+
render: vueTypes.types.func,
|
|
507
|
+
className: vueTypes.types.string,
|
|
508
|
+
applyClearStyle: VueTypes.bool,
|
|
509
|
+
showIcon: VueTypes.bool
|
|
510
|
+
},
|
|
511
|
+
methods: {
|
|
512
|
+
getComponent: function getComponent() {
|
|
513
|
+
var status = this.$data.status;
|
|
514
|
+
var data = {
|
|
515
|
+
handleClick: this.handleClick,
|
|
516
|
+
status: status
|
|
517
|
+
};
|
|
518
|
+
return index.getComponent(data, this);
|
|
519
|
+
},
|
|
520
|
+
stopMic: function stopMic() {
|
|
521
|
+
if (this.instance) {
|
|
522
|
+
this.status = STATUS.inactive;
|
|
523
|
+
this.instance.stop();
|
|
524
|
+
this.instance = null;
|
|
525
|
+
}
|
|
526
|
+
},
|
|
527
|
+
handleClick: function handleClick() {
|
|
528
|
+
var _this = this;
|
|
529
|
+
this.results = [];
|
|
530
|
+
if (window && window.SpeechRecognition) {
|
|
531
|
+
var status = this.$data.status;
|
|
532
|
+
if (status === STATUS.active) {
|
|
533
|
+
this.status = STATUS.inactive;
|
|
534
|
+
}
|
|
535
|
+
var _this$$props = this.$props,
|
|
536
|
+
handleResult = _this$$props.handleResult,
|
|
537
|
+
onNoMatch = _this$$props.onNoMatch,
|
|
538
|
+
onError = _this$$props.onError,
|
|
539
|
+
lang = _this$$props.lang,
|
|
540
|
+
getInstance = _this$$props.getInstance;
|
|
541
|
+
var _window = window,
|
|
542
|
+
SpeechRecognition = _window.SpeechRecognition;
|
|
543
|
+
if (this.instance && this.status !== STATUS.denied) {
|
|
544
|
+
this.status = STATUS.inactive;
|
|
545
|
+
this.instance.stop();
|
|
546
|
+
this.instance = null;
|
|
547
|
+
return;
|
|
548
|
+
}
|
|
549
|
+
this.instance = new SpeechRecognition();
|
|
550
|
+
this.instance.continuous = true;
|
|
551
|
+
this.instance.interimResults = true;
|
|
552
|
+
this.instance.lang = lang;
|
|
553
|
+
if (getInstance) {
|
|
554
|
+
getInstance(this.instance);
|
|
555
|
+
}
|
|
556
|
+
this.instance.start();
|
|
557
|
+
this.instance.onstart = function () {
|
|
558
|
+
_this.status = STATUS.active;
|
|
559
|
+
};
|
|
560
|
+
this.instance.onresult = function (_ref) {
|
|
561
|
+
var results = _ref.results,
|
|
562
|
+
timeStamp = _ref.timeStamp;
|
|
563
|
+
_this.stopMic();
|
|
564
|
+
if (handleResult) {
|
|
565
|
+
handleResult({
|
|
566
|
+
results: results,
|
|
567
|
+
timeStamp: timeStamp
|
|
568
|
+
});
|
|
569
|
+
}
|
|
570
|
+
_this.results.push({
|
|
571
|
+
results: results,
|
|
572
|
+
timeStamp: timeStamp
|
|
573
|
+
});
|
|
574
|
+
};
|
|
575
|
+
this.instance.onnomatch = function (e) {
|
|
576
|
+
return onNoMatch ? onNoMatch(e) : console.warn(e);
|
|
577
|
+
};
|
|
578
|
+
this.instance.onerror = function (e) {
|
|
579
|
+
if (e.error === 'no-speech' || e.error === 'audio-capture') {
|
|
580
|
+
_this.status = STATUS.inactive;
|
|
581
|
+
} else if (e.error === 'not-allowed') {
|
|
582
|
+
_this.status = STATUS.denied;
|
|
583
|
+
}
|
|
584
|
+
console.error(e);
|
|
585
|
+
if (onError) {
|
|
586
|
+
onError(e);
|
|
587
|
+
}
|
|
588
|
+
};
|
|
589
|
+
|
|
590
|
+
/* Below Two methods run when Continuous is False */
|
|
591
|
+
this.instance.onspeechend = function () {
|
|
592
|
+
_this.status = STATUS.inactive;
|
|
593
|
+
};
|
|
594
|
+
this.instance.onaudioend = function () {
|
|
595
|
+
_this.status = STATUS.inactive;
|
|
596
|
+
};
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
},
|
|
600
|
+
computed: {
|
|
601
|
+
hasCustomRenderer: function hasCustomRenderer() {
|
|
602
|
+
return index.hasCustomRenderer(this);
|
|
603
|
+
},
|
|
604
|
+
Icon: function Icon() {
|
|
605
|
+
var status = this.$data.status;
|
|
606
|
+
var className = this.$props.className;
|
|
607
|
+
switch (status) {
|
|
608
|
+
case STATUS.active:
|
|
609
|
+
return vue.createVNode(ListenSvg, {
|
|
610
|
+
"className": className,
|
|
611
|
+
"nativeOnClick": this.handleClick
|
|
612
|
+
}, null);
|
|
613
|
+
case STATUS.stopped:
|
|
614
|
+
case STATUS.denied:
|
|
615
|
+
return vue.createVNode(MuteSvg, {
|
|
616
|
+
"className": className,
|
|
617
|
+
"nativeOnClick": this.handleClick
|
|
618
|
+
}, null);
|
|
619
|
+
default:
|
|
620
|
+
return vue.createVNode(MicSvg, {
|
|
621
|
+
"className": className,
|
|
622
|
+
"nativeOnClick": this.handleClick
|
|
623
|
+
}, null);
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
data: function data() {
|
|
628
|
+
return {
|
|
629
|
+
status: STATUS.inactive
|
|
630
|
+
};
|
|
631
|
+
},
|
|
632
|
+
created: function created() {
|
|
633
|
+
this.results = [];
|
|
634
|
+
if (typeof window !== 'undefined') {
|
|
635
|
+
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition || null;
|
|
636
|
+
if (!window.SpeechRecognition) {
|
|
637
|
+
console.error('SpeechRecognition is not supported in this browser. Please check the browser compatibility at https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility.');
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
},
|
|
641
|
+
render: function render() {
|
|
642
|
+
var _this2 = this;
|
|
643
|
+
if (this.hasCustomRenderer) {
|
|
644
|
+
return this.getComponent();
|
|
645
|
+
}
|
|
646
|
+
return vue.createVNode(DropDown.IconWrapper, null, {
|
|
647
|
+
"default": function _default() {
|
|
648
|
+
return [_this2.Icon];
|
|
649
|
+
}
|
|
650
|
+
});
|
|
651
|
+
}
|
|
652
|
+
};
|
|
653
|
+
|
|
654
|
+
var CustomSvg = {
|
|
655
|
+
name: 'CustomSvg',
|
|
656
|
+
props: {
|
|
657
|
+
className: String,
|
|
658
|
+
icon: Function,
|
|
659
|
+
type: String
|
|
660
|
+
},
|
|
661
|
+
data: function data() {
|
|
662
|
+
return {
|
|
663
|
+
customIcon: this.$props.icon && typeof this.$props.icon === 'function' ? this.$props.icon() : null
|
|
664
|
+
};
|
|
665
|
+
},
|
|
666
|
+
render: function render() {
|
|
667
|
+
if (this.customIcon) {
|
|
668
|
+
return vue.createVNode("div", {
|
|
669
|
+
"class": this.$props.className
|
|
670
|
+
}, [this.customIcon]);
|
|
671
|
+
}
|
|
672
|
+
if (this.$props.type === 'recent-search-icon') {
|
|
673
|
+
return vue.createVNode("svg", {
|
|
674
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
675
|
+
"alt": "Recent Search",
|
|
676
|
+
"height": "20",
|
|
677
|
+
"width": "20",
|
|
678
|
+
"viewBox": "0 0 24 24",
|
|
679
|
+
"style": {
|
|
680
|
+
fill: '#707070'
|
|
681
|
+
},
|
|
682
|
+
"class": this.$props.className
|
|
683
|
+
}, [vue.createVNode("path", {
|
|
684
|
+
"d": "M0 0h24v24H0z",
|
|
685
|
+
"fill": "none"
|
|
686
|
+
}, null), vue.createVNode("path", {
|
|
687
|
+
"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"
|
|
688
|
+
}, null)]);
|
|
689
|
+
}
|
|
690
|
+
if (this.$props.type === 'promoted-search-icon') {
|
|
691
|
+
return vue.createVNode("svg", {
|
|
692
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
693
|
+
"width": "20",
|
|
694
|
+
"alt": "promoted search",
|
|
695
|
+
"height": "20",
|
|
696
|
+
"viewBox": "0 0 24 24",
|
|
697
|
+
"class": this.$props.className,
|
|
698
|
+
"style": {
|
|
699
|
+
fill: '#707070'
|
|
700
|
+
}
|
|
701
|
+
}, [vue.createVNode("path", {
|
|
702
|
+
"d": "M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"
|
|
703
|
+
}, null)]);
|
|
704
|
+
}
|
|
705
|
+
if (this.$props.type === 'popular-search-icon') {
|
|
706
|
+
return vue.createVNode("svg", {
|
|
707
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
708
|
+
"alt": "Popular Search",
|
|
709
|
+
"height": "20",
|
|
710
|
+
"width": "20",
|
|
711
|
+
"viewBox": "0 0 24 24",
|
|
712
|
+
"style": {
|
|
713
|
+
fill: '#707070'
|
|
714
|
+
},
|
|
715
|
+
"class": this.$props.className
|
|
716
|
+
}, [vue.createVNode("path", {
|
|
717
|
+
"d": "M0 0h24v24H0z",
|
|
718
|
+
"fill": "none"
|
|
719
|
+
}, null), vue.createVNode("path", {
|
|
720
|
+
"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"
|
|
721
|
+
}, null)]);
|
|
722
|
+
}
|
|
723
|
+
return vue.createVNode(SearchSvg, {
|
|
724
|
+
"styles": {
|
|
725
|
+
position: 'relative',
|
|
726
|
+
fill: '#707070',
|
|
727
|
+
left: '3px',
|
|
728
|
+
marginRight: '8px'
|
|
729
|
+
}
|
|
730
|
+
}, null);
|
|
731
|
+
}
|
|
732
|
+
};
|
|
733
|
+
|
|
734
|
+
var _templateObject$6;
|
|
735
|
+
var AutofillSvgIcon = vueEmotion.styled('button')(_templateObject$6 || (_templateObject$6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tmargin-left: auto;\n\tposition: relative;\n\tright: -3px;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tz-index: 111000;\n\n\tsvg {\n\t\tcursor: pointer;\n\t\tfill: #707070;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tsvg {\n\t\t\tfill: #1c1a1a;\n\t\t}\n\t}\n"])));
|
|
736
|
+
var AutoFillSvg = {
|
|
737
|
+
name: 'AutoFillSvg',
|
|
738
|
+
render: function render() {
|
|
739
|
+
return vue.createVNode(AutofillSvgIcon, {
|
|
740
|
+
"onClick": this.$attrs.click
|
|
741
|
+
}, {
|
|
742
|
+
"default": function _default() {
|
|
743
|
+
return [vue.createVNode("svg", {
|
|
744
|
+
"viewBox": "0 0 24 24"
|
|
745
|
+
}, [vue.createVNode("path", {
|
|
746
|
+
"d": "M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z"
|
|
747
|
+
}, null)])];
|
|
748
|
+
}
|
|
749
|
+
});
|
|
750
|
+
},
|
|
751
|
+
methods: {
|
|
752
|
+
clicked: function clicked(e) {
|
|
753
|
+
e.stopPropagation();
|
|
754
|
+
window.console.log('hey', e);
|
|
755
|
+
}
|
|
756
|
+
}
|
|
757
|
+
};
|
|
758
|
+
|
|
759
|
+
var _templateObject$7, _templateObject2;
|
|
760
|
+
var TagsContainer = vueEmotion.styled('div')(_templateObject$7 || (_templateObject$7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-top: 10px;\n\twidth: 100%;\n"])));
|
|
761
|
+
var TagItem = vueEmotion.styled('span')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcursor: default;\n\tbox-sizing: border-box;\n\tmargin: 0 4px 4px 0;\n\tcolor: #000000d9;\n\tfont-size: 14px;\n\tfont-variant: tabular-nums;\n\tline-height: 1.5715;\n\tlist-style: none;\n\tfont-feature-settings: 'tnum';\n\tdisplay: inline-block;\n\theight: auto;\n\tpadding: 0 2px 0 7px;\n\tfont-size: 12px;\n\tline-height: 22px;\n\twhite-space: nowrap;\n\tbackground: #fafafa;\n\tborder: 1px solid #d9d9d9;\n\tborder-radius: 2px;\n\topacity: 1;\n\ttransition: all 0.3s;\n\n\tspan.close-icon {\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\theight: 15px;\n\t\t\tposition: relative;\n\t\t\ttop: 4px;\n\t\t\tfill: #262626;\n\t\t}\n\t}\n"])));
|
|
762
|
+
|
|
763
|
+
var _templateObject$8, _templateObject2$1, _templateObject3;
|
|
764
|
+
var skeletonAnimation = css.keyframes(_templateObject$8 || (_templateObject$8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n 0% {\n background-position: 100% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n"])));
|
|
765
|
+
var SkeletonLoader = vueEmotion.styled('div')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n"])));
|
|
766
|
+
var SkeletonLine = vueEmotion.styled('div')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\theight: 20px;\n\tbackground: linear-gradient(\n\t\t90deg,\n\t\trgba(220, 220, 220, 0.5) 25%,\n\t\trgba(240, 240, 240, 0.9) 50%,\n\t\trgba(220, 220, 220, 0.5) 75%\n\t);\n\tbackground-size: 200% 100%;\n\tanimation: ", " 1.5s infinite;\n"])), skeletonAnimation);
|
|
767
|
+
var HorizontalSkeletonLoader = vue.defineComponent({
|
|
768
|
+
name: 'HorizontalSkeletonLoader',
|
|
769
|
+
render: function render() {
|
|
770
|
+
return vue.createVNode(SkeletonLoader, null, {
|
|
771
|
+
"default": function _default() {
|
|
772
|
+
return [vue.createVNode(SkeletonLine, null, null), vue.createVNode(SkeletonLine, null, null), vue.createVNode(SkeletonLine, null, null), vue.createVNode(SkeletonLine, null, null)];
|
|
773
|
+
}
|
|
774
|
+
});
|
|
775
|
+
}
|
|
776
|
+
});
|
|
777
|
+
|
|
778
|
+
var _templateObject$9, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
779
|
+
var Chatbox = vueEmotion.styled('div')(_templateObject$9 || (_templateObject$9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding: 10px;\n\tbackground-color: #fafafa;\n\twidth: 100%;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 0px 6px;\n\tborder-radius: 6px;\n\tmargin-bottom: 20px;\n\tbackground-color: ", ";\n"])), function (props) {
|
|
780
|
+
return props.theme && props.theme.colors ? props.theme.colors.backgroundColor : '#fff';
|
|
781
|
+
});
|
|
782
|
+
var ChatContainer = vueEmotion.styled('div')(_templateObject2$2 || (_templateObject2$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tposition: relative;\n\t.--ai-answer-error-container {\n\t\ttext-align: center;\n\t\tposition: absolute;\n\t\tbottom: 0px;\n\t\t", ";\n\t\tz-index: 1;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\twidth: 100%;\n\n\t\t.--default-error-element {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tpadding: 10px;\n\t\t\tbackground-color: ", ";\n\t\t\tbox-shadow: 0 -5px 5px -2px\n\t\t\t\t", ";\n\n\t\t\tspan {\n\t\t\t\tmargin-bottom: 5px;\n\t\t\t}\n\n\t\t\tbutton {\n\t\t\t}\n\t\t}\n\t}\n\n\t", ";\n"])), function (props) {
|
|
783
|
+
return props.showInput ? 'bottom: 48px;' : '';
|
|
784
|
+
}, function (props) {
|
|
785
|
+
return props.theme && props.theme.colors && props.theme.colors.backgroundColor ? props.theme.colors.backgroundColor : '#fff';
|
|
786
|
+
}, function (props) {
|
|
787
|
+
return props.theme && props.theme.colors && props.theme.colors.backgroundColor ? props.theme.colors.backgroundColor : '#fff';
|
|
788
|
+
}, function (props) {
|
|
789
|
+
return props.showInput ? ".--ai-answer-feedback-container {\n\t\tmargin-top: 15px;\n\t\tmargin-bottom: -10px;\n\t}" : ".--ai-answer-feedback-container {\n\t\tmargin-top: 4px;\n\t}";
|
|
790
|
+
});
|
|
791
|
+
var MessagesContainer = vueEmotion.styled('div')(_templateObject3$1 || (_templateObject3$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmax-height: 400px;\n overflow-y: auto;\n\tpadding: 10px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 200px;\n\n}};\n"])));
|
|
792
|
+
var typingDots = css.keyframes(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-70%);\n }\n 100% {\n transform: translateY(0);\n }\n"])));
|
|
793
|
+
var TypingIndicator = vueEmotion.styled('div')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 5px !important;\n"])));
|
|
794
|
+
var TypingDot = vueEmotion.styled('div')(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 6px;\n\theight: 6px;\n\tbackground-color: ", ";\n\tborder-radius: 50%;\n\tmargin: 0 2px !important;\n\tanimation: ", " 1s infinite;\n\t&:nth-child(2) {\n\t\tanimation-delay: 0.2s;\n\t}\n\t&:nth-child(3) {\n\t\tanimation-delay: 0.4s;\n\t}\n"])), function (props) {
|
|
795
|
+
var finalColor;
|
|
796
|
+
if (props.isSender) {
|
|
797
|
+
finalColor = props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor;
|
|
798
|
+
} else {
|
|
799
|
+
finalColor = props.themePreset !== 'dark' ? props.theme.colors.borderColor : props.theme.colors.textColor;
|
|
800
|
+
}
|
|
801
|
+
return finalColor;
|
|
802
|
+
}, typingDots);
|
|
803
|
+
var resetCSS = function resetCSS(props) {
|
|
804
|
+
return "\n\thtml,\n\tbody,\n\tdiv,\n\tspan,\n\tapplet,\n\tobject,\n\tiframe,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tp,\n\tblockquote,\n\tpre,\n\ta,\n\tabbr,\n\tacronym,\n\taddress,\n\tbig,\n\tcite,\n\tcode,\n\tdel,\n\tdfn,\n\tem,\n\timg,\n\tins,\n\tkbd,\n\tq,\n\ts,\n\tsamp,\n\tsmall,\n\tstrike,\n\tstrong,\n\tsub,\n\tsup,\n\ttt,\n\tvar,\n\tb,\n\tu,\n\ti,\n\tcenter,\n\tdl,\n\tdt,\n\tdd,\n\tol,\n\tul,\n\tli,\n\tfieldset,\n\tform,\n\tlabel,\n\tlegend,\n\ttable,\n\tcaption,\n\ttbody,\n\ttfoot,\n\tthead,\n\ttr,\n\tth,\n\ttd,\n\tarticle,\n\taside,\n\tcanvas,\n\tdetails,\n\tembed,\n\tfigure,\n\tfigcaption,\n\tfooter,\n\theader,\n\thgroup,\n\tmenu,\n\tnav,\n\toutput,\n\truby,\n\tsection,\n\tsummary,\n\ttime,\n\tmark,\n\taudio,\n\tvideo {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: 0;\n\t\tfont-size: 100%;\n\t\tfont: inherit;\n\t\tvertical-align: baseline;\n\t\toverflow-wrap: anywhere;\n\t}\n\tpre {\n\t\tmargin: 10px auto;\n\t}\n\ttable {\n\t\tmargin: 10px auto;\n\t\tborder-collapse: collapse;\n\t\tborder-spacing: 0;\n\t}\n\ttr {\n\t\tborder-bottom: 1px solid #ccc;\n\t}\n\tth,\n\ttd {\n\t\ttext-align: left;\n\t\tpadding: 4px;\n\t\tborder: 1px solid;\n\t\tborder-collapse: collapse;\n\t}\n\tpre,\n\tcode {\n\t\tpadding: 0.6em 0.4em;\n\t\tbackground: " + (
|
|
805
|
+
// eslint-disable-next-line no-nested-ternary
|
|
806
|
+
props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryColor : props.theme.colors.borderColor : props.theme.colors.borderColor) + ";\n\t}\n\n\tcode {\n\t\tline-height: normal;\n\n\t\tcolor: " + (
|
|
807
|
+
// eslint-disable-next-line no-nested-ternary
|
|
808
|
+
props.isSender ? props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor : props.theme.colors.primaryTextColor) + ";\n\t\tborder-radius: 3px;\n\t\tfont-size: 85%;\n\t\tpadding: 0.2em 0.4em;\n\t\tmargin-top: 5px;\n\t\tdisplay: inline-block;\n\t\toverflow: auto;\n\t\twidth: fit-content;\n\t\tmax-width: 100%;\n\t}\n\tul,\n\tol {\n\t\tlist-style-position: inside;\n\n\t}\n\n\tli{\n\t\tdisplay: unset;\n\t\tcursor: default;\n\t\tpadding: initial;\n\n\t\t&:hover{\n\t\t\tbackground-color: initial;\n\t\t}\n\t}\n";
|
|
809
|
+
};
|
|
810
|
+
var messageBGColor = function messageBGColor(props) {
|
|
811
|
+
var finalBGColor;
|
|
812
|
+
if (props.isSender) {
|
|
813
|
+
finalBGColor = props.themePreset !== 'dark' ? props.theme.colors.primaryColor : props.theme.colors.borderColor;
|
|
814
|
+
} else {
|
|
815
|
+
finalBGColor = props.themePreset !== 'dark' ? polished.lighten(0.53, props.theme.colors.borderColor) : props.theme.colors.backgroundColor;
|
|
816
|
+
}
|
|
817
|
+
return finalBGColor;
|
|
818
|
+
};
|
|
819
|
+
var Message = vueEmotion.styled('div')(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tborder: 1px solid\n\t\t", ";\n\tpadding: 10px;\n\tborder-radius: 7px;\n\tmargin-bottom: 10px;\n\tmax-width: 80%;\n\talign-self: ", ";\n\tdisplay: inline-block;\n\tposition: relative;\n\toverflow-wrap: anywhere;\n\t", "\n"])), function (props) {
|
|
820
|
+
return messageBGColor(props);
|
|
821
|
+
}, function (props) {
|
|
822
|
+
var finalColor;
|
|
823
|
+
if (props.isSender) {
|
|
824
|
+
finalColor = props.themePreset !== 'dark' ? props.theme.colors.primaryTextColor : props.theme.colors.textColor;
|
|
825
|
+
} else {
|
|
826
|
+
finalColor = props.themePreset !== 'dark' ? props.theme.colors.borderColor : props.theme.colors.textColor;
|
|
827
|
+
}
|
|
828
|
+
return finalColor;
|
|
829
|
+
}, function (props) {
|
|
830
|
+
return props.themePreset === 'dark' ? 'currentColor' : messageBGColor(props);
|
|
831
|
+
}, function (props) {
|
|
832
|
+
return props.isSender ? 'flex-end' : 'flex-start';
|
|
833
|
+
}, function (props) {
|
|
834
|
+
return resetCSS(props);
|
|
835
|
+
});
|
|
836
|
+
var MessageInputContainer = vueEmotion.styled('form')(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tpadding-top: 12px;\n\talign-items: stretch;\n\tmargin-top: 10px;\n\t.ai-enter-button-wrapper {\n\t\talign-self: baseline;\n\t\theight: 41px;\n\t}\n"])));
|
|
837
|
+
var MessageInput = vueEmotion.styled(Input.TextArea)(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tborder-radius: 5px;\n\tborder: 1px solid #ccc;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\n\t::placeholder {\n\t\tcolor: ", ";\n\t}\n\n\t:-ms-input-placeholder {\n\t\tcolor: ", ";\n\t}\n\n\t::-ms-input-placeholder {\n\t\tcolor: ", ";\n\t}\n\t", "\n"])), function (props) {
|
|
838
|
+
return props.themePreset === 'dark' ? props.theme.colors.borderColor : '#fff';
|
|
839
|
+
}, function (props) {
|
|
840
|
+
return props.themePreset === 'dark' ? props.theme.colors.titleColor : props.theme.colors.textColor;
|
|
841
|
+
}, function (props) {
|
|
842
|
+
return props.theme.colors.textColor;
|
|
843
|
+
}, function (props) {
|
|
844
|
+
return props.theme.colors.textColor;
|
|
845
|
+
}, function (props) {
|
|
846
|
+
return props.theme.colors.textColor;
|
|
847
|
+
}, function (_ref) {
|
|
848
|
+
var enterButton = _ref.enterButton;
|
|
849
|
+
return enterButton && "\n\t\t border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\t";
|
|
850
|
+
});
|
|
851
|
+
var SendButton = vueEmotion.styled(Button.Button)(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder: none;\n\tcolor: #ffffff;\n\tcursor: pointer;\n\tfont-size: 16px;\n\tmargin-left: 8px;\n\toutline: none;\n\tpadding: 10px;\n\ttext-align: center;\n"])));
|
|
852
|
+
var AIFeedbackContainer = vueEmotion.styled('div')(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t.--feedback-svgs-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\tgap: 5px;\n\n\t\tsvg {\n\t\t\tcursor: pointer;\n\t\t\ttransition: all ease-in 0.1s;\n\t\t\t&.selected {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t\tcursor: default;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t}\n\t\t}\n\t}\n\n\t.--feedback-input-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 7px;\n\t}\n"])));
|
|
853
|
+
|
|
854
|
+
var _templateObject$a, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
|
|
855
|
+
var fadeInFromBottom = css.keyframes(_templateObject$a || (_templateObject$a = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
856
|
+
var fadeInFromTop = css.keyframes(_templateObject2$3 || (_templateObject2$3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
857
|
+
var SearchBoxAISection = vueEmotion.styled('div')(_templateObject3$2 || (_templateObject3$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tpadding: 10px;\n\tborder-radius: 4px;\n\tmin-height: 200px;\n\tpadding-top: 20px;\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\t.--ai-answer-error-container {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t\t.--default-error-element {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tgap: 10px;\n\t\t}\n\t}\n"])), function (_ref) {
|
|
858
|
+
var themePreset = _ref.themePreset,
|
|
859
|
+
theme = _ref.theme;
|
|
860
|
+
return themePreset === 'dark' ? '#424242' : theme.colors.backgroundColor;
|
|
861
|
+
}, function (_ref2) {
|
|
862
|
+
var theme = _ref2.theme;
|
|
863
|
+
return theme.colors.textColor;
|
|
864
|
+
});
|
|
865
|
+
var Question = vueEmotion.styled('div')(_templateObject4$1 || (_templateObject4$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-weight: bold;\n\tmargin-bottom: 5px;\n\tanimation: ", " 0.5s ease-out;\n"])), fadeInFromTop);
|
|
866
|
+
var Answer = vueEmotion.styled('div')(_templateObject5$1 || (_templateObject5$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", "\n\tposition: relative;\n\tmargin-bottom: 5px;\n\tmin-height: 100px;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\tpre {\n\t\twhite-space: pre-wrap;\n\t}\n\tcode,\n\tpre {\n\t\tdisplay: revert;\n\t}\n"])), function (props) {
|
|
867
|
+
return resetCSS(props);
|
|
868
|
+
});
|
|
869
|
+
var Footer = vueEmotion.styled('div')(_templateObject6$1 || (_templateObject6$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tcolor: #777;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n\tanimation: ", " 0.5s ease-out;\n\tpadding: 10px 0;\n\tbackground: white;\n\tbackground-color: ", ";\n\tcolor: ", ";\n"])), fadeInFromBottom, function (_ref3) {
|
|
870
|
+
var themePreset = _ref3.themePreset,
|
|
871
|
+
theme = _ref3.theme;
|
|
872
|
+
return themePreset === 'dark' ? '#424242' : theme.colors.backgroundColor;
|
|
873
|
+
}, function (_ref4) {
|
|
874
|
+
var theme = _ref4.theme;
|
|
875
|
+
return theme.colors.textColor;
|
|
876
|
+
});
|
|
877
|
+
var SourceTags = vueEmotion.styled('div')(_templateObject7$1 || (_templateObject7$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tgap: 8px;\n\tflex-wrap: wrap;\n\t.--ai-source-tag {\n\t\tdisplay: inline-block;\n\t\tmax-width: 200px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n"])));
|
|
878
|
+
|
|
879
|
+
var ThumbsUpSvg = {
|
|
880
|
+
name: 'ThumbsUpSvg',
|
|
881
|
+
props: ['clickHandler', 'className'],
|
|
882
|
+
render: function render() {
|
|
883
|
+
return vue.createVNode("svg", {
|
|
884
|
+
"stroke": "currentColor",
|
|
885
|
+
"fill": "none",
|
|
886
|
+
"strokeWidth": "2",
|
|
887
|
+
"viewBox": "0 0 24 24",
|
|
888
|
+
"strokeLinecap": "round",
|
|
889
|
+
"strokeLinejoin": "round",
|
|
890
|
+
"class": this.$props.className,
|
|
891
|
+
"height": "1em",
|
|
892
|
+
"width": "1em",
|
|
893
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
894
|
+
"onClick": this.$props.clickHandler
|
|
895
|
+
}, [vue.createVNode("path", {
|
|
896
|
+
"d": "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
|
|
897
|
+
}, null)]);
|
|
898
|
+
}
|
|
899
|
+
};
|
|
900
|
+
|
|
901
|
+
var ThumbsDownSvg = {
|
|
902
|
+
name: 'ThumbsDownSvg',
|
|
903
|
+
props: ['clickHandler', 'className'],
|
|
904
|
+
render: function render() {
|
|
905
|
+
return vue.createVNode("svg", {
|
|
906
|
+
"stroke": "currentColor",
|
|
907
|
+
"fill": "none",
|
|
908
|
+
"strokeWidth": "2",
|
|
909
|
+
"viewBox": "0 0 24 24",
|
|
910
|
+
"strokeLinecap": "round",
|
|
911
|
+
"strokeLinejoin": "round",
|
|
912
|
+
"class": this.$props.className,
|
|
913
|
+
"height": "1em",
|
|
914
|
+
"width": "1em",
|
|
915
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
916
|
+
"onClick": this.$props.clickHandler
|
|
917
|
+
}, [vue.createVNode("path", {
|
|
918
|
+
"d": "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
|
|
919
|
+
}, null), ' ']);
|
|
920
|
+
}
|
|
921
|
+
};
|
|
922
|
+
|
|
923
|
+
var AIFeedback = vue.defineComponent({
|
|
924
|
+
name: 'FeedbackComponent',
|
|
925
|
+
props: {
|
|
926
|
+
onFeedbackSubmit: {
|
|
927
|
+
type: Function,
|
|
928
|
+
"default": function _default() {}
|
|
929
|
+
},
|
|
930
|
+
hideUI: {
|
|
931
|
+
type: Boolean,
|
|
932
|
+
"default": false
|
|
933
|
+
},
|
|
934
|
+
overrideState: {
|
|
935
|
+
type: Object,
|
|
936
|
+
"default": function _default() {
|
|
937
|
+
return {};
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
},
|
|
941
|
+
setup: function setup(props, _ref) {
|
|
942
|
+
var emit = _ref.emit;
|
|
943
|
+
var showInput = vue.ref(false);
|
|
944
|
+
var feedbackType = vue.ref(null);
|
|
945
|
+
var feedbackText = vue.ref('');
|
|
946
|
+
var feedbackRecorded = vue.ref(false);
|
|
947
|
+
var handleButtonClick = function handleButtonClick(type) {
|
|
948
|
+
if (feedbackType.value === type) {
|
|
949
|
+
feedbackType.value = null;
|
|
950
|
+
showInput.value = false;
|
|
951
|
+
} else {
|
|
952
|
+
feedbackType.value = type;
|
|
953
|
+
showInput.value = true;
|
|
954
|
+
}
|
|
955
|
+
};
|
|
956
|
+
var handleInputChange = function handleInputChange(e) {
|
|
957
|
+
feedbackText.value = e.target.value;
|
|
958
|
+
};
|
|
959
|
+
var handleSubmit = function handleSubmit() {
|
|
960
|
+
emit('feedback-submit', feedbackType.value === 'positive', feedbackText.value);
|
|
961
|
+
feedbackText.value = '';
|
|
962
|
+
showInput.value = false;
|
|
963
|
+
feedbackRecorded.value = true;
|
|
964
|
+
};
|
|
965
|
+
var handleCancel = function handleCancel() {
|
|
966
|
+
feedbackType.value = null;
|
|
967
|
+
feedbackText.value = '';
|
|
968
|
+
showInput.value = false;
|
|
969
|
+
};
|
|
970
|
+
vue.watch(function () {
|
|
971
|
+
return props.overrideState;
|
|
972
|
+
}, function (newValue) {
|
|
973
|
+
if (newValue && newValue.isRecorded) {
|
|
974
|
+
feedbackRecorded.value = true;
|
|
975
|
+
feedbackType.value = newValue.feedbackType || 'positive';
|
|
976
|
+
}
|
|
977
|
+
});
|
|
978
|
+
if (props.overrideState && props.overrideState.isRecorded) {
|
|
979
|
+
feedbackRecorded.value = true;
|
|
980
|
+
feedbackType.value = props.overrideState.feedbackType || 'positive';
|
|
981
|
+
}
|
|
982
|
+
return {
|
|
983
|
+
showInput: showInput,
|
|
984
|
+
feedbackType: feedbackType,
|
|
985
|
+
feedbackText: feedbackText,
|
|
986
|
+
feedbackRecorded: feedbackRecorded,
|
|
987
|
+
handleButtonClick: handleButtonClick,
|
|
988
|
+
handleInputChange: handleInputChange,
|
|
989
|
+
handleSubmit: handleSubmit,
|
|
990
|
+
handleCancel: handleCancel
|
|
991
|
+
};
|
|
992
|
+
},
|
|
993
|
+
render: function render() {
|
|
994
|
+
var _this = this;
|
|
995
|
+
if (this.$props.hideUI) {
|
|
996
|
+
return null;
|
|
997
|
+
}
|
|
998
|
+
if (this.feedbackRecorded) {
|
|
999
|
+
return vue.createVNode(AIFeedbackContainer, null, {
|
|
1000
|
+
"default": function _default() {
|
|
1001
|
+
return [vue.createVNode("div", {
|
|
1002
|
+
"class": "--feedback-svgs-wrapper"
|
|
1003
|
+
}, [_this.feedbackType === 'positive' ? vue.createVNode(ThumbsUpSvg, {
|
|
1004
|
+
"class": "selected"
|
|
1005
|
+
}, null) : vue.createVNode(ThumbsDownSvg, {
|
|
1006
|
+
"class": "selected"
|
|
1007
|
+
}, null)])];
|
|
1008
|
+
}
|
|
1009
|
+
});
|
|
1010
|
+
}
|
|
1011
|
+
return vue.createVNode(AIFeedbackContainer, null, {
|
|
1012
|
+
"default": function _default() {
|
|
1013
|
+
return [!_this.showInput && vue.createVNode("div", {
|
|
1014
|
+
"class": "--feedback-svgs-wrapper"
|
|
1015
|
+
}, [vue.createVNode(ThumbsUpSvg, {
|
|
1016
|
+
"class": _this.feedbackType === 'positive' ? 'selected' : '',
|
|
1017
|
+
"onClick": function onClick() {
|
|
1018
|
+
return _this.handleButtonClick('positive');
|
|
1019
|
+
}
|
|
1020
|
+
}, null), vue.createVNode(ThumbsDownSvg, {
|
|
1021
|
+
"class": _this.feedbackType === 'negative' ? 'selected' : '',
|
|
1022
|
+
"onClick": function onClick() {
|
|
1023
|
+
return _this.handleButtonClick('negative');
|
|
1024
|
+
}
|
|
1025
|
+
}, null)]), _this.showInput && vue.createVNode("div", {
|
|
1026
|
+
"class": "--feedback-input-wrapper"
|
|
1027
|
+
}, [vue.createVNode(Input.Input, {
|
|
1028
|
+
"show": _this.showInput,
|
|
1029
|
+
"placeholder": _this.feedbackType === 'positive' ? 'What do you like about the response?' : 'What was the issue with the response? How can it be improved?',
|
|
1030
|
+
"value": _this.feedbackText,
|
|
1031
|
+
"onInput": _this.handleInputChange
|
|
1032
|
+
}, null), vue.createVNode(Button.Button, {
|
|
1033
|
+
"primary": true,
|
|
1034
|
+
"onClick": _this.handleSubmit
|
|
1035
|
+
}, {
|
|
1036
|
+
"default": function _default() {
|
|
1037
|
+
return [vue.createTextVNode("Submit")];
|
|
1038
|
+
}
|
|
1039
|
+
}), vue.createVNode(Button.Button, {
|
|
1040
|
+
"onClick": _this.handleCancel
|
|
1041
|
+
}, {
|
|
1042
|
+
"default": function _default() {
|
|
1043
|
+
return [vue.createTextVNode("Cancel")];
|
|
1044
|
+
}
|
|
1045
|
+
})])];
|
|
1046
|
+
}
|
|
1047
|
+
});
|
|
1048
|
+
}
|
|
1049
|
+
});
|
|
1050
|
+
|
|
1051
|
+
var _excluded = ["_source"];
|
|
1052
|
+
function _isSlot(s) {
|
|
1053
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
1054
|
+
}
|
|
1055
|
+
var md = new remarkable.Remarkable();
|
|
1056
|
+
md.set({
|
|
1057
|
+
html: true,
|
|
1058
|
+
breaks: true,
|
|
1059
|
+
xhtmlOut: true
|
|
1060
|
+
});
|
|
1061
|
+
var _dropdownULRef = 'dropdownULRef';
|
|
1062
|
+
var _inputGroupRef = 'inputGroupRef';
|
|
1063
|
+
var updateQuery = reactivecore.Actions.updateQuery,
|
|
1064
|
+
setCustomQuery = reactivecore.Actions.setCustomQuery,
|
|
1065
|
+
setDefaultQuery = reactivecore.Actions.setDefaultQuery,
|
|
1066
|
+
recordSuggestionClick = reactivecore.Actions.recordSuggestionClick;
|
|
1067
|
+
var _debounce = reactivecore.helper.debounce,
|
|
1068
|
+
checkValueChange = reactivecore.helper.checkValueChange,
|
|
1069
|
+
getClassName$1 = reactivecore.helper.getClassName,
|
|
1070
|
+
isEqual = reactivecore.helper.isEqual,
|
|
1071
|
+
getCompositeAggsQuery = reactivecore.helper.getCompositeAggsQuery,
|
|
1072
|
+
withClickIds = reactivecore.helper.withClickIds,
|
|
1073
|
+
getResultStats = reactivecore.helper.getResultStats;
|
|
1074
|
+
var SearchBox = vue.defineComponent({
|
|
1075
|
+
name: 'SearchBox',
|
|
1076
|
+
isTagsMode: false,
|
|
1077
|
+
data: function data() {
|
|
1078
|
+
var props = this.$props;
|
|
1079
|
+
this.__state = {
|
|
1080
|
+
currentValue: '',
|
|
1081
|
+
selectedTags: [],
|
|
1082
|
+
isOpen: false,
|
|
1083
|
+
normalizedSuggestions: [],
|
|
1084
|
+
showAIScreen: false,
|
|
1085
|
+
showAIScreenFooter: false,
|
|
1086
|
+
showFeedbackComponent: false,
|
|
1087
|
+
feedbackState: null
|
|
1088
|
+
};
|
|
1089
|
+
this.internalComponent = props.componentId + "__internal";
|
|
1090
|
+
return this.__state;
|
|
1091
|
+
},
|
|
1092
|
+
inject: {
|
|
1093
|
+
theme: {
|
|
1094
|
+
from: 'theme_reactivesearch'
|
|
1095
|
+
}
|
|
1096
|
+
},
|
|
1097
|
+
created: function created() {
|
|
1098
|
+
var mode = this.$props.mode;
|
|
1099
|
+
if (mode === constants.SEARCH_COMPONENTS_MODES.TAG) {
|
|
1100
|
+
this.$options.isTagsMode = true;
|
|
1101
|
+
}
|
|
1102
|
+
if (this.$options.isTagsMode) {
|
|
1103
|
+
console.warn('Warning(ReactiveSearch): The `categoryField` prop is not supported when `mode` prop is set to `tag`');
|
|
1104
|
+
}
|
|
1105
|
+
this.currentValue = index.decodeHtml(this.selectedValue || this.value || this.defaultValue || '');
|
|
1106
|
+
if (this.$options.isTagsMode) {
|
|
1107
|
+
this.currentValue = '';
|
|
1108
|
+
}
|
|
1109
|
+
this.handleTextChange = _debounce(this.handleText, this.$props.debounce);
|
|
1110
|
+
|
|
1111
|
+
// Set custom and default queries in store
|
|
1112
|
+
this.triggerCustomQuery(this.currentValue, this.selectedCategory);
|
|
1113
|
+
this.triggerDefaultQuery(this.currentValue);
|
|
1114
|
+
if (this.selectedValue) {
|
|
1115
|
+
this.setValue(this.selectedValue, true, this.$props, this.$options.isTagsMode ? reactivecore.causes.SUGGESTION_SELECT : undefined);
|
|
1116
|
+
} else if (this.$props.value) {
|
|
1117
|
+
this.setValue(this.$props.value, true, this.$props, this.$options.isTagsMode ? reactivecore.causes.SUGGESTION_SELECT : undefined);
|
|
1118
|
+
} else if (this.$props.defaultValue) {
|
|
1119
|
+
this.setValue(this.$props.defaultValue, true, this.$props, this.$options.isTagsMode ? reactivecore.causes.SUGGESTION_SELECT : undefined);
|
|
1120
|
+
}
|
|
1121
|
+
},
|
|
1122
|
+
computed: {
|
|
1123
|
+
hasCustomRenderer: function hasCustomRenderer() {
|
|
1124
|
+
return index.hasCustomRenderer(this);
|
|
1125
|
+
},
|
|
1126
|
+
stats: function stats() {
|
|
1127
|
+
return getResultStats(this);
|
|
1128
|
+
}
|
|
1129
|
+
},
|
|
1130
|
+
props: {
|
|
1131
|
+
autoFocus: VueTypes.bool,
|
|
1132
|
+
autosuggest: VueTypes.bool.def(true),
|
|
1133
|
+
beforeValueChange: vueTypes.types.func,
|
|
1134
|
+
className: VueTypes.string.def(''),
|
|
1135
|
+
clearIcon: vueTypes.types.children,
|
|
1136
|
+
componentId: vueTypes.types.stringRequired,
|
|
1137
|
+
customHighlight: vueTypes.types.func,
|
|
1138
|
+
customQuery: vueTypes.types.func,
|
|
1139
|
+
defaultQuery: vueTypes.types.func,
|
|
1140
|
+
dataField: VueTypes.oneOfType([VueTypes.string, VueTypes.shape({
|
|
1141
|
+
field: VueTypes.string,
|
|
1142
|
+
weight: VueTypes.number
|
|
1143
|
+
}), VueTypes.arrayOf(VueTypes.string), VueTypes.arrayOf({
|
|
1144
|
+
field: VueTypes.string,
|
|
1145
|
+
weight: VueTypes.number
|
|
1146
|
+
})]),
|
|
1147
|
+
aggregationField: vueTypes.types.string,
|
|
1148
|
+
aggregationSize: VueTypes.number,
|
|
1149
|
+
size: VueTypes.number,
|
|
1150
|
+
debounce: VueTypes.number.def(0),
|
|
1151
|
+
defaultValue: vueTypes.types.string,
|
|
1152
|
+
excludeFields: vueTypes.types.excludeFields,
|
|
1153
|
+
value: VueTypes.oneOfType([VueTypes.arrayOf(VueTypes.string), vueTypes.types.value]),
|
|
1154
|
+
defaultSuggestions: vueTypes.types.suggestions,
|
|
1155
|
+
enableSynonyms: VueTypes.bool.def(true),
|
|
1156
|
+
enableQuerySuggestions: VueTypes.bool.def(false),
|
|
1157
|
+
enablePopularSuggestions: VueTypes.bool.def(false),
|
|
1158
|
+
enableRecentSuggestions: VueTypes.bool.def(false),
|
|
1159
|
+
fieldWeights: vueTypes.types.fieldWeights,
|
|
1160
|
+
filterLabel: vueTypes.types.string,
|
|
1161
|
+
fuzziness: vueTypes.types.fuzziness,
|
|
1162
|
+
highlight: VueTypes.bool,
|
|
1163
|
+
highlightField: vueTypes.types.stringOrArray,
|
|
1164
|
+
icon: vueTypes.types.children,
|
|
1165
|
+
iconPosition: VueTypes.oneOf(['left', 'right']).def('left'),
|
|
1166
|
+
includeFields: vueTypes.types.includeFields,
|
|
1167
|
+
innerClass: vueTypes.types.style,
|
|
1168
|
+
innerRef: VueTypes.string.def('searchInputField'),
|
|
1169
|
+
render: vueTypes.types.func,
|
|
1170
|
+
renderNoSuggestion: vueTypes.types.title,
|
|
1171
|
+
renderError: vueTypes.types.title,
|
|
1172
|
+
placeholder: VueTypes.string.def('Search'),
|
|
1173
|
+
queryFormat: VueTypes.oneOf(['and', 'or']).def('or'),
|
|
1174
|
+
react: vueTypes.types.react,
|
|
1175
|
+
showClear: VueTypes.bool.def(true),
|
|
1176
|
+
showDistinctSuggestions: VueTypes.bool.def(true),
|
|
1177
|
+
showFilter: VueTypes.bool.def(true),
|
|
1178
|
+
showIcon: VueTypes.bool.def(true),
|
|
1179
|
+
title: vueTypes.types.title,
|
|
1180
|
+
URLParams: VueTypes.bool.def(false),
|
|
1181
|
+
strictSelection: VueTypes.bool.def(false),
|
|
1182
|
+
nestedField: vueTypes.types.string,
|
|
1183
|
+
enablePredictiveSuggestions: VueTypes.bool.def(false),
|
|
1184
|
+
recentSearchesIcon: VueTypes.any,
|
|
1185
|
+
popularSearchesIcon: VueTypes.any,
|
|
1186
|
+
// mic props
|
|
1187
|
+
showVoiceSearch: VueTypes.bool.def(false),
|
|
1188
|
+
getMicInstance: vueTypes.types.func,
|
|
1189
|
+
renderMic: vueTypes.types.func,
|
|
1190
|
+
distinctField: vueTypes.types.string,
|
|
1191
|
+
distinctFieldConfig: vueTypes.types.props,
|
|
1192
|
+
//
|
|
1193
|
+
focusShortcuts: VueTypes.arrayOf(VueTypes.oneOfType([VueTypes.string, VueTypes.number])).def(['/']),
|
|
1194
|
+
addonBefore: VueTypes.any,
|
|
1195
|
+
addonAfter: VueTypes.any,
|
|
1196
|
+
expandSuggestionsContainer: VueTypes.bool.def(true),
|
|
1197
|
+
index: VueTypes.string,
|
|
1198
|
+
popularSuggestionsConfig: VueTypes.object,
|
|
1199
|
+
recentSuggestionsConfig: VueTypes.object,
|
|
1200
|
+
applyStopwords: VueTypes.bool,
|
|
1201
|
+
customStopwords: vueTypes.types.stringArray,
|
|
1202
|
+
onData: vueTypes.types.func,
|
|
1203
|
+
renderItem: vueTypes.types.func,
|
|
1204
|
+
enterButton: VueTypes.bool.def(false),
|
|
1205
|
+
renderEnterButton: VueTypes.any,
|
|
1206
|
+
mode: VueTypes.oneOf(['select', 'tag']).def('select'),
|
|
1207
|
+
renderSelectedTags: VueTypes.any,
|
|
1208
|
+
searchboxId: VueTypes.string,
|
|
1209
|
+
endpoint: vueTypes.types.endpointConfig,
|
|
1210
|
+
enableAI: VueTypes.bool.def(false),
|
|
1211
|
+
AIConfig: vueTypes.types.AIConfig,
|
|
1212
|
+
AIUIConfig: vueTypes.types.AIUIConfig
|
|
1213
|
+
},
|
|
1214
|
+
mounted: function mounted() {
|
|
1215
|
+
this.listenForFocusShortcuts();
|
|
1216
|
+
},
|
|
1217
|
+
watch: {
|
|
1218
|
+
dataField: function dataField(newVal, oldVal) {
|
|
1219
|
+
if (!isEqual(newVal, oldVal)) {
|
|
1220
|
+
this.triggerCustomQuery(this.$data.currentValue);
|
|
1221
|
+
}
|
|
1222
|
+
},
|
|
1223
|
+
fieldWeights: function fieldWeights() {
|
|
1224
|
+
this.triggerCustomQuery(this.$data.currentValue);
|
|
1225
|
+
},
|
|
1226
|
+
fuzziness: function fuzziness() {
|
|
1227
|
+
this.triggerCustomQuery(this.$data.currentValue);
|
|
1228
|
+
},
|
|
1229
|
+
queryFormat: function queryFormat() {
|
|
1230
|
+
this.triggerCustomQuery(this.$data.currentValue);
|
|
1231
|
+
},
|
|
1232
|
+
defaultValue: function defaultValue(newVal) {
|
|
1233
|
+
this.setValue(newVal, true, this.$props);
|
|
1234
|
+
},
|
|
1235
|
+
value: function value(newVal, oldVal) {
|
|
1236
|
+
if (!isEqual(newVal, oldVal)) {
|
|
1237
|
+
this.setValue(newVal, true, this.$props, newVal === '' ? reactivecore.causes.CLEAR_VALUE : undefined, false);
|
|
1238
|
+
}
|
|
1239
|
+
},
|
|
1240
|
+
defaultQuery: function defaultQuery(newVal, oldVal) {
|
|
1241
|
+
if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
|
|
1242
|
+
this.triggerDefaultQuery(this.$data.currentValue);
|
|
1243
|
+
}
|
|
1244
|
+
},
|
|
1245
|
+
customQuery: function customQuery(newVal, oldVal) {
|
|
1246
|
+
if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
|
|
1247
|
+
this.triggerCustomQuery(this.$data.currentValue);
|
|
1248
|
+
}
|
|
1249
|
+
},
|
|
1250
|
+
suggestions: function suggestions(newVal) {
|
|
1251
|
+
var suggestionsList = [];
|
|
1252
|
+
if (Array.isArray(newVal) && newVal.length) {
|
|
1253
|
+
suggestionsList = [].concat(withClickIds(newVal));
|
|
1254
|
+
} else if (Array.isArray(this.$props.defaultSuggestions) && this.$props.defaultSuggestions.length) {
|
|
1255
|
+
suggestionsList = [].concat(withClickIds(this.$props.defaultSuggestions));
|
|
1256
|
+
}
|
|
1257
|
+
this.normalizedSuggestions = suggestionsList;
|
|
1258
|
+
this.handleTextAreaHeightChange();
|
|
1259
|
+
},
|
|
1260
|
+
selectedValue: function selectedValue(newVal, oldVal) {
|
|
1261
|
+
if (!isEqual(newVal, oldVal) && (this.$options.isTagsMode ? !isEqual(this.$data.selectedTags, newVal) : this.$data.currentValue !== newVal)) {
|
|
1262
|
+
if (!newVal && this.$data.currentValue) {
|
|
1263
|
+
// selected value is cleared, call onValueSelected
|
|
1264
|
+
this.onValueSelectedHandler('', reactivecore.causes.CLEAR_VALUE);
|
|
1265
|
+
}
|
|
1266
|
+
if (this.$options.isTagsMode) {
|
|
1267
|
+
// handling reset of tags through SelectedFilters or URL
|
|
1268
|
+
this.selectedTags = [];
|
|
1269
|
+
}
|
|
1270
|
+
var cause = !newVal ? reactivecore.causes.CLEAR_VALUE : undefined;
|
|
1271
|
+
if (this.$options.isTagsMode) {
|
|
1272
|
+
cause = reactivecore.causes.SUGGESTION_SELECT;
|
|
1273
|
+
}
|
|
1274
|
+
this.setValue(newVal || '', true, this.$props, cause);
|
|
1275
|
+
}
|
|
1276
|
+
},
|
|
1277
|
+
focusShortcuts: function focusShortcuts() {
|
|
1278
|
+
this.listenForFocusShortcuts();
|
|
1279
|
+
},
|
|
1280
|
+
rawData: function rawData(newVal) {
|
|
1281
|
+
this.$emit('on-data', {
|
|
1282
|
+
data: this.normalizedSuggestions,
|
|
1283
|
+
rawData: newVal,
|
|
1284
|
+
aggregationData: this.aggregationData,
|
|
1285
|
+
loading: this.isLoading,
|
|
1286
|
+
error: this.isError
|
|
1287
|
+
});
|
|
1288
|
+
},
|
|
1289
|
+
aggregationData: function aggregationData(newVal) {
|
|
1290
|
+
this.$emit('on-data', {
|
|
1291
|
+
data: this.normalizedSuggestions,
|
|
1292
|
+
rawData: this.rawData,
|
|
1293
|
+
aggregationData: newVal,
|
|
1294
|
+
loading: this.isLoading,
|
|
1295
|
+
error: this.isError
|
|
1296
|
+
});
|
|
1297
|
+
},
|
|
1298
|
+
loading: function loading(newVal) {
|
|
1299
|
+
this.$emit('on-data', {
|
|
1300
|
+
data: this.normalizedSuggestions,
|
|
1301
|
+
rawData: this.rawData,
|
|
1302
|
+
aggregationData: this.aggregationData,
|
|
1303
|
+
loading: newVal,
|
|
1304
|
+
error: this.isError
|
|
1305
|
+
});
|
|
1306
|
+
},
|
|
1307
|
+
error: function error(newVal) {
|
|
1308
|
+
this.$emit('on-data', {
|
|
1309
|
+
data: this.normalizedSuggestions,
|
|
1310
|
+
rawData: this.rawData,
|
|
1311
|
+
aggregationData: this.aggregationData,
|
|
1312
|
+
loading: this.isLoading,
|
|
1313
|
+
error: newVal
|
|
1314
|
+
});
|
|
1315
|
+
},
|
|
1316
|
+
debounce: function debounce(newVal, oldVal) {
|
|
1317
|
+
if (!isEqual(newVal, oldVal)) {
|
|
1318
|
+
this.handleTextChange = _debounce(this.handleText, newVal);
|
|
1319
|
+
}
|
|
1320
|
+
},
|
|
1321
|
+
isAITyping: function isAITyping(newVal, oldVal) {
|
|
1322
|
+
var _this = this;
|
|
1323
|
+
var scrollAIContainer = function scrollAIContainer() {
|
|
1324
|
+
var dropdownEle = _this.$refs[_dropdownULRef];
|
|
1325
|
+
if (dropdownEle) {
|
|
1326
|
+
dropdownEle.scrollTo({
|
|
1327
|
+
top: dropdownEle.scrollHeight,
|
|
1328
|
+
behavior: 'smooth'
|
|
1329
|
+
});
|
|
1330
|
+
}
|
|
1331
|
+
};
|
|
1332
|
+
if (!newVal && oldVal) {
|
|
1333
|
+
this.showAIScreenFooter = true;
|
|
1334
|
+
if (this.$props.AIUIConfig && typeof this.$props.AIUIConfig.showFeedback === 'boolean' ? this.$props.AIUIConfig.showFeedback : true) {
|
|
1335
|
+
this.showFeedbackComponent = true;
|
|
1336
|
+
}
|
|
1337
|
+
setTimeout(function () {
|
|
1338
|
+
scrollAIContainer();
|
|
1339
|
+
}, 500);
|
|
1340
|
+
} else if (newVal) {
|
|
1341
|
+
this.scrollTimerRef = setTimeout(function () {
|
|
1342
|
+
scrollAIContainer();
|
|
1343
|
+
}, 2000);
|
|
1344
|
+
}
|
|
1345
|
+
},
|
|
1346
|
+
showAIScreen: function showAIScreen(newVal) {
|
|
1347
|
+
if (newVal) {
|
|
1348
|
+
var _this$$refs;
|
|
1349
|
+
if ((_this$$refs = this.$refs) != null && _this$$refs[this.$props.innerRef] && this.$refs[this.$props.innerRef].$el) {
|
|
1350
|
+
this.$refs[this.$props.innerRef].$el.blur();
|
|
1351
|
+
}
|
|
1352
|
+
} else {
|
|
1353
|
+
this.feedbackState = null;
|
|
1354
|
+
this.showFeedbackComponent = false;
|
|
1355
|
+
}
|
|
1356
|
+
},
|
|
1357
|
+
currentValue: function currentValue() {
|
|
1358
|
+
this.handleTextAreaHeightChange();
|
|
1359
|
+
}
|
|
1360
|
+
},
|
|
1361
|
+
methods: {
|
|
1362
|
+
handleText: function handleText(value, cause) {
|
|
1363
|
+
if (cause === reactivecore.causes.CLEAR_VALUE) {
|
|
1364
|
+
this.triggerCustomQuery(value);
|
|
1365
|
+
this.triggerDefaultQuery(value);
|
|
1366
|
+
} else if (this.$props.autosuggest) {
|
|
1367
|
+
this.triggerDefaultQuery(value);
|
|
1368
|
+
} else if (!this.$props.enterButton) {
|
|
1369
|
+
this.triggerCustomQuery(value);
|
|
1370
|
+
}
|
|
1371
|
+
},
|
|
1372
|
+
getComponent: function getComponent(downshiftProps) {
|
|
1373
|
+
if (downshiftProps === void 0) {
|
|
1374
|
+
downshiftProps = {};
|
|
1375
|
+
}
|
|
1376
|
+
var currentValue = this.$data.currentValue;
|
|
1377
|
+
var data = {
|
|
1378
|
+
error: this.error,
|
|
1379
|
+
loading: this.isLoading,
|
|
1380
|
+
downshiftProps: downshiftProps,
|
|
1381
|
+
data: this.normalizedSuggestions,
|
|
1382
|
+
rawData: this.rawData,
|
|
1383
|
+
value: currentValue,
|
|
1384
|
+
resultStats: this.stats,
|
|
1385
|
+
AIData: {
|
|
1386
|
+
question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
|
|
1387
|
+
answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
|
|
1388
|
+
documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
|
|
1389
|
+
showAIScreen: this.showAIScreen,
|
|
1390
|
+
sources: this.getAISourceObjects(),
|
|
1391
|
+
isAILoading: this.isAIResponseLoading,
|
|
1392
|
+
AIError: this.AIResponseError
|
|
1393
|
+
}
|
|
1394
|
+
};
|
|
1395
|
+
return vue.createVNode("div", {
|
|
1396
|
+
"ref": _dropdownULRef
|
|
1397
|
+
}, [index.getComponent(data, this)]);
|
|
1398
|
+
},
|
|
1399
|
+
// returns size and aggs property
|
|
1400
|
+
getBasicQueryOptions: function getBasicQueryOptions() {
|
|
1401
|
+
var aggregationField = this.$props.aggregationField;
|
|
1402
|
+
var queryOptions = helper.getQueryOptions(this.$props);
|
|
1403
|
+
if (aggregationField) {
|
|
1404
|
+
queryOptions.aggs = getCompositeAggsQuery({
|
|
1405
|
+
props: this.$props,
|
|
1406
|
+
showTopHits: true
|
|
1407
|
+
}).aggs;
|
|
1408
|
+
}
|
|
1409
|
+
return queryOptions;
|
|
1410
|
+
},
|
|
1411
|
+
handleSearchIconClick: function handleSearchIconClick() {
|
|
1412
|
+
var currentValue = this.currentValue;
|
|
1413
|
+
if (currentValue.trim()) {
|
|
1414
|
+
this.setValue(currentValue, true);
|
|
1415
|
+
this.onValueSelectedHandler(currentValue, reactivecore.causes.SEARCH_ICON_CLICK);
|
|
1416
|
+
}
|
|
1417
|
+
},
|
|
1418
|
+
setValue: function setValue(value, isDefaultValue, props, cause, toggleIsOpen, categoryValue) {
|
|
1419
|
+
var _this2 = this;
|
|
1420
|
+
if (isDefaultValue === void 0) {
|
|
1421
|
+
isDefaultValue = false;
|
|
1422
|
+
}
|
|
1423
|
+
if (props === void 0) {
|
|
1424
|
+
props = this.$props;
|
|
1425
|
+
}
|
|
1426
|
+
if (toggleIsOpen === void 0) {
|
|
1427
|
+
toggleIsOpen = true;
|
|
1428
|
+
}
|
|
1429
|
+
if (categoryValue === void 0) {
|
|
1430
|
+
categoryValue = undefined;
|
|
1431
|
+
}
|
|
1432
|
+
var performUpdate = function performUpdate() {
|
|
1433
|
+
if (_this2.$options.isTagsMode && isEqual(value, _this2.selectedTags)) {
|
|
1434
|
+
return;
|
|
1435
|
+
}
|
|
1436
|
+
if (_this2.$options.isTagsMode && cause === reactivecore.causes.SUGGESTION_SELECT) {
|
|
1437
|
+
if (Array.isArray(_this2.selectedTags) && _this2.selectedTags.length) {
|
|
1438
|
+
// check if value already present in selectedTags
|
|
1439
|
+
if (typeof value === 'string' && _this2.selectedTags.includes(value)) {
|
|
1440
|
+
_this2.isOpen = false;
|
|
1441
|
+
return;
|
|
1442
|
+
}
|
|
1443
|
+
_this2.selectedTags = [].concat(_this2.selectedTags);
|
|
1444
|
+
if (typeof value === 'string' && !!value) {
|
|
1445
|
+
_this2.selectedTags.push(value);
|
|
1446
|
+
} else if (Array.isArray(value) && !isEqual(_this2.selectedTags, value)) {
|
|
1447
|
+
_this2.selectedTags = value;
|
|
1448
|
+
}
|
|
1449
|
+
} else if (value) {
|
|
1450
|
+
_this2.selectedTags = typeof value !== 'string' ? value : [].concat(value);
|
|
1451
|
+
}
|
|
1452
|
+
_this2.currentValue = '';
|
|
1453
|
+
} else {
|
|
1454
|
+
_this2.currentValue = index.decodeHtml(value);
|
|
1455
|
+
}
|
|
1456
|
+
var queryHandlerValue = value;
|
|
1457
|
+
if (_this2.$options.isTagsMode && cause === reactivecore.causes.SUGGESTION_SELECT) {
|
|
1458
|
+
queryHandlerValue = Array.isArray(_this2.selectedTags) && _this2.selectedTags.length ? _this2.selectedTags : undefined;
|
|
1459
|
+
}
|
|
1460
|
+
if (isDefaultValue) {
|
|
1461
|
+
if (_this2.$props.autosuggest) {
|
|
1462
|
+
if (toggleIsOpen) {
|
|
1463
|
+
_this2.isOpen = false;
|
|
1464
|
+
}
|
|
1465
|
+
if (typeof _this2.currentValue === 'string') _this2.triggerDefaultQuery(_this2.currentValue, props.enableAI ? {
|
|
1466
|
+
enableAI: true
|
|
1467
|
+
} : {});
|
|
1468
|
+
} // in case of strict selection only SUGGESTION_SELECT should be able
|
|
1469
|
+
// to set the query otherwise the value should reset
|
|
1470
|
+
if (props.strictSelection) {
|
|
1471
|
+
if (cause === reactivecore.causes.SUGGESTION_SELECT || (_this2.$options.isTagsMode ? _this2.selectedTags.length === 0 : value === '')) {
|
|
1472
|
+
_this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
|
|
1473
|
+
} else {
|
|
1474
|
+
_this2.setValue('', true);
|
|
1475
|
+
}
|
|
1476
|
+
} else if (props.value === undefined || cause === reactivecore.causes.SUGGESTION_SELECT || cause === reactivecore.causes.CLEAR_VALUE) {
|
|
1477
|
+
_this2.triggerCustomQuery(queryHandlerValue, _this2.$options.isTagsMode ? undefined : categoryValue);
|
|
1478
|
+
}
|
|
1479
|
+
} else {
|
|
1480
|
+
// debounce for handling text while typing
|
|
1481
|
+
_this2.handleTextChange(value, cause);
|
|
1482
|
+
}
|
|
1483
|
+
_this2.$emit('valueChange', value);
|
|
1484
|
+
_this2.$emit('value-change', value);
|
|
1485
|
+
};
|
|
1486
|
+
checkValueChange(props.componentId, value, props.beforeValueChange, performUpdate);
|
|
1487
|
+
},
|
|
1488
|
+
triggerDefaultQuery: function triggerDefaultQuery(paramValue, meta) {
|
|
1489
|
+
if (meta === void 0) {
|
|
1490
|
+
meta = {};
|
|
1491
|
+
}
|
|
1492
|
+
if (!this.$props.autosuggest) {
|
|
1493
|
+
return;
|
|
1494
|
+
}
|
|
1495
|
+
var value = typeof paramValue !== 'string' ? this.currentValue : paramValue;
|
|
1496
|
+
var query = SearchBox.defaultQuery(value, this.$props);
|
|
1497
|
+
if (this.defaultQuery) {
|
|
1498
|
+
var defaultQueryToBeSet = this.defaultQuery(value, this.$props) || {};
|
|
1499
|
+
if (defaultQueryToBeSet.query) {
|
|
1500
|
+
query = defaultQueryToBeSet.query;
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
// Update calculated default query in store
|
|
1504
|
+
index.updateDefaultQuery(this.$props.componentId, this.setDefaultQuery, this.$props, value);
|
|
1505
|
+
}
|
|
1506
|
+
this.updateQuery({
|
|
1507
|
+
componentId: this.internalComponent,
|
|
1508
|
+
query: query,
|
|
1509
|
+
value: value,
|
|
1510
|
+
componentType: constants.componentTypes.searchBox,
|
|
1511
|
+
meta: meta
|
|
1512
|
+
});
|
|
1513
|
+
},
|
|
1514
|
+
triggerCustomQuery: function triggerCustomQuery(paramValue, categoryValue) {
|
|
1515
|
+
if (categoryValue === void 0) {
|
|
1516
|
+
categoryValue = undefined;
|
|
1517
|
+
}
|
|
1518
|
+
var _this$$props = this.$props,
|
|
1519
|
+
customQuery = _this$$props.customQuery,
|
|
1520
|
+
filterLabel = _this$$props.filterLabel,
|
|
1521
|
+
showFilter = _this$$props.showFilter,
|
|
1522
|
+
URLParams = _this$$props.URLParams;
|
|
1523
|
+
var value = typeof paramValue !== 'string' ? this.$data.currentValue : paramValue;
|
|
1524
|
+
if (this.$options.isTagsMode) {
|
|
1525
|
+
value = paramValue;
|
|
1526
|
+
}
|
|
1527
|
+
var defaultQueryTobeSet = SearchBox.defaultQuery("" + value + (categoryValue ? " in " + categoryValue : ''), this.$props);
|
|
1528
|
+
var query = defaultQueryTobeSet;
|
|
1529
|
+
if (customQuery) {
|
|
1530
|
+
var customQueryTobeSet = customQuery(value, this.$props);
|
|
1531
|
+
var queryTobeSet = customQueryTobeSet.query;
|
|
1532
|
+
if (queryTobeSet) {
|
|
1533
|
+
query = queryTobeSet;
|
|
1534
|
+
}
|
|
1535
|
+
index.updateCustomQuery(this.$props.componentId, this.setCustomQuery, this.$props, value);
|
|
1536
|
+
}
|
|
1537
|
+
this.updateQuery({
|
|
1538
|
+
componentId: this.$props.componentId,
|
|
1539
|
+
query: query,
|
|
1540
|
+
value: value,
|
|
1541
|
+
label: filterLabel,
|
|
1542
|
+
showFilter: showFilter,
|
|
1543
|
+
URLParams: URLParams,
|
|
1544
|
+
componentType: constants.componentTypes.searchBox,
|
|
1545
|
+
category: categoryValue
|
|
1546
|
+
});
|
|
1547
|
+
},
|
|
1548
|
+
handleFocus: function handleFocus(event) {
|
|
1549
|
+
if (this.$props.autosuggest) {
|
|
1550
|
+
this.isOpen = true;
|
|
1551
|
+
}
|
|
1552
|
+
this.$emit('focus', event);
|
|
1553
|
+
},
|
|
1554
|
+
handleVoiceResults: function handleVoiceResults(_ref) {
|
|
1555
|
+
var results = _ref.results;
|
|
1556
|
+
if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
|
|
1557
|
+
this.setValue(results[0][0].transcript.trim(), true);
|
|
1558
|
+
}
|
|
1559
|
+
},
|
|
1560
|
+
triggerQuery: function triggerQuery(_ref2) {
|
|
1561
|
+
var _ref2$isOpen = _ref2.isOpen,
|
|
1562
|
+
isOpen = _ref2$isOpen === void 0 ? undefined : _ref2$isOpen,
|
|
1563
|
+
_ref2$customQuery = _ref2.customQuery,
|
|
1564
|
+
customQuery = _ref2$customQuery === void 0 ? true : _ref2$customQuery,
|
|
1565
|
+
_ref2$defaultQuery = _ref2.defaultQuery,
|
|
1566
|
+
defaultQuery = _ref2$defaultQuery === void 0 ? true : _ref2$defaultQuery,
|
|
1567
|
+
_ref2$value = _ref2.value,
|
|
1568
|
+
value = _ref2$value === void 0 ? undefined : _ref2$value,
|
|
1569
|
+
_ref2$categoryValue = _ref2.categoryValue,
|
|
1570
|
+
categoryValue = _ref2$categoryValue === void 0 ? undefined : _ref2$categoryValue;
|
|
1571
|
+
if (typeof isOpen === 'boolean') {
|
|
1572
|
+
this.isOpen = isOpen;
|
|
1573
|
+
}
|
|
1574
|
+
if (customQuery) {
|
|
1575
|
+
this.triggerCustomQuery(value, categoryValue);
|
|
1576
|
+
}
|
|
1577
|
+
if (defaultQuery) {
|
|
1578
|
+
this.triggerDefaultQuery(value);
|
|
1579
|
+
}
|
|
1580
|
+
},
|
|
1581
|
+
triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
|
|
1582
|
+
// click analytics would only work client side and after javascript loads
|
|
1583
|
+
var docId = documentId;
|
|
1584
|
+
if (!docId) {
|
|
1585
|
+
var hitData = this.normalizedSuggestions.find(function (hit) {
|
|
1586
|
+
return hit._click_id === searchPosition;
|
|
1587
|
+
});
|
|
1588
|
+
if (hitData && hitData.source && hitData.source._id) {
|
|
1589
|
+
docId = hitData.source._id;
|
|
1590
|
+
}
|
|
1591
|
+
}
|
|
1592
|
+
this.recordSuggestionClick(searchPosition, docId);
|
|
1593
|
+
},
|
|
1594
|
+
clearValue: function clearValue() {
|
|
1595
|
+
this.setValue('', false, this.$props, !this.$options.isTagsMode ? reactivecore.causes.CLEAR_VALUE : undefined, false);
|
|
1596
|
+
this.onValueSelectedHandler('', !this.$options.isTagsMode ? reactivecore.causes.CLEAR_VALUE : undefined);
|
|
1597
|
+
},
|
|
1598
|
+
handleKeyDown: function handleKeyDown(event, highlightedIndex) {
|
|
1599
|
+
if (highlightedIndex === void 0) {
|
|
1600
|
+
highlightedIndex = null;
|
|
1601
|
+
}
|
|
1602
|
+
// if a suggestion was selected, delegate the handling to suggestion handler
|
|
1603
|
+
if (event.key === 'Enter') {
|
|
1604
|
+
if (this.$props.autosuggest === false) {
|
|
1605
|
+
this.enterButtonOnClick();
|
|
1606
|
+
} else if (highlightedIndex === null) {
|
|
1607
|
+
this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? reactivecore.causes.SUGGESTION_SELECT : undefined,
|
|
1608
|
+
// to handle tags
|
|
1609
|
+
!this.$props.enableAI);
|
|
1610
|
+
if (this.$props.enableAI && !this.showAIScreen) {
|
|
1611
|
+
this.showAIScreen = true;
|
|
1612
|
+
}
|
|
1613
|
+
this.onValueSelectedHandler(event.target.value, reactivecore.causes.ENTER_PRESS);
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
// Need to review
|
|
1618
|
+
this.$emit('keyDown', event, this.triggerQuery);
|
|
1619
|
+
this.$emit('key-down', event, this.triggerQuery);
|
|
1620
|
+
},
|
|
1621
|
+
onInputChange: function onInputChange(e) {
|
|
1622
|
+
var _this3 = this;
|
|
1623
|
+
var inputValue = e.target.value;
|
|
1624
|
+
if (!this.$data.isOpen && this.$props.autosuggest) {
|
|
1625
|
+
this.isOpen = true;
|
|
1626
|
+
}
|
|
1627
|
+
if (this.showAIScreen) {
|
|
1628
|
+
this.showAIScreen = false;
|
|
1629
|
+
}
|
|
1630
|
+
var value = this.$props.value;
|
|
1631
|
+
if (value === undefined) {
|
|
1632
|
+
this.setValue(inputValue, false, this.$props, undefined);
|
|
1633
|
+
} else {
|
|
1634
|
+
this.$emit('change', inputValue, function (_ref3) {
|
|
1635
|
+
var isOpen = _ref3.isOpen;
|
|
1636
|
+
return _this3.triggerQuery({
|
|
1637
|
+
defaultQuery: true,
|
|
1638
|
+
customQuery: true,
|
|
1639
|
+
value: inputValue,
|
|
1640
|
+
isOpen: isOpen
|
|
1641
|
+
});
|
|
1642
|
+
}, e);
|
|
1643
|
+
}
|
|
1644
|
+
},
|
|
1645
|
+
onSuggestionSelected: function onSuggestionSelected(suggestion) {
|
|
1646
|
+
var _this4 = this;
|
|
1647
|
+
if (!this.$props.enableAI) this.isOpen = false;else {
|
|
1648
|
+
this.showAIScreen = true;
|
|
1649
|
+
}
|
|
1650
|
+
var value = this.$props.value;
|
|
1651
|
+
// Record analytics for selected suggestions
|
|
1652
|
+
this.triggerClickAnalytics(suggestion._click_id);
|
|
1653
|
+
if (value === undefined) {
|
|
1654
|
+
this.setValue(suggestion.value, true, this.$props, reactivecore.causes.SUGGESTION_SELECT, false, suggestion._category);
|
|
1655
|
+
} else {
|
|
1656
|
+
var emitValue = suggestion.value;
|
|
1657
|
+
if (this.$options.isTagsMode) {
|
|
1658
|
+
emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
|
|
1659
|
+
if (this.selectedTags.includes(suggestion.value)) {
|
|
1660
|
+
// avoid duplicates in tags array
|
|
1661
|
+
this.isOpen = false;
|
|
1662
|
+
return;
|
|
1663
|
+
}
|
|
1664
|
+
emitValue.push(suggestion.value);
|
|
1665
|
+
}
|
|
1666
|
+
this.setValue(emitValue, true, this.$props, reactivecore.causes.SUGGESTION_SELECT, false, suggestion._category);
|
|
1667
|
+
this.$emit('change', emitValue, function (_ref4) {
|
|
1668
|
+
var isOpen = _ref4.isOpen;
|
|
1669
|
+
return _this4.triggerQuery(_rollupPluginBabelHelpers._extends({
|
|
1670
|
+
isOpen: isOpen,
|
|
1671
|
+
value: emitValue
|
|
1672
|
+
}, !_this4.$options.isTagsMode && {
|
|
1673
|
+
categoryValue: suggestion._category
|
|
1674
|
+
}));
|
|
1675
|
+
});
|
|
1676
|
+
}
|
|
1677
|
+
this.onValueSelectedHandler(suggestion.value, reactivecore.causes.SUGGESTION_SELECT, suggestion.source);
|
|
1678
|
+
},
|
|
1679
|
+
onValueSelectedHandler: function onValueSelectedHandler(currentValue) {
|
|
1680
|
+
if (currentValue === void 0) {
|
|
1681
|
+
currentValue = this.$data.currentValue;
|
|
1682
|
+
}
|
|
1683
|
+
for (var _len = arguments.length, cause = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
1684
|
+
cause[_key - 1] = arguments[_key];
|
|
1685
|
+
}
|
|
1686
|
+
this.$emit.apply(this, ['valueSelected', currentValue].concat(cause));
|
|
1687
|
+
this.$emit.apply(this, ['value-selected', currentValue].concat(cause));
|
|
1688
|
+
},
|
|
1689
|
+
handleStateChange: function handleStateChange(changes) {
|
|
1690
|
+
var isOpen = changes.isOpen;
|
|
1691
|
+
this.isOpen = isOpen;
|
|
1692
|
+
},
|
|
1693
|
+
getBackgroundColor: function getBackgroundColor(highlightedIndex, index) {
|
|
1694
|
+
var isDark = this.themePreset === 'dark';
|
|
1695
|
+
if (isDark) {
|
|
1696
|
+
return highlightedIndex === index ? '#555' : '#424242';
|
|
1697
|
+
}
|
|
1698
|
+
return highlightedIndex === index ? '#eee' : '#fff';
|
|
1699
|
+
},
|
|
1700
|
+
renderIcon: function renderIcon() {
|
|
1701
|
+
if (this.$props.showIcon) {
|
|
1702
|
+
return this.$props.icon || vue.createVNode(SearchSvg, null, null);
|
|
1703
|
+
}
|
|
1704
|
+
return null;
|
|
1705
|
+
},
|
|
1706
|
+
renderErrorComponent: function renderErrorComponent(isAIError) {
|
|
1707
|
+
var _this5 = this;
|
|
1708
|
+
if (isAIError === void 0) {
|
|
1709
|
+
isAIError = false;
|
|
1710
|
+
}
|
|
1711
|
+
var renderError = this.$slots.renderError || this.$props.renderError;
|
|
1712
|
+
if (isAIError) {
|
|
1713
|
+
if (this.showAIScreen && this.AIResponseError && !this.isAIResponseLoading) {
|
|
1714
|
+
if (renderError) {
|
|
1715
|
+
return vue.createVNode("div", {
|
|
1716
|
+
"class": "--ai-answer-error-container " + (getClassName$1(this.$props.innerClass, 'ai-error') || '')
|
|
1717
|
+
}, [renderError(this.AIResponseError)]);
|
|
1718
|
+
}
|
|
1719
|
+
return vue.createVNode("div", {
|
|
1720
|
+
"class": "--ai-answer-error-container " + (getClassName$1(this.$props.innerClass, 'ai-error') || '')
|
|
1721
|
+
}, [vue.createVNode("div", {
|
|
1722
|
+
"class": "--default-error-element"
|
|
1723
|
+
}, [vue.createVNode("span", null, [typeof this.AIResponseError === 'string' ? this.AIResponseError : this.AIResponseError.message ? this.AIResponseError.message : 'There was an error in generating the response.', this.AIResponseError.code ? "Code:\n\t\t\t\t\t\t\t" + this.AIResponseError.code : ''])])]);
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
1726
|
+
if (this.error && renderError && this.$data.currentValue && !this.isLoading) {
|
|
1727
|
+
return vue.createVNode(SuggestionWrapper, {
|
|
1728
|
+
"innerClass": this.$props.innerClass,
|
|
1729
|
+
"innerClassName": "error",
|
|
1730
|
+
"theme": this.theme,
|
|
1731
|
+
"themePreset": this.themePreset
|
|
1732
|
+
}, {
|
|
1733
|
+
"default": function _default() {
|
|
1734
|
+
return [index.isFunction(renderError) ? renderError(_this5.error) : renderError];
|
|
1735
|
+
}
|
|
1736
|
+
});
|
|
1737
|
+
}
|
|
1738
|
+
return null;
|
|
1739
|
+
},
|
|
1740
|
+
renderCancelIcon: function renderCancelIcon() {
|
|
1741
|
+
if (this.$props.showClear) {
|
|
1742
|
+
return this.$props.clearIcon || vue.createVNode(DropDown.CancelSvg, null, null);
|
|
1743
|
+
}
|
|
1744
|
+
return null;
|
|
1745
|
+
},
|
|
1746
|
+
renderNoSuggestions: function renderNoSuggestions(finalSuggestionsList) {
|
|
1747
|
+
if (finalSuggestionsList === void 0) {
|
|
1748
|
+
finalSuggestionsList = [];
|
|
1749
|
+
}
|
|
1750
|
+
var innerClass = this.$props.innerClass;
|
|
1751
|
+
var renderNoSuggestion = this.$slots.renderNoSuggestion || this.$props.renderNoSuggestion;
|
|
1752
|
+
var renderError = this.$slots.renderError || this.$props.renderError;
|
|
1753
|
+
var _this$$data = this.$data,
|
|
1754
|
+
isOpen = _this$$data.isOpen,
|
|
1755
|
+
currentValue = _this$$data.currentValue;
|
|
1756
|
+
if (renderNoSuggestion && isOpen && !finalSuggestionsList.length && !this.isLoading && currentValue && !(renderError && this.error)) {
|
|
1757
|
+
return vue.createVNode(SuggestionWrapper, {
|
|
1758
|
+
"innerClass": innerClass,
|
|
1759
|
+
"themePreset": this.themePreset,
|
|
1760
|
+
"theme": this.theme,
|
|
1761
|
+
"innerClassName": "noSuggestion"
|
|
1762
|
+
}, {
|
|
1763
|
+
"default": function _default() {
|
|
1764
|
+
return typeof renderNoSuggestion === 'function' ? renderNoSuggestion(currentValue) : renderNoSuggestion;
|
|
1765
|
+
}
|
|
1766
|
+
});
|
|
1767
|
+
}
|
|
1768
|
+
return null;
|
|
1769
|
+
},
|
|
1770
|
+
renderInputAddonBefore: function renderInputAddonBefore() {
|
|
1771
|
+
var addonBefore = this.$slots.addonBefore;
|
|
1772
|
+
if (addonBefore) {
|
|
1773
|
+
var _slot;
|
|
1774
|
+
return vue.createVNode(InputAddon, {
|
|
1775
|
+
"class": "addon-before"
|
|
1776
|
+
}, _isSlot(_slot = addonBefore()) ? _slot : {
|
|
1777
|
+
"default": function _default() {
|
|
1778
|
+
return [_slot];
|
|
1779
|
+
}
|
|
1780
|
+
});
|
|
1781
|
+
}
|
|
1782
|
+
return null;
|
|
1783
|
+
},
|
|
1784
|
+
renderInputAddonAfter: function renderInputAddonAfter() {
|
|
1785
|
+
var addonAfter = this.$slots.addonAfter;
|
|
1786
|
+
if (addonAfter) {
|
|
1787
|
+
var _slot2;
|
|
1788
|
+
return vue.createVNode(InputAddon, {
|
|
1789
|
+
"class": "addon-after"
|
|
1790
|
+
}, _isSlot(_slot2 = addonAfter()) ? _slot2 : {
|
|
1791
|
+
"default": function _default() {
|
|
1792
|
+
return [_slot2];
|
|
1793
|
+
}
|
|
1794
|
+
});
|
|
1795
|
+
}
|
|
1796
|
+
return null;
|
|
1797
|
+
},
|
|
1798
|
+
enterButtonOnClick: function enterButtonOnClick() {
|
|
1799
|
+
this.showAIScreen = false;
|
|
1800
|
+
this.triggerQuery({
|
|
1801
|
+
isOpen: false,
|
|
1802
|
+
value: this.currentValue,
|
|
1803
|
+
customQuery: true
|
|
1804
|
+
});
|
|
1805
|
+
},
|
|
1806
|
+
renderEnterButtonElement: function renderEnterButtonElement() {
|
|
1807
|
+
var _this6 = this;
|
|
1808
|
+
var _this$$props2 = this.$props,
|
|
1809
|
+
enterButton = _this$$props2.enterButton,
|
|
1810
|
+
innerClass = _this$$props2.innerClass;
|
|
1811
|
+
var renderEnterButton = this.$slots.renderEnterButton;
|
|
1812
|
+
if (enterButton) {
|
|
1813
|
+
var getEnterButtonMarkup = function getEnterButtonMarkup() {
|
|
1814
|
+
if (renderEnterButton) {
|
|
1815
|
+
return renderEnterButton(_this6.enterButtonOnClick);
|
|
1816
|
+
}
|
|
1817
|
+
return vue.createVNode(Button.Button, {
|
|
1818
|
+
"class": "enter-btn " + getClassName$1(innerClass, 'enter-button'),
|
|
1819
|
+
"primary": true,
|
|
1820
|
+
"onClick": _this6.enterButtonOnClick
|
|
1821
|
+
}, {
|
|
1822
|
+
"default": function _default() {
|
|
1823
|
+
return [vue.createTextVNode("Search")];
|
|
1824
|
+
}
|
|
1825
|
+
});
|
|
1826
|
+
};
|
|
1827
|
+
return vue.createVNode("div", {
|
|
1828
|
+
"class": "enter-button-wrapper"
|
|
1829
|
+
}, [getEnterButtonMarkup()]);
|
|
1830
|
+
}
|
|
1831
|
+
return null;
|
|
1832
|
+
},
|
|
1833
|
+
renderIcons: function renderIcons() {
|
|
1834
|
+
var _this7 = this;
|
|
1835
|
+
var _slot3, _slot4, _slot5;
|
|
1836
|
+
var _this$$props3 = this.$props,
|
|
1837
|
+
iconPosition = _this$$props3.iconPosition,
|
|
1838
|
+
showClear = _this$$props3.showClear,
|
|
1839
|
+
innerClass = _this$$props3.innerClass,
|
|
1840
|
+
getMicInstance = _this$$props3.getMicInstance,
|
|
1841
|
+
showVoiceSearch = _this$$props3.showVoiceSearch,
|
|
1842
|
+
showIcon = _this$$props3.showIcon;
|
|
1843
|
+
var renderMic = this.$slots.renderMic || this.$props.renderMic;
|
|
1844
|
+
var currentValue = this.$data.currentValue;
|
|
1845
|
+
return vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
|
|
1846
|
+
"groupPosition": "right",
|
|
1847
|
+
"positionType": "absolute"
|
|
1848
|
+
}, {
|
|
1849
|
+
"default": function _default() {
|
|
1850
|
+
return [currentValue && showClear && vue.createVNode(DropDown.IconWrapper, {
|
|
1851
|
+
"onClick": _this7.clearValue,
|
|
1852
|
+
"showIcon": showIcon,
|
|
1853
|
+
"isClearIcon": true
|
|
1854
|
+
}, _isSlot(_slot3 = _this7.renderCancelIcon()) ? _slot3 : {
|
|
1855
|
+
"default": function _default() {
|
|
1856
|
+
return [_slot3];
|
|
1857
|
+
}
|
|
1858
|
+
}), showVoiceSearch && vue.createVNode(Mic, {
|
|
1859
|
+
"getInstance": getMicInstance,
|
|
1860
|
+
"render": renderMic,
|
|
1861
|
+
"handleResult": _this7.handleVoiceResults,
|
|
1862
|
+
"className": getClassName$1(innerClass, 'mic') || null
|
|
1863
|
+
}, null), iconPosition === 'right' && showIcon && vue.createVNode(DropDown.IconWrapper, {
|
|
1864
|
+
"onClick": _this7.handleSearchIconClick
|
|
1865
|
+
}, _isSlot(_slot4 = _this7.renderIcon()) ? _slot4 : {
|
|
1866
|
+
"default": function _default() {
|
|
1867
|
+
return [_slot4];
|
|
1868
|
+
}
|
|
1869
|
+
})];
|
|
1870
|
+
}
|
|
1871
|
+
}), vue.createVNode(DropDown.IconGroup, {
|
|
1872
|
+
"groupPosition": "left",
|
|
1873
|
+
"positionType": "absolute"
|
|
1874
|
+
}, {
|
|
1875
|
+
"default": function _default() {
|
|
1876
|
+
return [iconPosition === 'left' && showIcon && vue.createVNode(DropDown.IconWrapper, {
|
|
1877
|
+
"onClick": _this7.handleSearchIconClick
|
|
1878
|
+
}, _isSlot(_slot5 = _this7.renderIcon()) ? _slot5 : {
|
|
1879
|
+
"default": function _default() {
|
|
1880
|
+
return [_slot5];
|
|
1881
|
+
}
|
|
1882
|
+
})];
|
|
1883
|
+
}
|
|
1884
|
+
})]);
|
|
1885
|
+
},
|
|
1886
|
+
focusSearchBox: function focusSearchBox(event) {
|
|
1887
|
+
var _this$$refs2, _this$$refs2$this$$pr;
|
|
1888
|
+
var elt = event.target || event.srcElement;
|
|
1889
|
+
var tagName = elt.tagName;
|
|
1890
|
+
if (elt.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA') {
|
|
1891
|
+
// already in an input
|
|
1892
|
+
return;
|
|
1893
|
+
}
|
|
1894
|
+
(_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$this$$pr = _this$$refs2[this.$props.innerRef]) == null ? void 0 : _this$$refs2$this$$pr.focus(); // eslint-disable-line
|
|
1895
|
+
},
|
|
1896
|
+
listenForFocusShortcuts: function listenForFocusShortcuts() {
|
|
1897
|
+
var _this8 = this;
|
|
1898
|
+
var _this$$props$focusSho = this.$props.focusShortcuts,
|
|
1899
|
+
focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
|
|
1900
|
+
if (index.isEmpty(focusShortcuts)) {
|
|
1901
|
+
return;
|
|
1902
|
+
}
|
|
1903
|
+
var shortcutsString = index.parseFocusShortcuts(focusShortcuts).join(',');
|
|
1904
|
+
|
|
1905
|
+
// handler for alphabets and other key combinations
|
|
1906
|
+
hotkeys(shortcutsString,
|
|
1907
|
+
// eslint-disable-next-line no-unused-vars
|
|
1908
|
+
/* eslint-disable no-shadow */
|
|
1909
|
+
function (event, handler) {
|
|
1910
|
+
// Prevent the default refresh event under WINDOWS system
|
|
1911
|
+
event.preventDefault();
|
|
1912
|
+
_this8.focusSearchBox(event);
|
|
1913
|
+
});
|
|
1914
|
+
|
|
1915
|
+
// if one of modifier keys are used, they are handled below
|
|
1916
|
+
hotkeys('*', function (event) {
|
|
1917
|
+
var modifierKeys = index.extractModifierKeysFromFocusShortcuts(focusShortcuts);
|
|
1918
|
+
if (modifierKeys.length === 0) return;
|
|
1919
|
+
for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
|
|
1920
|
+
var element = modifierKeys[index$1];
|
|
1921
|
+
if (hotkeys[element]) {
|
|
1922
|
+
_this8.focusSearchBox(event);
|
|
1923
|
+
break;
|
|
1924
|
+
}
|
|
1925
|
+
}
|
|
1926
|
+
});
|
|
1927
|
+
},
|
|
1928
|
+
onAutofillClick: function onAutofillClick(suggestion) {
|
|
1929
|
+
var value = suggestion.value;
|
|
1930
|
+
this.isOpen = true;
|
|
1931
|
+
this.currentValue = index.decodeHtml(value);
|
|
1932
|
+
this.triggerDefaultQuery(value);
|
|
1933
|
+
},
|
|
1934
|
+
renderAutoFill: function renderAutoFill(suggestion) {
|
|
1935
|
+
var _this9 = this;
|
|
1936
|
+
var handleAutoFillClick = function handleAutoFillClick(e) {
|
|
1937
|
+
e.stopPropagation();
|
|
1938
|
+
_this9.onAutofillClick(suggestion);
|
|
1939
|
+
};
|
|
1940
|
+
/* 👇 avoid showing autofill for category suggestions👇 */
|
|
1941
|
+
return suggestion._category ? null : vue.createVNode(AutoFillSvg, {
|
|
1942
|
+
"onClick": handleAutoFillClick
|
|
1943
|
+
}, null);
|
|
1944
|
+
},
|
|
1945
|
+
renderTag: function renderTag(item) {
|
|
1946
|
+
var _this10 = this;
|
|
1947
|
+
var innerClass = this.$props.innerClass;
|
|
1948
|
+
return vue.createVNode(TagItem, {
|
|
1949
|
+
"class": getClassName$1(innerClass, 'selected-tag') || ''
|
|
1950
|
+
}, {
|
|
1951
|
+
"default": function _default() {
|
|
1952
|
+
return [vue.createVNode("span", null, [item]), vue.createVNode("span", {
|
|
1953
|
+
"role": "img",
|
|
1954
|
+
"aria-label": "delete-tag",
|
|
1955
|
+
"class": "close-icon",
|
|
1956
|
+
"onClick": function onClick() {
|
|
1957
|
+
return _this10.clearTag(item);
|
|
1958
|
+
}
|
|
1959
|
+
}, [vue.createVNode(DropDown.CancelSvg, null, null)])];
|
|
1960
|
+
}
|
|
1961
|
+
});
|
|
1962
|
+
},
|
|
1963
|
+
clearAllTags: function clearAllTags() {
|
|
1964
|
+
this.selectedTags = [];
|
|
1965
|
+
this.setValue('', true, this.$props, reactivecore.causes.SUGGESTION_SELECT);
|
|
1966
|
+
if (this.$props.value !== undefined) {
|
|
1967
|
+
this.$emit('change', this.selectedTags, this.triggerQuery);
|
|
1968
|
+
}
|
|
1969
|
+
},
|
|
1970
|
+
clearTag: function clearTag(tagValue) {
|
|
1971
|
+
this.selectedTags = [].concat(this.selectedTags.filter(function (tag) {
|
|
1972
|
+
return tag !== tagValue;
|
|
1973
|
+
}));
|
|
1974
|
+
this.setValue('', true, this.$props, reactivecore.causes.SUGGESTION_SELECT);
|
|
1975
|
+
if (this.$props.value !== undefined) {
|
|
1976
|
+
this.$emit('change', this.selectedTags, this.triggerQuery);
|
|
1977
|
+
}
|
|
1978
|
+
},
|
|
1979
|
+
renderTags: function renderTags() {
|
|
1980
|
+
var _this11 = this;
|
|
1981
|
+
if (!Array.isArray(this.selectedTags)) {
|
|
1982
|
+
return null;
|
|
1983
|
+
}
|
|
1984
|
+
var tagsList = [].concat(this.selectedTags);
|
|
1985
|
+
var shouldRenderClearAllTag = tagsList.length > 1;
|
|
1986
|
+
var renderSelectedTags = this.$slots.renderSelectedTags || this.$props.renderSelectedTags;
|
|
1987
|
+
return renderSelectedTags ? renderSelectedTags({
|
|
1988
|
+
values: this.selectedTags,
|
|
1989
|
+
handleClear: this.clearTag,
|
|
1990
|
+
handleClearAll: this.clearAllTags
|
|
1991
|
+
}) : vue.createVNode(TagsContainer, null, {
|
|
1992
|
+
"default": function _default() {
|
|
1993
|
+
return [tagsList.map(function (item) {
|
|
1994
|
+
return _this11.renderTag(item);
|
|
1995
|
+
}), shouldRenderClearAllTag && vue.createVNode(TagItem, {
|
|
1996
|
+
"class": getClassName$1(_this11.$props.innerClass, 'selected-tag') || ''
|
|
1997
|
+
}, {
|
|
1998
|
+
"default": function _default() {
|
|
1999
|
+
return [vue.createVNode("span", null, [vue.createTextVNode("Clear All")]), vue.createVNode("span", {
|
|
2000
|
+
"role": "img",
|
|
2001
|
+
"aria-label": "delete-tag",
|
|
2002
|
+
"class": "close-icon",
|
|
2003
|
+
"onClick": _this11.clearAllTags
|
|
2004
|
+
}, [vue.createVNode(DropDown.CancelSvg, null, null)])];
|
|
2005
|
+
}
|
|
2006
|
+
})];
|
|
2007
|
+
}
|
|
2008
|
+
});
|
|
2009
|
+
},
|
|
2010
|
+
getAISourceObjects: function getAISourceObjects() {
|
|
2011
|
+
var localCache = helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) && helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY)[this.componentId];
|
|
2012
|
+
var sourceObjects = [];
|
|
2013
|
+
if (!this.AIResponse) return sourceObjects;
|
|
2014
|
+
var docIds = this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [];
|
|
2015
|
+
if (localCache && localCache.meta && localCache.meta.hits && localCache.meta.hits.hits) {
|
|
2016
|
+
docIds.forEach(function (id) {
|
|
2017
|
+
var foundSourceObj = localCache.meta.hits.hits.find(function (hit) {
|
|
2018
|
+
return hit._id === id;
|
|
2019
|
+
}) || {};
|
|
2020
|
+
if (foundSourceObj) {
|
|
2021
|
+
var _foundSourceObj$_sour = foundSourceObj._source,
|
|
2022
|
+
_source = _foundSourceObj$_sour === void 0 ? {} : _foundSourceObj$_sour,
|
|
2023
|
+
rest = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(foundSourceObj, _excluded);
|
|
2024
|
+
sourceObjects.push(_rollupPluginBabelHelpers._extends({}, rest, _source));
|
|
2025
|
+
}
|
|
2026
|
+
});
|
|
2027
|
+
} else {
|
|
2028
|
+
sourceObjects.push.apply(sourceObjects, docIds.map(function (id) {
|
|
2029
|
+
return {
|
|
2030
|
+
_id: id
|
|
2031
|
+
};
|
|
2032
|
+
}));
|
|
2033
|
+
}
|
|
2034
|
+
return sourceObjects;
|
|
2035
|
+
},
|
|
2036
|
+
renderAIScreenLoader: function renderAIScreenLoader() {
|
|
2037
|
+
var _this$$props$AIUIConf = this.$props.AIUIConfig,
|
|
2038
|
+
AIUIConfig = _this$$props$AIUIConf === void 0 ? {} : _this$$props$AIUIConf;
|
|
2039
|
+
var _ref5 = AIUIConfig || {},
|
|
2040
|
+
loaderMessage = _ref5.loaderMessage;
|
|
2041
|
+
if (loaderMessage) {
|
|
2042
|
+
return loaderMessage;
|
|
2043
|
+
}
|
|
2044
|
+
if (this.$slots.AILoaderMessage) {
|
|
2045
|
+
return this.$slots.AILoaderMessage();
|
|
2046
|
+
}
|
|
2047
|
+
return vue.createVNode(HorizontalSkeletonLoader, null, null);
|
|
2048
|
+
},
|
|
2049
|
+
renderAIScreenFooter: function renderAIScreenFooter() {
|
|
2050
|
+
var _slot6;
|
|
2051
|
+
var _this12 = this;
|
|
2052
|
+
var _this$$props$AIUIConf2 = this.$props.AIUIConfig,
|
|
2053
|
+
AIUIConfig = _this$$props$AIUIConf2 === void 0 ? {} : _this$$props$AIUIConf2;
|
|
2054
|
+
var _ref6 = AIUIConfig || {},
|
|
2055
|
+
_ref6$showSourceDocum = _ref6.showSourceDocuments,
|
|
2056
|
+
showSourceDocuments = _ref6$showSourceDocum === void 0 ? true : _ref6$showSourceDocum,
|
|
2057
|
+
_ref6$sourceDocumentL = _ref6.sourceDocumentLabel,
|
|
2058
|
+
sourceDocumentLabel = _ref6$sourceDocumentL === void 0 ? '_id' : _ref6$sourceDocumentL,
|
|
2059
|
+
_ref6$onSourceClick = _ref6.onSourceClick,
|
|
2060
|
+
onSourceClick = _ref6$onSourceClick === void 0 ? function () {} : _ref6$onSourceClick;
|
|
2061
|
+
return showSourceDocuments && this.showAIScreenFooter && this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds ? vue.createVNode(Footer, {
|
|
2062
|
+
"themePreset": this.$props.themePreset
|
|
2063
|
+
}, {
|
|
2064
|
+
"default": function _default() {
|
|
2065
|
+
return [vue.createTextVNode("Summary generated using the following sources:"), ' ', vue.createVNode(SourceTags, null, _isSlot(_slot6 = _this12.getAISourceObjects().map(function (el) {
|
|
2066
|
+
return vue.createVNode(Button.Button, {
|
|
2067
|
+
"class": "--ai-source-tag " + (getClassName$1(_this12.$props.innerClass, 'ai-source-tag') || ''),
|
|
2068
|
+
"title": el[sourceDocumentLabel],
|
|
2069
|
+
"info": true,
|
|
2070
|
+
"onClick": function onClick() {
|
|
2071
|
+
return onSourceClick && onSourceClick(el);
|
|
2072
|
+
}
|
|
2073
|
+
}, {
|
|
2074
|
+
"default": function _default() {
|
|
2075
|
+
return [el[sourceDocumentLabel]];
|
|
2076
|
+
}
|
|
2077
|
+
});
|
|
2078
|
+
})) ? _slot6 : {
|
|
2079
|
+
"default": function _default() {
|
|
2080
|
+
return [_slot6];
|
|
2081
|
+
}
|
|
2082
|
+
})];
|
|
2083
|
+
}
|
|
2084
|
+
}) : null;
|
|
2085
|
+
},
|
|
2086
|
+
renderAIScreen: function renderAIScreen() {
|
|
2087
|
+
var _this13 = this;
|
|
2088
|
+
var customAIRenderer = this.$props.renderAIAnswer || this.$slots.renderAIAnswer;
|
|
2089
|
+
if (customAIRenderer) {
|
|
2090
|
+
return customAIRenderer({
|
|
2091
|
+
question: this.AIResponse && this.AIResponse.response && this.AIResponse.response.question,
|
|
2092
|
+
answer: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text,
|
|
2093
|
+
documentIds: this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.documentIds || [],
|
|
2094
|
+
loading: this.isAIResponseLoading || this.isLoading,
|
|
2095
|
+
sources: this.getAISourceObjects(),
|
|
2096
|
+
error: this.AIResponseError
|
|
2097
|
+
});
|
|
2098
|
+
}
|
|
2099
|
+
if (this.isAIResponseLoading || this.isLoading) {
|
|
2100
|
+
return this.renderAIScreenLoader();
|
|
2101
|
+
}
|
|
2102
|
+
return vue.createVNode("div", null, [vue.createVNode(Answer, {
|
|
2103
|
+
"innerHTML": md.render(this.AIResponse && this.AIResponse.response && this.AIResponse.response.answer && this.AIResponse.response.answer.text)
|
|
2104
|
+
}, null), this.renderAIScreenFooter(), this.showFeedbackComponent && vue.createVNode("div", {
|
|
2105
|
+
"class": "" + (getClassName$1(this.$props.innerClass, 'ai-feedback') || '')
|
|
2106
|
+
}, [vue.createVNode(AIFeedback, {
|
|
2107
|
+
"overrideState": this.feedbackState,
|
|
2108
|
+
"hideUI": this.isAIResponseLoading || this.isLoading || !this.sessionIdFromStore,
|
|
2109
|
+
"key": this.sessionIdFromStore,
|
|
2110
|
+
"onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
|
|
2111
|
+
_this13.feedbackState = {
|
|
2112
|
+
isRecorded: true,
|
|
2113
|
+
feedbackType: useful ? 'positive' : 'negative'
|
|
2114
|
+
};
|
|
2115
|
+
_this13.recordAISessionUsefulness(_this13.sessionIdFromStore, {
|
|
2116
|
+
useful: useful,
|
|
2117
|
+
reason: reason
|
|
2118
|
+
});
|
|
2119
|
+
}
|
|
2120
|
+
}, null)])]);
|
|
2121
|
+
},
|
|
2122
|
+
handleTextAreaHeightChange: function handleTextAreaHeightChange() {
|
|
2123
|
+
var _this$$refs$this$$pro, _this$$refs$_inputGro;
|
|
2124
|
+
var textArea = (_this$$refs$this$$pro = this.$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.$el;
|
|
2125
|
+
var inputGroupEle = (_this$$refs$_inputGro = this.$refs[_inputGroupRef]) == null ? void 0 : _this$$refs$_inputGro.$el;
|
|
2126
|
+
if (textArea) {
|
|
2127
|
+
textArea.style.height = '42px';
|
|
2128
|
+
var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
|
|
2129
|
+
var maxHeight = lineHeight * 4; // max height for 3 lines
|
|
2130
|
+
var height = Math.min(textArea.scrollHeight, maxHeight);
|
|
2131
|
+
textArea.style.height = height + "px";
|
|
2132
|
+
textArea.style.overflowY = height === maxHeight ? 'auto' : 'hidden';
|
|
2133
|
+
var dropdownEle = this.$refs[_dropdownULRef];
|
|
2134
|
+
if (dropdownEle) {
|
|
2135
|
+
dropdownEle.style.top = "" + textArea.style.height;
|
|
2136
|
+
}
|
|
2137
|
+
if (inputGroupEle) {
|
|
2138
|
+
inputGroupEle.style.height = "" + textArea.style.height;
|
|
2139
|
+
}
|
|
2140
|
+
}
|
|
2141
|
+
},
|
|
2142
|
+
askButtonOnClick: function askButtonOnClick() {
|
|
2143
|
+
this.showAIScreen = true;
|
|
2144
|
+
this.isOpen = true;
|
|
2145
|
+
this.triggerDefaultQuery(this.currentValue, {
|
|
2146
|
+
enableAI: true
|
|
2147
|
+
});
|
|
2148
|
+
},
|
|
2149
|
+
renderAskButtonElement: function renderAskButtonElement() {
|
|
2150
|
+
var _this14 = this;
|
|
2151
|
+
var _this$$props4 = this.$props,
|
|
2152
|
+
AIUIConfig = _this$$props4.AIUIConfig,
|
|
2153
|
+
innerClass = _this$$props4.innerClass;
|
|
2154
|
+
var _ref7 = AIUIConfig || {},
|
|
2155
|
+
askButton = _ref7.askButton;
|
|
2156
|
+
var renderAskButton = this.$slots.renderAskButton;
|
|
2157
|
+
if (askButton) {
|
|
2158
|
+
var getEnterButtonMarkup = function getEnterButtonMarkup() {
|
|
2159
|
+
if (renderAskButton) {
|
|
2160
|
+
return renderAskButton(_this14.askButtonOnClick);
|
|
2161
|
+
}
|
|
2162
|
+
return vue.createVNode(Button.Button, {
|
|
2163
|
+
"class": "enter-btn " + getClassName$1(innerClass, 'ask-button'),
|
|
2164
|
+
"info": true,
|
|
2165
|
+
"onClick": _this14.askButtonOnClick
|
|
2166
|
+
}, {
|
|
2167
|
+
"default": function _default() {
|
|
2168
|
+
return [vue.createTextVNode("Ask")];
|
|
2169
|
+
}
|
|
2170
|
+
});
|
|
2171
|
+
};
|
|
2172
|
+
return vue.createVNode("div", {
|
|
2173
|
+
"class": "enter-button-wrapper"
|
|
2174
|
+
}, [getEnterButtonMarkup()]);
|
|
2175
|
+
}
|
|
2176
|
+
return null;
|
|
2177
|
+
}
|
|
2178
|
+
},
|
|
2179
|
+
render: function render() {
|
|
2180
|
+
var _this15 = this;
|
|
2181
|
+
var expandSuggestionsContainer = this.$props.expandSuggestionsContainer;
|
|
2182
|
+
var _this$$slots = this.$slots,
|
|
2183
|
+
recentSearchesIcon = _this$$slots.recentSearchesIcon,
|
|
2184
|
+
popularSearchesIcon = _this$$slots.popularSearchesIcon;
|
|
2185
|
+
var hasSuggestions = Array.isArray(this.normalizedSuggestions) && this.normalizedSuggestions.length;
|
|
2186
|
+
var renderItem = this.$slots.renderItem || this.$props.renderItem;
|
|
2187
|
+
return vue.createVNode(Container.Container, {
|
|
2188
|
+
"class": this.$props.className
|
|
2189
|
+
}, {
|
|
2190
|
+
"default": function _default() {
|
|
2191
|
+
return [_this15.$props.title && vue.createVNode(Title.Title, {
|
|
2192
|
+
"class": getClassName$1(_this15.$props.innerClass, 'title') || ''
|
|
2193
|
+
}, {
|
|
2194
|
+
"default": function _default() {
|
|
2195
|
+
return [_this15.$props.title];
|
|
2196
|
+
}
|
|
2197
|
+
}), _this15.$props.autosuggest ? vue.createVNode(DropDown.Downshift, {
|
|
2198
|
+
"id": _this15.$props.componentId + "-downshift",
|
|
2199
|
+
"handleChange": _this15.onSuggestionSelected,
|
|
2200
|
+
"handleMouseup": _this15.handleStateChange,
|
|
2201
|
+
"isOpen": _this15.$data.isOpen
|
|
2202
|
+
}, {
|
|
2203
|
+
"default": function _default(_ref8) {
|
|
2204
|
+
var getInputEvents = _ref8.getInputEvents,
|
|
2205
|
+
getInputProps = _ref8.getInputProps,
|
|
2206
|
+
getItemProps = _ref8.getItemProps,
|
|
2207
|
+
getItemEvents = _ref8.getItemEvents,
|
|
2208
|
+
isOpen = _ref8.isOpen,
|
|
2209
|
+
highlightedIndex = _ref8.highlightedIndex,
|
|
2210
|
+
setHighlightedIndex = _ref8.setHighlightedIndex;
|
|
2211
|
+
var renderSuggestionsDropdown = function renderSuggestionsDropdown() {
|
|
2212
|
+
var getIcon = function getIcon(iconType) {
|
|
2213
|
+
switch (iconType) {
|
|
2214
|
+
case helper.suggestionTypes.Recent:
|
|
2215
|
+
return recentSearchesIcon;
|
|
2216
|
+
case helper.suggestionTypes.Popular:
|
|
2217
|
+
return popularSearchesIcon;
|
|
2218
|
+
default:
|
|
2219
|
+
return null;
|
|
2220
|
+
}
|
|
2221
|
+
};
|
|
2222
|
+
return vue.createVNode("div", null, [_this15.hasCustomRenderer && _this15.getComponent({
|
|
2223
|
+
isOpen: isOpen,
|
|
2224
|
+
getItemProps: getItemProps,
|
|
2225
|
+
getItemEvents: getItemEvents,
|
|
2226
|
+
highlightedIndex: highlightedIndex
|
|
2227
|
+
}), _this15.renderErrorComponent(), !_this15.hasCustomRenderer && isOpen && hasSuggestions ? vue.createVNode("ul", {
|
|
2228
|
+
"class": Input.suggestions(_this15.themePreset, _this15.theme) + " " + getClassName$1(_this15.$props.innerClass, 'list'),
|
|
2229
|
+
"ref": _dropdownULRef
|
|
2230
|
+
}, [_this15.showAIScreen && vue.createVNode(SearchBoxAISection, {
|
|
2231
|
+
"themePreset": _this15.$props.themePreset
|
|
2232
|
+
}, {
|
|
2233
|
+
"default": function _default() {
|
|
2234
|
+
return [_this15.renderAIScreen(), ' ', _this15.renderErrorComponent(true)];
|
|
2235
|
+
}
|
|
2236
|
+
}), !_this15.showAIScreen && _this15.normalizedSuggestions.map(function (item, index) {
|
|
2237
|
+
return renderItem ? vue.createVNode("li", vue.mergeProps(getItemProps({
|
|
2238
|
+
item: item
|
|
2239
|
+
}), getItemEvents({
|
|
2240
|
+
item: item
|
|
2241
|
+
}), {
|
|
2242
|
+
"key": index + 1 + "-" + item.value,
|
|
2243
|
+
"style": {
|
|
2244
|
+
backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
|
|
2245
|
+
justifyContent: 'flex-start',
|
|
2246
|
+
alignItems: 'center'
|
|
2247
|
+
}
|
|
2248
|
+
}), [renderItem(item)]) : vue.createVNode("li", vue.mergeProps(getItemProps({
|
|
2249
|
+
item: item
|
|
2250
|
+
}), _transformOn(getItemEvents({
|
|
2251
|
+
item: item
|
|
2252
|
+
})), {
|
|
2253
|
+
"key": index + 1 + "-" + item.value,
|
|
2254
|
+
"style": {
|
|
2255
|
+
backgroundColor: _this15.getBackgroundColor(highlightedIndex, index),
|
|
2256
|
+
justifyContent: 'flex-start',
|
|
2257
|
+
alignItems: 'center'
|
|
2258
|
+
}
|
|
2259
|
+
}), [vue.createVNode("div", {
|
|
2260
|
+
"style": {
|
|
2261
|
+
padding: '0 10px 0 0',
|
|
2262
|
+
display: 'flex'
|
|
2263
|
+
}
|
|
2264
|
+
}, [vue.createVNode(CustomSvg, {
|
|
2265
|
+
"className": getClassName$1(_this15.$props.innerClass, item._suggestion_type + "-search-icon") || null,
|
|
2266
|
+
"icon": getIcon(item._suggestion_type),
|
|
2267
|
+
"type": item._suggestion_type + "-search-icon"
|
|
2268
|
+
}, null)]), vue.createVNode(SuggestionItem, {
|
|
2269
|
+
"currentValue": _this15.currentValue,
|
|
2270
|
+
"suggestion": item
|
|
2271
|
+
}, null), _this15.renderAutoFill(item)]);
|
|
2272
|
+
})]) : _this15.renderNoSuggestions(_this15.normalizedSuggestions)]);
|
|
2273
|
+
};
|
|
2274
|
+
return vue.createVNode("div", {
|
|
2275
|
+
"class": Input.suggestionsContainer
|
|
2276
|
+
}, [vue.createVNode(InputGroup, {
|
|
2277
|
+
"ref": _inputGroupRef
|
|
2278
|
+
}, {
|
|
2279
|
+
"default": function _default() {
|
|
2280
|
+
return [_this15.renderInputAddonBefore(), vue.createVNode(DropDown.InputWrapper, null, {
|
|
2281
|
+
"default": function _default() {
|
|
2282
|
+
return [vue.createVNode(Input.TextArea, vue.mergeProps(_transformOn(getInputEvents({
|
|
2283
|
+
onInput: _this15.onInputChange,
|
|
2284
|
+
onBlur: function onBlur(e) {
|
|
2285
|
+
_this15.$emit('blur', e, _this15.triggerQuery);
|
|
2286
|
+
},
|
|
2287
|
+
onFocus: _this15.handleFocus,
|
|
2288
|
+
onKeyPress: function onKeyPress(e) {
|
|
2289
|
+
_this15.$emit('keyPress', e, _this15.triggerQuery);
|
|
2290
|
+
_this15.$emit('key-press', e, _this15.triggerQuery);
|
|
2291
|
+
},
|
|
2292
|
+
onKeyDown: function onKeyDown(e) {
|
|
2293
|
+
return _this15.handleKeyDown(e, highlightedIndex);
|
|
2294
|
+
},
|
|
2295
|
+
onKeyUp: function onKeyUp(e) {
|
|
2296
|
+
_this15.$emit('keyUp', e, _this15.triggerQuery);
|
|
2297
|
+
_this15.$emit('key-up', e, _this15.triggerQuery);
|
|
2298
|
+
},
|
|
2299
|
+
onClick: function onClick() {
|
|
2300
|
+
setHighlightedIndex(null);
|
|
2301
|
+
}
|
|
2302
|
+
})), {
|
|
2303
|
+
"id": _this15.$props.componentId + "-input",
|
|
2304
|
+
"showIcon": _this15.$props.showIcon,
|
|
2305
|
+
"showClear": _this15.$props.showClear,
|
|
2306
|
+
"iconPosition": _this15.$props.iconPosition,
|
|
2307
|
+
"ref": _this15.$props.innerRef,
|
|
2308
|
+
"class": getClassName$1(_this15.$props.innerClass, 'input'),
|
|
2309
|
+
"placeholder": _this15.$props.placeholder,
|
|
2310
|
+
"autoFocus": _this15.$props.autoFocus,
|
|
2311
|
+
"showFocusShortcutsIcon": _this15.$props.showFocusShortcutsIcon,
|
|
2312
|
+
"showVoiceSearch": _this15.$props.showVoiceSearch
|
|
2313
|
+
}, getInputProps({
|
|
2314
|
+
value: _this15.$data.currentValue === null ? '' : _this15.$data.currentValue
|
|
2315
|
+
}), {
|
|
2316
|
+
"themePreset": _this15.themePreset,
|
|
2317
|
+
"autocomplete": "off"
|
|
2318
|
+
}), null), _this15.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()];
|
|
2319
|
+
}
|
|
2320
|
+
}), _this15.renderInputAddonAfter(), _this15.renderAskButtonElement(), _this15.renderEnterButtonElement()];
|
|
2321
|
+
}
|
|
2322
|
+
}), expandSuggestionsContainer && renderSuggestionsDropdown(), _this15.renderTags()]);
|
|
2323
|
+
}
|
|
2324
|
+
}) : vue.createVNode("div", {
|
|
2325
|
+
"class": Input.suggestionsContainer
|
|
2326
|
+
}, [vue.createVNode(InputGroup, {
|
|
2327
|
+
"ref": _inputGroupRef
|
|
2328
|
+
}, {
|
|
2329
|
+
"default": function _default() {
|
|
2330
|
+
return [_this15.renderInputAddonBefore(), vue.createVNode(DropDown.InputWrapper, null, {
|
|
2331
|
+
"default": function _default() {
|
|
2332
|
+
return [vue.createVNode(Input.TextArea, vue.mergeProps(_transformOn({
|
|
2333
|
+
blur: function blur(e) {
|
|
2334
|
+
_this15.$emit('blur', e, _this15.triggerQuery);
|
|
2335
|
+
},
|
|
2336
|
+
keypress: function keypress(e) {
|
|
2337
|
+
_this15.$emit('keyPress', e, _this15.triggerQuery);
|
|
2338
|
+
_this15.$emit('key-press', e, _this15.triggerQuery);
|
|
2339
|
+
},
|
|
2340
|
+
input: _this15.onInputChange,
|
|
2341
|
+
focus: function focus(e) {
|
|
2342
|
+
_this15.$emit('focus', e, _this15.triggerQuery);
|
|
2343
|
+
},
|
|
2344
|
+
keydown: _this15.handleKeyDown,
|
|
2345
|
+
keyup: function keyup(e) {
|
|
2346
|
+
_this15.$emit('keyUp', e, _this15.triggerQuery);
|
|
2347
|
+
_this15.$emit('key-up', e, _this15.triggerQuery);
|
|
2348
|
+
}
|
|
2349
|
+
}), {
|
|
2350
|
+
"class": getClassName$1(_this15.$props.innerClass, 'input') || '',
|
|
2351
|
+
"placeholder": _this15.$props.placeholder,
|
|
2352
|
+
"autofocus": _this15.$props.autoFocus,
|
|
2353
|
+
"value": _this15.$data.currentValue ? _this15.$data.currentValue : '',
|
|
2354
|
+
"iconPosition": _this15.$props.iconPosition,
|
|
2355
|
+
"showIcon": _this15.$props.showIcon,
|
|
2356
|
+
"showClear": _this15.$props.showClear,
|
|
2357
|
+
"ref": _this15.$props.innerRef,
|
|
2358
|
+
"themePreset": _this15.themePreset
|
|
2359
|
+
}), null), _this15.renderIcons()];
|
|
2360
|
+
}
|
|
2361
|
+
}), _this15.renderInputAddonAfter(), _this15.renderEnterButtonElement()];
|
|
2362
|
+
}
|
|
2363
|
+
})])];
|
|
2364
|
+
}
|
|
2365
|
+
});
|
|
2366
|
+
},
|
|
2367
|
+
destroyed: function destroyed() {
|
|
2368
|
+
document.removeEventListener('keydown', this.onKeyDown);
|
|
2369
|
+
}
|
|
2370
|
+
});
|
|
2371
|
+
SearchBox.hasInternalComponent = function () {
|
|
2372
|
+
return true;
|
|
2373
|
+
};
|
|
2374
|
+
SearchBox.defaultQuery = function (value, props) {
|
|
2375
|
+
var finalQuery = null;
|
|
2376
|
+
finalQuery = {
|
|
2377
|
+
bool: {
|
|
2378
|
+
should: SearchBox.shouldQuery(value, props),
|
|
2379
|
+
minimum_should_match: '1'
|
|
2380
|
+
}
|
|
2381
|
+
};
|
|
2382
|
+
if (finalQuery && props.nestedField) {
|
|
2383
|
+
return {
|
|
2384
|
+
query: {
|
|
2385
|
+
nested: {
|
|
2386
|
+
path: props.nestedField,
|
|
2387
|
+
query: finalQuery
|
|
2388
|
+
}
|
|
2389
|
+
}
|
|
2390
|
+
};
|
|
2391
|
+
}
|
|
2392
|
+
return finalQuery;
|
|
2393
|
+
};
|
|
2394
|
+
SearchBox.shouldQuery = function (value, props) {
|
|
2395
|
+
return {
|
|
2396
|
+
query: {
|
|
2397
|
+
queryFormat: props.queryFormat,
|
|
2398
|
+
dataField: props.dataField,
|
|
2399
|
+
value: value,
|
|
2400
|
+
nestedField: props.nestedField,
|
|
2401
|
+
queryString: props.queryString,
|
|
2402
|
+
searchOperators: props.searchOperators
|
|
2403
|
+
}
|
|
2404
|
+
};
|
|
2405
|
+
};
|
|
2406
|
+
var mapStateToProps = function mapStateToProps(state, props) {
|
|
2407
|
+
return {
|
|
2408
|
+
selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
|
|
2409
|
+
selectedCategory: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].category || null,
|
|
2410
|
+
suggestions: state.hits[props.componentId] && state.hits[props.componentId].hits,
|
|
2411
|
+
rawData: state.rawData[props.componentId],
|
|
2412
|
+
aggregationData: state.compositeAggregations[props.componentId] || [],
|
|
2413
|
+
themePreset: state.config.themePreset,
|
|
2414
|
+
isLoading: !!state.isLoading["" + props.componentId],
|
|
2415
|
+
error: state.error[props.componentId],
|
|
2416
|
+
time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
|
|
2417
|
+
total: state.hits[props.componentId] && state.hits[props.componentId].total,
|
|
2418
|
+
hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
|
|
2419
|
+
AIResponse: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response || null,
|
|
2420
|
+
isAIResponseLoading: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].isLoading,
|
|
2421
|
+
AIResponseError: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].error,
|
|
2422
|
+
sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || '',
|
|
2423
|
+
isAITyping: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.isTyping || false
|
|
2424
|
+
};
|
|
2425
|
+
};
|
|
2426
|
+
var mapDispatchToProps = {
|
|
2427
|
+
updateQuery: updateQuery,
|
|
2428
|
+
setCustomQuery: setCustomQuery,
|
|
2429
|
+
setDefaultQuery: setDefaultQuery,
|
|
2430
|
+
recordSuggestionClick: recordSuggestionClick,
|
|
2431
|
+
recordAISessionUsefulness: analytics.recordAISessionUsefulness
|
|
2432
|
+
};
|
|
2433
|
+
var SBConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchToProps)(SearchBox), {
|
|
2434
|
+
componentType: constants.componentTypes.searchBox,
|
|
2435
|
+
internalComponent: true
|
|
2436
|
+
}));
|
|
2437
|
+
SBConnected.name = SearchBox.name;
|
|
2438
|
+
SBConnected.defaultQuery = SearchBox.defaultQuery;
|
|
2439
|
+
SBConnected.shouldQuery = SearchBox.shouldQuery;
|
|
2440
|
+
SBConnected.hasInternalComponent = SearchBox.hasInternalComponent;
|
|
2441
|
+
SBConnected.install = function (Vue) {
|
|
2442
|
+
Vue.component(SBConnected.name, SBConnected);
|
|
2443
|
+
};
|
|
2444
|
+
// Add componentType for SSR
|
|
2445
|
+
SBConnected.componentType = constants.componentTypes.searchBox;
|
|
2446
|
+
|
|
2447
|
+
function _isSlot$1(s) {
|
|
2448
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
2449
|
+
}
|
|
2450
|
+
var md$1 = new remarkable.Remarkable();
|
|
2451
|
+
md$1.set({
|
|
2452
|
+
html: true,
|
|
2453
|
+
breaks: true,
|
|
2454
|
+
xhtmlOut: true
|
|
2455
|
+
});
|
|
2456
|
+
var _inputWrapperRef = 'inputWrapperRef';
|
|
2457
|
+
var _inputRef = 'inputRef';
|
|
2458
|
+
var _errorContainerRef = 'errorContainerRef';
|
|
2459
|
+
var AIAnswer = vue.defineComponent({
|
|
2460
|
+
name: 'AIAnswer',
|
|
2461
|
+
data: function data() {
|
|
2462
|
+
var props = this.$props;
|
|
2463
|
+
this.__state = {
|
|
2464
|
+
messages: [],
|
|
2465
|
+
inputMessage: '',
|
|
2466
|
+
AISessionId: '',
|
|
2467
|
+
error: null
|
|
2468
|
+
};
|
|
2469
|
+
this.internalComponent = props.componentId + "__internal";
|
|
2470
|
+
return this.__state;
|
|
2471
|
+
},
|
|
2472
|
+
inject: {
|
|
2473
|
+
theme: {
|
|
2474
|
+
from: 'theme_reactivesearch'
|
|
2475
|
+
}
|
|
2476
|
+
},
|
|
2477
|
+
created: function created() {},
|
|
2478
|
+
computed: {
|
|
2479
|
+
hasCustomRenderer: function hasCustomRenderer() {
|
|
2480
|
+
return index.hasCustomRenderer(this);
|
|
2481
|
+
},
|
|
2482
|
+
isLoadingState: function isLoadingState() {
|
|
2483
|
+
return this.isAIResponseLoading || this.isLoading;
|
|
2484
|
+
},
|
|
2485
|
+
shouldShowComponent: function shouldShowComponent() {
|
|
2486
|
+
return this.showComponent;
|
|
2487
|
+
}
|
|
2488
|
+
},
|
|
2489
|
+
props: {
|
|
2490
|
+
componentId: vueTypes.types.string.isRequired,
|
|
2491
|
+
showVoiceInput: VueTypes.bool.def(false),
|
|
2492
|
+
showFeedback: VueTypes.bool.def(true),
|
|
2493
|
+
showIcon: VueTypes.bool.def(true),
|
|
2494
|
+
onData: vueTypes.types.func,
|
|
2495
|
+
innerRef: VueTypes.string.def('AISearchInputField'),
|
|
2496
|
+
react: vueTypes.types.react,
|
|
2497
|
+
enableAI: VueTypes.bool.def(true),
|
|
2498
|
+
AIConfig: vueTypes.types.AIConfig,
|
|
2499
|
+
iconPosition: vueTypes.types.iconPosition.def('left'),
|
|
2500
|
+
themePreset: vueTypes.types.themePreset,
|
|
2501
|
+
theme: vueTypes.types.style,
|
|
2502
|
+
icon: vueTypes.types.children,
|
|
2503
|
+
iconURL: VueTypes.string.def(''),
|
|
2504
|
+
renderMic: vueTypes.types.func,
|
|
2505
|
+
getMicInstance: vueTypes.types.func,
|
|
2506
|
+
innerClass: vueTypes.types.style,
|
|
2507
|
+
placeholder: VueTypes.string.def('Ask a question'),
|
|
2508
|
+
title: vueTypes.types.title,
|
|
2509
|
+
AIResponse: vueTypes.types.componentObject,
|
|
2510
|
+
isAIResponseLoading: VueTypes.bool.def(false),
|
|
2511
|
+
AIResponseError: vueTypes.types.componentObject,
|
|
2512
|
+
getAIResponse: vueTypes.types.func.isRequired,
|
|
2513
|
+
enterButton: vueTypes.types.bool,
|
|
2514
|
+
renderEnterButton: vueTypes.types.title,
|
|
2515
|
+
showInput: VueTypes.bool.def(true),
|
|
2516
|
+
clearSessionOnDestroy: VueTypes.bool.def(true),
|
|
2517
|
+
rawData: vueTypes.types.rawData,
|
|
2518
|
+
render: vueTypes.types.func,
|
|
2519
|
+
onError: vueTypes.types.func,
|
|
2520
|
+
renderError: vueTypes.types.title,
|
|
2521
|
+
isLoading: vueTypes.types.boolRequired,
|
|
2522
|
+
sessionIdFromStore: VueTypes.string,
|
|
2523
|
+
showComponent: vueTypes.types.boolRequired
|
|
2524
|
+
},
|
|
2525
|
+
mounted: function mounted() {},
|
|
2526
|
+
watch: {
|
|
2527
|
+
AIResponse: function AIResponse(newVal) {
|
|
2528
|
+
if (newVal) {
|
|
2529
|
+
this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
|
|
2530
|
+
var messagesHistory = newVal.messages,
|
|
2531
|
+
response = newVal.response;
|
|
2532
|
+
var finalMessages = [];
|
|
2533
|
+
if (response && response.error) {
|
|
2534
|
+
this.error = {
|
|
2535
|
+
message: response.error
|
|
2536
|
+
};
|
|
2537
|
+
}
|
|
2538
|
+
|
|
2539
|
+
// pushing message history so far
|
|
2540
|
+
if (messagesHistory && messagesHistory && Array.isArray(messagesHistory)) {
|
|
2541
|
+
finalMessages.push.apply(finalMessages, messagesHistory.filter(function (msg) {
|
|
2542
|
+
return msg.role !== constants.AI_ROLES.SYSTEM;
|
|
2543
|
+
}));
|
|
2544
|
+
}
|
|
2545
|
+
// fresh response
|
|
2546
|
+
if (response && response.answer) ;
|
|
2547
|
+
this.messages = finalMessages;
|
|
2548
|
+
} else if (!newVal && !this.error) {
|
|
2549
|
+
this.messages = [];
|
|
2550
|
+
}
|
|
2551
|
+
},
|
|
2552
|
+
rawData: function rawData(newVal) {
|
|
2553
|
+
this.$emit('on-data', {
|
|
2554
|
+
data: this.messages,
|
|
2555
|
+
rawData: newVal,
|
|
2556
|
+
loading: this.$props.isAIResponseLoading || this.$props.isLoading,
|
|
2557
|
+
error: this.$props.AIResponseError
|
|
2558
|
+
});
|
|
2559
|
+
},
|
|
2560
|
+
isAIResponseLoading: function isAIResponseLoading(newVal) {
|
|
2561
|
+
this.isLoadingState = newVal;
|
|
2562
|
+
this.$emit('on-data', {
|
|
2563
|
+
data: this.messages,
|
|
2564
|
+
rawData: this.$props.rawData,
|
|
2565
|
+
loading: newVal || this.$props.isLoading,
|
|
2566
|
+
error: this.$props.AIResponseError
|
|
2567
|
+
});
|
|
2568
|
+
},
|
|
2569
|
+
isLoading: function isLoading(newVal) {
|
|
2570
|
+
this.isLoadingState = newVal;
|
|
2571
|
+
this.$emit('on-data', {
|
|
2572
|
+
data: this.messages,
|
|
2573
|
+
rawData: this.$props.rawData,
|
|
2574
|
+
loading: newVal || this.$props.isLoading,
|
|
2575
|
+
error: this.$props.AIResponseError
|
|
2576
|
+
});
|
|
2577
|
+
},
|
|
2578
|
+
sessionIdFromStore: function sessionIdFromStore(newVal) {
|
|
2579
|
+
if (newVal) {
|
|
2580
|
+
this.sessionId = newVal;
|
|
2581
|
+
}
|
|
2582
|
+
},
|
|
2583
|
+
AIResponseError: function AIResponseError(newVal) {
|
|
2584
|
+
this.error = newVal;
|
|
2585
|
+
this.AISessionId = ((helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {})[this.$props.componentId] || {}).sessionId || null;
|
|
2586
|
+
this.$emit('on-data', {
|
|
2587
|
+
data: this.messages,
|
|
2588
|
+
rawData: this.$props.rawData,
|
|
2589
|
+
loading: this.$props.isAIResponseLoading || this.$props.isLoading,
|
|
2590
|
+
error: newVal
|
|
2591
|
+
});
|
|
2592
|
+
},
|
|
2593
|
+
messages: function messages() {
|
|
2594
|
+
this.scrollToBottom();
|
|
2595
|
+
}
|
|
2596
|
+
},
|
|
2597
|
+
methods: {
|
|
2598
|
+
scrollToBottom: function scrollToBottom() {
|
|
2599
|
+
var _this = this;
|
|
2600
|
+
this.$nextTick(function () {
|
|
2601
|
+
var _this$$refs;
|
|
2602
|
+
var messageContainer = (_this$$refs = _this.$refs) == null ? void 0 : _this$$refs[_this.$props.innerRef];
|
|
2603
|
+
if (messageContainer && messageContainer.$el) {
|
|
2604
|
+
messageContainer.$el.scrollTo({
|
|
2605
|
+
top: messageContainer.$el.scrollHeight,
|
|
2606
|
+
behavior: 'smooth'
|
|
2607
|
+
});
|
|
2608
|
+
}
|
|
2609
|
+
});
|
|
2610
|
+
},
|
|
2611
|
+
handleMessageInputChange: function handleMessageInputChange(e) {
|
|
2612
|
+
this.inputMessage = e.target.value;
|
|
2613
|
+
this.handleTextAreaHeightChange();
|
|
2614
|
+
},
|
|
2615
|
+
handleSendMessage: function handleSendMessage(e, isRetry, text) {
|
|
2616
|
+
if (isRetry === void 0) {
|
|
2617
|
+
isRetry = false;
|
|
2618
|
+
}
|
|
2619
|
+
if (text === void 0) {
|
|
2620
|
+
text = this.inputMessage;
|
|
2621
|
+
}
|
|
2622
|
+
if (typeof e === 'object') e.preventDefault();
|
|
2623
|
+
if (text.trim()) {
|
|
2624
|
+
if (this.isLoadingState) {
|
|
2625
|
+
return;
|
|
2626
|
+
}
|
|
2627
|
+
if (this.AISessionId) {
|
|
2628
|
+
if (!isRetry) this.messages = [].concat(this.messages, [{
|
|
2629
|
+
content: text,
|
|
2630
|
+
role: constants.AI_ROLES.USER
|
|
2631
|
+
}]);
|
|
2632
|
+
this.getAIResponse(this.AISessionId, this.componentId, text);
|
|
2633
|
+
} else {
|
|
2634
|
+
console.error("AISessionId for " + this.$props.componentId + " is missing! AIAnswer component requires an AISession to function. Try reloading the App.");
|
|
2635
|
+
this.error = {
|
|
2636
|
+
message: "AISessionId for " + this.$props.componentId + " is missing! AIAnswer component requires an AISession to function. Trying reloading the App."
|
|
2637
|
+
};
|
|
2638
|
+
}
|
|
2639
|
+
this.inputMessage = '';
|
|
2640
|
+
}
|
|
2641
|
+
},
|
|
2642
|
+
handleRetryRequest: function handleRetryRequest() {
|
|
2643
|
+
if (this.messages && !this.isLoadingState) {
|
|
2644
|
+
var _this$messages;
|
|
2645
|
+
var lastUserRequestMessage = (_this$messages = this.messages[this.messages.length - 1]) == null ? void 0 : _this$messages.content;
|
|
2646
|
+
if (this.AISessionId) {
|
|
2647
|
+
this.getAIResponse(this.AISessionId, this.componentId, lastUserRequestMessage);
|
|
2648
|
+
this.inputMessage = '';
|
|
2649
|
+
} else {
|
|
2650
|
+
console.error("AISessionId for " + this.componentId + " is missing! AIAnswer component requires an AISession to function. Try reloading the App.");
|
|
2651
|
+
}
|
|
2652
|
+
}
|
|
2653
|
+
},
|
|
2654
|
+
renderErrorComponent: function renderErrorComponent() {
|
|
2655
|
+
var renderError = this.$slots.renderError || this.$props.renderError;
|
|
2656
|
+
if (this.error && !this.isLoadingState) {
|
|
2657
|
+
var _this$error, _this$error2;
|
|
2658
|
+
if (renderError) {
|
|
2659
|
+
return vue.createVNode("div", {
|
|
2660
|
+
"ref": _errorContainerRef,
|
|
2661
|
+
"class": "--ai-answer-error-container " + (helper.getClassName(this.$props.innerClass, 'ai-error') || '')
|
|
2662
|
+
}, [index.isFunction(renderError) ? renderError(this.error, this.handleRetryRequest) : renderError]);
|
|
2663
|
+
}
|
|
2664
|
+
return vue.createVNode("div", {
|
|
2665
|
+
"ref": _errorContainerRef,
|
|
2666
|
+
"class": "--ai-answer-error-container " + (helper.getClassName(this.$props.innerClass, 'ai-error') || '')
|
|
2667
|
+
}, [vue.createVNode("div", {
|
|
2668
|
+
"class": "--default-error-element"
|
|
2669
|
+
}, [vue.createVNode("span", null, [(_this$error = this.error) != null && _this$error.message ? this.error.message : 'There was an error in generating the response.', ' ', (_this$error2 = this.error) != null && _this$error2.code ? "Code:\n\t\t\t\t\t\t\t" + this.error.code : '']), this.AISessionId && vue.createVNode(Button.Button, {
|
|
2670
|
+
"primary": true,
|
|
2671
|
+
"onClick": this.handleRetryRequest
|
|
2672
|
+
}, {
|
|
2673
|
+
"default": function _default() {
|
|
2674
|
+
return [vue.createTextVNode("Try again")];
|
|
2675
|
+
}
|
|
2676
|
+
})])]);
|
|
2677
|
+
}
|
|
2678
|
+
return null;
|
|
2679
|
+
},
|
|
2680
|
+
handleKeyPress: function handleKeyPress(e) {
|
|
2681
|
+
if (e.key === 'Enter') {
|
|
2682
|
+
this.handleSendMessage(e);
|
|
2683
|
+
this.inputMessage = '';
|
|
2684
|
+
}
|
|
2685
|
+
},
|
|
2686
|
+
renderIcon: function renderIcon() {
|
|
2687
|
+
if (this.$props.showIcon) {
|
|
2688
|
+
if (this.$props.icon) {
|
|
2689
|
+
return this.$props.icon;
|
|
2690
|
+
}
|
|
2691
|
+
if (this.$slots.icon) {
|
|
2692
|
+
return this.$slots.icon();
|
|
2693
|
+
}
|
|
2694
|
+
if (this.$props.iconURL) {
|
|
2695
|
+
return vue.createVNode("img", {
|
|
2696
|
+
"style": {
|
|
2697
|
+
maxHeight: '25px'
|
|
2698
|
+
},
|
|
2699
|
+
"src": this.$props.iconURL,
|
|
2700
|
+
"alt": "search-icon"
|
|
2701
|
+
}, null);
|
|
2702
|
+
}
|
|
2703
|
+
return vue.createVNode(SearchSvg, null, null);
|
|
2704
|
+
}
|
|
2705
|
+
return null;
|
|
2706
|
+
},
|
|
2707
|
+
shouldMicRender: function shouldMicRender(showVoiceSearch) {
|
|
2708
|
+
// checks for SSR
|
|
2709
|
+
if (typeof window === 'undefined') return false;
|
|
2710
|
+
return showVoiceSearch && (window.webkitSpeechRecognition || window.SpeechRecognition);
|
|
2711
|
+
},
|
|
2712
|
+
handleVoiceResults: function handleVoiceResults(_ref) {
|
|
2713
|
+
var results = _ref.results;
|
|
2714
|
+
if (results && results[0] && results[0].isFinal && results[0][0] && results[0][0].transcript && results[0][0].transcript.trim()) {
|
|
2715
|
+
this.handleSendMessage(null, false, results[0][0].transcript.trim());
|
|
2716
|
+
}
|
|
2717
|
+
},
|
|
2718
|
+
renderIcons: function renderIcons() {
|
|
2719
|
+
var _this2 = this;
|
|
2720
|
+
var _slot, _slot2;
|
|
2721
|
+
var _this$$props = this.$props,
|
|
2722
|
+
getMicInstance = _this$$props.getMicInstance,
|
|
2723
|
+
showVoiceInput = _this$$props.showVoiceInput,
|
|
2724
|
+
iconPosition = _this$$props.iconPosition,
|
|
2725
|
+
innerClass = _this$$props.innerClass;
|
|
2726
|
+
var renderMic = this.$slots.renderMic || this.$props.renderMic;
|
|
2727
|
+
return vue.createVNode("div", null, [vue.createVNode(DropDown.IconGroup, {
|
|
2728
|
+
"enableAI": true,
|
|
2729
|
+
"groupPosition": "right",
|
|
2730
|
+
"positionType": "absolute"
|
|
2731
|
+
}, {
|
|
2732
|
+
"default": function _default() {
|
|
2733
|
+
return [_this2.shouldMicRender(showVoiceInput) && vue.createVNode(Mic, {
|
|
2734
|
+
"getInstance": getMicInstance,
|
|
2735
|
+
"render": renderMic,
|
|
2736
|
+
"onResult": _this2.handleVoiceResults,
|
|
2737
|
+
"class": helper.getClassName(innerClass, 'ai-search-mic') || null
|
|
2738
|
+
}, null), iconPosition === 'right' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot = _this2.renderIcon()) ? _slot : {
|
|
2739
|
+
"default": function _default() {
|
|
2740
|
+
return [_slot];
|
|
2741
|
+
}
|
|
2742
|
+
})];
|
|
2743
|
+
}
|
|
2744
|
+
}), vue.createVNode(DropDown.IconGroup, {
|
|
2745
|
+
"enableAI": true,
|
|
2746
|
+
"groupPosition": "left",
|
|
2747
|
+
"positionType": "absolute"
|
|
2748
|
+
}, {
|
|
2749
|
+
"default": function _default() {
|
|
2750
|
+
return [iconPosition === 'left' && vue.createVNode(DropDown.IconWrapper, null, _isSlot$1(_slot2 = _this2.renderIcon()) ? _slot2 : {
|
|
2751
|
+
"default": function _default() {
|
|
2752
|
+
return [_slot2];
|
|
2753
|
+
}
|
|
2754
|
+
})];
|
|
2755
|
+
}
|
|
2756
|
+
})]);
|
|
2757
|
+
},
|
|
2758
|
+
enterButtonOnClick: function enterButtonOnClick(e) {
|
|
2759
|
+
this.handleSendMessage(e);
|
|
2760
|
+
},
|
|
2761
|
+
renderEnterButtonElement: function renderEnterButtonElement() {
|
|
2762
|
+
var _this3 = this;
|
|
2763
|
+
var _this$$props2 = this.$props,
|
|
2764
|
+
enterButton = _this$$props2.enterButton,
|
|
2765
|
+
innerClass = _this$$props2.innerClass;
|
|
2766
|
+
var renderEnterButton = this.$slots.renderEnterButton;
|
|
2767
|
+
if (enterButton) {
|
|
2768
|
+
var getEnterButtonMarkup = function getEnterButtonMarkup() {
|
|
2769
|
+
if (renderEnterButton) {
|
|
2770
|
+
return renderEnterButton(_this3.enterButtonOnClick);
|
|
2771
|
+
}
|
|
2772
|
+
return vue.createVNode(SendButton, {
|
|
2773
|
+
"primary": true,
|
|
2774
|
+
"type": "submit",
|
|
2775
|
+
"tabIndex": 0,
|
|
2776
|
+
"onClick": _this3.handleSendMessage,
|
|
2777
|
+
"onKeyPress": _this3.handleKeyPress,
|
|
2778
|
+
"class": "enter-btn " + helper.getClassName(innerClass, 'ai-enter-button')
|
|
2779
|
+
}, {
|
|
2780
|
+
"default": function _default() {
|
|
2781
|
+
return [vue.createTextVNode("Send")];
|
|
2782
|
+
}
|
|
2783
|
+
});
|
|
2784
|
+
};
|
|
2785
|
+
return vue.createVNode("div", {
|
|
2786
|
+
"class": "ai-enter-button-wrapper"
|
|
2787
|
+
}, [getEnterButtonMarkup()]);
|
|
2788
|
+
}
|
|
2789
|
+
return null;
|
|
2790
|
+
},
|
|
2791
|
+
getComponent: function getComponent() {
|
|
2792
|
+
var data = {
|
|
2793
|
+
error: this.AIResponseError,
|
|
2794
|
+
loading: this.isAIResponseLoading,
|
|
2795
|
+
data: this.messages,
|
|
2796
|
+
rawData: this.rawData
|
|
2797
|
+
};
|
|
2798
|
+
return index.getComponent(data, this);
|
|
2799
|
+
},
|
|
2800
|
+
handleTextAreaHeightChange: function handleTextAreaHeightChange() {
|
|
2801
|
+
var _this$$refs2, _this$$refs2$_inputRe, _this$$refs3, _this$$refs3$_inputWr, _this$$refs4;
|
|
2802
|
+
var textArea = (_this$$refs2 = this.$refs) == null ? void 0 : (_this$$refs2$_inputRe = _this$$refs2[_inputRef]) == null ? void 0 : _this$$refs2$_inputRe.$el;
|
|
2803
|
+
var inputWrapper = (_this$$refs3 = this.$refs) == null ? void 0 : (_this$$refs3$_inputWr = _this$$refs3[_inputWrapperRef]) == null ? void 0 : _this$$refs3$_inputWr.$el;
|
|
2804
|
+
var errorContainer = (_this$$refs4 = this.$refs) == null ? void 0 : _this$$refs4[_errorContainerRef];
|
|
2805
|
+
if (textArea) {
|
|
2806
|
+
textArea.style.height = '42px';
|
|
2807
|
+
var lineHeight = parseInt(getComputedStyle(textArea).lineHeight, 10);
|
|
2808
|
+
var maxHeight = lineHeight * 11; // max height for 10 lines
|
|
2809
|
+
var height = Math.min(textArea.scrollHeight, maxHeight);
|
|
2810
|
+
textArea.style.height = height + "px";
|
|
2811
|
+
textArea.style.overflowY = height === maxHeight ? 'auto' : 'hidden';
|
|
2812
|
+
// wrapper around input/ textarea
|
|
2813
|
+
inputWrapper.style.height = height + "px";
|
|
2814
|
+
// adjust error-container
|
|
2815
|
+
|
|
2816
|
+
if (errorContainer) {
|
|
2817
|
+
errorContainer.style.bottom = height + "px";
|
|
2818
|
+
}
|
|
2819
|
+
this.$forceUpdate();
|
|
2820
|
+
}
|
|
2821
|
+
}
|
|
2822
|
+
},
|
|
2823
|
+
beforeUnmount: function beforeUnmount() {
|
|
2824
|
+
if (this.$props.clearSessionOnDestroy) {
|
|
2825
|
+
// cleanup logic
|
|
2826
|
+
// final Object to store in local storage cache
|
|
2827
|
+
var finalCacheObj = helper.getObjectFromLocalStorage(constants.AI_LOCAL_CACHE_KEY) || {};
|
|
2828
|
+
// delete current component's cache
|
|
2829
|
+
delete finalCacheObj[this.$props.componentId];
|
|
2830
|
+
// update local cache
|
|
2831
|
+
helper.setObjectInLocalStorage(constants.AI_LOCAL_CACHE_KEY, finalCacheObj);
|
|
2832
|
+
}
|
|
2833
|
+
},
|
|
2834
|
+
render: function render() {
|
|
2835
|
+
var _slot3;
|
|
2836
|
+
var _this4 = this;
|
|
2837
|
+
var props = this.$props;
|
|
2838
|
+
if (!this.shouldShowComponent) {
|
|
2839
|
+
return null;
|
|
2840
|
+
}
|
|
2841
|
+
return vue.createVNode(Chatbox, null, {
|
|
2842
|
+
"default": function _default() {
|
|
2843
|
+
return [_this4.$props.title && vue.createVNode(Title.Title, {
|
|
2844
|
+
"class": helper.getClassName(_this4.$props.innerClass, 'title') || ''
|
|
2845
|
+
}, {
|
|
2846
|
+
"default": function _default() {
|
|
2847
|
+
return [_this4.$props.title];
|
|
2848
|
+
}
|
|
2849
|
+
}), vue.createVNode(ChatContainer, {
|
|
2850
|
+
"theme": props.theme,
|
|
2851
|
+
"showInput": props.showInput
|
|
2852
|
+
}, {
|
|
2853
|
+
"default": function _default() {
|
|
2854
|
+
return [_this4.hasCustomRenderer && vue.createVNode(MessagesContainer, {
|
|
2855
|
+
"themePreset": _this4.themePreset,
|
|
2856
|
+
"theme": props.theme,
|
|
2857
|
+
"ref": _this4.$props.innerRef,
|
|
2858
|
+
"class": "--ai-message-container " + (helper.getClassName(props.innerClass, 'ai-message-container') || '')
|
|
2859
|
+
}, _isSlot$1(_slot3 = _this4.getComponent()) ? _slot3 : {
|
|
2860
|
+
"default": function _default() {
|
|
2861
|
+
return [_slot3];
|
|
2862
|
+
}
|
|
2863
|
+
}), !_this4.hasCustomRenderer && vue.createVNode(MessagesContainer, {
|
|
2864
|
+
"themePreset": _this4.themePreset,
|
|
2865
|
+
"theme": props.theme,
|
|
2866
|
+
"ref": _this4.$props.innerRef,
|
|
2867
|
+
"class": "--ai-message-container " + (helper.getClassName(props.innerClass, 'ai-message-container') || '')
|
|
2868
|
+
}, {
|
|
2869
|
+
"default": function _default() {
|
|
2870
|
+
return [_this4.messages.map(function (message, index) {
|
|
2871
|
+
return vue.createVNode(Message, {
|
|
2872
|
+
"key": index,
|
|
2873
|
+
"isSender": message.role === constants.AI_ROLES.USER,
|
|
2874
|
+
"innerHTML": md$1.render(message.content),
|
|
2875
|
+
"themePreset": _this4.themePreset,
|
|
2876
|
+
"theme": props.theme,
|
|
2877
|
+
"class": "--ai-answer-message " + (helper.getClassName(props.innerClass, 'ai-message') || '')
|
|
2878
|
+
}, null);
|
|
2879
|
+
}), _this4.isLoadingState && vue.createVNode(Message, {
|
|
2880
|
+
"themePreset": _this4.themePreset,
|
|
2881
|
+
"theme": props.theme,
|
|
2882
|
+
"isSender": false,
|
|
2883
|
+
"class": "--ai-answer-message " + (helper.getClassName(props.innerClass, 'ai-message') || null)
|
|
2884
|
+
}, {
|
|
2885
|
+
"default": function _default() {
|
|
2886
|
+
return [vue.createVNode(TypingIndicator, null, {
|
|
2887
|
+
"default": function _default() {
|
|
2888
|
+
return [vue.createVNode(TypingDot, {
|
|
2889
|
+
"themePreset": _this4.themePreset
|
|
2890
|
+
}, null), vue.createVNode(TypingDot, {
|
|
2891
|
+
"themePreset": _this4.themePreset
|
|
2892
|
+
}, null), vue.createVNode(TypingDot, {
|
|
2893
|
+
"themePreset": _this4.themePreset
|
|
2894
|
+
}, null)];
|
|
2895
|
+
}
|
|
2896
|
+
})];
|
|
2897
|
+
}
|
|
2898
|
+
})];
|
|
2899
|
+
}
|
|
2900
|
+
}), _this4.renderErrorComponent(), ' ', props.showFeedback && vue.createVNode("div", {
|
|
2901
|
+
"class": "--ai-answer-feedback-container " + (helper.getClassName(props.innerClass, 'ai-feedback') || '')
|
|
2902
|
+
}, [vue.createVNode(AIFeedback, {
|
|
2903
|
+
"hideUI": _this4.isLoadingState || !_this4.sessionId,
|
|
2904
|
+
"key": _this4.sessionId,
|
|
2905
|
+
"onFeedbackSubmit": function onFeedbackSubmit(useful, reason) {
|
|
2906
|
+
_this4.trackUsefullness(_this4.sessionId, {
|
|
2907
|
+
useful: useful,
|
|
2908
|
+
reason: reason
|
|
2909
|
+
});
|
|
2910
|
+
}
|
|
2911
|
+
}, null)]), props.showInput && vue.createVNode(MessageInputContainer, {
|
|
2912
|
+
"class": "--ai-input-container",
|
|
2913
|
+
"onSubmit": _this4.handleSendMessage
|
|
2914
|
+
}, {
|
|
2915
|
+
"default": function _default() {
|
|
2916
|
+
return [vue.createVNode(InputGroup, {
|
|
2917
|
+
"enableAI": true,
|
|
2918
|
+
"isOpen": false
|
|
2919
|
+
}, {
|
|
2920
|
+
"default": function _default() {
|
|
2921
|
+
return [vue.createVNode(DropDown.InputWrapper, {
|
|
2922
|
+
"ref": _inputWrapperRef
|
|
2923
|
+
}, {
|
|
2924
|
+
"default": function _default() {
|
|
2925
|
+
return [vue.createVNode(MessageInput, {
|
|
2926
|
+
"ref": _inputRef,
|
|
2927
|
+
"type": "text",
|
|
2928
|
+
"placeholder": props.placeholder,
|
|
2929
|
+
"enterButton": props.enterButton,
|
|
2930
|
+
"value": _this4.inputMessage,
|
|
2931
|
+
"onInput": _this4.handleMessageInputChange,
|
|
2932
|
+
"onKeyPress": _this4.handleKeyPress,
|
|
2933
|
+
"id": props.componentId + "-ai-input",
|
|
2934
|
+
"showIcon": props.showIcon,
|
|
2935
|
+
"iconPosition": props.iconPosition,
|
|
2936
|
+
"themePreset": _this4.themePreset,
|
|
2937
|
+
"disabled": _this4.isLoadingState,
|
|
2938
|
+
"class": helper.getClassName(props.innerClass, 'ai-input') || null
|
|
2939
|
+
}, null), ' ', _this4.renderIcons()];
|
|
2940
|
+
}
|
|
2941
|
+
})];
|
|
2942
|
+
}
|
|
2943
|
+
}), _this4.renderEnterButtonElement()];
|
|
2944
|
+
}
|
|
2945
|
+
}), ' '];
|
|
2946
|
+
}
|
|
2947
|
+
})];
|
|
2948
|
+
}
|
|
2949
|
+
});
|
|
2950
|
+
}
|
|
2951
|
+
});
|
|
2952
|
+
AIAnswer.hasInternalComponent = function () {
|
|
2953
|
+
return true;
|
|
2954
|
+
};
|
|
2955
|
+
var mapStateToProps$1 = function mapStateToProps(state, props) {
|
|
2956
|
+
var dependencyComponent = Object.values(props.react)[0];
|
|
2957
|
+
if (Array.isArray(dependencyComponent)) {
|
|
2958
|
+
// eslint-disable-next-line prefer-destructuring
|
|
2959
|
+
dependencyComponent = dependencyComponent[0];
|
|
2960
|
+
}
|
|
2961
|
+
var showComponent = state.selectedValues[dependencyComponent] && state.selectedValues[dependencyComponent].value;
|
|
2962
|
+
return {
|
|
2963
|
+
showComponent: showComponent,
|
|
2964
|
+
AIResponse: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response,
|
|
2965
|
+
isAIResponseLoading: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].isLoading,
|
|
2966
|
+
AIResponseError: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].error,
|
|
2967
|
+
rawData: state.rawData[props.componentId],
|
|
2968
|
+
themePreset: state.config.themePreset,
|
|
2969
|
+
isLoading: state.isLoading[props.componentId] || false,
|
|
2970
|
+
sessionIdFromStore: state.AIResponses[props.componentId] && state.AIResponses[props.componentId].response && state.AIResponses[props.componentId].response.sessionId || ''
|
|
2971
|
+
};
|
|
2972
|
+
};
|
|
2973
|
+
var mapDispatchToProps$1 = {
|
|
2974
|
+
getAIResponse: query.fetchAIResponse,
|
|
2975
|
+
trackUsefullness: analytics.recordAISessionUsefulness
|
|
2976
|
+
};
|
|
2977
|
+
var AIConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$1, mapDispatchToProps$1)(AIAnswer), {
|
|
2978
|
+
componentType: constants.componentTypes.AIAnswer,
|
|
2979
|
+
internalComponent: true
|
|
2980
|
+
}));
|
|
2981
|
+
AIConnected.name = AIAnswer.name;
|
|
2982
|
+
AIConnected.hasInternalComponent = AIAnswer.hasInternalComponent;
|
|
2983
|
+
AIConnected.install = function (Vue) {
|
|
2984
|
+
Vue.component(AIConnected.name, AIConnected);
|
|
2985
|
+
};
|
|
2986
|
+
// Add componentType for SSR
|
|
2987
|
+
AIConnected.componentType = constants.componentTypes.AIAnswer;
|
|
2988
|
+
|
|
2989
|
+
var _templateObject$b, _templateObject2$4;
|
|
2990
|
+
var HierarchicalMenuList = vueEmotion.styled('ul')(_templateObject$b || (_templateObject$b = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 0;\n\toverflow: hidden;\n\n\t&.--open {\n\t\tmax-height: 100%;\n\t}\n"])));
|
|
2991
|
+
var HierarchicalMenuListItem = vueEmotion.styled('li')(_templateObject2$4 || (_templateObject2$4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tfont-weight: 400;\n\tline-height: 1.5;\n\tbox-sizing: border-box;\n\n\ta {\n\t\tcolor: #424242;\n\t\ttext-decoration: none;\n\t\tgap: 5px;\n\t\t.--leaf-icon,\n\t\t.--folder-icon {\n\t\t\tline-height: 15px;\n\t\t\tsvg {\n\t\t\t\theight: 15px;\n\t\t\t}\n\t\t}\n\n\t\tinput {\n\t\t\tmargin: 0;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.--switcher-icon {\n\t\ttransition: all 0.2s ease-in;\n\t\tmargin-right: 2px;\n\t}\n\t.--list-child {\n\t\tpadding-left: 1rem;\n\t\tposition: relative;\n\t\t&:before {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tborder-left: 1px solid #787878;\n\t\t\twidth: 0;\n\t\t\tleft: 19px;\n\t\t\t", ";\n\t\t}\n\n\t\t&.--show-switcher-icon {\n\t\t\tpadding-left: 36px;\n\t\t}\n\t}\n\t.--list-item-label {\n\t\tline-height: 100%;\n\t}\n\t.--list-item-count {\n\t\tmargin-left: 10px;\n\t\tpadding: 0.1rem 0.4rem;\n\t\tfont-size: 0.8rem;\n\t\tcolor: #424242;\n\t\tbackground-color: #dee1e6;\n\t\tborder-radius: 8px;\n\t}\n\t&.-selected-item {\n\t\tfont-weight: 700 !important;\n\t}\n\t&.-expanded-item {\n\t\t& > a {\n\t\t\t& div > .--switcher-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n\t.--list-item-label-count-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\t.--list-item-count,\n\t\t\t.--list-item-label {\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n"])), function (props) {
|
|
2992
|
+
return !props.showLine && "\n\t\t\t\t\tdisplay: none;\n\t\t\t\t";
|
|
2993
|
+
});
|
|
2994
|
+
|
|
2995
|
+
var HierarchicalMenuListItemComponent = {
|
|
2996
|
+
name: 'HierarchicalMenuListItemComponent',
|
|
2997
|
+
data: function data() {
|
|
2998
|
+
return {
|
|
2999
|
+
isExpanded: false,
|
|
3000
|
+
newParentPath: ''
|
|
3001
|
+
};
|
|
3002
|
+
},
|
|
3003
|
+
created: function created() {
|
|
3004
|
+
var listItemLabel = this.listItem.key;
|
|
3005
|
+
var newParentPath = listItemLabel;
|
|
3006
|
+
if (this.parentPath) {
|
|
3007
|
+
newParentPath = "" + this.parentPath + constants.TREELIST_VALUES_PATH_SEPARATOR + listItemLabel;
|
|
3008
|
+
}
|
|
3009
|
+
this.newParentPath = newParentPath;
|
|
3010
|
+
this.isExpanded = !!helper.recLookup(this.selectedValues, newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
|
|
3011
|
+
},
|
|
3012
|
+
watch: {
|
|
3013
|
+
listItem: function listItem(newVal) {
|
|
3014
|
+
if (newVal.initiallyExpanded) {
|
|
3015
|
+
this.isExpanded = newVal.initiallyExpanded;
|
|
3016
|
+
}
|
|
3017
|
+
},
|
|
3018
|
+
selectedValues: function selectedValues(newVal) {
|
|
3019
|
+
this.isExpanded = !!helper.recLookup(newVal, this.newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
|
|
3020
|
+
}
|
|
3021
|
+
},
|
|
3022
|
+
props: {
|
|
3023
|
+
parentPath: types.string,
|
|
3024
|
+
selectedValues: types.rawData,
|
|
3025
|
+
mode: types.string,
|
|
3026
|
+
searchTerm: types.string,
|
|
3027
|
+
listItem: types.rawData,
|
|
3028
|
+
showLine: types.bool,
|
|
3029
|
+
renderItem: types.func,
|
|
3030
|
+
handleListItemClick: types.func,
|
|
3031
|
+
renderSwitcherIcon: types.func,
|
|
3032
|
+
showCheckbox: VueTypes.bool,
|
|
3033
|
+
innerClass: types.style,
|
|
3034
|
+
showRadio: VueTypes.bool,
|
|
3035
|
+
renderIcon: types.func,
|
|
3036
|
+
showCount: VueTypes.bool,
|
|
3037
|
+
showSwitcherIcon: types.bool,
|
|
3038
|
+
switcherIcon: types.children
|
|
3039
|
+
},
|
|
3040
|
+
render: function render() {
|
|
3041
|
+
var _this = this;
|
|
3042
|
+
var _this$$props = this.$props,
|
|
3043
|
+
selectedValues = _this$$props.selectedValues,
|
|
3044
|
+
mode = _this$$props.mode,
|
|
3045
|
+
searchTerm = _this$$props.searchTerm,
|
|
3046
|
+
listItem = _this$$props.listItem,
|
|
3047
|
+
parentPath = _this$$props.parentPath,
|
|
3048
|
+
showLine = _this$$props.showLine,
|
|
3049
|
+
renderItem = _this$$props.renderItem,
|
|
3050
|
+
handleListItemClick = _this$$props.handleListItemClick,
|
|
3051
|
+
showCheckbox = _this$$props.showCheckbox,
|
|
3052
|
+
innerClass = _this$$props.innerClass,
|
|
3053
|
+
showRadio = _this$$props.showRadio,
|
|
3054
|
+
renderIcon = _this$$props.renderIcon,
|
|
3055
|
+
showCount = _this$$props.showCount,
|
|
3056
|
+
showSwitcherIcon = _this$$props.showSwitcherIcon;
|
|
3057
|
+
if (!(listItem instanceof Object) || Object.keys(listItem).length === 0) {
|
|
3058
|
+
return null;
|
|
3059
|
+
}
|
|
3060
|
+
var listItemLabel = listItem.key;
|
|
3061
|
+
var listItemCount = listItem.count;
|
|
3062
|
+
var isLeafNode = !(Array.isArray(listItem.list) && listItem.list.length > 0);
|
|
3063
|
+
var renderSwitcherIcon = function renderSwitcherIcon(isExpandedProp) {
|
|
3064
|
+
if (showSwitcherIcon === false) {
|
|
3065
|
+
return null;
|
|
3066
|
+
}
|
|
3067
|
+
var switcherIcon = _this.$props.switcherIcon;
|
|
3068
|
+
if (switcherIcon) return switcherIcon(isExpandedProp);
|
|
3069
|
+
return (
|
|
3070
|
+
/* eslint-disable jsx-a11y/click-events-have-key-events
|
|
3071
|
+
, jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-tabindex */
|
|
3072
|
+
vue.createVNode("span", {
|
|
3073
|
+
"tabIndex": "0",
|
|
3074
|
+
"onClick": function onClick(e) {
|
|
3075
|
+
e.stopPropagation();
|
|
3076
|
+
_this.isExpanded = !_this.isExpanded;
|
|
3077
|
+
},
|
|
3078
|
+
"class": "--switcher-icon"
|
|
3079
|
+
}, [vue.createTextVNode("\u27A4")])
|
|
3080
|
+
);
|
|
3081
|
+
};
|
|
3082
|
+
var isSelected = false;
|
|
3083
|
+
if (mode === 'single') {
|
|
3084
|
+
if (helper.recLookup(selectedValues, this.newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR) === true) {
|
|
3085
|
+
isSelected = true;
|
|
3086
|
+
}
|
|
3087
|
+
} else {
|
|
3088
|
+
isSelected = !!helper.recLookup(selectedValues, this.newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
|
|
3089
|
+
}
|
|
3090
|
+
return vue.createVNode(HierarchicalMenuListItem, {
|
|
3091
|
+
"class": (isSelected ? '-selected-item' : '') + " " + (this.isExpanded ? '-expanded-item' : ''),
|
|
3092
|
+
"key": this.newParentPath,
|
|
3093
|
+
"showLine": showLine
|
|
3094
|
+
}, {
|
|
3095
|
+
"default": function _default() {
|
|
3096
|
+
return [vue.createVNode(ListItem.ListItem, {
|
|
3097
|
+
"isTreeListItem": true,
|
|
3098
|
+
"onClick": function onClick() {
|
|
3099
|
+
handleListItemClick(listItemLabel, parentPath);
|
|
3100
|
+
},
|
|
3101
|
+
"style": {
|
|
3102
|
+
textDecoration: 'none'
|
|
3103
|
+
}
|
|
3104
|
+
}, {
|
|
3105
|
+
"default": function _default() {
|
|
3106
|
+
return [renderItem ? renderItem(listItemLabel, listItemCount, isSelected) : vue.createVNode(Flex.Flex, {
|
|
3107
|
+
"alignItems": "center",
|
|
3108
|
+
"gap": "5px"
|
|
3109
|
+
}, {
|
|
3110
|
+
"default": function _default() {
|
|
3111
|
+
return [!isLeafNode && renderSwitcherIcon(isSelected), mode === 'multiple' && showCheckbox && vue.createVNode(Flex.Flex, {
|
|
3112
|
+
"alignItems": "center",
|
|
3113
|
+
"gap": "5px"
|
|
3114
|
+
}, {
|
|
3115
|
+
"default": function _default() {
|
|
3116
|
+
return [vue.createVNode(FormControlList.Checkbox, {
|
|
3117
|
+
"type": "checkbox",
|
|
3118
|
+
"class": helper.getClassName(innerClass, 'checkbox') || null,
|
|
3119
|
+
"checked": isSelected,
|
|
3120
|
+
"id": listItemLabel + "-checkbox-" + _this.newParentPath,
|
|
3121
|
+
"name": listItemLabel + "-checkbox-" + _this.newParentPath,
|
|
3122
|
+
"show": true,
|
|
3123
|
+
"readOnly": true
|
|
3124
|
+
}, null), vue.createVNode("label", {
|
|
3125
|
+
"style": {
|
|
3126
|
+
width: '26px',
|
|
3127
|
+
marginTop: 0,
|
|
3128
|
+
marginBottom: 0,
|
|
3129
|
+
marginRight: '-9px',
|
|
3130
|
+
left: '-3px'
|
|
3131
|
+
},
|
|
3132
|
+
"htmlFor": listItemLabel + "-checkbox-" + _this.newParentPath,
|
|
3133
|
+
"onClick": function onClick(e) {
|
|
3134
|
+
e.stopPropagation();
|
|
3135
|
+
}
|
|
3136
|
+
}, null)];
|
|
3137
|
+
}
|
|
3138
|
+
}), mode === 'single' && showRadio && vue.createVNode(Flex.Flex, {
|
|
3139
|
+
"alignItems": "center",
|
|
3140
|
+
"gap": "5px"
|
|
3141
|
+
}, {
|
|
3142
|
+
"default": function _default() {
|
|
3143
|
+
return [vue.createVNode(FormControlList.Radio, {
|
|
3144
|
+
"checked": isSelected,
|
|
3145
|
+
"class": helper.getClassName(innerClass, 'radio') || null,
|
|
3146
|
+
"id": listItemLabel + "-radio-" + _this.newParentPath,
|
|
3147
|
+
"name": listItemLabel + "-radio-" + _this.newParentPath,
|
|
3148
|
+
"show": true,
|
|
3149
|
+
"readOnly": true,
|
|
3150
|
+
"type": "radio"
|
|
3151
|
+
}, null), vue.createVNode("label", {
|
|
3152
|
+
"style": {
|
|
3153
|
+
width: '26px',
|
|
3154
|
+
marginTop: 0,
|
|
3155
|
+
marginBottom: 0,
|
|
3156
|
+
marginRight: '-9px',
|
|
3157
|
+
left: '-3px'
|
|
3158
|
+
},
|
|
3159
|
+
"htmlFor": listItemLabel + "-radio-" + _this.newParentPath,
|
|
3160
|
+
"onClick": function onClick(e) {
|
|
3161
|
+
e.stopPropagation();
|
|
3162
|
+
}
|
|
3163
|
+
}, null)];
|
|
3164
|
+
}
|
|
3165
|
+
}), ' ', renderIcon(isLeafNode), vue.createVNode("div", {
|
|
3166
|
+
"class": "--list-item-label-count-wrapper"
|
|
3167
|
+
}, [vue.createVNode("span", {
|
|
3168
|
+
"class": "--list-item-label " + (helper.getClassName(innerClass, 'label') || '')
|
|
3169
|
+
}, [listItemLabel]), showCount && vue.createVNode("span", {
|
|
3170
|
+
"class": "--list-item-count " + (helper.getClassName(innerClass, 'count') || '')
|
|
3171
|
+
}, [listItemCount])])];
|
|
3172
|
+
}
|
|
3173
|
+
})];
|
|
3174
|
+
}
|
|
3175
|
+
}), isLeafNode === false && vue.createVNode("div", {
|
|
3176
|
+
"class": "--list-child " + (showSwitcherIcon ? ' --show-switcher-icon' : '')
|
|
3177
|
+
}, [vue.createVNode(HierarchicalMenuComponent, {
|
|
3178
|
+
"key": _this.newParentPath + "-" + listItemLabel + "-" + listItemCount,
|
|
3179
|
+
"listArray": listItem.list,
|
|
3180
|
+
"parentPath": _this.newParentPath,
|
|
3181
|
+
"isExpanded": _this.isExpanded,
|
|
3182
|
+
"listItemProps": {
|
|
3183
|
+
mode: mode,
|
|
3184
|
+
selectedValues: selectedValues,
|
|
3185
|
+
searchTerm: searchTerm,
|
|
3186
|
+
showLine: showLine,
|
|
3187
|
+
renderItem: renderItem,
|
|
3188
|
+
handleListItemClick: handleListItemClick,
|
|
3189
|
+
renderSwitcherIcon: renderSwitcherIcon,
|
|
3190
|
+
showCheckbox: showCheckbox,
|
|
3191
|
+
innerClass: innerClass,
|
|
3192
|
+
showRadio: showRadio,
|
|
3193
|
+
renderIcon: renderIcon,
|
|
3194
|
+
showCount: showCount,
|
|
3195
|
+
showSwitcherIcon: showSwitcherIcon,
|
|
3196
|
+
switcherIcon: _this.$props.switcherIcon
|
|
3197
|
+
}
|
|
3198
|
+
}, null)])];
|
|
3199
|
+
}
|
|
3200
|
+
});
|
|
3201
|
+
}
|
|
3202
|
+
};
|
|
3203
|
+
|
|
3204
|
+
function _isSlot$2(s) {
|
|
3205
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
3206
|
+
}
|
|
3207
|
+
var HierarchicalMenuComponent = {
|
|
3208
|
+
name: 'HierarchicalMenuComponent',
|
|
3209
|
+
props: {
|
|
3210
|
+
listArray: VueTypes.arrayOf(VueTypes.object),
|
|
3211
|
+
// array of objects
|
|
3212
|
+
parentPath: VueTypes.string.def(''),
|
|
3213
|
+
isExpanded: VueTypes.bool.def(false),
|
|
3214
|
+
listItemProps: types.rawData
|
|
3215
|
+
},
|
|
3216
|
+
render: function render() {
|
|
3217
|
+
var _slot;
|
|
3218
|
+
var _this$$props = this.$props,
|
|
3219
|
+
listArray = _this$$props.listArray,
|
|
3220
|
+
isExpanded = _this$$props.isExpanded,
|
|
3221
|
+
parentPath = _this$$props.parentPath,
|
|
3222
|
+
listItemProps = _this$$props.listItemProps;
|
|
3223
|
+
if (!Array.isArray(listArray) || listArray.length === 0) {
|
|
3224
|
+
return null;
|
|
3225
|
+
}
|
|
3226
|
+
return vue.createVNode(HierarchicalMenuList, {
|
|
3227
|
+
"class": "" + (isExpanded ? '--open' : ''),
|
|
3228
|
+
"isSelected": isExpanded
|
|
3229
|
+
}, _isSlot$2(_slot = listArray.map(function (listItem) {
|
|
3230
|
+
return vue.createVNode(HierarchicalMenuListItemComponent, vue.mergeProps({
|
|
3231
|
+
"key": parentPath + "__" + JSON.stringify(listItem),
|
|
3232
|
+
"parentPath": parentPath,
|
|
3233
|
+
"listItem": listItem
|
|
3234
|
+
}, listItemProps), null);
|
|
3235
|
+
})) ? _slot : {
|
|
3236
|
+
"default": function _default() {
|
|
3237
|
+
return [_slot];
|
|
3238
|
+
}
|
|
3239
|
+
});
|
|
3240
|
+
}
|
|
3241
|
+
};
|
|
3242
|
+
|
|
3243
|
+
function _isSlot$3(s) {
|
|
3244
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
|
|
3245
|
+
}
|
|
3246
|
+
var updateQueryAction = reactivecore.Actions.updateQuery,
|
|
3247
|
+
setQueryOptions = reactivecore.Actions.setQueryOptions;
|
|
3248
|
+
var transformValueIntoLocalState = function transformValueIntoLocalState(valueArray) {
|
|
3249
|
+
var valueToSet = {};
|
|
3250
|
+
if (valueArray.length) {
|
|
3251
|
+
var newSelectedValues = {};
|
|
3252
|
+
valueArray.forEach(function (valueItem) {
|
|
3253
|
+
helper.setDeep(newSelectedValues, valueItem.split(' > '), !helper.recLookup(newSelectedValues, valueItem.split(' > '), constants.TREELIST_VALUES_PATH_SEPARATOR), true);
|
|
3254
|
+
});
|
|
3255
|
+
valueToSet = newSelectedValues;
|
|
3256
|
+
}
|
|
3257
|
+
return valueToSet;
|
|
3258
|
+
};
|
|
3259
|
+
var TreeList = {
|
|
3260
|
+
name: 'TreeList',
|
|
3261
|
+
props: {
|
|
3262
|
+
selectedValue: vueTypes.types.selectedValue,
|
|
3263
|
+
error: vueTypes.types.title,
|
|
3264
|
+
rawData: vueTypes.types.rawData,
|
|
3265
|
+
aggregationData: vueTypes.types.rawData,
|
|
3266
|
+
themePreset: vueTypes.types.themePreset,
|
|
3267
|
+
updateQueryAction: vueTypes.types.funcRequired,
|
|
3268
|
+
setQueryOptions: vueTypes.types.funcRequired,
|
|
3269
|
+
// component props
|
|
3270
|
+
componentId: vueTypes.types.string.isRequired,
|
|
3271
|
+
className: vueTypes.types.string,
|
|
3272
|
+
style: vueTypes.types.style,
|
|
3273
|
+
showRadio: VueTypes.bool.def(false),
|
|
3274
|
+
showCheckbox: vueTypes.types.bool.def(false),
|
|
3275
|
+
mode: VueTypes.oneOf(['single', 'multiple']).def('multiple'),
|
|
3276
|
+
showCount: VueTypes.bool.def(false),
|
|
3277
|
+
showSearch: VueTypes.bool.def(false),
|
|
3278
|
+
showIcon: VueTypes.bool.def(false),
|
|
3279
|
+
icon: vueTypes.types.children,
|
|
3280
|
+
showLeafIcon: VueTypes.bool.def(false),
|
|
3281
|
+
leafIcon: vueTypes.types.children,
|
|
3282
|
+
showLine: VueTypes.bool.def(false),
|
|
3283
|
+
switcherIcon: vueTypes.types.func,
|
|
3284
|
+
render: vueTypes.types.func,
|
|
3285
|
+
renderItem: vueTypes.types.func,
|
|
3286
|
+
innerClass: vueTypes.types.style,
|
|
3287
|
+
placeholder: vueTypes.types.string,
|
|
3288
|
+
title: vueTypes.types.title,
|
|
3289
|
+
isLoading: vueTypes.types.bool,
|
|
3290
|
+
dataField: vueTypes.types.stringArray.isRequired,
|
|
3291
|
+
onQueryChange: vueTypes.types.func,
|
|
3292
|
+
defaultValue: vueTypes.types.stringArray,
|
|
3293
|
+
value: vueTypes.types.stringArray,
|
|
3294
|
+
customQuery: vueTypes.types.func,
|
|
3295
|
+
defaultQuery: vueTypes.types.func,
|
|
3296
|
+
enableAppbase: vueTypes.types.bool,
|
|
3297
|
+
index: vueTypes.types.string,
|
|
3298
|
+
showFilter: vueTypes.types.bool,
|
|
3299
|
+
URLParams: vueTypes.types.bool,
|
|
3300
|
+
filterLabel: vueTypes.types.string,
|
|
3301
|
+
onChange: vueTypes.types.func,
|
|
3302
|
+
onValueChange: vueTypes.types.func,
|
|
3303
|
+
beforeValueChange: vueTypes.types.func,
|
|
3304
|
+
sortBy: vueTypes.types.sortByWithCount.def('count'),
|
|
3305
|
+
onError: vueTypes.types.func,
|
|
3306
|
+
showSwitcherIcon: vueTypes.types.bool.def(true),
|
|
3307
|
+
renderError: vueTypes.types.title,
|
|
3308
|
+
renderNoResults: vueTypes.types.func,
|
|
3309
|
+
loader: vueTypes.types.title,
|
|
3310
|
+
aggergationSize: vueTypes.types.number,
|
|
3311
|
+
endpoint: vueTypes.types.endpoint,
|
|
3312
|
+
queryFormat: vueTypes.types.queryFormatSearch.def('or'),
|
|
3313
|
+
size: vueTypes.types.number.def(100),
|
|
3314
|
+
nestedField: vueTypes.types.string,
|
|
3315
|
+
react: vueTypes.types.react,
|
|
3316
|
+
transformData: vueTypes.types.func,
|
|
3317
|
+
selectAllLabel: vueTypes.types.string,
|
|
3318
|
+
showMissing: VueTypes.bool.def(false),
|
|
3319
|
+
missingLabel: VueTypes.string.def('N/A')
|
|
3320
|
+
},
|
|
3321
|
+
data: function data() {
|
|
3322
|
+
var props = this.$props;
|
|
3323
|
+
this.__state = {
|
|
3324
|
+
selectedValues: {},
|
|
3325
|
+
searchTerm: '',
|
|
3326
|
+
aggregationData: []
|
|
3327
|
+
};
|
|
3328
|
+
this.internalComponent = props.componentId + "__internal";
|
|
3329
|
+
return this.__state;
|
|
3330
|
+
},
|
|
3331
|
+
created: function created() {
|
|
3332
|
+
var props = this.$props;
|
|
3333
|
+
var componentId = props.componentId;
|
|
3334
|
+
var defaultValue = this.defaultValue || this.value;
|
|
3335
|
+
var currentValueArray = this.selectedValue || defaultValue || [];
|
|
3336
|
+
// update local state for selected values
|
|
3337
|
+
if (currentValueArray.length) {
|
|
3338
|
+
var newSelectedValues = transformValueIntoLocalState(currentValueArray);
|
|
3339
|
+
this.setValue(newSelectedValues, true);
|
|
3340
|
+
}
|
|
3341
|
+
|
|
3342
|
+
// Set custom and default queries in store
|
|
3343
|
+
helper.updateCustomQuery(componentId, props, currentValueArray);
|
|
3344
|
+
helper.updateDefaultQuery(componentId, props, currentValueArray);
|
|
3345
|
+
this.updateQueryOptions();
|
|
3346
|
+
},
|
|
3347
|
+
mounted: function mounted() {
|
|
3348
|
+
var _this$$props = this.$props,
|
|
3349
|
+
enableAppbase = _this$$props.enableAppbase,
|
|
3350
|
+
index = _this$$props.index;
|
|
3351
|
+
if (!enableAppbase && index) {
|
|
3352
|
+
console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
|
|
3353
|
+
}
|
|
3354
|
+
},
|
|
3355
|
+
watch: {
|
|
3356
|
+
defaultQuery: function defaultQuery() {
|
|
3357
|
+
this.updateDefaultQuery();
|
|
3358
|
+
this.updateQuery([]);
|
|
3359
|
+
},
|
|
3360
|
+
customQuery: function customQuery() {
|
|
3361
|
+
var valueArray = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
|
|
3362
|
+
this.updateQuery(valueArray);
|
|
3363
|
+
},
|
|
3364
|
+
sortBy: function sortBy() {
|
|
3365
|
+
this.updateQueryOptions();
|
|
3366
|
+
},
|
|
3367
|
+
dataField: function dataField() {
|
|
3368
|
+
var valueArray = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues) || [];
|
|
3369
|
+
this.updateQueryOptions();
|
|
3370
|
+
this.updateQuery(valueArray);
|
|
3371
|
+
},
|
|
3372
|
+
value: function value(newVal, oldVal) {
|
|
3373
|
+
if (!helper.isEqual(newVal, oldVal)) {
|
|
3374
|
+
this.setValue(newVal);
|
|
3375
|
+
}
|
|
3376
|
+
},
|
|
3377
|
+
selectedValue: function selectedValue(newVal) {
|
|
3378
|
+
if (!helper.isEqual(helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues), newVal)) {
|
|
3379
|
+
var _this$$props2 = this.$props,
|
|
3380
|
+
value = _this$$props2.value,
|
|
3381
|
+
onChange = _this$$props2.onChange;
|
|
3382
|
+
var valueToSet = [];
|
|
3383
|
+
if (Array.isArray(newVal) && newVal.length) {
|
|
3384
|
+
valueToSet = newVal;
|
|
3385
|
+
}
|
|
3386
|
+
if (value === undefined) {
|
|
3387
|
+
this.setValue(valueToSet);
|
|
3388
|
+
} else if (onChange && !helper.isEqual(value, valueToSet)) {
|
|
3389
|
+
onChange(valueToSet);
|
|
3390
|
+
}
|
|
3391
|
+
}
|
|
3392
|
+
},
|
|
3393
|
+
aggregationData: function aggregationData(newVal, oldVal) {
|
|
3394
|
+
if (newVal && !helper.isEqual(newVal, oldVal)) {
|
|
3395
|
+
this.$data.aggregationData = newVal;
|
|
3396
|
+
}
|
|
3397
|
+
}
|
|
3398
|
+
},
|
|
3399
|
+
computed: {
|
|
3400
|
+
hasCustomRenderer: function hasCustomRenderer() {
|
|
3401
|
+
return index.hasCustomRenderer(this);
|
|
3402
|
+
}
|
|
3403
|
+
},
|
|
3404
|
+
methods: {
|
|
3405
|
+
renderIcon: function renderIcon(isLeafNode) {
|
|
3406
|
+
var _this$$props3 = this.$props,
|
|
3407
|
+
showIcon = _this$$props3.showIcon,
|
|
3408
|
+
showLeafIcon = _this$$props3.showLeafIcon,
|
|
3409
|
+
icon = _this$$props3.icon;
|
|
3410
|
+
if (isLeafNode) {
|
|
3411
|
+
if (!showLeafIcon) return null;
|
|
3412
|
+
var _ref = this.$slots || this.$props,
|
|
3413
|
+
leafIcon = _ref.leafIcon;
|
|
3414
|
+
if (leafIcon) return leafIcon();
|
|
3415
|
+
return vue.createVNode("span", {
|
|
3416
|
+
"role": "img",
|
|
3417
|
+
"aria-label": "file",
|
|
3418
|
+
"class": "--leaf-icon"
|
|
3419
|
+
}, [vue.createVNode("svg", {
|
|
3420
|
+
"viewBox": "64 64 896 896",
|
|
3421
|
+
"focusable": "false",
|
|
3422
|
+
"data-icon": "file",
|
|
3423
|
+
"width": "1em",
|
|
3424
|
+
"height": "1em",
|
|
3425
|
+
"fill": "currentColor",
|
|
3426
|
+
"aria-hidden": "true"
|
|
3427
|
+
}, [vue.createVNode("path", {
|
|
3428
|
+
"d": "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
|
|
3429
|
+
}, null)])]);
|
|
3430
|
+
}
|
|
3431
|
+
if (!showIcon) return null;
|
|
3432
|
+
if (icon) {
|
|
3433
|
+
return icon;
|
|
3434
|
+
}
|
|
3435
|
+
if (this.$slots.icon) {
|
|
3436
|
+
return this.$slots.icon();
|
|
3437
|
+
}
|
|
3438
|
+
return vue.createVNode("span", {
|
|
3439
|
+
"role": "img",
|
|
3440
|
+
"aria-label": "folder-open",
|
|
3441
|
+
"class": "--folder-icon"
|
|
3442
|
+
}, [vue.createVNode("svg", {
|
|
3443
|
+
"viewBox": "64 64 896 896",
|
|
3444
|
+
"focusable": "false",
|
|
3445
|
+
"data-icon": "folder-open",
|
|
3446
|
+
"width": "1em",
|
|
3447
|
+
"height": "1em",
|
|
3448
|
+
"fill": "currentColor",
|
|
3449
|
+
"aria-hidden": "true"
|
|
3450
|
+
}, [vue.createVNode("path", {
|
|
3451
|
+
"d": "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 00-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z"
|
|
3452
|
+
}, null)])]);
|
|
3453
|
+
},
|
|
3454
|
+
getTransformedData: function getTransformedData() {
|
|
3455
|
+
var _this$$props4 = this.$props,
|
|
3456
|
+
dataField = _this$$props4.dataField,
|
|
3457
|
+
showSearch = _this$$props4.showSearch;
|
|
3458
|
+
var transformedData = helper.transformRawTreeListData(this.$data.aggregationData, dataField);
|
|
3459
|
+
var filteredData = [];
|
|
3460
|
+
if (showSearch && this.searchTerm) {
|
|
3461
|
+
filteredData = this.filterDataBasedOnSearchTerm(transformedData, '');
|
|
3462
|
+
}
|
|
3463
|
+
return filteredData.length ? filteredData : transformedData;
|
|
3464
|
+
},
|
|
3465
|
+
handleInputChange: function handleInputChange(e) {
|
|
3466
|
+
var value = e.target.value;
|
|
3467
|
+
this.searchTerm = value;
|
|
3468
|
+
},
|
|
3469
|
+
renderSearch: function renderSearch() {
|
|
3470
|
+
var _this$$props5 = this.$props,
|
|
3471
|
+
showSearch = _this$$props5.showSearch,
|
|
3472
|
+
innerClass = _this$$props5.innerClass,
|
|
3473
|
+
placeholder = _this$$props5.placeholder,
|
|
3474
|
+
componentId = _this$$props5.componentId,
|
|
3475
|
+
themePreset = _this$$props5.themePreset;
|
|
3476
|
+
if (showSearch) {
|
|
3477
|
+
return vue.createVNode(Input.Input, {
|
|
3478
|
+
"class": helper.getClassName(innerClass, 'input') || null,
|
|
3479
|
+
"onInput": this.handleInputChange,
|
|
3480
|
+
"value": this.searchTerm,
|
|
3481
|
+
"placeholder": placeholder || 'Search',
|
|
3482
|
+
"style": {
|
|
3483
|
+
margin: '0 0 8px'
|
|
3484
|
+
},
|
|
3485
|
+
"aria-label": componentId + "-search",
|
|
3486
|
+
"themePreset": themePreset
|
|
3487
|
+
}, null);
|
|
3488
|
+
}
|
|
3489
|
+
return null;
|
|
3490
|
+
},
|
|
3491
|
+
handleListItemClick: function handleListItemClick(key, parentPath) {
|
|
3492
|
+
var path = key;
|
|
3493
|
+
if (parentPath) {
|
|
3494
|
+
path = "" + parentPath + constants.TREELIST_VALUES_PATH_SEPARATOR + key;
|
|
3495
|
+
}
|
|
3496
|
+
var newSelectedValues = _rollupPluginBabelHelpers._extends({}, this.selectedValues);
|
|
3497
|
+
if (this.$props.mode === 'single') {
|
|
3498
|
+
newSelectedValues = {};
|
|
3499
|
+
helper.setDeep(newSelectedValues, path.split(constants.TREELIST_VALUES_PATH_SEPARATOR), true, true);
|
|
3500
|
+
} else {
|
|
3501
|
+
var newValue = !helper.recLookup(newSelectedValues, path, constants.TREELIST_VALUES_PATH_SEPARATOR);
|
|
3502
|
+
helper.setDeep(newSelectedValues, path.split(constants.TREELIST_VALUES_PATH_SEPARATOR), newValue, true);
|
|
3503
|
+
}
|
|
3504
|
+
newSelectedValues = utils.sanitizeObject(_rollupPluginBabelHelpers._extends({}, newSelectedValues));
|
|
3505
|
+
if (this.$props.value === undefined) {
|
|
3506
|
+
this.setValue(newSelectedValues);
|
|
3507
|
+
} else if (this.$props.onChange) {
|
|
3508
|
+
var valueToSet = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(newSelectedValues);
|
|
3509
|
+
this.$props.onChange(valueToSet);
|
|
3510
|
+
}
|
|
3511
|
+
},
|
|
3512
|
+
filterDataBasedOnSearchTerm: function filterDataBasedOnSearchTerm(listArray, parentPath) {
|
|
3513
|
+
var _this = this;
|
|
3514
|
+
if (!(listArray && Array.isArray(listArray) && listArray.length)) {
|
|
3515
|
+
return null;
|
|
3516
|
+
}
|
|
3517
|
+
var result = [];
|
|
3518
|
+
listArray.forEach(function (ele) {
|
|
3519
|
+
var isLeafItem = !ele.list;
|
|
3520
|
+
var newParentPath = ele.key;
|
|
3521
|
+
if (parentPath) {
|
|
3522
|
+
newParentPath = parentPath + "." + ele.key;
|
|
3523
|
+
}
|
|
3524
|
+
var keyHasSearchTerm = suggestions.replaceDiacritics(ele.key).toLowerCase().includes(suggestions.replaceDiacritics(_this.$data.searchTerm).toLowerCase()) || helper.recLookup(_this.$data.selectedValues, newParentPath, constants.TREELIST_VALUES_PATH_SEPARATOR);
|
|
3525
|
+
if (isLeafItem && keyHasSearchTerm) {
|
|
3526
|
+
result.push(_rollupPluginBabelHelpers._extends({}, ele, {
|
|
3527
|
+
initiallyExpanded: keyHasSearchTerm
|
|
3528
|
+
}));
|
|
3529
|
+
} else if (!isLeafItem) {
|
|
3530
|
+
var filteredChildrenItems = _this.filterDataBasedOnSearchTerm(ele.list, newParentPath);
|
|
3531
|
+
if (keyHasSearchTerm || !!filteredChildrenItems.length) {
|
|
3532
|
+
result.push(_rollupPluginBabelHelpers._extends({}, ele, {
|
|
3533
|
+
initiallyExpanded: keyHasSearchTerm || !!filteredChildrenItems.length,
|
|
3534
|
+
list: filteredChildrenItems
|
|
3535
|
+
}));
|
|
3536
|
+
}
|
|
3537
|
+
}
|
|
3538
|
+
});
|
|
3539
|
+
return result;
|
|
3540
|
+
},
|
|
3541
|
+
getComponent: function getComponent() {
|
|
3542
|
+
var _this$$props6 = this.$props,
|
|
3543
|
+
rawData = _this$$props6.rawData,
|
|
3544
|
+
error = _this$$props6.error,
|
|
3545
|
+
isLoading = _this$$props6.isLoading;
|
|
3546
|
+
var data = {
|
|
3547
|
+
data: this.getTransformedData(),
|
|
3548
|
+
rawData: rawData,
|
|
3549
|
+
error: error,
|
|
3550
|
+
handleClick: this.handleListItemClick,
|
|
3551
|
+
value: this.$data.selectedValues,
|
|
3552
|
+
loading: isLoading,
|
|
3553
|
+
PATH_SEPARATOR: constants.TREELIST_VALUES_PATH_SEPARATOR
|
|
3554
|
+
};
|
|
3555
|
+
return this.$slots.render(data) || helper.getComponent(data, this.$props);
|
|
3556
|
+
},
|
|
3557
|
+
getDefaultQuery: function getDefaultQuery(value) {
|
|
3558
|
+
var _this2 = this;
|
|
3559
|
+
var query = null;
|
|
3560
|
+
var type = 'term';
|
|
3561
|
+
var booleanAggregator = this.$props.queryFormat === 'or' ? 'should' : 'must';
|
|
3562
|
+
if (!Array.isArray(value) || value.length === 0) {
|
|
3563
|
+
return null;
|
|
3564
|
+
}
|
|
3565
|
+
if (value) {
|
|
3566
|
+
var _bool;
|
|
3567
|
+
// adds a sub-query with must as an array of objects for each term/value
|
|
3568
|
+
var queryArray = value.map(function (item) {
|
|
3569
|
+
return {
|
|
3570
|
+
bool: {
|
|
3571
|
+
must: item.split(' > ').map(function (subItem, i) {
|
|
3572
|
+
var _type, _ref2;
|
|
3573
|
+
return _ref2 = {}, _ref2[type] = (_type = {}, _type[_this2.$props.dataField[i]] = subItem, _type), _ref2;
|
|
3574
|
+
})
|
|
3575
|
+
}
|
|
3576
|
+
};
|
|
3577
|
+
});
|
|
3578
|
+
var listQuery = {
|
|
3579
|
+
bool: (_bool = {}, _bool[booleanAggregator] = queryArray, _bool)
|
|
3580
|
+
};
|
|
3581
|
+
query = value.length ? listQuery : null;
|
|
3582
|
+
}
|
|
3583
|
+
if (query && this.$props.nestedField) {
|
|
3584
|
+
return {
|
|
3585
|
+
nested: {
|
|
3586
|
+
path: this.$props.nestedField,
|
|
3587
|
+
query: query
|
|
3588
|
+
}
|
|
3589
|
+
};
|
|
3590
|
+
}
|
|
3591
|
+
return query;
|
|
3592
|
+
},
|
|
3593
|
+
updateQuery: function updateQuery(value) {
|
|
3594
|
+
var customQuery = this.$props.customQuery;
|
|
3595
|
+
var query = this.getDefaultQuery(value);
|
|
3596
|
+
var customQueryOptions;
|
|
3597
|
+
if (customQuery) {
|
|
3598
|
+
var _ref3 = customQuery(value, this.$props) || {};
|
|
3599
|
+
query = _ref3.query;
|
|
3600
|
+
customQueryOptions = helper.getOptionsFromQuery(customQuery(value, this.$props));
|
|
3601
|
+
helper.updateCustomQuery(this.$props.componentId, this.$props, value);
|
|
3602
|
+
}
|
|
3603
|
+
this.setQueryOptions(this.$props.componentId, _rollupPluginBabelHelpers._extends({}, this.generateQueryOptions(), customQueryOptions));
|
|
3604
|
+
this.updateQueryAction({
|
|
3605
|
+
componentId: this.$props.componentId,
|
|
3606
|
+
query: query,
|
|
3607
|
+
value: value,
|
|
3608
|
+
label: this.$props.filterLabel,
|
|
3609
|
+
showFilter: this.$props.showFilter,
|
|
3610
|
+
URLParams: this.$props.URLParams,
|
|
3611
|
+
componentType: constants.componentTypes.treeList
|
|
3612
|
+
});
|
|
3613
|
+
},
|
|
3614
|
+
setValue: function setValue(value, hasMountedParam) {
|
|
3615
|
+
var _this3 = this;
|
|
3616
|
+
if (hasMountedParam === void 0) {
|
|
3617
|
+
hasMountedParam = true;
|
|
3618
|
+
}
|
|
3619
|
+
var finalValues = Array.isArray(value) === false ? helper.transformTreeListLocalStateIntoQueryComptaibleFormat(value) : value;
|
|
3620
|
+
var performUpdate = function performUpdate() {
|
|
3621
|
+
var handleUpdates = function handleUpdates() {
|
|
3622
|
+
_this3.updateQuery(finalValues);
|
|
3623
|
+
if (_this3.$props.onValueChange) _this3.$props.onValueChange(finalValues);
|
|
3624
|
+
};
|
|
3625
|
+
if (hasMountedParam) {
|
|
3626
|
+
_this3.selectedValues = Array.isArray(value) ? transformValueIntoLocalState(value) : value;
|
|
3627
|
+
handleUpdates();
|
|
3628
|
+
} else {
|
|
3629
|
+
handleUpdates();
|
|
3630
|
+
}
|
|
3631
|
+
};
|
|
3632
|
+
helper.checkValueChange(this.$props.componentId, finalValues, this.$props.beforeValueChange, performUpdate);
|
|
3633
|
+
},
|
|
3634
|
+
generateQueryOptions: function generateQueryOptions() {
|
|
3635
|
+
var queryOptions = helper.getQueryOptions(this.$props);
|
|
3636
|
+
var valueArray = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
|
|
3637
|
+
return helper.getAggsQuery(valueArray, queryOptions, this.$props);
|
|
3638
|
+
},
|
|
3639
|
+
updateDefaultQuery: function updateDefaultQuery(queryOptions) {
|
|
3640
|
+
var value = helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.selectedValues);
|
|
3641
|
+
// Update default query for RS API
|
|
3642
|
+
helper.updateDefaultQuery(this.$props.componentId, this.$props, value);
|
|
3643
|
+
helper.updateInternalQuery(transform.getInternalComponentID(this.$props.componentId), queryOptions, value, this.$props, this.generateQueryOptions(), null);
|
|
3644
|
+
},
|
|
3645
|
+
updateQueryOptions: function updateQueryOptions() {
|
|
3646
|
+
// for a new query due to other changes don't append after to get fresh results
|
|
3647
|
+
var queryOptions = this.generateQueryOptions(this.$props, {}, helper.transformTreeListLocalStateIntoQueryComptaibleFormat(this.$data.selectedValues));
|
|
3648
|
+
if (this.$props.defaultQuery) {
|
|
3649
|
+
// eslint-disable-next-line no-use-before-define
|
|
3650
|
+
this.updateDefaultQuery(queryOptions);
|
|
3651
|
+
} else {
|
|
3652
|
+
this.setQueryOptions(transform.getInternalComponentID(this.$props.componentId), queryOptions);
|
|
3653
|
+
}
|
|
3654
|
+
}
|
|
3655
|
+
},
|
|
3656
|
+
render: function render() {
|
|
3657
|
+
var _this4 = this;
|
|
3658
|
+
var props = this.$props;
|
|
3659
|
+
var style = props.style,
|
|
3660
|
+
className = props.className,
|
|
3661
|
+
mode = props.mode,
|
|
3662
|
+
showLine = props.showLine,
|
|
3663
|
+
renderItem = props.renderItem,
|
|
3664
|
+
showCheckbox = props.showCheckbox,
|
|
3665
|
+
innerClass = props.innerClass,
|
|
3666
|
+
showRadio = props.showRadio,
|
|
3667
|
+
showCount = props.showCount,
|
|
3668
|
+
showSwitcherIcon = props.showSwitcherIcon,
|
|
3669
|
+
switcherIcon = props.switcherIcon,
|
|
3670
|
+
title = props.title,
|
|
3671
|
+
loader = props.loader,
|
|
3672
|
+
renderError = props.renderError;
|
|
3673
|
+
if (this.isLoading) {
|
|
3674
|
+
return (this.$slots.loader ? this.$slots.loader() : loader) || null;
|
|
3675
|
+
}
|
|
3676
|
+
if (this.error) {
|
|
3677
|
+
if (this.$slots.renderError) {
|
|
3678
|
+
return this.$slots.renderError(this.error);
|
|
3679
|
+
}
|
|
3680
|
+
return helper.isFunction(renderError) ? renderError(this.error) : renderError;
|
|
3681
|
+
}
|
|
3682
|
+
var transformedData = this.getTransformedData();
|
|
3683
|
+
if (!transformedData || transformedData.length === 0) {
|
|
3684
|
+
return this.$slots.renderNoResults ? this.$slots.renderNoResults() : null;
|
|
3685
|
+
}
|
|
3686
|
+
return vue.createVNode(Container.Container, {
|
|
3687
|
+
"style": style,
|
|
3688
|
+
"class": className
|
|
3689
|
+
}, {
|
|
3690
|
+
"default": function _default() {
|
|
3691
|
+
return [props.title && vue.createVNode(Title.Title, {
|
|
3692
|
+
"class": helper.getClassName(innerClass, 'title') || null
|
|
3693
|
+
}, _isSlot$3(title) ? title : {
|
|
3694
|
+
"default": function _default() {
|
|
3695
|
+
return [title];
|
|
3696
|
+
}
|
|
3697
|
+
}), _this4.renderSearch(), _this4.hasCustomRenderer ? _this4.getComponent() : vue.createVNode(HierarchicalMenuComponent, {
|
|
3698
|
+
"key": "initial-node",
|
|
3699
|
+
"listArray": transformedData,
|
|
3700
|
+
"parentPath": "",
|
|
3701
|
+
"isExpanded": true,
|
|
3702
|
+
"listItemProps": {
|
|
3703
|
+
mode: mode,
|
|
3704
|
+
selectedValues: _this4.selectedValues,
|
|
3705
|
+
searchTerm: _this4.searchTerm,
|
|
3706
|
+
showLine: showLine,
|
|
3707
|
+
renderItem: renderItem != null ? renderItem : _this4.$slots.renderItem,
|
|
3708
|
+
handleListItemClick: _this4.handleListItemClick,
|
|
3709
|
+
showCheckbox: showCheckbox,
|
|
3710
|
+
innerClass: innerClass,
|
|
3711
|
+
showRadio: showRadio,
|
|
3712
|
+
renderIcon: _this4.renderIcon,
|
|
3713
|
+
showCount: showCount,
|
|
3714
|
+
showSwitcherIcon: showSwitcherIcon,
|
|
3715
|
+
switcherIcon: switcherIcon != null ? switcherIcon : _this4.$slots.switcherIcon
|
|
3716
|
+
}
|
|
3717
|
+
}, null)];
|
|
3718
|
+
}
|
|
3719
|
+
});
|
|
3720
|
+
}
|
|
3721
|
+
};
|
|
3722
|
+
var mapStateToProps$2 = function mapStateToProps(state, props) {
|
|
3723
|
+
return {
|
|
3724
|
+
selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
|
|
3725
|
+
rawData: state.rawData[props.componentId] || {},
|
|
3726
|
+
aggregationData: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId] || {},
|
|
3727
|
+
themePreset: state.config.themePreset,
|
|
3728
|
+
error: state.error[props.componentId],
|
|
3729
|
+
isLoading: state.isLoading[props.componentId],
|
|
3730
|
+
enableAppbase: state.config.enableAppbase
|
|
3731
|
+
};
|
|
3732
|
+
};
|
|
3733
|
+
var mapDispatchtoProps = {
|
|
3734
|
+
setQueryOptions: setQueryOptions,
|
|
3735
|
+
updateQueryAction: updateQueryAction
|
|
3736
|
+
};
|
|
3737
|
+
TreeList.hasInternalComponent = function () {
|
|
3738
|
+
return true;
|
|
3739
|
+
};
|
|
3740
|
+
var TreeListConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps$2, mapDispatchtoProps)(TreeList), {
|
|
3741
|
+
componentType: constants.componentTypes.treeList,
|
|
3742
|
+
internalComponent: TreeList.hasInternalComponent()
|
|
3743
|
+
}));
|
|
3744
|
+
TreeListConnected.name = TreeList.name;
|
|
3745
|
+
TreeListConnected.install = function (Vue) {
|
|
3746
|
+
Vue.component(TreeListConnected.name, TreeListConnected);
|
|
3747
|
+
};
|
|
3748
|
+
|
|
3749
|
+
// Add componentType for SSR
|
|
3750
|
+
TreeListConnected.componentType = constants.componentTypes.treeList;
|
|
3751
|
+
|
|
3752
|
+
var RcConnected = PreferencesConsumer.PreferencesConsumer({
|
|
3753
|
+
name: 'RcConnected',
|
|
3754
|
+
render: function render() {
|
|
3755
|
+
var component = ReactiveComponent.default;
|
|
3756
|
+
switch (this.$attrs.componentType) {
|
|
3757
|
+
case constants.componentTypes.reactiveList:
|
|
3758
|
+
component = ReactiveList.default;
|
|
3759
|
+
break;
|
|
3760
|
+
case constants.componentTypes.searchBox:
|
|
3761
|
+
component = SBConnected;
|
|
3762
|
+
break;
|
|
3763
|
+
// list components
|
|
3764
|
+
case constants.componentTypes.singleList:
|
|
3765
|
+
component = SingleList.default;
|
|
3766
|
+
break;
|
|
3767
|
+
case constants.componentTypes.multiList:
|
|
3768
|
+
component = MultiList.default;
|
|
3769
|
+
break;
|
|
3770
|
+
case constants.componentTypes.singleDropdownList:
|
|
3771
|
+
component = SingleDropdownList.default;
|
|
3772
|
+
break;
|
|
3773
|
+
case constants.componentTypes.multiDropdownList:
|
|
3774
|
+
component = MultiDropdownList.default;
|
|
3775
|
+
break;
|
|
3776
|
+
// basic components
|
|
3777
|
+
case constants.componentTypes.toggleButton:
|
|
3778
|
+
component = ToggleButton.default;
|
|
3779
|
+
break;
|
|
3780
|
+
// range components
|
|
3781
|
+
case constants.componentTypes.dynamicRangeSlider:
|
|
3782
|
+
component = DynamicRangeSlider.default;
|
|
3783
|
+
break;
|
|
3784
|
+
case constants.componentTypes.singleRange:
|
|
3785
|
+
component = SingleRange.default;
|
|
3786
|
+
break;
|
|
3787
|
+
case constants.componentTypes.multiRange:
|
|
3788
|
+
component = MultiRange.default;
|
|
3789
|
+
break;
|
|
3790
|
+
case constants.componentTypes.rangeSlider:
|
|
3791
|
+
component = RangeSlider.default;
|
|
3792
|
+
break;
|
|
3793
|
+
case constants.componentTypes.rangeInput:
|
|
3794
|
+
component = RangeInput.default;
|
|
3795
|
+
break;
|
|
3796
|
+
}
|
|
3797
|
+
return vue.h(component, null, this.$slots);
|
|
3798
|
+
}
|
|
3799
|
+
});
|
|
3800
|
+
RcConnected.name = ReactiveComponent.default.name;
|
|
3801
|
+
RcConnected.hasInternalComponent = ReactiveComponent.default.hasInternalComponent;
|
|
3802
|
+
// Add componentType for SSR
|
|
3803
|
+
RcConnected.componentType = constants.componentTypes.reactiveComponent;
|
|
3804
|
+
RcConnected.install = function (Vue) {
|
|
3805
|
+
Vue.component(RcConnected.name, RcConnected);
|
|
3806
|
+
};
|
|
3807
|
+
|
|
3808
|
+
var components = [ReactiveList.default, ResultCard.default, ResultList.default, ReactiveBase.default, SBConnected, SingleList.default, MultiList.default, SingleRange.default, MultiRange.default, RangeSlider.default, DynamicRangeSlider.default, ReactiveComponent.default, RcConnected, SelectedFilters.default, ToggleButton.default, SingleDropdownList.default, MultiDropdownList.default, StateProvider.default, RangeInput.default, TreeListConnected, AIConnected];
|
|
3809
|
+
function install (Vue) {
|
|
3810
|
+
components.map(function (component) {
|
|
3811
|
+
Vue.use(component);
|
|
3812
|
+
return null;
|
|
3813
|
+
});
|
|
3814
|
+
}
|
|
3815
|
+
|
|
3816
|
+
exports.AIAnswer = AIConnected;
|
|
3817
|
+
exports.ReactiveComponentPrivate = RcConnected;
|
|
3818
|
+
exports.SearchBox = SBConnected;
|
|
3819
|
+
exports.TreeList = TreeListConnected;
|
|
3820
|
+
exports.install = install;
|