@sourceloop/search-client 4.3.2 → 5.0.0

package/esm2020/lib/search-lib.module.mjs

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { SearchComponent } from './search/search.component';
+import * as i0 from "@angular/core";
+export class SearchLibModule {
+}
+SearchLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, declarations: [SearchComponent], imports: [CommonModule,
+        FormsModule,
+        HttpClientModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        FlexLayoutModule], exports: [SearchComponent] });
+SearchLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, imports: [[
+            CommonModule,
+            FormsModule,
+            HttpClientModule,
+            MatSelectModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            FlexLayoutModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SearchComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        HttpClientModule,
+                        MatSelectModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        FlexLayoutModule,
+                    ],
+                    exports: [SearchComponent],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLWxpYi5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3NlYXJjaC1saWIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3ZDLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQ3RELE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQUNoRSxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFDckQsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUV6RCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7O0FBZ0IxRCxNQUFNLE9BQU8sZUFBZTs7NkdBQWYsZUFBZTs4R0FBZixlQUFlLGlCQWJYLGVBQWUsYUFFNUIsWUFBWTtRQUNaLFdBQVc7UUFDWCxnQkFBZ0I7UUFDaEIsZUFBZTtRQUNmLGtCQUFrQjtRQUNsQixhQUFhO1FBQ2IsY0FBYztRQUNkLGdCQUFnQixhQUVSLGVBQWU7OEdBRWQsZUFBZSxZQVpqQjtZQUNQLFlBQVk7WUFDWixXQUFXO1lBQ1gsZ0JBQWdCO1lBQ2hCLGVBQWU7WUFDZixrQkFBa0I7WUFDbEIsYUFBYTtZQUNiLGNBQWM7WUFDZCxnQkFBZ0I7U0FDakI7NEZBR1UsZUFBZTtrQkFkM0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQy9CLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsZ0JBQWdCO3dCQUNoQixlQUFlO3dCQUNmLGtCQUFrQjt3QkFDbEIsYUFBYTt3QkFDYixjQUFjO3dCQUNkLGdCQUFnQjtxQkFDakI7b0JBQ0QsT0FBTyxFQUFFLENBQUMsZUFBZSxDQUFDO2lCQUMzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtIdHRwQ2xpZW50TW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7XG5pbXBvcnQge05nTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7RmxleExheW91dE1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvZmxleC1sYXlvdXQnO1xuaW1wb3J0IHtGb3Jtc01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtNYXRGb3JtRmllbGRNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHtNYXRJY29uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7TWF0SW5wdXRNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2lucHV0JztcbmltcG9ydCB7TWF0U2VsZWN0TW9kdWxlfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zZWxlY3QnO1xuXG5pbXBvcnQge1NlYXJjaENvbXBvbmVudH0gZnJvbSAnLi9zZWFyY2gvc2VhcmNoLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1NlYXJjaENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgSHR0cENsaWVudE1vZHVsZSxcbiAgICBNYXRTZWxlY3RNb2R1bGUsXG4gICAgTWF0Rm9ybUZpZWxkTW9kdWxlLFxuICAgIE1hdEljb25Nb2R1bGUsXG4gICAgTWF0SW5wdXRNb2R1bGUsXG4gICAgRmxleExheW91dE1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1NlYXJjaENvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIFNlYXJjaExpYk1vZHVsZSB7fVxuIl19

package/fesm2015/sourceloop-search-client.mjs

@@ -0,0 +1,449 @@
+import * as i8 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, PLATFORM_ID, Component, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i7 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { Subject } from 'rxjs';
+import { tap, debounceTime } from 'rxjs/operators';
+import * as i4 from '@angular/material/core';
+import * as i5 from '@angular/flex-layout/flex';
+
+// cant use T extends IReturnType here
+const SEARCH_SERVICE_TOKEN = new InjectionToken('Search_Service_Token');
+// IRequestParameters default values
+const DEFAULT_LIMIT = 20;
+const DEFAULT_LIMIT_TYPE = false;
+const DEFAULT_ORDER = [];
+const DEBOUNCE_TIME = 1000;
+const DEFAULT_OFFSET = 0;
+const DEFAULT_SAVE_IN_RECENTS = true;
+
+const ALL_LABEL = 'All';
+class SearchComponent {
+    constructor(searchService, 
+    // tslint:disable-next-line:ban-types
+    platformId, cdr) {
+        this.searchService = searchService;
+        this.platformId = platformId;
+        this.cdr = cdr;
+        this.searchBoxInput = '';
+        this.suggestionsDisplay = false;
+        this.categoryDisplay = false;
+        this.searching = false;
+        this.suggestions = [];
+        this.recentSearches = [];
+        this.category = ALL_LABEL;
+        this.searchRequest$ = new Subject();
+        // emitted when user clicks one of the suggested results (including recent search sugestions)
+        this.clicked = new EventEmitter();
+        this.searched = new EventEmitter();
+        this.disabled = false;
+    }
+    get config() {
+        return this._config;
+    }
+    set config(value) {
+        this._config = value;
+        if (value && value.models) {
+            value.models.unshift({
+                name: ALL_LABEL,
+                displayName: ALL_LABEL,
+            });
+        }
+        else if (value && !value.models) {
+            value.models = [
+                {
+                    name: ALL_LABEL,
+                    displayName: ALL_LABEL,
+                },
+            ];
+        }
+        else {
+            // do nothing
+        }
+    }
+    ngOnInit() {
+        this.searchRequest$
+            .pipe(tap(v => (this.suggestions = [])), debounceTime(DEBOUNCE_TIME))
+            .subscribe((value) => {
+            this.searched.emit({
+                event: value.event,
+                keyword: value.input,
+                category: this.category,
+            });
+            this.getSuggestions(value);
+            this.cdr.markForCheck();
+        });
+    }
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        this.searchBoxInput = value;
+    }
+    // When the value in the UI is changed, this method will invoke a callback function
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    getSuggestions(eventValue) {
+        var _a, _b, _c, _d, _e;
+        eventValue.input = eventValue.input.trim();
+        if (!eventValue.input.length) {
+            return;
+        }
+        const order = (_a = this.config.order) !== null && _a !== void 0 ? _a : DEFAULT_ORDER;
+        let orderString = '';
+        order.forEach(preference => (orderString = `${orderString}${preference} `));
+        let saveInRecents = (_b = this.config.saveInRecents) !== null && _b !== void 0 ? _b : DEFAULT_SAVE_IN_RECENTS;
+        if (this.config.saveInRecents && this.config.saveInRecentsOnlyOnEnter) {
+            if (!eventValue.event ||
+                (eventValue.event instanceof KeyboardEvent &&
+                    eventValue.event.key === 'Enter')) {
+                saveInRecents = true; // save in recents only on enter or change in category
+            }
+            else {
+                // do not save in recent search on typing
+                saveInRecents = false;
+            }
+        }
+        /* need to put default value here and not in contructor
+        because sonar was giving code smell with definite assertion as all these parameters are optional */
+        const requestParameters = {
+            match: eventValue.input,
+            sources: this._categoryToSourceName(this.category),
+            limit: (_c = this.config.limit) !== null && _c !== void 0 ? _c : DEFAULT_LIMIT,
+            limitByType: (_d = this.config.limitByType) !== null && _d !== void 0 ? _d : DEFAULT_LIMIT_TYPE,
+            order: orderString,
+            offset: (_e = this.config.offset) !== null && _e !== void 0 ? _e : DEFAULT_OFFSET,
+        };
+        this.searching = true;
+        this.cdr.markForCheck();
+        this.searchService
+            .searchApiRequest(requestParameters, saveInRecents)
+            .subscribe((value) => {
+            this.suggestions = value;
+            this.searching = false;
+            this.cdr.markForCheck();
+        }, (_error) => {
+            this.suggestions = [];
+            this.searching = false;
+            this.cdr.markForCheck();
+        });
+    }
+    getRecentSearches() {
+        if (!this.config.hideRecentSearch &&
+            this.searchService.recentSearchApiRequest) {
+            this.searchService.recentSearchApiRequest().subscribe((value) => {
+                this.recentSearches = value;
+                this.cdr.markForCheck();
+            }, (_error) => {
+                this.recentSearches = [];
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    // event can be KeyBoardEvent or Event of type 'change' fired on change in value of drop down for category
+    hitSearchApi(event) {
+        // this will happen only in case user searches something and then erases it, we need to update recent search
+        if (!this.searchBoxInput) {
+            this.suggestions = [];
+            this.getRecentSearches();
+            return;
+        }
+        // no debounce time needed in case of searchOnlyOnEnter
+        if (this.config.searchOnlyOnEnter) {
+            if (!event || (event instanceof KeyboardEvent && event.key === 'Enter')) {
+                this.getSuggestions({ input: this.searchBoxInput, event });
+            }
+            return;
+        }
+        // no debounce time needed in case of change in category
+        if (!event) {
+            this.getSuggestions({ input: this.searchBoxInput, event });
+            return;
+        }
+        this.searchRequest$.next({
+            input: this.searchBoxInput,
+            event,
+        });
+    }
+    populateValue(suggestion, event) {
+        const value = suggestion[this.config.displayPropertyName]; // converted to string to assign value to searchBoxInput
+        this.searchBoxInput = value;
+        this.suggestionsDisplay = false;
+        // ngModelChange doesn't detect change in value when populated from outside, hence calling manually
+        this.onChange(this.searchBoxInput);
+        // need to do this to show more search options for selected suggestion - just in case user reopens search input
+        this.getSuggestions({ input: this.searchBoxInput, event });
+        this.clicked.emit({ item: suggestion, event });
+    }
+    populateValueRecentSearch(recentSearch, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const value = recentSearch['match'];
+        this.searchBoxInput = value;
+        this.suggestionsDisplay = false;
+        this.onChange(this.searchBoxInput);
+        // need to do this to show more search options for selected suggestion - just in case user reopens search input
+        this.getSuggestions({ input: this.searchBoxInput, event });
+        this.focusInput();
+        this.showSuggestions();
+    }
+    fetchModelImageUrlFromSuggestion(suggestion) {
+        const modelName = suggestion['source'];
+        let url;
+        this.config.models.forEach(model => {
+            if (model.name === modelName && model.imageUrl) {
+                url = model.imageUrl;
+            }
+        });
+        return url;
+    }
+    boldString(str, substr) {
+        const strRegExp = new RegExp(`(${substr})`, 'gi');
+        const stringToMakeBold = str;
+        return stringToMakeBold.replace(strRegExp, `<b>$1</b>`);
+    }
+    hideSuggestions() {
+        this.suggestionsDisplay = false;
+        this.onTouched();
+    }
+    showSuggestions() {
+        this.suggestionsDisplay = true;
+        this.getRecentSearches();
+    }
+    focusInput() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.searchInputElement.nativeElement.focus();
+        }
+    }
+    setCategory(category) {
+        this.category = category;
+        this.categoryDisplay = false;
+        if (this.searchBoxInput) {
+            this.hitSearchApi();
+            this.focusInput();
+            this.showSuggestions();
+        }
+    }
+    showCategory() {
+        this.categoryDisplay = !this.categoryDisplay;
+    }
+    hideCategory() {
+        this.categoryDisplay = false;
+    }
+    resetInput() {
+        this.searchBoxInput = '';
+        this.suggestions = [];
+        this.suggestionsDisplay = true;
+        this.focusInput();
+        // ngModelChange doesn't detect change in value when populated from outside, hence calling manually
+        this.onChange(this.searchBoxInput);
+        this.getRecentSearches();
+    }
+    ngOnDestroy() {
+        this.searchRequest$.unsubscribe();
+    }
+    _categoryToSourceName(category) {
+        if (category === ALL_LABEL) {
+            return [];
+        }
+        else {
+            return [category];
+        }
+    }
+    getModelFromModelName(name) {
+        return this.config.models.find(item => item.name === name);
+    }
+    getModelsWithSuggestions() {
+        const modelsWithSuggestions = [];
+        const sources = [];
+        this.suggestions.forEach(suggestion => {
+            if (sources.indexOf(suggestion['source']) >= 0) {
+                modelsWithSuggestions.every(modelWithSuggestions => {
+                    if (modelWithSuggestions.model.name === suggestion['source']) {
+                        modelWithSuggestions.items.push(suggestion);
+                        return false;
+                    }
+                    return true;
+                });
+            }
+            else {
+                const model = this.getModelFromModelName(suggestion['source']);
+                modelsWithSuggestions.push({ model, items: [suggestion] });
+                sources.push(suggestion['source']);
+            }
+        });
+        return modelsWithSuggestions;
+    }
+}
+SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchComponent, deps: [{ token: SEARCH_SERVICE_TOKEN }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SearchComponent, selector: "sourceloop-search", inputs: { config: "config", titleTemplate: "titleTemplate", subtitleTemplate: "subtitleTemplate" }, outputs: { clicked: "clicked", searched: "searched" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: SearchComponent,
+            multi: true,
+        },
+    ], 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>&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!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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sourceloop-search', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SearchComponent,
+                            multi: true,
+                        },
+                    ], 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>&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!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"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SEARCH_SERVICE_TOKEN]
+                    }] }, { type: Object, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { config: [{
+                type: Input
+            }], titleTemplate: [{
+                type: Input
+            }], subtitleTemplate: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], searched: [{
+                type: Output
+            }], searchInputElement: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
+
+class SearchLibModule {
+}
+SearchLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, declarations: [SearchComponent], imports: [CommonModule,
+        FormsModule,
+        HttpClientModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        FlexLayoutModule], exports: [SearchComponent] });
+SearchLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, imports: [[
+            CommonModule,
+            FormsModule,
+            HttpClientModule,
+            MatSelectModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            FlexLayoutModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SearchComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        HttpClientModule,
+                        MatSelectModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        FlexLayoutModule,
+                    ],
+                    exports: [SearchComponent],
+                }]
+        }] });
+
+class Configuration {
+    constructor(d) {
+        checkForError(d);
+        this.displayPropertyName = d.displayPropertyName;
+        this.models = d.models;
+        /* IRequestParameters - will be given default values before call is made in case undefined/null,
+        otherwise there ! is used on which sonar gives code smell */
+        this.limit = d.limit;
+        this.limitByType = d.limitByType;
+        this.order = d.order;
+        this.offset = d.offset;
+        this.saveInRecents = d.saveInRecents;
+        const displayTexts = setDisplayText(d);
+        this.noResultMessage = displayTexts.noResultMessage;
+        this.placeholder = displayTexts.placeholder;
+        this.placeholderFunction = displayTexts.placeholderFunction;
+        const searchConfig = setSearchConfig(d);
+        this.categorizeResults = searchConfig.categorizeResults;
+        this.hideRecentSearch = searchConfig.hideRecentSearch;
+        this.hideCategorizeButton = searchConfig.hideCategorizeButton;
+        this.saveInRecentsOnlyOnEnter = searchConfig.saveInRecentsOnlyOnEnter;
+        this.searchOnlyOnEnter = searchConfig.searchOnlyOnEnter;
+        const classes = setIconClasses(d);
+        this.searchIconClass = classes.searchIconClass;
+        this.crossIconClass = classes.crossIconClass;
+        this.dropDownButtonIconClass = classes.dropDownButtonIconClass;
+        this.recentSearchIconClass = classes.recentSearchIconClass;
+    }
+}
+function checkForError(d) {
+    if (d.categorizeResults === false &&
+        (d.hideCategorizeButton === false || d.hideCategorizeButton === undefined)) {
+        throw new Error('You must provide hideCategorizeButton:true as categorizeResults is false');
+    }
+    if (d.saveInRecents === false && d.saveInRecentsOnlyOnEnter === true) {
+        throw new Error('You must provide saveInRecents:true for saveInRecentsOnlyOnEnter:true');
+    }
+}
+function setDisplayText(d) {
+    var _a, _b;
+    return {
+        placeholder: (_a = d.placeholder) !== null && _a !== void 0 ? _a : 'Search',
+        noResultMessage: (_b = d.noResultMessage) !== null && _b !== void 0 ? _b : 'No result found',
+        placeholderFunction: d.placeholderFunction,
+    };
+}
+function setSearchConfig(d) {
+    var _a, _b, _c, _d, _e;
+    return {
+        categorizeResults: (_a = d.categorizeResults) !== null && _a !== void 0 ? _a : true,
+        hideRecentSearch: (_b = d.hideRecentSearch) !== null && _b !== void 0 ? _b : false,
+        hideCategorizeButton: (_c = d.hideCategorizeButton) !== null && _c !== void 0 ? _c : false,
+        saveInRecentsOnlyOnEnter: (_d = d.saveInRecentsOnlyOnEnter) !== null && _d !== void 0 ? _d : false,
+        searchOnlyOnEnter: (_e = d.searchOnlyOnEnter) !== null && _e !== void 0 ? _e : false,
+    };
+}
+function setIconClasses(d) {
+    var _a, _b, _c, _d;
+    return {
+        searchIconClass: (_a = d.searchIconClass) !== null && _a !== void 0 ? _a : 'icomoon Search',
+        crossIconClass: (_b = d.crossIconClass) !== null && _b !== void 0 ? _b : 'icomoon close',
+        dropDownButtonIconClass: (_c = d.dropDownButtonIconClass) !== null && _c !== void 0 ? _c : 'icomoon arrow_down',
+        recentSearchIconClass: (_d = d.recentSearchIconClass) !== null && _d !== void 0 ? _d : 'icomoon Search',
+    };
+}
+
+/*
+ * Public API Surface of my-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Configuration, DEBOUNCE_TIME, DEFAULT_LIMIT, DEFAULT_LIMIT_TYPE, DEFAULT_OFFSET, DEFAULT_ORDER, DEFAULT_SAVE_IN_RECENTS, SEARCH_SERVICE_TOKEN, SearchComponent, SearchLibModule };
+//# sourceMappingURL=sourceloop-search-client.mjs.map