@sourceloop/search-client 6.1.0 → 7.0.0
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/esm2022/lib/lib-configuration.mjs +97 -0
- package/{esm2020 → esm2022}/lib/search/promise-api-adapter.service.mjs +4 -4
- package/esm2022/lib/search/search.component.mjs +403 -0
- package/{esm2020 → esm2022}/lib/search-lib.module.mjs +19 -19
- package/{fesm2020 → fesm2022}/sourceloop-search-client.mjs +130 -73
- package/{fesm2020 → fesm2022}/sourceloop-search-client.mjs.map +1 -1
- package/lib/search/search.component.d.ts +1 -1
- package/lib/types.d.ts +4 -4
- package/package.json +21 -27
- package/esm2020/lib/lib-configuration.mjs +0 -63
- package/esm2020/lib/search/search.component.mjs +0 -395
- package/fesm2015/sourceloop-search-client.mjs +0 -550
- package/fesm2015/sourceloop-search-client.mjs.map +0 -1
- /package/{esm2020 → esm2022}/lib/types.mjs +0 -0
- /package/{esm2020 → esm2022}/public-api.mjs +0 -0
- /package/{esm2020 → esm2022}/sourceloop-search-client.mjs +0 -0
|
@@ -1,550 +0,0 @@
|
|
|
1
|
-
import * as i2 from '@angular/common';
|
|
2
|
-
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
3
|
-
import { HttpClientModule } from '@angular/common/http';
|
|
4
|
-
import * as i0 from '@angular/core';
|
|
5
|
-
import { InjectionToken, Injectable, EventEmitter, PLATFORM_ID, Component, Inject, Optional, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
6
|
-
import { FlexLayoutModule } from '@angular/flex-layout';
|
|
7
|
-
import * as i3 from '@angular/forms';
|
|
8
|
-
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
9
|
-
import * as i4 from '@angular/material/form-field';
|
|
10
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as i7 from '@angular/material/icon';
|
|
12
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
-
import * as i8 from '@angular/material/input';
|
|
14
|
-
import { MatInputModule } from '@angular/material/input';
|
|
15
|
-
import * as i5 from '@angular/material/select';
|
|
16
|
-
import { MatSelectModule } from '@angular/material/select';
|
|
17
|
-
import { from, Subject } from 'rxjs';
|
|
18
|
-
import { tap, debounceTime } from 'rxjs/operators';
|
|
19
|
-
import * as i6 from '@angular/material/core';
|
|
20
|
-
import * as i9 from '@angular/flex-layout/flex';
|
|
21
|
-
|
|
22
|
-
// Copyright (c) 2023 Sourcefuse Technologies
|
|
23
|
-
function isApiServiceWithPromise(service) {
|
|
24
|
-
return !!service
|
|
25
|
-
.searchApiRequestWithPromise;
|
|
26
|
-
}
|
|
27
|
-
// cant use T extends IReturnType here
|
|
28
|
-
const SEARCH_SERVICE_TOKEN = new InjectionToken('Search_Service_Token');
|
|
29
|
-
// IRequestParameters default values
|
|
30
|
-
const DEFAULT_LIMIT = 20;
|
|
31
|
-
const DEFAULT_LIMIT_TYPE = false;
|
|
32
|
-
const DEFAULT_ORDER = [];
|
|
33
|
-
const DEBOUNCE_TIME = 1000;
|
|
34
|
-
const DEFAULT_OFFSET = 0;
|
|
35
|
-
const DEFAULT_SAVE_IN_RECENTS = true;
|
|
36
|
-
|
|
37
|
-
class PromiseApiAdapterService {
|
|
38
|
-
adapt(instance) {
|
|
39
|
-
// this is a workaround for the fact that the recentSearchApiRequestWithPromise
|
|
40
|
-
// method is optional in the ISearchServiceWithPromises interface
|
|
41
|
-
// and type system is not able maintain the type information of a property
|
|
42
|
-
const recentSearchMethod = instance.recentSearchApiRequestWithPromise;
|
|
43
|
-
return Object.assign({ searchApiRequest: (requestParameters, saveInRecents) => from(instance.searchApiRequestWithPromise(requestParameters, saveInRecents)) }, (recentSearchMethod && {
|
|
44
|
-
recentSearchApiRequest: () => from(recentSearchMethod()),
|
|
45
|
-
}));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
PromiseApiAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PromiseApiAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
49
|
-
PromiseApiAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PromiseApiAdapterService, providedIn: 'root' });
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PromiseApiAdapterService, decorators: [{
|
|
51
|
-
type: Injectable,
|
|
52
|
-
args: [{
|
|
53
|
-
providedIn: 'root',
|
|
54
|
-
}]
|
|
55
|
-
}] });
|
|
56
|
-
|
|
57
|
-
// Copyright (c) 2023 Sourcefuse Technologies
|
|
58
|
-
const ALL_LABEL = 'All';
|
|
59
|
-
class SearchComponent {
|
|
60
|
-
constructor(searchService,
|
|
61
|
-
// tslint:disable-next-line:ban-types
|
|
62
|
-
platformId, cdr, promiseAdapter) {
|
|
63
|
-
this.searchService = searchService;
|
|
64
|
-
this.platformId = platformId;
|
|
65
|
-
this.cdr = cdr;
|
|
66
|
-
this.promiseAdapter = promiseAdapter;
|
|
67
|
-
this.searchBoxInput = '';
|
|
68
|
-
this.suggestionsDisplay = false;
|
|
69
|
-
this.categoryDisplay = false;
|
|
70
|
-
this.searching = false;
|
|
71
|
-
this.suggestions = [];
|
|
72
|
-
this.recentSearches = [];
|
|
73
|
-
this.category = ALL_LABEL;
|
|
74
|
-
this.searchRequest$ = new Subject();
|
|
75
|
-
/**
|
|
76
|
-
* configure when application has own search input and use different all label
|
|
77
|
-
*/
|
|
78
|
-
this.customAllLabel = ALL_LABEL;
|
|
79
|
-
/**
|
|
80
|
-
* configure to true when to show only search result overlay without search bar
|
|
81
|
-
*/
|
|
82
|
-
this.showOnlySearchResultOverlay = false;
|
|
83
|
-
/**
|
|
84
|
-
* provide custom search event when showOnlySearchResultOverlay configure to true
|
|
85
|
-
*/
|
|
86
|
-
this.customSearchEvent = {
|
|
87
|
-
searchValue: '',
|
|
88
|
-
modelName: this.customAllLabel,
|
|
89
|
-
};
|
|
90
|
-
// emitted when user clicks one of the suggested results (including recent search sugestions)
|
|
91
|
-
this.clicked = new EventEmitter();
|
|
92
|
-
this.searched = new EventEmitter();
|
|
93
|
-
/* emitted when user makes search request (including recent search requests
|
|
94
|
-
& requests made on change in category from dropdown)
|
|
95
|
-
In case of recent search Array of recent Search request result is emitted */
|
|
96
|
-
this.onChange = () => { };
|
|
97
|
-
this.onTouched = () => { };
|
|
98
|
-
this.disabled = false;
|
|
99
|
-
}
|
|
100
|
-
get config() {
|
|
101
|
-
return this._config;
|
|
102
|
-
}
|
|
103
|
-
set config(value) {
|
|
104
|
-
var _a, _b;
|
|
105
|
-
this._config = value;
|
|
106
|
-
if (value && value.models) {
|
|
107
|
-
value.models.unshift({
|
|
108
|
-
name: ALL_LABEL,
|
|
109
|
-
displayName: (_a = this.customAllLabel) !== null && _a !== void 0 ? _a : ALL_LABEL,
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
else if (value && !value.models) {
|
|
113
|
-
value.models = [
|
|
114
|
-
{
|
|
115
|
-
name: ALL_LABEL,
|
|
116
|
-
displayName: (_b = this.customAllLabel) !== null && _b !== void 0 ? _b : ALL_LABEL,
|
|
117
|
-
},
|
|
118
|
-
];
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
// do nothing
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
set searchProvider(value) {
|
|
125
|
-
if (isApiServiceWithPromise(value)) {
|
|
126
|
-
value = this.promiseAdapter.adapt(value);
|
|
127
|
-
}
|
|
128
|
-
this.searchService = value;
|
|
129
|
-
}
|
|
130
|
-
get searchProvider() {
|
|
131
|
-
return this.searchService;
|
|
132
|
-
}
|
|
133
|
-
ngOnInit() {
|
|
134
|
-
this.searchRequest$
|
|
135
|
-
.pipe(tap(v => (this.suggestions = [])), debounceTime(DEBOUNCE_TIME))
|
|
136
|
-
.subscribe((value) => {
|
|
137
|
-
this.searched.emit({
|
|
138
|
-
event: value.event,
|
|
139
|
-
keyword: value.input,
|
|
140
|
-
category: this.category,
|
|
141
|
-
});
|
|
142
|
-
this.getSuggestions(value);
|
|
143
|
-
this.cdr.markForCheck();
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
// ControlValueAccessor Implementation
|
|
147
|
-
writeValue(value) {
|
|
148
|
-
this.searchBoxInput = value;
|
|
149
|
-
}
|
|
150
|
-
// When the value in the UI is changed, this method will invoke a callback function
|
|
151
|
-
registerOnChange(fn) {
|
|
152
|
-
this.onChange = fn;
|
|
153
|
-
}
|
|
154
|
-
registerOnTouched(fn) {
|
|
155
|
-
this.onTouched = fn;
|
|
156
|
-
}
|
|
157
|
-
setDisabledState(isDisabled) {
|
|
158
|
-
this.disabled = isDisabled;
|
|
159
|
-
}
|
|
160
|
-
getSuggestions(eventValue) {
|
|
161
|
-
var _a, _b, _c, _d, _e;
|
|
162
|
-
eventValue.input = eventValue.input.trim();
|
|
163
|
-
if (!eventValue.input.length) {
|
|
164
|
-
return;
|
|
165
|
-
}
|
|
166
|
-
const order = (_a = this.config.order) !== null && _a !== void 0 ? _a : DEFAULT_ORDER;
|
|
167
|
-
let orderString = '';
|
|
168
|
-
order.forEach(preference => (orderString = `${orderString}${preference} `));
|
|
169
|
-
let saveInRecents = (_b = this.config.saveInRecents) !== null && _b !== void 0 ? _b : DEFAULT_SAVE_IN_RECENTS;
|
|
170
|
-
if (this.config.saveInRecents && this.config.saveInRecentsOnlyOnEnter) {
|
|
171
|
-
if (!eventValue.event ||
|
|
172
|
-
(eventValue.event instanceof KeyboardEvent &&
|
|
173
|
-
eventValue.event.key === 'Enter')) {
|
|
174
|
-
saveInRecents = true; // save in recents only on enter or change in category
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
// do not save in recent search on typing
|
|
178
|
-
saveInRecents = false;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
/* need to put default value here and not in contructor
|
|
182
|
-
because sonar was giving code smell with definite assertion as all these
|
|
183
|
-
parameters are optional */
|
|
184
|
-
const requestParameters = {
|
|
185
|
-
match: eventValue.input,
|
|
186
|
-
sources: this._categoryToSourceName(this.category),
|
|
187
|
-
limit: (_c = this.config.limit) !== null && _c !== void 0 ? _c : DEFAULT_LIMIT,
|
|
188
|
-
limitByType: (_d = this.config.limitByType) !== null && _d !== void 0 ? _d : DEFAULT_LIMIT_TYPE,
|
|
189
|
-
order: orderString,
|
|
190
|
-
offset: (_e = this.config.offset) !== null && _e !== void 0 ? _e : DEFAULT_OFFSET,
|
|
191
|
-
};
|
|
192
|
-
this.searching = true;
|
|
193
|
-
this.cdr.markForCheck();
|
|
194
|
-
this.searchService
|
|
195
|
-
.searchApiRequest(requestParameters, saveInRecents)
|
|
196
|
-
.subscribe((value) => {
|
|
197
|
-
this.suggestions = value;
|
|
198
|
-
this.searching = false;
|
|
199
|
-
this.cdr.markForCheck();
|
|
200
|
-
}, (_error) => {
|
|
201
|
-
this.suggestions = [];
|
|
202
|
-
this.searching = false;
|
|
203
|
-
this.cdr.markForCheck();
|
|
204
|
-
});
|
|
205
|
-
}
|
|
206
|
-
getRecentSearches() {
|
|
207
|
-
if (!this.config.hideRecentSearch &&
|
|
208
|
-
this.searchService.recentSearchApiRequest) {
|
|
209
|
-
this.searchService.recentSearchApiRequest().subscribe((value) => {
|
|
210
|
-
this.recentSearches = value;
|
|
211
|
-
this.cdr.markForCheck();
|
|
212
|
-
}, (_error) => {
|
|
213
|
-
this.recentSearches = [];
|
|
214
|
-
this.cdr.markForCheck();
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
//event can be KeyBoardEvent or Event of type 'change'
|
|
219
|
-
// fired on change in value of drop down for category
|
|
220
|
-
hitSearchApi(event) {
|
|
221
|
-
// this will happen only in case user searches something and
|
|
222
|
-
// then erases it, we need to update recent search
|
|
223
|
-
if (!this.searchBoxInput) {
|
|
224
|
-
this.suggestions = [];
|
|
225
|
-
this.getRecentSearches();
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
|
-
// no debounce time needed in case of searchOnlyOnEnter
|
|
229
|
-
if (this.config.searchOnlyOnEnter) {
|
|
230
|
-
if (!event || (event instanceof KeyboardEvent && event.key === 'Enter')) {
|
|
231
|
-
this.getSuggestions({ input: this.searchBoxInput, event });
|
|
232
|
-
}
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
// no debounce time needed in case of change in category
|
|
236
|
-
if (!event) {
|
|
237
|
-
this.getSuggestions({ input: this.searchBoxInput, event });
|
|
238
|
-
return;
|
|
239
|
-
}
|
|
240
|
-
this.searchRequest$.next({
|
|
241
|
-
input: this.searchBoxInput,
|
|
242
|
-
event,
|
|
243
|
-
});
|
|
244
|
-
}
|
|
245
|
-
populateValue(suggestion, event) {
|
|
246
|
-
const value = suggestion[this.config.displayPropertyName];
|
|
247
|
-
// converted to string to assign value to searchBoxInput
|
|
248
|
-
this.searchBoxInput = value;
|
|
249
|
-
this.suggestionsDisplay = false;
|
|
250
|
-
// ngModelChange doesn't detect change in value
|
|
251
|
-
// when populated from outside, hence calling manually
|
|
252
|
-
this.onChange(this.searchBoxInput);
|
|
253
|
-
// need to do this to show more search options for selected
|
|
254
|
-
//suggestion - just in case user reopens search input
|
|
255
|
-
this.getSuggestions({ input: this.searchBoxInput, event });
|
|
256
|
-
this.clicked.emit({ item: suggestion, event });
|
|
257
|
-
}
|
|
258
|
-
populateValueRecentSearch(recentSearch, event) {
|
|
259
|
-
event.stopPropagation();
|
|
260
|
-
event.preventDefault();
|
|
261
|
-
const value = recentSearch['match'];
|
|
262
|
-
this.searchBoxInput = value;
|
|
263
|
-
this.suggestionsDisplay = false;
|
|
264
|
-
this.onChange(this.searchBoxInput);
|
|
265
|
-
// need to do this to show more search options for selected
|
|
266
|
-
// suggestion - just in case user reopens search input
|
|
267
|
-
this.getSuggestions({ input: this.searchBoxInput, event });
|
|
268
|
-
this.focusInput();
|
|
269
|
-
this.showSuggestions();
|
|
270
|
-
}
|
|
271
|
-
fetchModelImageUrlFromSuggestion(suggestion) {
|
|
272
|
-
const modelName = suggestion['source'];
|
|
273
|
-
let url;
|
|
274
|
-
this.config.models.forEach(model => {
|
|
275
|
-
if (model.name === modelName && model.imageUrl) {
|
|
276
|
-
url = model.imageUrl;
|
|
277
|
-
}
|
|
278
|
-
});
|
|
279
|
-
return url;
|
|
280
|
-
}
|
|
281
|
-
boldString(str, substr) {
|
|
282
|
-
const strRegExp = new RegExp(`(${substr})`, 'gi');
|
|
283
|
-
const stringToMakeBold = str;
|
|
284
|
-
return stringToMakeBold.replace(strRegExp, `<b>$1</b>`);
|
|
285
|
-
}
|
|
286
|
-
hideSuggestions() {
|
|
287
|
-
this.suggestionsDisplay = false;
|
|
288
|
-
this.onTouched();
|
|
289
|
-
}
|
|
290
|
-
showSuggestions() {
|
|
291
|
-
this.suggestionsDisplay = true;
|
|
292
|
-
this.getRecentSearches();
|
|
293
|
-
}
|
|
294
|
-
focusInput() {
|
|
295
|
-
if (isPlatformBrowser(this.platformId) &&
|
|
296
|
-
!this.showOnlySearchResultOverlay) {
|
|
297
|
-
this.searchInputElement.nativeElement.focus();
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
setCategory(category) {
|
|
301
|
-
this.category = category;
|
|
302
|
-
this.categoryDisplay = false;
|
|
303
|
-
if (this.searchBoxInput) {
|
|
304
|
-
this.hitSearchApi();
|
|
305
|
-
this.focusInput();
|
|
306
|
-
this.showSuggestions();
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
showCategory() {
|
|
310
|
-
this.categoryDisplay = !this.categoryDisplay;
|
|
311
|
-
}
|
|
312
|
-
hideCategory() {
|
|
313
|
-
this.categoryDisplay = false;
|
|
314
|
-
}
|
|
315
|
-
resetInput() {
|
|
316
|
-
this.searchBoxInput = '';
|
|
317
|
-
this.suggestions = [];
|
|
318
|
-
this.suggestionsDisplay = true;
|
|
319
|
-
this.focusInput();
|
|
320
|
-
// ngModelChange doesn't detect change in value
|
|
321
|
-
// when populated from outside, hence calling manually
|
|
322
|
-
this.onChange(this.searchBoxInput);
|
|
323
|
-
this.getRecentSearches();
|
|
324
|
-
}
|
|
325
|
-
ngOnDestroy() {
|
|
326
|
-
this.searchRequest$.unsubscribe();
|
|
327
|
-
}
|
|
328
|
-
_categoryToSourceName(category) {
|
|
329
|
-
if ([ALL_LABEL, this.customAllLabel].includes(category)) {
|
|
330
|
-
return [];
|
|
331
|
-
}
|
|
332
|
-
else {
|
|
333
|
-
return [category];
|
|
334
|
-
}
|
|
335
|
-
}
|
|
336
|
-
getModelFromModelName(name) {
|
|
337
|
-
return this.config.models.find(item => item.name === name);
|
|
338
|
-
}
|
|
339
|
-
getModelsWithSuggestions() {
|
|
340
|
-
const modelsWithSuggestions = [];
|
|
341
|
-
const sources = [];
|
|
342
|
-
this.suggestions.forEach(suggestion => {
|
|
343
|
-
if (sources.indexOf(suggestion['source']) >= 0) {
|
|
344
|
-
modelsWithSuggestions.every(modelWithSuggestions => {
|
|
345
|
-
if (modelWithSuggestions.model.name === suggestion['source']) {
|
|
346
|
-
modelWithSuggestions.items.push(suggestion);
|
|
347
|
-
return false;
|
|
348
|
-
}
|
|
349
|
-
return true;
|
|
350
|
-
});
|
|
351
|
-
}
|
|
352
|
-
else {
|
|
353
|
-
const model = this.getModelFromModelName(suggestion['source']);
|
|
354
|
-
modelsWithSuggestions.push({ model, items: [suggestion] });
|
|
355
|
-
sources.push(suggestion['source']);
|
|
356
|
-
}
|
|
357
|
-
});
|
|
358
|
-
return modelsWithSuggestions;
|
|
359
|
-
}
|
|
360
|
-
ngOnChanges(changes) {
|
|
361
|
-
var _a, _b, _c, _d;
|
|
362
|
-
if (changes.customSearchEvent) {
|
|
363
|
-
if (this._isCustomSearchEventChange(changes, 'searchValue')) {
|
|
364
|
-
this.searchBoxInput = (_b = (_a = this.customSearchEvent) === null || _a === void 0 ? void 0 : _a.searchValue) !== null && _b !== void 0 ? _b : '';
|
|
365
|
-
this.searchOnCustomEventValueChange(this.searchBoxInput);
|
|
366
|
-
}
|
|
367
|
-
if (this._isCustomSearchEventChange(changes, 'modelName') &&
|
|
368
|
-
((_c = this.customSearchEvent) === null || _c === void 0 ? void 0 : _c.modelName)) {
|
|
369
|
-
this.setCategory((_d = this.customSearchEvent) === null || _d === void 0 ? void 0 : _d.modelName);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
searchOnCustomEventValueChange(value) {
|
|
374
|
-
if (value === null || value === void 0 ? void 0 : value.length) {
|
|
375
|
-
this.showSuggestions();
|
|
376
|
-
this.hitSearchApi();
|
|
377
|
-
}
|
|
378
|
-
else {
|
|
379
|
-
this.hideSuggestions();
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
_isCustomSearchEventChange(changes, propertyName) {
|
|
383
|
-
var _a, _b, _c;
|
|
384
|
-
return (!((_a = changes.customSearchEvent) === null || _a === void 0 ? void 0 : _a.previousValue) ||
|
|
385
|
-
((_b = changes.customSearchEvent) === null || _b === void 0 ? void 0 : _b.previousValue[propertyName]) !==
|
|
386
|
-
((_c = changes.customSearchEvent) === null || _c === void 0 ? void 0 : _c.currentValue[propertyName]));
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
|
-
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: [{ token: SEARCH_SERVICE_TOKEN, optional: true }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: PromiseApiAdapterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
390
|
-
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "sourceloop-search", inputs: { config: "config", searchProvider: "searchProvider", titleTemplate: "titleTemplate", subtitleTemplate: "subtitleTemplate", customAllLabel: "customAllLabel", showOnlySearchResultOverlay: "showOnlySearchResultOverlay", customSearchEvent: "customSearchEvent" }, outputs: { clicked: "clicked", searched: "searched" }, providers: [
|
|
391
|
-
{
|
|
392
|
-
provide: NG_VALUE_ACCESSOR,
|
|
393
|
-
useExisting: SearchComponent,
|
|
394
|
-
multi: true,
|
|
395
|
-
},
|
|
396
|
-
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!showOnlySearchResultOverlay\">\n <div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\" *ngIf=\"config\">\n <mat-form-field appearance=\"outline\" class=\"toolbar-search-input\">\n <input\n matInput\n autocomplete=\"off\"\n type=\"text\"\n [placeholder]=\"\n config.placeholderFunction\n ? config.placeholderFunction(searchInput.value, category)\n : config.placeholder || 'Search'\n \"\n #searchInput\n name=\"searchInput\"\n (focus)=\"showSuggestions()\"\n (blur)=\"hideSuggestions()\"\n [(ngModel)]=\"searchBoxInput\"\n (keyup)=\"hitSearchApi($event)\"\n placeholder=\"Search\"\n (ngModelChange)=\"onChange(this.searchBoxInput)\"\n [disabled]=\"disabled\"\n />\n <mat-icon matPrefix [className]=\"config.searchIconClass\"></mat-icon>\n <mat-icon\n *ngIf=\"searchBoxInput\"\n matSuffix\n [className]=\"config.crossIconClass\"\n (click)=\"resetInput()\"\n ></mat-icon>\n </mat-form-field>\n \n <mat-form-field appearance=\"outline\" class=\"toolbar-search-select\">\n <mat-icon matSuffix [className]=\"config.dropDownButtonIconClass\"></mat-icon>\n <mat-select\n [value]=\"category\"\n (selectionChange)=\"setCategory($event.value)\"\n panelClass=\"search-select\"\n >\n <mat-option [value]=\"model.name\" *ngFor=\"let model of config.models\">\n {{ model.displayName }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n</ng-container>\n\n<div class=\"search-container\">\n <div\n *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n class=\"search-popup\"\n >\n <ng-container *ngIf=\"searchBoxInput\">\n <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n <ng-container *ngIf=\"searching\"> searching... </ng-container>\n <ng-container *ngIf=\"!searching\">\n {{ config.noResultMessage }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n <div\n class=\"search-result\"\n *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n >\n <h3 class=\"suggestions-heading\">\n <img\n *ngIf=\"modelWithSuggestions.model.imageUrl\"\n [src]=\"modelWithSuggestions.model.imageUrl\"\n [alt]=\"modelWithSuggestions.model.displayName\"\n />\n {{ modelWithSuggestions.model.displayName }} ({{\n modelWithSuggestions.items.length\n }})\n </h3>\n <ul>\n <li\n *ngFor=\"let suggestion of modelWithSuggestions.items\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n class=\"suggestions\"\n >\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!config.categorizeResults\">\n <div class=\"search-result\">\n <ul>\n <li\n *ngFor=\"let suggestion of suggestions\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n >\n <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n <img\n *ngIf=\"\n !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n \"\n class=\"suggestions-categorize-false\"\n [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n style=\"margin-right: 5px\"\n alt=\"Img\"\n />\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n <div class=\"recent-searches\">\n <h3 class=\"suggestions-heading\">Recent Searches</h3>\n <ul>\n <li\n *ngFor=\"let recentSearch of recentSearches\"\n class=\"suggestions\"\n (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n >\n <mat-icon\n matPrefix\n [className]=\"config.recentSearchIconClass\"\n ></mat-icon>\n\n <span> {{ recentSearch.match }}</span>\n </li>\n </ul>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em}.toolbar-search{width:515px;background-color:#f7f7f7;border-radius:0 0 4px 4px}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{height:39px;align-items:center}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}.toolbar-search ::ng-deep .mat-form-field-infix{height:auto}.search-container{position:relative;width:515px}.search-container .search-popup{padding:0 15px 15px;margin:0;max-height:80vh;overflow-x:hidden;overflow-y:auto;position:absolute;top:100%;left:0;right:0;z-index:9999;background-color:#fff;box-shadow:0 5px 4px #0003;border-radius:0 0 4px 4px}.search-container .search-popup hr{border:0;border-top:1px solid #ebebeb;margin:0;position:sticky;top:0;padding:0 0 15px;z-index:1}.search-container .search-popup .search-message{display:inline-block;width:100%;text-align:center;font-size:16px;padding-top:12px}.search-container .search-popup .search-item-info{color:#91263b;text-align:center;font-size:12px;margin-bottom:15px;padding-top:12px}.search-container .search-popup ul{padding:0;margin:0}.search-container .search-popup ul li{list-style:none;font-size:1rem;font-weight:400;line-height:1.5;color:#333}.search-container .search-popup ul li.suggestions{font-size:15px;line-height:36px;padding:0 15px 0 44px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.search-container .search-popup ul li.suggestions:hover{background-color:#fee8e8}.search-container .search-popup ul li.suggestions svg{margin-right:5px}.search-container .search-popup ul li.suggestions-categorize-false:hover{background-color:#fee8e8}.search-container .search-popup .search-result{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .search-result.no-categorize-result ul{width:100%;padding:0;margin:0 0 10px}.search-container .search-popup .search-result.no-categorize-result ul li{font-size:15px;line-height:36px;padding:0 15px 0 31px;display:flex;align-items:center;cursor:pointer}.search-container .search-popup .search-result.no-categorize-result ul li:hover{background-color:#fee8e8}.search-container .search-popup .search-result.no-categorize-result ul li img{width:18px;margin-right:9px}.search-container .search-popup .suggestions-heading{color:#9c9c9c;font-size:14px;font-weight:400;margin:0 0 10px 17px;display:flex;align-items:center;position:relative}.search-container .search-popup .suggestions-heading .show-more{position:absolute;right:20px;color:#d1d1d1;font-size:12px;cursor:pointer;text-decoration:none}.search-container .search-popup .suggestions-heading .show-more :hover{text-decoration:underline}.search-container .search-popup .suggestions-heading img{width:18px;margin-right:9px}.search-container .search-popup .recent-searches{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .recent-searches ul{display:inline-block;width:100%}.search-container .search-popup .recent-searches ul li.suggestions{display:flex}.search-container .search-popup .recent-searches ul li.suggestions span{width:100%;overflow:hidden;text-overflow:ellipsis}.search-container .search-popup .recent-searches .suggestions{display:flex}.search-container .search-popup .recent-searches .suggestions-heading{margin-left:30px}.search-container .search-popup .recent-searches li.suggestions{padding-left:31px}::ng-deep .search-select.mat-select-panel{margin-top:30px;margin-left:10px}::ng-deep .search-select .mat-option-text{display:contents}::ng-deep .toolbar-search .mat-form-field-infix{font-size:14px}::ng-deep .toolbar-search input{line-height:14px}::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-start,::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-end{background-color:#f1f3f4}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:1px;border-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:1px solid #a53159;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:1px;border-color:#a53159;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:2px;border-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:2px solid #90003b;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:2px;border-color:#90003b;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search .mat-select-arrow{opacity:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i9.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
|
|
398
|
-
type: Component,
|
|
399
|
-
args: [{ selector: 'sourceloop-search', providers: [
|
|
400
|
-
{
|
|
401
|
-
provide: NG_VALUE_ACCESSOR,
|
|
402
|
-
useExisting: SearchComponent,
|
|
403
|
-
multi: true,
|
|
404
|
-
},
|
|
405
|
-
], template: "<ng-container *ngIf=\"!showOnlySearchResultOverlay\">\n <div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\" *ngIf=\"config\">\n <mat-form-field appearance=\"outline\" class=\"toolbar-search-input\">\n <input\n matInput\n autocomplete=\"off\"\n type=\"text\"\n [placeholder]=\"\n config.placeholderFunction\n ? config.placeholderFunction(searchInput.value, category)\n : config.placeholder || 'Search'\n \"\n #searchInput\n name=\"searchInput\"\n (focus)=\"showSuggestions()\"\n (blur)=\"hideSuggestions()\"\n [(ngModel)]=\"searchBoxInput\"\n (keyup)=\"hitSearchApi($event)\"\n placeholder=\"Search\"\n (ngModelChange)=\"onChange(this.searchBoxInput)\"\n [disabled]=\"disabled\"\n />\n <mat-icon matPrefix [className]=\"config.searchIconClass\"></mat-icon>\n <mat-icon\n *ngIf=\"searchBoxInput\"\n matSuffix\n [className]=\"config.crossIconClass\"\n (click)=\"resetInput()\"\n ></mat-icon>\n </mat-form-field>\n \n <mat-form-field appearance=\"outline\" class=\"toolbar-search-select\">\n <mat-icon matSuffix [className]=\"config.dropDownButtonIconClass\"></mat-icon>\n <mat-select\n [value]=\"category\"\n (selectionChange)=\"setCategory($event.value)\"\n panelClass=\"search-select\"\n >\n <mat-option [value]=\"model.name\" *ngFor=\"let model of config.models\">\n {{ model.displayName }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n</ng-container>\n\n<div class=\"search-container\">\n <div\n *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n class=\"search-popup\"\n >\n <ng-container *ngIf=\"searchBoxInput\">\n <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n <ng-container *ngIf=\"searching\"> searching... </ng-container>\n <ng-container *ngIf=\"!searching\">\n {{ config.noResultMessage }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n <div\n class=\"search-result\"\n *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n >\n <h3 class=\"suggestions-heading\">\n <img\n *ngIf=\"modelWithSuggestions.model.imageUrl\"\n [src]=\"modelWithSuggestions.model.imageUrl\"\n [alt]=\"modelWithSuggestions.model.displayName\"\n />\n {{ modelWithSuggestions.model.displayName }} ({{\n modelWithSuggestions.items.length\n }})\n </h3>\n <ul>\n <li\n *ngFor=\"let suggestion of modelWithSuggestions.items\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n class=\"suggestions\"\n >\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!config.categorizeResults\">\n <div class=\"search-result\">\n <ul>\n <li\n *ngFor=\"let suggestion of suggestions\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n >\n <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n <img\n *ngIf=\"\n !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n \"\n class=\"suggestions-categorize-false\"\n [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n style=\"margin-right: 5px\"\n alt=\"Img\"\n />\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n <div class=\"recent-searches\">\n <h3 class=\"suggestions-heading\">Recent Searches</h3>\n <ul>\n <li\n *ngFor=\"let recentSearch of recentSearches\"\n class=\"suggestions\"\n (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n >\n <mat-icon\n matPrefix\n [className]=\"config.recentSearchIconClass\"\n ></mat-icon>\n\n <span> {{ recentSearch.match }}</span>\n </li>\n </ul>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em}.toolbar-search{width:515px;background-color:#f7f7f7;border-radius:0 0 4px 4px}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{height:39px;align-items:center}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}.toolbar-search ::ng-deep .mat-form-field-infix{height:auto}.search-container{position:relative;width:515px}.search-container .search-popup{padding:0 15px 15px;margin:0;max-height:80vh;overflow-x:hidden;overflow-y:auto;position:absolute;top:100%;left:0;right:0;z-index:9999;background-color:#fff;box-shadow:0 5px 4px #0003;border-radius:0 0 4px 4px}.search-container .search-popup hr{border:0;border-top:1px solid #ebebeb;margin:0;position:sticky;top:0;padding:0 0 15px;z-index:1}.search-container .search-popup .search-message{display:inline-block;width:100%;text-align:center;font-size:16px;padding-top:12px}.search-container .search-popup .search-item-info{color:#91263b;text-align:center;font-size:12px;margin-bottom:15px;padding-top:12px}.search-container .search-popup ul{padding:0;margin:0}.search-container .search-popup ul li{list-style:none;font-size:1rem;font-weight:400;line-height:1.5;color:#333}.search-container .search-popup ul li.suggestions{font-size:15px;line-height:36px;padding:0 15px 0 44px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.search-container .search-popup ul li.suggestions:hover{background-color:#fee8e8}.search-container .search-popup ul li.suggestions svg{margin-right:5px}.search-container .search-popup ul li.suggestions-categorize-false:hover{background-color:#fee8e8}.search-container .search-popup .search-result{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .search-result.no-categorize-result ul{width:100%;padding:0;margin:0 0 10px}.search-container .search-popup .search-result.no-categorize-result ul li{font-size:15px;line-height:36px;padding:0 15px 0 31px;display:flex;align-items:center;cursor:pointer}.search-container .search-popup .search-result.no-categorize-result ul li:hover{background-color:#fee8e8}.search-container .search-popup .search-result.no-categorize-result ul li img{width:18px;margin-right:9px}.search-container .search-popup .suggestions-heading{color:#9c9c9c;font-size:14px;font-weight:400;margin:0 0 10px 17px;display:flex;align-items:center;position:relative}.search-container .search-popup .suggestions-heading .show-more{position:absolute;right:20px;color:#d1d1d1;font-size:12px;cursor:pointer;text-decoration:none}.search-container .search-popup .suggestions-heading .show-more :hover{text-decoration:underline}.search-container .search-popup .suggestions-heading img{width:18px;margin-right:9px}.search-container .search-popup .recent-searches{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .recent-searches ul{display:inline-block;width:100%}.search-container .search-popup .recent-searches ul li.suggestions{display:flex}.search-container .search-popup .recent-searches ul li.suggestions span{width:100%;overflow:hidden;text-overflow:ellipsis}.search-container .search-popup .recent-searches .suggestions{display:flex}.search-container .search-popup .recent-searches .suggestions-heading{margin-left:30px}.search-container .search-popup .recent-searches li.suggestions{padding-left:31px}::ng-deep .search-select.mat-select-panel{margin-top:30px;margin-left:10px}::ng-deep .search-select .mat-option-text{display:contents}::ng-deep .toolbar-search .mat-form-field-infix{font-size:14px}::ng-deep .toolbar-search input{line-height:14px}::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-start,::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-end{background-color:#f1f3f4}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:1px;border-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:1px solid #a53159;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:1px;border-color:#a53159;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:2px;border-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:2px solid #90003b;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:2px;border-color:#90003b;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search .mat-select-arrow{opacity:0}\n"] }]
|
|
406
|
-
}], ctorParameters: function () {
|
|
407
|
-
return [{ type: undefined, decorators: [{
|
|
408
|
-
type: Inject,
|
|
409
|
-
args: [SEARCH_SERVICE_TOKEN]
|
|
410
|
-
}, {
|
|
411
|
-
type: Optional
|
|
412
|
-
}] }, { type: Object, decorators: [{
|
|
413
|
-
type: Inject,
|
|
414
|
-
args: [PLATFORM_ID]
|
|
415
|
-
}] }, { type: i0.ChangeDetectorRef }, { type: PromiseApiAdapterService }];
|
|
416
|
-
}, propDecorators: { config: [{
|
|
417
|
-
type: Input
|
|
418
|
-
}], searchProvider: [{
|
|
419
|
-
type: Input
|
|
420
|
-
}], titleTemplate: [{
|
|
421
|
-
type: Input
|
|
422
|
-
}], subtitleTemplate: [{
|
|
423
|
-
type: Input
|
|
424
|
-
}], customAllLabel: [{
|
|
425
|
-
type: Input
|
|
426
|
-
}], showOnlySearchResultOverlay: [{
|
|
427
|
-
type: Input
|
|
428
|
-
}], customSearchEvent: [{
|
|
429
|
-
type: Input
|
|
430
|
-
}], clicked: [{
|
|
431
|
-
type: Output
|
|
432
|
-
}], searched: [{
|
|
433
|
-
type: Output
|
|
434
|
-
}], searchInputElement: [{
|
|
435
|
-
type: ViewChild,
|
|
436
|
-
args: ['searchInput']
|
|
437
|
-
}] } });
|
|
438
|
-
|
|
439
|
-
// Copyright (c) 2023 Sourcefuse Technologies
|
|
440
|
-
class SearchLibModule {
|
|
441
|
-
}
|
|
442
|
-
SearchLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
443
|
-
SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SearchLibModule, declarations: [SearchComponent], imports: [CommonModule,
|
|
444
|
-
FormsModule,
|
|
445
|
-
HttpClientModule,
|
|
446
|
-
MatSelectModule,
|
|
447
|
-
MatFormFieldModule,
|
|
448
|
-
MatIconModule,
|
|
449
|
-
MatInputModule,
|
|
450
|
-
FlexLayoutModule], exports: [SearchComponent] });
|
|
451
|
-
SearchLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchLibModule, imports: [CommonModule,
|
|
452
|
-
FormsModule,
|
|
453
|
-
HttpClientModule,
|
|
454
|
-
MatSelectModule,
|
|
455
|
-
MatFormFieldModule,
|
|
456
|
-
MatIconModule,
|
|
457
|
-
MatInputModule,
|
|
458
|
-
FlexLayoutModule] });
|
|
459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchLibModule, decorators: [{
|
|
460
|
-
type: NgModule,
|
|
461
|
-
args: [{
|
|
462
|
-
declarations: [SearchComponent],
|
|
463
|
-
imports: [
|
|
464
|
-
CommonModule,
|
|
465
|
-
FormsModule,
|
|
466
|
-
HttpClientModule,
|
|
467
|
-
MatSelectModule,
|
|
468
|
-
MatFormFieldModule,
|
|
469
|
-
MatIconModule,
|
|
470
|
-
MatInputModule,
|
|
471
|
-
FlexLayoutModule,
|
|
472
|
-
],
|
|
473
|
-
exports: [SearchComponent],
|
|
474
|
-
}]
|
|
475
|
-
}] });
|
|
476
|
-
|
|
477
|
-
class Configuration {
|
|
478
|
-
constructor(d) {
|
|
479
|
-
checkForError(d);
|
|
480
|
-
this.displayPropertyName = d.displayPropertyName;
|
|
481
|
-
this.models = d.models;
|
|
482
|
-
/* IRequestParameters - will be given default values before call is made in case undefined/null,
|
|
483
|
-
otherwise there ! is used on which sonar gives code smell */
|
|
484
|
-
this.limit = d.limit;
|
|
485
|
-
this.limitByType = d.limitByType;
|
|
486
|
-
this.order = d.order;
|
|
487
|
-
this.offset = d.offset;
|
|
488
|
-
this.saveInRecents = d.saveInRecents;
|
|
489
|
-
const displayTexts = setDisplayText(d);
|
|
490
|
-
this.noResultMessage = displayTexts.noResultMessage;
|
|
491
|
-
this.placeholder = displayTexts.placeholder;
|
|
492
|
-
this.placeholderFunction = displayTexts.placeholderFunction;
|
|
493
|
-
const searchConfig = setSearchConfig(d);
|
|
494
|
-
this.categorizeResults = searchConfig.categorizeResults;
|
|
495
|
-
this.hideRecentSearch = searchConfig.hideRecentSearch;
|
|
496
|
-
this.hideCategorizeButton = searchConfig.hideCategorizeButton;
|
|
497
|
-
this.saveInRecentsOnlyOnEnter = searchConfig.saveInRecentsOnlyOnEnter;
|
|
498
|
-
this.searchOnlyOnEnter = searchConfig.searchOnlyOnEnter;
|
|
499
|
-
const classes = setIconClasses(d);
|
|
500
|
-
this.searchIconClass = classes.searchIconClass;
|
|
501
|
-
this.crossIconClass = classes.crossIconClass;
|
|
502
|
-
this.dropDownButtonIconClass = classes.dropDownButtonIconClass;
|
|
503
|
-
this.recentSearchIconClass = classes.recentSearchIconClass;
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
function checkForError(d) {
|
|
507
|
-
if (d.categorizeResults === false &&
|
|
508
|
-
(d.hideCategorizeButton === false || d.hideCategorizeButton === undefined)) {
|
|
509
|
-
throw new Error('You must provide hideCategorizeButton:true as categorizeResults is false');
|
|
510
|
-
}
|
|
511
|
-
if (d.saveInRecents === false && d.saveInRecentsOnlyOnEnter === true) {
|
|
512
|
-
throw new Error('You must provide saveInRecents:true for saveInRecentsOnlyOnEnter:true');
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
function setDisplayText(d) {
|
|
516
|
-
var _a, _b;
|
|
517
|
-
return {
|
|
518
|
-
placeholder: (_a = d.placeholder) !== null && _a !== void 0 ? _a : 'Search',
|
|
519
|
-
noResultMessage: (_b = d.noResultMessage) !== null && _b !== void 0 ? _b : 'No result found',
|
|
520
|
-
placeholderFunction: d.placeholderFunction,
|
|
521
|
-
};
|
|
522
|
-
}
|
|
523
|
-
function setSearchConfig(d) {
|
|
524
|
-
var _a, _b, _c, _d, _e;
|
|
525
|
-
return {
|
|
526
|
-
categorizeResults: (_a = d.categorizeResults) !== null && _a !== void 0 ? _a : true,
|
|
527
|
-
hideRecentSearch: (_b = d.hideRecentSearch) !== null && _b !== void 0 ? _b : false,
|
|
528
|
-
hideCategorizeButton: (_c = d.hideCategorizeButton) !== null && _c !== void 0 ? _c : false,
|
|
529
|
-
saveInRecentsOnlyOnEnter: (_d = d.saveInRecentsOnlyOnEnter) !== null && _d !== void 0 ? _d : false,
|
|
530
|
-
searchOnlyOnEnter: (_e = d.searchOnlyOnEnter) !== null && _e !== void 0 ? _e : false,
|
|
531
|
-
};
|
|
532
|
-
}
|
|
533
|
-
function setIconClasses(d) {
|
|
534
|
-
var _a, _b, _c, _d;
|
|
535
|
-
return {
|
|
536
|
-
searchIconClass: (_a = d.searchIconClass) !== null && _a !== void 0 ? _a : 'icomoon Search',
|
|
537
|
-
crossIconClass: (_b = d.crossIconClass) !== null && _b !== void 0 ? _b : 'icomoon close',
|
|
538
|
-
dropDownButtonIconClass: (_c = d.dropDownButtonIconClass) !== null && _c !== void 0 ? _c : 'icomoon arrow_down',
|
|
539
|
-
recentSearchIconClass: (_d = d.recentSearchIconClass) !== null && _d !== void 0 ? _d : 'icomoon Search',
|
|
540
|
-
};
|
|
541
|
-
}
|
|
542
|
-
|
|
543
|
-
// Copyright (c) 2023 Sourcefuse Technologies
|
|
544
|
-
|
|
545
|
-
/**
|
|
546
|
-
* Generated bundle index. Do not edit.
|
|
547
|
-
*/
|
|
548
|
-
|
|
549
|
-
export { Configuration, DEBOUNCE_TIME, DEFAULT_LIMIT, DEFAULT_LIMIT_TYPE, DEFAULT_OFFSET, DEFAULT_ORDER, DEFAULT_SAVE_IN_RECENTS, SEARCH_SERVICE_TOKEN, SearchComponent, SearchLibModule, isApiServiceWithPromise };
|
|
550
|
-
//# sourceMappingURL=sourceloop-search-client.mjs.map
|