@sourceloop/search-client 5.0.1 → 5.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.
- package/README.md +99 -2
- package/esm2020/lib/lib-configuration.mjs +1 -1
- package/esm2020/lib/search/promise-api-adapter.service.mjs +26 -0
- package/esm2020/lib/search/search.component.mjs +58 -26
- package/esm2020/lib/search-lib.module.mjs +9 -5
- package/esm2020/lib/types.mjs +9 -1
- package/esm2020/public-api.mjs +5 -1
- package/fesm2015/sourceloop-search-client.mjs +85 -33
- package/fesm2015/sourceloop-search-client.mjs.map +1 -1
- package/fesm2020/sourceloop-search-client.mjs +88 -33
- package/fesm2020/sourceloop-search-client.mjs.map +1 -1
- package/lib/lib-configuration.d.ts +2 -1
- package/lib/search/promise-api-adapter.service.d.ts +7 -0
- package/lib/search/search.component.d.ts +9 -5
- package/lib/types.d.ts +5 -0
- package/package.json +5 -5
|
@@ -1,24 +1,29 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i6 from '@angular/common';
|
|
2
2
|
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
3
3
|
import { HttpClientModule } from '@angular/common/http';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { InjectionToken, EventEmitter, PLATFORM_ID, Component, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
5
|
+
import { InjectionToken, Injectable, EventEmitter, PLATFORM_ID, Component, Inject, Optional, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
6
6
|
import { FlexLayoutModule } from '@angular/flex-layout';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i9 from '@angular/forms';
|
|
8
8
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i2 from '@angular/material/form-field';
|
|
10
10
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i3 from '@angular/material/icon';
|
|
12
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i8 from '@angular/material/input';
|
|
14
14
|
import { MatInputModule } from '@angular/material/input';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i4 from '@angular/material/select';
|
|
16
16
|
import { MatSelectModule } from '@angular/material/select';
|
|
17
|
-
import { Subject } from 'rxjs';
|
|
17
|
+
import { from, Subject } from 'rxjs';
|
|
18
18
|
import { tap, debounceTime } from 'rxjs/operators';
|
|
19
|
-
import * as
|
|
20
|
-
import * as
|
|
19
|
+
import * as i5 from '@angular/material/core';
|
|
20
|
+
import * as i7 from '@angular/flex-layout/flex';
|
|
21
21
|
|
|
22
|
+
// Copyright (c) 2023 Sourcefuse Technologies
|
|
23
|
+
function isApiServiceWithPromise(service) {
|
|
24
|
+
return !!service
|
|
25
|
+
.searchApiRequestWithPromise;
|
|
26
|
+
}
|
|
22
27
|
// cant use T extends IReturnType here
|
|
23
28
|
const SEARCH_SERVICE_TOKEN = new InjectionToken('Search_Service_Token');
|
|
24
29
|
// IRequestParameters default values
|
|
@@ -29,14 +34,36 @@ const DEBOUNCE_TIME = 1000;
|
|
|
29
34
|
const DEFAULT_OFFSET = 0;
|
|
30
35
|
const DEFAULT_SAVE_IN_RECENTS = true;
|
|
31
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: "13.3.12", ngImport: i0, type: PromiseApiAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
49
|
+
PromiseApiAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PromiseApiAdapterService, providedIn: 'root' });
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PromiseApiAdapterService, decorators: [{
|
|
51
|
+
type: Injectable,
|
|
52
|
+
args: [{
|
|
53
|
+
providedIn: 'root',
|
|
54
|
+
}]
|
|
55
|
+
}] });
|
|
56
|
+
|
|
57
|
+
// Copyright (c) 2023 Sourcefuse Technologies
|
|
32
58
|
const ALL_LABEL = 'All';
|
|
33
59
|
class SearchComponent {
|
|
34
60
|
constructor(searchService,
|
|
35
61
|
// tslint:disable-next-line:ban-types
|
|
36
|
-
platformId, cdr) {
|
|
62
|
+
platformId, cdr, promiseAdapter) {
|
|
37
63
|
this.searchService = searchService;
|
|
38
64
|
this.platformId = platformId;
|
|
39
65
|
this.cdr = cdr;
|
|
66
|
+
this.promiseAdapter = promiseAdapter;
|
|
40
67
|
this.searchBoxInput = '';
|
|
41
68
|
this.suggestionsDisplay = false;
|
|
42
69
|
this.categoryDisplay = false;
|
|
@@ -48,6 +75,11 @@ class SearchComponent {
|
|
|
48
75
|
// emitted when user clicks one of the suggested results (including recent search sugestions)
|
|
49
76
|
this.clicked = new EventEmitter();
|
|
50
77
|
this.searched = new EventEmitter();
|
|
78
|
+
/* emitted when user makes search request (including recent search requests
|
|
79
|
+
& requests made on change in category from dropdown)
|
|
80
|
+
In case of recent search Array of recent Search request result is emitted */
|
|
81
|
+
this.onChange = () => { };
|
|
82
|
+
this.onTouched = () => { };
|
|
51
83
|
this.disabled = false;
|
|
52
84
|
}
|
|
53
85
|
get config() {
|
|
@@ -73,6 +105,15 @@ class SearchComponent {
|
|
|
73
105
|
// do nothing
|
|
74
106
|
}
|
|
75
107
|
}
|
|
108
|
+
set searchProvider(value) {
|
|
109
|
+
if (isApiServiceWithPromise(value)) {
|
|
110
|
+
value = this.promiseAdapter.adapt(value);
|
|
111
|
+
}
|
|
112
|
+
this.searchService = value;
|
|
113
|
+
}
|
|
114
|
+
get searchProvider() {
|
|
115
|
+
return this.searchService;
|
|
116
|
+
}
|
|
76
117
|
ngOnInit() {
|
|
77
118
|
this.searchRequest$
|
|
78
119
|
.pipe(tap(v => (this.suggestions = [])), debounceTime(DEBOUNCE_TIME))
|
|
@@ -122,7 +163,8 @@ class SearchComponent {
|
|
|
122
163
|
}
|
|
123
164
|
}
|
|
124
165
|
/* need to put default value here and not in contructor
|
|
125
|
-
because sonar was giving code smell with definite assertion as all these
|
|
166
|
+
because sonar was giving code smell with definite assertion as all these
|
|
167
|
+
parameters are optional */
|
|
126
168
|
const requestParameters = {
|
|
127
169
|
match: eventValue.input,
|
|
128
170
|
sources: this._categoryToSourceName(this.category),
|
|
@@ -157,9 +199,11 @@ class SearchComponent {
|
|
|
157
199
|
});
|
|
158
200
|
}
|
|
159
201
|
}
|
|
160
|
-
//
|
|
202
|
+
//event can be KeyBoardEvent or Event of type 'change'
|
|
203
|
+
// fired on change in value of drop down for category
|
|
161
204
|
hitSearchApi(event) {
|
|
162
|
-
// this will happen only in case user searches something and
|
|
205
|
+
// this will happen only in case user searches something and
|
|
206
|
+
// then erases it, we need to update recent search
|
|
163
207
|
if (!this.searchBoxInput) {
|
|
164
208
|
this.suggestions = [];
|
|
165
209
|
this.getRecentSearches();
|
|
@@ -183,12 +227,15 @@ class SearchComponent {
|
|
|
183
227
|
});
|
|
184
228
|
}
|
|
185
229
|
populateValue(suggestion, event) {
|
|
186
|
-
const value = suggestion[this.config.displayPropertyName];
|
|
230
|
+
const value = suggestion[this.config.displayPropertyName];
|
|
231
|
+
// converted to string to assign value to searchBoxInput
|
|
187
232
|
this.searchBoxInput = value;
|
|
188
233
|
this.suggestionsDisplay = false;
|
|
189
|
-
// ngModelChange doesn't detect change in value
|
|
234
|
+
// ngModelChange doesn't detect change in value
|
|
235
|
+
// when populated from outside, hence calling manually
|
|
190
236
|
this.onChange(this.searchBoxInput);
|
|
191
|
-
// need to do this to show more search options for selected
|
|
237
|
+
// need to do this to show more search options for selected
|
|
238
|
+
//suggestion - just in case user reopens search input
|
|
192
239
|
this.getSuggestions({ input: this.searchBoxInput, event });
|
|
193
240
|
this.clicked.emit({ item: suggestion, event });
|
|
194
241
|
}
|
|
@@ -199,7 +246,8 @@ class SearchComponent {
|
|
|
199
246
|
this.searchBoxInput = value;
|
|
200
247
|
this.suggestionsDisplay = false;
|
|
201
248
|
this.onChange(this.searchBoxInput);
|
|
202
|
-
// need to do this to show more search options for selected
|
|
249
|
+
// need to do this to show more search options for selected
|
|
250
|
+
// suggestion - just in case user reopens search input
|
|
203
251
|
this.getSuggestions({ input: this.searchBoxInput, event });
|
|
204
252
|
this.focusInput();
|
|
205
253
|
this.showSuggestions();
|
|
@@ -252,7 +300,8 @@ class SearchComponent {
|
|
|
252
300
|
this.suggestions = [];
|
|
253
301
|
this.suggestionsDisplay = true;
|
|
254
302
|
this.focusInput();
|
|
255
|
-
// ngModelChange doesn't detect change in value
|
|
303
|
+
// ngModelChange doesn't detect change in value
|
|
304
|
+
// when populated from outside, hence calling manually
|
|
256
305
|
this.onChange(this.searchBoxInput);
|
|
257
306
|
this.getRecentSearches();
|
|
258
307
|
}
|
|
@@ -292,15 +341,15 @@ class SearchComponent {
|
|
|
292
341
|
return modelsWithSuggestions;
|
|
293
342
|
}
|
|
294
343
|
}
|
|
295
|
-
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
296
|
-
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
344
|
+
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.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 });
|
|
345
|
+
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchComponent, selector: "sourceloop-search", inputs: { config: "config", searchProvider: "searchProvider", titleTemplate: "titleTemplate", subtitleTemplate: "subtitleTemplate" }, outputs: { clicked: "clicked", searched: "searched" }, providers: [
|
|
297
346
|
{
|
|
298
347
|
provide: NG_VALUE_ACCESSOR,
|
|
299
348
|
useExisting: SearchComponent,
|
|
300
349
|
multi: true,
|
|
301
350
|
},
|
|
302
|
-
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\">\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\n<div class=\"search-container\">\n <div\n *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n class=\"search-popup\"\n >\n <ng-container *ngIf=\"searchBoxInput\">\n <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n <ng-container *ngIf=\"searching\"> searching... </ng-container>\n <ng-container *ngIf=\"!searching\">\n {{ config.noResultMessage }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n <div\n class=\"search-result\"\n *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n >\n <h3 class=\"suggestions-heading\">\n <img\n *ngIf=\"modelWithSuggestions.model.imageUrl\"\n [src]=\"modelWithSuggestions.model.imageUrl\"\n [alt]=\"modelWithSuggestions.model.displayName\"\n />\n {{ modelWithSuggestions.model.displayName }} ({{\n modelWithSuggestions.items.length\n }})\n </h3>\n <ul>\n <li\n *ngFor=\"let suggestion of modelWithSuggestions.items\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n class=\"suggestions\"\n >\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!config.categorizeResults\">\n <div class=\"search-result\">\n <ul>\n <li\n *ngFor=\"let suggestion of suggestions\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n >\n <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n <img\n *ngIf=\"\n !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n \"\n class=\"suggestions-categorize-false\"\n [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n style=\"margin-right: 5px\"\n alt=\"Img\"\n />\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n <div class=\"recent-searches\">\n <h3 class=\"suggestions-heading\">Recent Searches</h3>\n <ul>\n <li\n *ngFor=\"let recentSearch of recentSearches\"\n class=\"suggestions\"\n (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n >\n <mat-icon\n matPrefix\n [className]=\"config.recentSearchIconClass\"\n ></mat-icon>\n\n <span> {{ recentSearch.match }}</span>\n </li>\n </ul>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em!important}.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!important}.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!important}.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:0px;right:0px;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!important}::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!important;border-color:#a53159!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#a53159!important}::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!important;border-color:#a53159!important;background-color:#a53159!important}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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!important;border-color:#90003b!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#90003b!important}::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!important;border-color:#90003b!important;background-color:#90003b!important}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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"], components: [{ type: i1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatPrefix, selector: "[matPrefix]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatSuffix, selector: "[matSuffix]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
351
|
+
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<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\n<div class=\"search-container\">\n <div\n *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n class=\"search-popup\"\n >\n <ng-container *ngIf=\"searchBoxInput\">\n <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n <ng-container *ngIf=\"searching\"> searching... </ng-container>\n <ng-container *ngIf=\"!searching\">\n {{ config.noResultMessage }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n <div\n class=\"search-result\"\n *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n >\n <h3 class=\"suggestions-heading\">\n <img\n *ngIf=\"modelWithSuggestions.model.imageUrl\"\n [src]=\"modelWithSuggestions.model.imageUrl\"\n [alt]=\"modelWithSuggestions.model.displayName\"\n />\n {{ modelWithSuggestions.model.displayName }} ({{\n modelWithSuggestions.items.length\n }})\n </h3>\n <ul>\n <li\n *ngFor=\"let suggestion of modelWithSuggestions.items\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n class=\"suggestions\"\n >\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!config.categorizeResults\">\n <div class=\"search-result\">\n <ul>\n <li\n *ngFor=\"let suggestion of suggestions\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n >\n <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n <img\n *ngIf=\"\n !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n \"\n class=\"suggestions-categorize-false\"\n [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n style=\"margin-right: 5px\"\n alt=\"Img\"\n />\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n <div class=\"recent-searches\">\n <h3 class=\"suggestions-heading\">Recent Searches</h3>\n <ul>\n <li\n *ngFor=\"let recentSearch of recentSearches\"\n class=\"suggestions\"\n (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n >\n <mat-icon\n matPrefix\n [className]=\"config.recentSearchIconClass\"\n ></mat-icon>\n\n <span> {{ recentSearch.match }}</span>\n </li>\n </ul>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em!important}.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!important}.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!important}.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!important}::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!important;border-color:#a53159!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#a53159!important}::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!important;border-color:#a53159!important;background-color:#a53159!important}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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!important;border-color:#90003b!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#90003b!important}::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!important;border-color:#90003b!important;background-color:#90003b!important}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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"] }, { type: i7.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"] }, { 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"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.MatPrefix, selector: "[matPrefix]" }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchComponent, decorators: [{
|
|
304
353
|
type: Component,
|
|
305
354
|
args: [{ selector: 'sourceloop-search', providers: [
|
|
306
355
|
{
|
|
@@ -308,17 +357,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
308
357
|
useExisting: SearchComponent,
|
|
309
358
|
multi: true,
|
|
310
359
|
},
|
|
311
|
-
], template: "<div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\">\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\n<div class=\"search-container\">\n <div\n *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n class=\"search-popup\"\n >\n <ng-container *ngIf=\"searchBoxInput\">\n <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n <ng-container *ngIf=\"searching\"> searching... </ng-container>\n <ng-container *ngIf=\"!searching\">\n {{ config.noResultMessage }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n <div\n class=\"search-result\"\n *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n >\n <h3 class=\"suggestions-heading\">\n <img\n *ngIf=\"modelWithSuggestions.model.imageUrl\"\n [src]=\"modelWithSuggestions.model.imageUrl\"\n [alt]=\"modelWithSuggestions.model.displayName\"\n />\n {{ modelWithSuggestions.model.displayName }} ({{\n modelWithSuggestions.items.length\n }})\n </h3>\n <ul>\n <li\n *ngFor=\"let suggestion of modelWithSuggestions.items\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n class=\"suggestions\"\n >\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!config.categorizeResults\">\n <div class=\"search-result\">\n <ul>\n <li\n *ngFor=\"let suggestion of suggestions\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n >\n <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n <img\n *ngIf=\"\n !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n \"\n class=\"suggestions-categorize-false\"\n [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n style=\"margin-right: 5px\"\n alt=\"Img\"\n />\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n <div class=\"recent-searches\">\n <h3 class=\"suggestions-heading\">Recent Searches</h3>\n <ul>\n <li\n *ngFor=\"let recentSearch of recentSearches\"\n class=\"suggestions\"\n (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n >\n <mat-icon\n matPrefix\n [className]=\"config.recentSearchIconClass\"\n ></mat-icon>\n\n <span> {{ recentSearch.match }}</span>\n </li>\n </ul>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em!important}.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!important}.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!important}.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:0px;right:0px;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!important}::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!important;border-color:#a53159!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#a53159!important}::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!important;border-color:#a53159!important;background-color:#a53159!important}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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!important;border-color:#90003b!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#90003b!important}::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!important;border-color:#90003b!important;background-color:#90003b!important}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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"] }]
|
|
360
|
+
], template: "<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\n<div class=\"search-container\">\n <div\n *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n class=\"search-popup\"\n >\n <ng-container *ngIf=\"searchBoxInput\">\n <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n <ng-container *ngIf=\"searching\"> searching... </ng-container>\n <ng-container *ngIf=\"!searching\">\n {{ config.noResultMessage }}\n </ng-container>\n </span>\n <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n <div\n class=\"search-result\"\n *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n >\n <h3 class=\"suggestions-heading\">\n <img\n *ngIf=\"modelWithSuggestions.model.imageUrl\"\n [src]=\"modelWithSuggestions.model.imageUrl\"\n [alt]=\"modelWithSuggestions.model.displayName\"\n />\n {{ modelWithSuggestions.model.displayName }} ({{\n modelWithSuggestions.items.length\n }})\n </h3>\n <ul>\n <li\n *ngFor=\"let suggestion of modelWithSuggestions.items\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n class=\"suggestions\"\n >\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!config.categorizeResults\">\n <div class=\"search-result\">\n <ul>\n <li\n *ngFor=\"let suggestion of suggestions\"\n (mousedown)=\"populateValue(suggestion, $event)\"\n >\n <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n <img\n *ngIf=\"\n !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n \"\n class=\"suggestions-categorize-false\"\n [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n style=\"margin-right: 5px\"\n alt=\"Img\"\n />\n <ng-container *ngIf=\"subtitleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n subtitleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n <p\n *ngIf=\"!titleTemplate\"\n [innerHTML]=\"\n boldString(\n suggestion[config.displayPropertyName],\n searchBoxInput\n )\n \"\n style=\"display: inline\"\n ></p>\n <ng-container *ngIf=\"titleTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n titleTemplate;\n context: {$implicit: suggestion}\n \"\n >\n </ng-container>\n </ng-container>\n </li>\n </ul>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n <div class=\"recent-searches\">\n <h3 class=\"suggestions-heading\">Recent Searches</h3>\n <ul>\n <li\n *ngFor=\"let recentSearch of recentSearches\"\n class=\"suggestions\"\n (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n >\n <mat-icon\n matPrefix\n [className]=\"config.recentSearchIconClass\"\n ></mat-icon>\n\n <span> {{ recentSearch.match }}</span>\n </li>\n </ul>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em!important}.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!important}.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!important}.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!important}::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!important;border-color:#a53159!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#a53159!important}::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!important;border-color:#a53159!important;background-color:#a53159!important}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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!important;border-color:#90003b!important}::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!important;border-left-style:none!important;border-right-style:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}::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!important;background-color:#90003b!important}::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!important;border-color:#90003b!important;background-color:#90003b!important}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff!important}::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"] }]
|
|
312
361
|
}], ctorParameters: function () {
|
|
313
362
|
return [{ type: undefined, decorators: [{
|
|
314
363
|
type: Inject,
|
|
315
364
|
args: [SEARCH_SERVICE_TOKEN]
|
|
365
|
+
}, {
|
|
366
|
+
type: Optional
|
|
316
367
|
}] }, { type: Object, decorators: [{
|
|
317
368
|
type: Inject,
|
|
318
369
|
args: [PLATFORM_ID]
|
|
319
|
-
}] }, { type: i0.ChangeDetectorRef }];
|
|
370
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: PromiseApiAdapterService }];
|
|
320
371
|
}, propDecorators: { config: [{
|
|
321
372
|
type: Input
|
|
373
|
+
}], searchProvider: [{
|
|
374
|
+
type: Input
|
|
322
375
|
}], titleTemplate: [{
|
|
323
376
|
type: Input
|
|
324
377
|
}], subtitleTemplate: [{
|
|
@@ -332,10 +385,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
332
385
|
args: ['searchInput']
|
|
333
386
|
}] } });
|
|
334
387
|
|
|
388
|
+
// Copyright (c) 2023 Sourcefuse Technologies
|
|
335
389
|
class SearchLibModule {
|
|
336
390
|
}
|
|
337
|
-
SearchLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
338
|
-
SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
391
|
+
SearchLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
392
|
+
SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchLibModule, declarations: [SearchComponent], imports: [CommonModule,
|
|
339
393
|
FormsModule,
|
|
340
394
|
HttpClientModule,
|
|
341
395
|
MatSelectModule,
|
|
@@ -343,7 +397,7 @@ SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
|
|
|
343
397
|
MatIconModule,
|
|
344
398
|
MatInputModule,
|
|
345
399
|
FlexLayoutModule], exports: [SearchComponent] });
|
|
346
|
-
SearchLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
400
|
+
SearchLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchLibModule, imports: [[
|
|
347
401
|
CommonModule,
|
|
348
402
|
FormsModule,
|
|
349
403
|
HttpClientModule,
|
|
@@ -353,7 +407,7 @@ SearchLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
353
407
|
MatInputModule,
|
|
354
408
|
FlexLayoutModule,
|
|
355
409
|
]] });
|
|
356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchLibModule, decorators: [{
|
|
357
411
|
type: NgModule,
|
|
358
412
|
args: [{
|
|
359
413
|
declarations: [SearchComponent],
|
|
@@ -437,13 +491,11 @@ function setIconClasses(d) {
|
|
|
437
491
|
};
|
|
438
492
|
}
|
|
439
493
|
|
|
440
|
-
|
|
441
|
-
* Public API Surface of my-lib
|
|
442
|
-
*/
|
|
494
|
+
// Copyright (c) 2023 Sourcefuse Technologies
|
|
443
495
|
|
|
444
496
|
/**
|
|
445
497
|
* Generated bundle index. Do not edit.
|
|
446
498
|
*/
|
|
447
499
|
|
|
448
|
-
export { Configuration, DEBOUNCE_TIME, DEFAULT_LIMIT, DEFAULT_LIMIT_TYPE, DEFAULT_OFFSET, DEFAULT_ORDER, DEFAULT_SAVE_IN_RECENTS, SEARCH_SERVICE_TOKEN, SearchComponent, SearchLibModule };
|
|
500
|
+
export { Configuration, DEBOUNCE_TIME, DEFAULT_LIMIT, DEFAULT_LIMIT_TYPE, DEFAULT_OFFSET, DEFAULT_ORDER, DEFAULT_SAVE_IN_RECENTS, SEARCH_SERVICE_TOKEN, SearchComponent, SearchLibModule, isApiServiceWithPromise };
|
|
449
501
|
//# sourceMappingURL=sourceloop-search-client.mjs.map
|