Add background modifier in search-input in order to add background in search-icon.

searchPages/searchUtils/advancedSearchForm.component.html

@@ -175,14 +175,14 @@
 <!--          </a>-->
         </advanced-search-input>
         <div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
-             [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
+						 [searchInputClass]="'inner background'" [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
 <!--			<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
 <!--				<icon name="filters"></icon>-->
 <!--			</a>-->
 		</div>
       </ng-container>
       <div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
-           [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
+					 [searchInputClass]="'inner background'" [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()">
 <!--				<a *ngIf="isMobile" href="#mobile-filters" filters-toggle (click)="filtersClicked.emit(true)" uk-toggle>-->
 <!--					<icon name="filters"></icon>-->
 <!--				</a>-->

sharedComponents/navigationBar.component.html

@@ -171,7 +171,7 @@
                   <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
                 </ng-container>
                 <div *ngIf="searchMode" #search_input search-input [(value)]="keyword" placeholder="Search by name, description, subject..."
-                     [searchInputClass]="'flat small-vertical'" (searchEmitter)="goTo()"
+                     [searchInputClass]="'flat background small-vertical'" (searchEmitter)="goTo()"
                      class="uk-width-large@l uk-width-medium uk-width-xlarge@xl"></div>
               </div>
               <div class="uk-navbar-right">

sharedComponents/search-input/search-input.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -10,7 +11,6 @@ import {
   ViewChild
 } from '@angular/core';
 import {AbstractControl} from '@angular/forms';
-import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
 import {InputComponent} from "../input/input.component";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
 
@@ -33,7 +33,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
           </div>
           <div class="uk-width-auto" [class.uk-flex-first]="iconPosition === 'left'">
             <div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
-              <icon name="search" [flex]="true" ratio="1.3"></icon>
+              <icon name="search" [flex]="true" [ratio]="ratio"></icon>
             </div>
           </div>
           <div class="uk-width-auto filters-toggle">
@@ -44,7 +44,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
     </div>
   `
 })
-export class SearchInputComponent implements OnInit {
+export class SearchInputComponent implements OnInit, AfterViewInit {
   @Input() disabled: boolean = false;
   @Input() searchInputClass: string = 'inner';
   @Input() iconPosition: 'left' | 'right' = 'right';
@@ -59,6 +59,7 @@ export class SearchInputComponent implements OnInit {
   @ViewChild('input') input: InputComponent;
   public expanded: boolean = true;
   public initialized: boolean = false;
+  public ratio: number = 1;
   
   constructor(private cdr: ChangeDetectorRef) {
   }
@@ -86,6 +87,10 @@ export class SearchInputComponent implements OnInit {
     this.initialized = true;
   }
   
+  ngAfterViewInit() {
+    this.ratio = Number.parseFloat(getComputedStyle(this.searchInput.nativeElement).getPropertyValue('--search-input-icon-ratio'));
+  }
+  
   expand(value: boolean) {
     this.expanded = value;
     this.cdr.detectChanges();
@@ -118,32 +123,4 @@ export class SearchInputComponent implements OnInit {
   get hidden(): boolean {
     return !this.expanded && (!this.searchControl?.value && !this.value);
   }
-  
-  /** @deprecated all*/
-  @Input()
-  showSearch: boolean = true;
-  @Input()
-  control: AbstractControl;
-  @Input()
-  loading: boolean = false;
-  @Input()
-  selected: any;
-  @Input()
-  list: any = null;
-  @Input()
-  colorClass: string = 'portal-color';
-  @Input()
-  bordered: boolean = false;
-  @Input()
-  toggleTitle: string = 'search';
-  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
-  @Output()
-  resetEmitter: EventEmitter<any> = new EventEmitter<any>();
-  @Output()
-  closeEmitter: EventEmitter<any> = new EventEmitter<any>();
-  
-  /** @deprecated*/
-  closeSearch() {
-
-  }
 }