@sourceloop/search-client 6.1.0 → 7.0.0

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