@sourceloop/search-client 9.0.1 → 11.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.
@@ -1,564 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { InjectionToken, Injectable, EventEmitter, PLATFORM_ID, ViewChild, Output, Input, Inject, Optional, Component } from '@angular/core';
3
- import { from, Subject } from 'rxjs';
4
- import { tap, debounceTime } from 'rxjs/operators';
5
- import * as i3 from '@angular/forms';
6
- import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
7
- import * as i2 from '@angular/common';
8
- import { isPlatformBrowser, CommonModule } from '@angular/common';
9
- import { MatFormFieldModule } from '@angular/material/form-field';
10
- import * as i4 from '@angular/material/icon';
11
- import { MatIconModule } from '@angular/material/icon';
12
- import * as i5 from '@angular/material/select';
13
- import { MatSelectModule } from '@angular/material/select';
14
- import * as i6 from '@angular/material/input';
15
- import { MatInputModule } from '@angular/material/input';
16
-
17
- // Copyright (c) 2023 Sourcefuse Technologies
18
- //
19
- // This software is released under the MIT License.
20
- // https://opensource.org/licenses/MIT
21
- function isApiServiceWithPromise(service) {
22
- return !!service
23
- .searchApiRequestWithPromise;
24
- }
25
- // cant use T extends IReturnType here
26
- const SEARCH_SERVICE_TOKEN = new InjectionToken('Search_Service_Token');
27
- // IRequestParameters default values
28
- const DEFAULT_LIMIT = 20;
29
- const DEFAULT_LIMIT_TYPE = false;
30
- const DEFAULT_ORDER = [];
31
- const DEBOUNCE_TIME = 1000;
32
- const DEFAULT_OFFSET = 0;
33
- const DEFAULT_SAVE_IN_RECENTS = true;
34
-
35
- class PromiseApiAdapterService {
36
- adapt(instance) {
37
- // this is a workaround for the fact that the recentSearchApiRequestWithPromise
38
- // method is optional in the ISearchServiceWithPromises interface
39
- // and type system is not able maintain the type information of a property
40
- const recentSearchMethod = instance.recentSearchApiRequestWithPromise;
41
- return {
42
- searchApiRequest: (requestParameters, saveInRecents) => from(instance.searchApiRequestWithPromise(requestParameters, saveInRecents)),
43
- ...(recentSearchMethod && {
44
- recentSearchApiRequest: () => from(recentSearchMethod()),
45
- }),
46
- };
47
- }
48
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PromiseApiAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
49
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PromiseApiAdapterService, providedIn: 'root' });
50
- }
51
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PromiseApiAdapterService, decorators: [{
52
- type: Injectable,
53
- args: [{
54
- providedIn: 'root',
55
- }]
56
- }] });
57
-
58
- // Copyright (c) 2023 Sourcefuse Technologies
59
- //
60
- // This software is released under the MIT License.
61
- // https://opensource.org/licenses/MIT
62
- const ALL_LABEL = 'All';
63
- class SearchComponent {
64
- searchService;
65
- platformId;
66
- cdr;
67
- promiseAdapter;
68
- searchBoxInput = '';
69
- suggestionsDisplay = false;
70
- categoryDisplay = false;
71
- searching = false;
72
- suggestions = [];
73
- recentSearches = [];
74
- category = ALL_LABEL;
75
- searchRequest$ = new Subject();
76
- _config;
77
- get config() {
78
- return this._config;
79
- }
80
- set config(value) {
81
- this._config = value;
82
- if (value && value.models) {
83
- value.models.unshift({
84
- name: ALL_LABEL,
85
- displayName: this.customAllLabel ?? ALL_LABEL,
86
- });
87
- }
88
- else if (value && !value.models) {
89
- value.models = [
90
- {
91
- name: ALL_LABEL,
92
- displayName: this.customAllLabel ?? ALL_LABEL,
93
- },
94
- ];
95
- }
96
- else {
97
- // do nothing
98
- }
99
- }
100
- /* The above code is a setter method in a TypeScript class that takes a parameter `searchProvider` of
101
- type `ISearchService<T>` or `ISearchServiceWithPromises<T>`. */
102
- set searchProvider(value) {
103
- if (isApiServiceWithPromise(value)) {
104
- value = this.promiseAdapter.adapt(value);
105
- }
106
- this.searchService = value;
107
- }
108
- get searchProvider() {
109
- return this.searchService;
110
- }
111
- titleTemplate;
112
- subtitleTemplate;
113
- /**
114
- * configure when application has own search input and use different all label
115
- */
116
- customAllLabel = ALL_LABEL;
117
- /**
118
- * configure to true when to show only search result overlay without search bar
119
- */
120
- showOnlySearchResultOverlay = false;
121
- /**
122
- * provide custom search event when showOnlySearchResultOverlay configure to true
123
- */
124
- customSearchEvent = {
125
- searchValue: '',
126
- modelName: this.customAllLabel,
127
- };
128
- // emitted when user clicks one of the suggested results (including recent search sugestions)
129
- clicked = new EventEmitter();
130
- searched = new EventEmitter();
131
- /* emitted when user makes search request (including recent search requests
132
- & requests made on change in category from dropdown)
133
- In case of recent search Array of recent Search request result is emitted */
134
- onChange = () => { };
135
- onTouched = () => { };
136
- disabled = false;
137
- searchInputElement;
138
- constructor(searchService,
139
- // tslint:disable-next-line:ban-types
140
- platformId, cdr, promiseAdapter) {
141
- this.searchService = searchService;
142
- this.platformId = platformId;
143
- this.cdr = cdr;
144
- this.promiseAdapter = promiseAdapter;
145
- }
146
- ngOnInit() {
147
- this.searchRequest$
148
- .pipe(tap(v => (this.suggestions = [])), debounceTime(DEBOUNCE_TIME))
149
- .subscribe((value) => {
150
- this.searched.emit({
151
- event: value.event,
152
- keyword: value.input,
153
- category: this.category,
154
- });
155
- this.getSuggestions(value);
156
- this.cdr.markForCheck();
157
- });
158
- }
159
- // ControlValueAccessor Implementation
160
- writeValue(value) {
161
- this.searchBoxInput = value;
162
- }
163
- // When the value in the UI is changed, this method will invoke a callback function
164
- registerOnChange(fn) {
165
- this.onChange = fn;
166
- }
167
- registerOnTouched(fn) {
168
- this.onTouched = fn;
169
- }
170
- setDisabledState(isDisabled) {
171
- this.disabled = isDisabled;
172
- }
173
- getSuggestions(eventValue) {
174
- eventValue.input = eventValue.input.trim();
175
- if (!eventValue.input.length) {
176
- return;
177
- }
178
- const order = this.config.order ?? DEFAULT_ORDER;
179
- let orderString = '';
180
- order.forEach(preference => (orderString = `${orderString}${preference} `));
181
- let saveInRecents = this.config.saveInRecents ?? DEFAULT_SAVE_IN_RECENTS;
182
- if (this.config.saveInRecents && this.config.saveInRecentsOnlyOnEnter) {
183
- if (!eventValue.event ||
184
- (eventValue.event instanceof KeyboardEvent &&
185
- eventValue.event.key === 'Enter')) {
186
- saveInRecents = true; // save in recents only on enter or change in category
187
- }
188
- else {
189
- // do not save in recent search on typing
190
- saveInRecents = false;
191
- }
192
- }
193
- /* need to put default value here and not in contructor
194
- because sonar was giving code smell with definite assertion as all these
195
- parameters are optional */
196
- const requestParameters = {
197
- match: eventValue.input,
198
- sources: this._categoryToSourceName(this.category),
199
- limit: this.config.limit ?? DEFAULT_LIMIT,
200
- limitByType: this.config.limitByType ?? DEFAULT_LIMIT_TYPE,
201
- order: orderString,
202
- offset: this.config.offset ?? DEFAULT_OFFSET,
203
- };
204
- this.searching = true;
205
- this.cdr.markForCheck();
206
- this.searchService
207
- .searchApiRequest(requestParameters, saveInRecents)
208
- .subscribe((value) => {
209
- this.suggestions = value;
210
- this.searching = false;
211
- this.cdr.markForCheck();
212
- }, (_error) => {
213
- this.suggestions = [];
214
- this.searching = false;
215
- this.cdr.markForCheck();
216
- });
217
- }
218
- getRecentSearches() {
219
- if (!this.config.hideRecentSearch &&
220
- this.searchService.recentSearchApiRequest) {
221
- this.searchService.recentSearchApiRequest().subscribe((value) => {
222
- this.recentSearches = value;
223
- this.cdr.markForCheck();
224
- }, (_error) => {
225
- this.recentSearches = [];
226
- this.cdr.markForCheck();
227
- });
228
- }
229
- }
230
- //event can be KeyBoardEvent or Event of type 'change'
231
- // fired on change in value of drop down for category
232
- hitSearchApi(event) {
233
- // this will happen only in case user searches something and
234
- // then erases it, we need to update recent search
235
- if (!this.searchBoxInput) {
236
- this.suggestions = [];
237
- this.getRecentSearches();
238
- return;
239
- }
240
- // no debounce time needed in case of searchOnlyOnEnter
241
- if (this.config.searchOnlyOnEnter) {
242
- if (!event || (event instanceof KeyboardEvent && event.key === 'Enter')) {
243
- this.getSuggestions({ input: this.searchBoxInput, event });
244
- }
245
- return;
246
- }
247
- // no debounce time needed in case of change in category
248
- if (!event) {
249
- this.getSuggestions({ input: this.searchBoxInput, event });
250
- return;
251
- }
252
- this.searchRequest$.next({
253
- input: this.searchBoxInput,
254
- event,
255
- });
256
- }
257
- populateValue(suggestion, event) {
258
- const value = suggestion[this.config.displayPropertyName];
259
- // converted to string to assign value to searchBoxInput
260
- this.searchBoxInput = value;
261
- this.suggestionsDisplay = false;
262
- // ngModelChange doesn't detect change in value
263
- // when populated from outside, hence calling manually
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.clicked.emit({ item: suggestion, event });
269
- }
270
- populateValueRecentSearch(recentSearch, event) {
271
- event.stopPropagation();
272
- event.preventDefault();
273
- const value = recentSearch['match'];
274
- this.searchBoxInput = value;
275
- this.suggestionsDisplay = false;
276
- this.onChange(this.searchBoxInput);
277
- // need to do this to show more search options for selected
278
- // suggestion - just in case user reopens search input
279
- this.getSuggestions({ input: this.searchBoxInput, event });
280
- this.focusInput();
281
- this.showSuggestions();
282
- }
283
- fetchModelImageUrlFromSuggestion(suggestion) {
284
- const modelName = suggestion['source'];
285
- let url;
286
- this.config.models.forEach(model => {
287
- if (model.name === modelName && model.imageUrl) {
288
- url = model.imageUrl;
289
- }
290
- });
291
- return url;
292
- }
293
- boldString(str, substr) {
294
- const strRegExp = new RegExp(`(${substr})`, 'gi');
295
- const stringToMakeBold = str;
296
- return stringToMakeBold.replace(strRegExp, `<b>$1</b>`);
297
- }
298
- hideSuggestions() {
299
- this.suggestionsDisplay = false;
300
- this.onTouched();
301
- }
302
- showSuggestions() {
303
- this.suggestionsDisplay = true;
304
- this.getRecentSearches();
305
- }
306
- focusInput() {
307
- if (isPlatformBrowser(this.platformId) &&
308
- !this.showOnlySearchResultOverlay) {
309
- this.searchInputElement.nativeElement.focus();
310
- }
311
- }
312
- setCategory(category) {
313
- this.category = category;
314
- this.categoryDisplay = false;
315
- if (this.searchBoxInput) {
316
- this.hitSearchApi();
317
- this.focusInput();
318
- this.showSuggestions();
319
- }
320
- }
321
- showCategory() {
322
- this.categoryDisplay = !this.categoryDisplay;
323
- }
324
- hideCategory() {
325
- this.categoryDisplay = false;
326
- }
327
- resetInput() {
328
- this.searchBoxInput = '';
329
- this.suggestions = [];
330
- this.suggestionsDisplay = true;
331
- this.focusInput();
332
- // ngModelChange doesn't detect change in value
333
- // when populated from outside, hence calling manually
334
- this.onChange(this.searchBoxInput);
335
- this.getRecentSearches();
336
- }
337
- ngOnDestroy() {
338
- this.searchRequest$.unsubscribe();
339
- }
340
- _categoryToSourceName(category) {
341
- if ([ALL_LABEL, this.customAllLabel].includes(category)) {
342
- return [];
343
- }
344
- else {
345
- return [category];
346
- }
347
- }
348
- getModelFromModelName(name) {
349
- return this.config.models.find(item => item.name === name);
350
- }
351
- getModelsWithSuggestions() {
352
- const modelsWithSuggestions = [];
353
- const sources = [];
354
- this.suggestions.forEach(suggestion => {
355
- if (sources.indexOf(suggestion['source']) >= 0) {
356
- modelsWithSuggestions.every(modelWithSuggestions => {
357
- if (modelWithSuggestions.model.name === suggestion['source']) {
358
- modelWithSuggestions.items.push(suggestion);
359
- return false;
360
- }
361
- return true;
362
- });
363
- }
364
- else {
365
- const model = this.getModelFromModelName(suggestion['source']);
366
- modelsWithSuggestions.push({ model, items: [suggestion] });
367
- sources.push(suggestion['source']);
368
- }
369
- });
370
- return modelsWithSuggestions;
371
- }
372
- ngOnChanges(changes) {
373
- if (changes.customSearchEvent) {
374
- if (this._isCustomSearchEventChange(changes, 'searchValue')) {
375
- this.searchBoxInput = this.customSearchEvent?.searchValue ?? '';
376
- this.searchOnCustomEventValueChange(this.searchBoxInput);
377
- }
378
- if (this._isCustomSearchEventChange(changes, 'modelName') &&
379
- this.customSearchEvent?.modelName) {
380
- this.setCategory(this.customSearchEvent?.modelName);
381
- }
382
- }
383
- }
384
- searchOnCustomEventValueChange(value) {
385
- if (value?.length) {
386
- this.showSuggestions();
387
- this.hitSearchApi();
388
- }
389
- else {
390
- this.hideSuggestions();
391
- }
392
- }
393
- _isCustomSearchEventChange(changes, propertyName) {
394
- return (!changes.customSearchEvent?.previousValue ||
395
- changes.customSearchEvent?.previousValue[propertyName] !==
396
- changes.customSearchEvent?.currentValue[propertyName]);
397
- }
398
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchComponent, deps: [{ token: SEARCH_SERVICE_TOKEN, optional: true }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: PromiseApiAdapterService }], target: i0.ɵɵFactoryTarget.Component });
399
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SearchComponent, isStandalone: true, selector: "sourceloop-search", inputs: { config: "config", searchProvider: "searchProvider", titleTemplate: "titleTemplate", subtitleTemplate: "subtitleTemplate", customAllLabel: "customAllLabel", showOnlySearchResultOverlay: "showOnlySearchResultOverlay", customSearchEvent: "customSearchEvent" }, outputs: { clicked: "clicked", searched: "searched" }, providers: [
400
- {
401
- provide: NG_VALUE_ACCESSOR,
402
- useExisting: SearchComponent,
403
- multi: true,
404
- },
405
- ], 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>&nbsp;{{ 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: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
406
- }
407
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchComponent, decorators: [{
408
- type: Component,
409
- args: [{ selector: 'sourceloop-search', standalone: true, providers: [
410
- {
411
- provide: NG_VALUE_ACCESSOR,
412
- useExisting: SearchComponent,
413
- multi: true,
414
- },
415
- ], imports: [
416
- CommonModule,
417
- FormsModule,
418
- MatIconModule,
419
- MatSelectModule,
420
- MatFormFieldModule,
421
- MatInputModule,
422
- ], 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>&nbsp;{{ 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"] }]
423
- }], ctorParameters: () => [{ type: undefined, decorators: [{
424
- type: Inject,
425
- args: [SEARCH_SERVICE_TOKEN]
426
- }, {
427
- type: Optional
428
- }] }, { type: Object, decorators: [{
429
- type: Inject,
430
- args: [PLATFORM_ID]
431
- }] }, { type: i0.ChangeDetectorRef }, { type: PromiseApiAdapterService }], propDecorators: { config: [{
432
- type: Input
433
- }], searchProvider: [{
434
- type: Input
435
- }], titleTemplate: [{
436
- type: Input
437
- }], subtitleTemplate: [{
438
- type: Input
439
- }], customAllLabel: [{
440
- type: Input
441
- }], showOnlySearchResultOverlay: [{
442
- type: Input
443
- }], customSearchEvent: [{
444
- type: Input
445
- }], clicked: [{
446
- type: Output
447
- }], searched: [{
448
- type: Output
449
- }], searchInputElement: [{
450
- type: ViewChild,
451
- args: ['searchInput']
452
- }] } });
453
-
454
- class Configuration {
455
- /** property to be displayed in the results */
456
- displayPropertyName;
457
- /** list of model configuration to be render and categorize search results */
458
- models;
459
- /** max number of results (based on limitByType option) */
460
- limit;
461
- /** apply limit on individual models, or on overall results */
462
- limitByType;
463
- /** apply a particular ordering on results */
464
- order;
465
- /** offset for results in case limit is used */
466
- offset;
467
- /** save the search query in recent history */
468
- saveInRecents;
469
- /** a placeholder to display in the search box */
470
- placeholder;
471
- /** a function to generate placeholder, overrides the placeholder property */
472
- placeholderFunction;
473
- /** categorize results on the basis of models provided */
474
- categorizeResults;
475
- /** hides the recent search list */
476
- hideRecentSearch;
477
- /** hide the category selection button */
478
- hideCategorizeButton;
479
- /** save value in recent search only on enter or change in category,
480
- * if false, also saved on typing */
481
- saveInRecentsOnlyOnEnter;
482
- /** search only on enter key or when category is changed */
483
- searchOnlyOnEnter;
484
- noResultMessage;
485
- searchIconClass;
486
- crossIconClass;
487
- dropDownButtonIconClass;
488
- recentSearchIconClass;
489
- constructor(d) {
490
- checkForError(d);
491
- this.displayPropertyName = d.displayPropertyName;
492
- this.models = d.models;
493
- /* IRequestParameters - will be given default values before call is made in case undefined/null,
494
- otherwise there ! is used on which sonar gives code smell */
495
- this.limit = d.limit;
496
- this.limitByType = d.limitByType;
497
- this.order = d.order;
498
- this.offset = d.offset;
499
- this.saveInRecents = d.saveInRecents;
500
- const displayTexts = setDisplayText(d);
501
- this.noResultMessage = displayTexts.noResultMessage;
502
- this.placeholder = displayTexts.placeholder;
503
- this.placeholderFunction = displayTexts.placeholderFunction;
504
- const searchConfig = setSearchConfig(d);
505
- this.categorizeResults = searchConfig.categorizeResults;
506
- this.hideRecentSearch = searchConfig.hideRecentSearch;
507
- this.hideCategorizeButton = searchConfig.hideCategorizeButton;
508
- this.saveInRecentsOnlyOnEnter = searchConfig.saveInRecentsOnlyOnEnter;
509
- this.searchOnlyOnEnter = searchConfig.searchOnlyOnEnter;
510
- const classes = setIconClasses(d);
511
- this.searchIconClass = classes.searchIconClass;
512
- this.crossIconClass = classes.crossIconClass;
513
- this.dropDownButtonIconClass = classes.dropDownButtonIconClass;
514
- this.recentSearchIconClass = classes.recentSearchIconClass;
515
- }
516
- }
517
- function checkForError(d) {
518
- if (d.categorizeResults === false &&
519
- (d.hideCategorizeButton === false || d.hideCategorizeButton === undefined)) {
520
- throw new Error('You must provide hideCategorizeButton:true as categorizeResults is false');
521
- }
522
- if (d.saveInRecents === false && d.saveInRecentsOnlyOnEnter === true) {
523
- throw new Error('You must provide saveInRecents:true for saveInRecentsOnlyOnEnter:true');
524
- }
525
- }
526
- function setDisplayText(d) {
527
- return {
528
- placeholder: d.placeholder ?? 'Search',
529
- noResultMessage: d.noResultMessage ?? 'No result found',
530
- placeholderFunction: d.placeholderFunction,
531
- };
532
- }
533
- function setSearchConfig(d) {
534
- return {
535
- categorizeResults: d.categorizeResults ?? true,
536
- hideRecentSearch: d.hideRecentSearch ?? false,
537
- hideCategorizeButton: d.hideCategorizeButton ?? false,
538
- saveInRecentsOnlyOnEnter: d.saveInRecentsOnlyOnEnter ?? false,
539
- searchOnlyOnEnter: d.searchOnlyOnEnter ?? false,
540
- };
541
- }
542
- function setIconClasses(d) {
543
- return {
544
- searchIconClass: d.searchIconClass ?? 'icomoon Search',
545
- crossIconClass: d.crossIconClass ?? 'icomoon close',
546
- dropDownButtonIconClass: d.dropDownButtonIconClass ?? 'icomoon arrow_down',
547
- recentSearchIconClass: d.recentSearchIconClass ?? 'icomoon Search',
548
- };
549
- }
550
-
551
- // Copyright (c) 2023 Sourcefuse Technologies
552
- //
553
- // This software is released under the MIT License.
554
- // https://opensource.org/licenses/MIT
555
- /*
556
- * Public API Surface of my-lib
557
- */
558
-
559
- /**
560
- * Generated bundle index. Do not edit.
561
- */
562
-
563
- export { Configuration, DEBOUNCE_TIME, DEFAULT_LIMIT, DEFAULT_LIMIT_TYPE, DEFAULT_OFFSET, DEFAULT_ORDER, DEFAULT_SAVE_IN_RECENTS, SEARCH_SERVICE_TOKEN, SearchComponent, isApiServiceWithPromise };
564
- //# sourceMappingURL=sourceloop-search-client.mjs.map