@sourceloop/search-client 6.1.0 → 7.0.1

package/{fesm2020 → fesm2022}/sourceloop-search-client.mjs

@@ -2,7 +2,7 @@ import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, EventEmitter, PLATFORM_ID, Component, Inject, Optional, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, EventEmitter, PLATFORM_ID, ViewChild, Output, Input, Inject, Optional, Component, NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -20,6 +20,9 @@ import * as i6 from '@angular/material/core';
 import * as i9 from '@angular/flex-layout/flex';
 
 // Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
 function isApiServiceWithPromise(service) {
     return !!service
         .searchApiRequestWithPromise;
@@ -47,10 +50,10 @@ class PromiseApiAdapterService {
             }),
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PromiseApiAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PromiseApiAdapterService, providedIn: 'root' });
 }
-PromiseApiAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PromiseApiAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PromiseApiAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PromiseApiAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PromiseApiAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PromiseApiAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -58,48 +61,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 // Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
 const ALL_LABEL = 'All';
 class SearchComponent {
-    constructor(searchService, 
-    // tslint:disable-next-line:ban-types
-    platformId, cdr, promiseAdapter) {
-        this.searchService = searchService;
-        this.platformId = platformId;
-        this.cdr = cdr;
-        this.promiseAdapter = promiseAdapter;
-        this.searchBoxInput = '';
-        this.suggestionsDisplay = false;
-        this.categoryDisplay = false;
-        this.searching = false;
-        this.suggestions = [];
-        this.recentSearches = [];
-        this.category = ALL_LABEL;
-        this.searchRequest$ = new Subject();
-        /**
-         * configure when application has own search input and use different all label
-         */
-        this.customAllLabel = ALL_LABEL;
-        /**
-         * configure to true when to show only search result overlay without search bar
-         */
-        this.showOnlySearchResultOverlay = false;
-        /**
-         * provide custom search event when showOnlySearchResultOverlay configure to true
-         */
-        this.customSearchEvent = {
-            searchValue: '',
-            modelName: this.customAllLabel,
-        };
-        // emitted when user clicks one of the suggested results (including recent search sugestions)
-        this.clicked = new EventEmitter();
-        this.searched = new EventEmitter();
-        /* emitted when user makes search request (including recent search requests
-           & requests made on change in category from dropdown)
-        In case of recent search Array of recent Search request result is emitted */
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.disabled = false;
-    }
+    searchService;
+    platformId;
+    cdr;
+    promiseAdapter;
+    searchBoxInput = '';
+    suggestionsDisplay = false;
+    categoryDisplay = false;
+    searching = false;
+    suggestions = [];
+    recentSearches = [];
+    category = ALL_LABEL;
+    searchRequest$ = new Subject();
+    _config;
     get config() {
         return this._config;
     }
@@ -132,6 +111,41 @@ class SearchComponent {
     get searchProvider() {
         return this.searchService;
     }
+    titleTemplate;
+    subtitleTemplate;
+    /**
+     * configure when application has own search input and use different all label
+     */
+    customAllLabel = ALL_LABEL;
+    /**
+     * configure to true when to show only search result overlay without search bar
+     */
+    showOnlySearchResultOverlay = false;
+    /**
+     * provide custom search event when showOnlySearchResultOverlay configure to true
+     */
+    customSearchEvent = {
+        searchValue: '',
+        modelName: this.customAllLabel,
+    };
+    // emitted when user clicks one of the suggested results (including recent search sugestions)
+    clicked = new EventEmitter();
+    searched = new EventEmitter();
+    /* emitted when user makes search request (including recent search requests
+       & requests made on change in category from dropdown)
+    In case of recent search Array of recent Search request result is emitted */
+    onChange = () => { };
+    onTouched = () => { };
+    disabled = false;
+    searchInputElement;
+    constructor(searchService, 
+    // tslint:disable-next-line:ban-types
+    platformId, cdr, promiseAdapter) {
+        this.searchService = searchService;
+        this.platformId = platformId;
+        this.cdr = cdr;
+        this.promiseAdapter = promiseAdapter;
+    }
     ngOnInit() {
         this.searchRequest$
             .pipe(tap(v => (this.suggestions = [])), debounceTime(DEBOUNCE_TIME))
@@ -384,16 +398,16 @@ class SearchComponent {
             changes.customSearchEvent?.previousValue[propertyName] !==
                 changes.customSearchEvent?.currentValue[propertyName]);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchComponent, deps: [{ token: SEARCH_SERVICE_TOKEN, optional: true }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: PromiseApiAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchComponent, selector: "sourceloop-search", inputs: { config: "config", searchProvider: "searchProvider", titleTemplate: "titleTemplate", subtitleTemplate: "subtitleTemplate", customAllLabel: "customAllLabel", showOnlySearchResultOverlay: "showOnlySearchResultOverlay", customSearchEvent: "customSearchEvent" }, outputs: { clicked: "clicked", searched: "searched" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SearchComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!showOnlySearchResultOverlay\">\n  <div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\" *ngIf=\"config\">\n    <mat-form-field appearance=\"outline\" class=\"toolbar-search-input\">\n      <input\n        matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [placeholder]=\"\n          config.placeholderFunction\n            ? config.placeholderFunction(searchInput.value, category)\n            : config.placeholder || 'Search'\n        \"\n        #searchInput\n        name=\"searchInput\"\n        (focus)=\"showSuggestions()\"\n        (blur)=\"hideSuggestions()\"\n        [(ngModel)]=\"searchBoxInput\"\n        (keyup)=\"hitSearchApi($event)\"\n        placeholder=\"Search\"\n        (ngModelChange)=\"onChange(this.searchBoxInput)\"\n        [disabled]=\"disabled\"\n      />\n      <mat-icon matPrefix [className]=\"config.searchIconClass\"></mat-icon>\n      <mat-icon\n        *ngIf=\"searchBoxInput\"\n        matSuffix\n        [className]=\"config.crossIconClass\"\n        (click)=\"resetInput()\"\n      ></mat-icon>\n    </mat-form-field>\n  \n    <mat-form-field appearance=\"outline\" class=\"toolbar-search-select\">\n      <mat-icon matSuffix [className]=\"config.dropDownButtonIconClass\"></mat-icon>\n      <mat-select\n        [value]=\"category\"\n        (selectionChange)=\"setCategory($event.value)\"\n        panelClass=\"search-select\"\n      >\n        <mat-option [value]=\"model.name\" *ngFor=\"let model of config.models\">\n          {{ model.displayName }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-container>\n\n<div class=\"search-container\">\n  <div\n    *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n    class=\"search-popup\"\n  >\n    <ng-container *ngIf=\"searchBoxInput\">\n      <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n        <ng-container *ngIf=\"searching\"> searching... </ng-container>\n        <ng-container *ngIf=\"!searching\">\n          {{ config.noResultMessage }}\n        </ng-container>\n      </span>\n      <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n        <div\n          class=\"search-result\"\n          *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n        >\n          <h3 class=\"suggestions-heading\">\n            <img\n              *ngIf=\"modelWithSuggestions.model.imageUrl\"\n              [src]=\"modelWithSuggestions.model.imageUrl\"\n              [alt]=\"modelWithSuggestions.model.displayName\"\n            />\n            {{ modelWithSuggestions.model.displayName }} ({{\n              modelWithSuggestions.items.length\n            }})\n          </h3>\n          <ul>\n            <li\n              *ngFor=\"let suggestion of modelWithSuggestions.items\"\n              (mousedown)=\"populateValue(suggestion, $event)\"\n              class=\"suggestions\"\n            >\n              <ng-container *ngIf=\"subtitleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    subtitleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n              <p\n                *ngIf=\"!titleTemplate\"\n                [innerHTML]=\"\n                  boldString(\n                    suggestion[config.displayPropertyName],\n                    searchBoxInput\n                  )\n                \"\n                style=\"display: inline\"\n              ></p>\n              <ng-container *ngIf=\"titleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    titleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!config.categorizeResults\">\n        <div class=\"search-result\">\n          <ul>\n            <li\n              *ngFor=\"let suggestion of suggestions\"\n              (mousedown)=\"populateValue(suggestion, $event)\"\n            >\n              <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n              <img\n                *ngIf=\"\n                  !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n                \"\n                class=\"suggestions-categorize-false\"\n                [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n                style=\"margin-right: 5px\"\n                alt=\"Img\"\n              />\n              <ng-container *ngIf=\"subtitleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    subtitleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n              <p\n                *ngIf=\"!titleTemplate\"\n                [innerHTML]=\"\n                  boldString(\n                    suggestion[config.displayPropertyName],\n                    searchBoxInput\n                  )\n                \"\n                style=\"display: inline\"\n              ></p>\n              <ng-container *ngIf=\"titleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    titleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n      <div class=\"recent-searches\">\n        <h3 class=\"suggestions-heading\">Recent Searches</h3>\n        <ul>\n          <li\n            *ngFor=\"let recentSearch of recentSearches\"\n            class=\"suggestions\"\n            (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n          >\n            <mat-icon\n              matPrefix\n              [className]=\"config.recentSearchIconClass\"\n            ></mat-icon>\n\n            <span>&nbsp;{{ recentSearch.match }}</span>\n          </li>\n        </ul>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em}.toolbar-search{width:515px;background-color:#f7f7f7;border-radius:0 0 4px 4px}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{height:39px;align-items:center}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}.toolbar-search ::ng-deep .mat-form-field-infix{height:auto}.search-container{position:relative;width:515px}.search-container .search-popup{padding:0 15px 15px;margin:0;max-height:80vh;overflow-x:hidden;overflow-y:auto;position:absolute;top:100%;left:0;right:0;z-index:9999;background-color:#fff;box-shadow:0 5px 4px #0003;border-radius:0 0 4px 4px}.search-container .search-popup hr{border:0;border-top:1px solid #ebebeb;margin:0;position:sticky;top:0;padding:0 0 15px;z-index:1}.search-container .search-popup .search-message{display:inline-block;width:100%;text-align:center;font-size:16px;padding-top:12px}.search-container .search-popup .search-item-info{color:#91263b;text-align:center;font-size:12px;margin-bottom:15px;padding-top:12px}.search-container .search-popup ul{padding:0;margin:0}.search-container .search-popup ul li{list-style:none;font-size:1rem;font-weight:400;line-height:1.5;color:#333}.search-container .search-popup ul li.suggestions{font-size:15px;line-height:36px;padding:0 15px 0 44px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.search-container .search-popup ul li.suggestions:hover{background-color:#fee8e8}.search-container .search-popup ul li.suggestions svg{margin-right:5px}.search-container .search-popup ul li.suggestions-categorize-false:hover{background-color:#fee8e8}.search-container .search-popup .search-result{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .search-result.no-categorize-result ul{width:100%;padding:0;margin:0 0 10px}.search-container .search-popup .search-result.no-categorize-result ul li{font-size:15px;line-height:36px;padding:0 15px 0 31px;display:flex;align-items:center;cursor:pointer}.search-container .search-popup .search-result.no-categorize-result ul li:hover{background-color:#fee8e8}.search-container .search-popup .search-result.no-categorize-result ul li img{width:18px;margin-right:9px}.search-container .search-popup .suggestions-heading{color:#9c9c9c;font-size:14px;font-weight:400;margin:0 0 10px 17px;display:flex;align-items:center;position:relative}.search-container .search-popup .suggestions-heading .show-more{position:absolute;right:20px;color:#d1d1d1;font-size:12px;cursor:pointer;text-decoration:none}.search-container .search-popup .suggestions-heading .show-more :hover{text-decoration:underline}.search-container .search-popup .suggestions-heading img{width:18px;margin-right:9px}.search-container .search-popup .recent-searches{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .recent-searches ul{display:inline-block;width:100%}.search-container .search-popup .recent-searches ul li.suggestions{display:flex}.search-container .search-popup .recent-searches ul li.suggestions span{width:100%;overflow:hidden;text-overflow:ellipsis}.search-container .search-popup .recent-searches .suggestions{display:flex}.search-container .search-popup .recent-searches .suggestions-heading{margin-left:30px}.search-container .search-popup .recent-searches li.suggestions{padding-left:31px}::ng-deep .search-select.mat-select-panel{margin-top:30px;margin-left:10px}::ng-deep .search-select .mat-option-text{display:contents}::ng-deep .toolbar-search .mat-form-field-infix{font-size:14px}::ng-deep .toolbar-search input{line-height:14px}::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-start,::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-end{background-color:#f1f3f4}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:1px;border-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:1px solid #a53159;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:1px;border-color:#a53159;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:2px;border-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:2px solid #90003b;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:2px;border-color:#90003b;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search .mat-select-arrow{opacity:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i9.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 }
-SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: [{ token: SEARCH_SERVICE_TOKEN, optional: true }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: PromiseApiAdapterService }], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "sourceloop-search", inputs: { config: "config", searchProvider: "searchProvider", titleTemplate: "titleTemplate", subtitleTemplate: "subtitleTemplate", customAllLabel: "customAllLabel", showOnlySearchResultOverlay: "showOnlySearchResultOverlay", customSearchEvent: "customSearchEvent" }, outputs: { clicked: "clicked", searched: "searched" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: SearchComponent,
-            multi: true,
-        },
-    ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!showOnlySearchResultOverlay\">\n  <div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\" *ngIf=\"config\">\n    <mat-form-field appearance=\"outline\" class=\"toolbar-search-input\">\n      <input\n        matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [placeholder]=\"\n          config.placeholderFunction\n            ? config.placeholderFunction(searchInput.value, category)\n            : config.placeholder || 'Search'\n        \"\n        #searchInput\n        name=\"searchInput\"\n        (focus)=\"showSuggestions()\"\n        (blur)=\"hideSuggestions()\"\n        [(ngModel)]=\"searchBoxInput\"\n        (keyup)=\"hitSearchApi($event)\"\n        placeholder=\"Search\"\n        (ngModelChange)=\"onChange(this.searchBoxInput)\"\n        [disabled]=\"disabled\"\n      />\n      <mat-icon matPrefix [className]=\"config.searchIconClass\"></mat-icon>\n      <mat-icon\n        *ngIf=\"searchBoxInput\"\n        matSuffix\n        [className]=\"config.crossIconClass\"\n        (click)=\"resetInput()\"\n      ></mat-icon>\n    </mat-form-field>\n  \n    <mat-form-field appearance=\"outline\" class=\"toolbar-search-select\">\n      <mat-icon matSuffix [className]=\"config.dropDownButtonIconClass\"></mat-icon>\n      <mat-select\n        [value]=\"category\"\n        (selectionChange)=\"setCategory($event.value)\"\n        panelClass=\"search-select\"\n      >\n        <mat-option [value]=\"model.name\" *ngFor=\"let model of config.models\">\n          {{ model.displayName }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-container>\n\n<div class=\"search-container\">\n  <div\n    *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n    class=\"search-popup\"\n  >\n    <ng-container *ngIf=\"searchBoxInput\">\n      <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n        <ng-container *ngIf=\"searching\"> searching... </ng-container>\n        <ng-container *ngIf=\"!searching\">\n          {{ config.noResultMessage }}\n        </ng-container>\n      </span>\n      <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n        <div\n          class=\"search-result\"\n          *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n        >\n          <h3 class=\"suggestions-heading\">\n            <img\n              *ngIf=\"modelWithSuggestions.model.imageUrl\"\n              [src]=\"modelWithSuggestions.model.imageUrl\"\n              [alt]=\"modelWithSuggestions.model.displayName\"\n            />\n            {{ modelWithSuggestions.model.displayName }} ({{\n              modelWithSuggestions.items.length\n            }})\n          </h3>\n          <ul>\n            <li\n              *ngFor=\"let suggestion of modelWithSuggestions.items\"\n              (mousedown)=\"populateValue(suggestion, $event)\"\n              class=\"suggestions\"\n            >\n              <ng-container *ngIf=\"subtitleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    subtitleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n              <p\n                *ngIf=\"!titleTemplate\"\n                [innerHTML]=\"\n                  boldString(\n                    suggestion[config.displayPropertyName],\n                    searchBoxInput\n                  )\n                \"\n                style=\"display: inline\"\n              ></p>\n              <ng-container *ngIf=\"titleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    titleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!config.categorizeResults\">\n        <div class=\"search-result\">\n          <ul>\n            <li\n              *ngFor=\"let suggestion of suggestions\"\n              (mousedown)=\"populateValue(suggestion, $event)\"\n            >\n              <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n              <img\n                *ngIf=\"\n                  !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n                \"\n                class=\"suggestions-categorize-false\"\n                [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n                style=\"margin-right: 5px\"\n                alt=\"Img\"\n              />\n              <ng-container *ngIf=\"subtitleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    subtitleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n              <p\n                *ngIf=\"!titleTemplate\"\n                [innerHTML]=\"\n                  boldString(\n                    suggestion[config.displayPropertyName],\n                    searchBoxInput\n                  )\n                \"\n                style=\"display: inline\"\n              ></p>\n              <ng-container *ngIf=\"titleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    titleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n      <div class=\"recent-searches\">\n        <h3 class=\"suggestions-heading\">Recent Searches</h3>\n        <ul>\n          <li\n            *ngFor=\"let recentSearch of recentSearches\"\n            class=\"suggestions\"\n            (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n          >\n            <mat-icon\n              matPrefix\n              [className]=\"config.recentSearchIconClass\"\n            ></mat-icon>\n\n            <span>&nbsp;{{ recentSearch.match }}</span>\n          </li>\n        </ul>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em}.toolbar-search{width:515px;background-color:#f7f7f7;border-radius:0 0 4px 4px}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{height:39px;align-items:center}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}.toolbar-search ::ng-deep .mat-form-field-infix{height:auto}.search-container{position:relative;width:515px}.search-container .search-popup{padding:0 15px 15px;margin:0;max-height:80vh;overflow-x:hidden;overflow-y:auto;position:absolute;top:100%;left:0;right:0;z-index:9999;background-color:#fff;box-shadow:0 5px 4px #0003;border-radius:0 0 4px 4px}.search-container .search-popup hr{border:0;border-top:1px solid #ebebeb;margin:0;position:sticky;top:0;padding:0 0 15px;z-index:1}.search-container .search-popup .search-message{display:inline-block;width:100%;text-align:center;font-size:16px;padding-top:12px}.search-container .search-popup .search-item-info{color:#91263b;text-align:center;font-size:12px;margin-bottom:15px;padding-top:12px}.search-container .search-popup ul{padding:0;margin:0}.search-container .search-popup ul li{list-style:none;font-size:1rem;font-weight:400;line-height:1.5;color:#333}.search-container .search-popup ul li.suggestions{font-size:15px;line-height:36px;padding:0 15px 0 44px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.search-container .search-popup ul li.suggestions:hover{background-color:#fee8e8}.search-container .search-popup ul li.suggestions svg{margin-right:5px}.search-container .search-popup ul li.suggestions-categorize-false:hover{background-color:#fee8e8}.search-container .search-popup .search-result{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .search-result.no-categorize-result ul{width:100%;padding:0;margin:0 0 10px}.search-container .search-popup .search-result.no-categorize-result ul li{font-size:15px;line-height:36px;padding:0 15px 0 31px;display:flex;align-items:center;cursor:pointer}.search-container .search-popup .search-result.no-categorize-result ul li:hover{background-color:#fee8e8}.search-container .search-popup .search-result.no-categorize-result ul li img{width:18px;margin-right:9px}.search-container .search-popup .suggestions-heading{color:#9c9c9c;font-size:14px;font-weight:400;margin:0 0 10px 17px;display:flex;align-items:center;position:relative}.search-container .search-popup .suggestions-heading .show-more{position:absolute;right:20px;color:#d1d1d1;font-size:12px;cursor:pointer;text-decoration:none}.search-container .search-popup .suggestions-heading .show-more :hover{text-decoration:underline}.search-container .search-popup .suggestions-heading img{width:18px;margin-right:9px}.search-container .search-popup .recent-searches{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .recent-searches ul{display:inline-block;width:100%}.search-container .search-popup .recent-searches ul li.suggestions{display:flex}.search-container .search-popup .recent-searches ul li.suggestions span{width:100%;overflow:hidden;text-overflow:ellipsis}.search-container .search-popup .recent-searches .suggestions{display:flex}.search-container .search-popup .recent-searches .suggestions-heading{margin-left:30px}.search-container .search-popup .recent-searches li.suggestions{padding-left:31px}::ng-deep .search-select.mat-select-panel{margin-top:30px;margin-left:10px}::ng-deep .search-select .mat-option-text{display:contents}::ng-deep .toolbar-search .mat-form-field-infix{font-size:14px}::ng-deep .toolbar-search input{line-height:14px}::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-start,::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-end{background-color:#f1f3f4}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:1px;border-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:1px solid #a53159;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:1px;border-color:#a53159;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:2px;border-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:2px solid #90003b;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:2px;border-color:#90003b;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search .mat-select-arrow{opacity:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i9.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sourceloop-search', providers: [
                         {
@@ -402,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             multi: true,
                         },
                     ], template: "<ng-container *ngIf=\"!showOnlySearchResultOverlay\">\n  <div fxLayout fxLayoutAlign=\"start center\" class=\"toolbar-search\" *ngIf=\"config\">\n    <mat-form-field appearance=\"outline\" class=\"toolbar-search-input\">\n      <input\n        matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [placeholder]=\"\n          config.placeholderFunction\n            ? config.placeholderFunction(searchInput.value, category)\n            : config.placeholder || 'Search'\n        \"\n        #searchInput\n        name=\"searchInput\"\n        (focus)=\"showSuggestions()\"\n        (blur)=\"hideSuggestions()\"\n        [(ngModel)]=\"searchBoxInput\"\n        (keyup)=\"hitSearchApi($event)\"\n        placeholder=\"Search\"\n        (ngModelChange)=\"onChange(this.searchBoxInput)\"\n        [disabled]=\"disabled\"\n      />\n      <mat-icon matPrefix [className]=\"config.searchIconClass\"></mat-icon>\n      <mat-icon\n        *ngIf=\"searchBoxInput\"\n        matSuffix\n        [className]=\"config.crossIconClass\"\n        (click)=\"resetInput()\"\n      ></mat-icon>\n    </mat-form-field>\n  \n    <mat-form-field appearance=\"outline\" class=\"toolbar-search-select\">\n      <mat-icon matSuffix [className]=\"config.dropDownButtonIconClass\"></mat-icon>\n      <mat-select\n        [value]=\"category\"\n        (selectionChange)=\"setCategory($event.value)\"\n        panelClass=\"search-select\"\n      >\n        <mat-option [value]=\"model.name\" *ngFor=\"let model of config.models\">\n          {{ model.displayName }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-container>\n\n<div class=\"search-container\">\n  <div\n    *ngIf=\"suggestionsDisplay && (recentSearches.length || suggestions.length)\"\n    class=\"search-popup\"\n  >\n    <ng-container *ngIf=\"searchBoxInput\">\n      <span *ngIf=\"suggestions.length === 0\" class=\"search-message\">\n        <ng-container *ngIf=\"searching\"> searching... </ng-container>\n        <ng-container *ngIf=\"!searching\">\n          {{ config.noResultMessage }}\n        </ng-container>\n      </span>\n      <ng-container *ngIf=\"config.categorizeResults && suggestions.length\">\n        <div\n          class=\"search-result\"\n          *ngFor=\"let modelWithSuggestions of getModelsWithSuggestions()\"\n        >\n          <h3 class=\"suggestions-heading\">\n            <img\n              *ngIf=\"modelWithSuggestions.model.imageUrl\"\n              [src]=\"modelWithSuggestions.model.imageUrl\"\n              [alt]=\"modelWithSuggestions.model.displayName\"\n            />\n            {{ modelWithSuggestions.model.displayName }} ({{\n              modelWithSuggestions.items.length\n            }})\n          </h3>\n          <ul>\n            <li\n              *ngFor=\"let suggestion of modelWithSuggestions.items\"\n              (mousedown)=\"populateValue(suggestion, $event)\"\n              class=\"suggestions\"\n            >\n              <ng-container *ngIf=\"subtitleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    subtitleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n              <p\n                *ngIf=\"!titleTemplate\"\n                [innerHTML]=\"\n                  boldString(\n                    suggestion[config.displayPropertyName],\n                    searchBoxInput\n                  )\n                \"\n                style=\"display: inline\"\n              ></p>\n              <ng-container *ngIf=\"titleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    titleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!config.categorizeResults\">\n        <div class=\"search-result\">\n          <ul>\n            <li\n              *ngFor=\"let suggestion of suggestions\"\n              (mousedown)=\"populateValue(suggestion, $event)\"\n            >\n              <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->\n              <img\n                *ngIf=\"\n                  !titleTemplate && fetchModelImageUrlFromSuggestion(suggestion)\n                \"\n                class=\"suggestions-categorize-false\"\n                [src]=\"fetchModelImageUrlFromSuggestion(suggestion)\"\n                style=\"margin-right: 5px\"\n                alt=\"Img\"\n              />\n              <ng-container *ngIf=\"subtitleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    subtitleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n              <p\n                *ngIf=\"!titleTemplate\"\n                [innerHTML]=\"\n                  boldString(\n                    suggestion[config.displayPropertyName],\n                    searchBoxInput\n                  )\n                \"\n                style=\"display: inline\"\n              ></p>\n              <ng-container *ngIf=\"titleTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    titleTemplate;\n                    context: {$implicit: suggestion}\n                  \"\n                >\n                </ng-container>\n              </ng-container>\n            </li>\n          </ul>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!config.hideRecentSearch && recentSearches.length > 0\">\n      <div class=\"recent-searches\">\n        <h3 class=\"suggestions-heading\">Recent Searches</h3>\n        <ul>\n          <li\n            *ngFor=\"let recentSearch of recentSearches\"\n            class=\"suggestions\"\n            (mousedown)=\"populateValueRecentSearch(recentSearch, $event)\"\n          >\n            <mat-icon\n              matPrefix\n              [className]=\"config.recentSearchIconClass\"\n            ></mat-icon>\n\n            <span>&nbsp;{{ recentSearch.match }}</span>\n          </li>\n        </ul>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field-wrapper{padding:0}:host ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix{margin-right:12px}.toolbar-search-input{width:86%}.toolbar-search-input ::ng-deep input{margin:0}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent}.toolbar-search-input ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none;border-radius:0}.icomoon.Search,.icomoon.close{height:1rem;width:1rem;font-size:1rem;color:#33333380;padding-bottom:4px}.icomoon.close{cursor:pointer}.toolbar-search-select{width:14%}.toolbar-search-select ::ng-deep .mat-select-arrow{opacity:0}.toolbar-search-select ::ng-deep .mat-select-arrow-wrapper{display:inline-block;width:1px}.toolbar-search-select ::ng-deep .mat-select-value-text{font-size:9px}.toolbar-search-select ::ng-deep .mat-form-field-suffix .mat-icon{width:12px;font-size:14px}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-start{border-color:transparent;border-radius:0}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-outline:first-child .mat-form-field-outline-end{border:none}.toolbar-search-select ::ng-deep .mat-form-field-flex .mat-form-field-infix{-webkit-padding-before:.7em}.toolbar-search{width:515px;background-color:#f7f7f7;border-radius:0 0 4px 4px}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{height:39px;align-items:center}.toolbar-search ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}.toolbar-search ::ng-deep .mat-form-field-infix{height:auto}.search-container{position:relative;width:515px}.search-container .search-popup{padding:0 15px 15px;margin:0;max-height:80vh;overflow-x:hidden;overflow-y:auto;position:absolute;top:100%;left:0;right:0;z-index:9999;background-color:#fff;box-shadow:0 5px 4px #0003;border-radius:0 0 4px 4px}.search-container .search-popup hr{border:0;border-top:1px solid #ebebeb;margin:0;position:sticky;top:0;padding:0 0 15px;z-index:1}.search-container .search-popup .search-message{display:inline-block;width:100%;text-align:center;font-size:16px;padding-top:12px}.search-container .search-popup .search-item-info{color:#91263b;text-align:center;font-size:12px;margin-bottom:15px;padding-top:12px}.search-container .search-popup ul{padding:0;margin:0}.search-container .search-popup ul li{list-style:none;font-size:1rem;font-weight:400;line-height:1.5;color:#333}.search-container .search-popup ul li.suggestions{font-size:15px;line-height:36px;padding:0 15px 0 44px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.search-container .search-popup ul li.suggestions:hover{background-color:#fee8e8}.search-container .search-popup ul li.suggestions svg{margin-right:5px}.search-container .search-popup ul li.suggestions-categorize-false:hover{background-color:#fee8e8}.search-container .search-popup .search-result{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .search-result.no-categorize-result ul{width:100%;padding:0;margin:0 0 10px}.search-container .search-popup .search-result.no-categorize-result ul li{font-size:15px;line-height:36px;padding:0 15px 0 31px;display:flex;align-items:center;cursor:pointer}.search-container .search-popup .search-result.no-categorize-result ul li:hover{background-color:#fee8e8}.search-container .search-popup .search-result.no-categorize-result ul li img{width:18px;margin-right:9px}.search-container .search-popup .suggestions-heading{color:#9c9c9c;font-size:14px;font-weight:400;margin:0 0 10px 17px;display:flex;align-items:center;position:relative}.search-container .search-popup .suggestions-heading .show-more{position:absolute;right:20px;color:#d1d1d1;font-size:12px;cursor:pointer;text-decoration:none}.search-container .search-popup .suggestions-heading .show-more :hover{text-decoration:underline}.search-container .search-popup .suggestions-heading img{width:18px;margin-right:9px}.search-container .search-popup .recent-searches{padding:10px 0 0;margin:0 -15px}.search-container .search-popup .recent-searches ul{display:inline-block;width:100%}.search-container .search-popup .recent-searches ul li.suggestions{display:flex}.search-container .search-popup .recent-searches ul li.suggestions span{width:100%;overflow:hidden;text-overflow:ellipsis}.search-container .search-popup .recent-searches .suggestions{display:flex}.search-container .search-popup .recent-searches .suggestions-heading{margin-left:30px}.search-container .search-popup .recent-searches li.suggestions{padding-left:31px}::ng-deep .search-select.mat-select-panel{margin-top:30px;margin-left:10px}::ng-deep .search-select .mat-option-text{display:contents}::ng-deep .toolbar-search .mat-form-field-infix{font-size:14px}::ng-deep .toolbar-search input{line-height:14px}::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-start,::ng-deep .toolbar-search .mat-form-field-outline:first-child .mat-form-field-outline-end{background-color:#f1f3f4}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:1px;border-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:1px solid #a53159;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:1px;border-color:#a53159;background-color:#a53159}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:hover .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-width:2px;border-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-input.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border:2px solid #90003b;border-left-style:none;border-right-style:none;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-start{border-radius:0;border-color:transparent;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-form-field-outline .mat-form-field-outline-end{border-width:2px;border-color:#90003b;background-color:#90003b}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .mat-select{color:#fff}::ng-deep .toolbar-search:focus-within .toolbar-search-select.mat-form-field:not(.mat-form-field-disabled) .icomoon.arrow_down{color:#fff}::ng-deep .toolbar-search .mat-select-arrow{opacity:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SEARCH_SERVICE_TOKEN]
                 }, {
@@ -410,7 +424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.ChangeDetectorRef }, { type: PromiseApiAdapterService }]; }, propDecorators: { config: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: PromiseApiAdapterService }], propDecorators: { config: [{
                 type: Input
             }], searchProvider: [{
                 type: Input
@@ -434,26 +448,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 // Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
 class SearchLibModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SearchLibModule, declarations: [SearchComponent], imports: [CommonModule,
+            FormsModule,
+            HttpClientModule,
+            MatSelectModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            FlexLayoutModule], exports: [SearchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchLibModule, imports: [CommonModule,
+            FormsModule,
+            HttpClientModule,
+            MatSelectModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            FlexLayoutModule] });
 }
-SearchLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", ngImport: i0, type: SearchLibModule, imports: [CommonModule,
-        FormsModule,
-        HttpClientModule,
-        MatSelectModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        FlexLayoutModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchComponent],
@@ -472,6 +489,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 class Configuration {
+    /** property to be displayed in the results */
+    displayPropertyName;
+    /** list of model configuration to be render and categorize search results */
+    models;
+    /** max number of results (based on limitByType option) */
+    limit;
+    /** apply limit on individual models, or on overall results */
+    limitByType;
+    /** apply a particular ordering on results */
+    order;
+    /** offset for results in case limit is used */
+    offset;
+    /** save the search query in recent history */
+    saveInRecents;
+    /** a placeholder to display in the search box */
+    placeholder;
+    /** a function to generate placeholder, overrides the placeholder property */
+    placeholderFunction;
+    /** categorize results on the basis of models provided */
+    categorizeResults;
+    /** hides the recent search list */
+    hideRecentSearch;
+    /** hide the category selection button */
+    hideCategorizeButton;
+    /** save value in recent search only on enter or change in category,
+     *  if false, also saved on typing */
+    saveInRecentsOnlyOnEnter;
+    /** search only on enter key or when category is changed */
+    searchOnlyOnEnter;
+    noResultMessage;
+    searchIconClass;
+    crossIconClass;
+    dropDownButtonIconClass;
+    recentSearchIconClass;
     constructor(d) {
         checkForError(d);
         this.displayPropertyName = d.displayPropertyName;
@@ -535,6 +586,12 @@ function setIconClasses(d) {
 }
 
 // Copyright (c) 2023 Sourcefuse Technologies
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+/*
+ * Public API Surface of my-lib
+ */
 
 /**
  * Generated bundle index. Do not edit.