@sourceloop/search-client 7.0.1 → 8.2.1

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