FEAT #9906 autocous search header

src/frontend/app/header/header-right.component.html

@@ -4,8 +4,8 @@
         <input type="hidden" name="meta[]" value="baskets_clause#baskets_clause#select_simple">
         <input type="hidden" name="meta[]" value="welcome#welcome#welcome">
         <input type="hidden" name="baskets_clause" value="true">
-        <mat-form-field id="searchInput" floatLabel="never" style="width:100%;margin-top: -18px;margin-left:-5px;">
-            <input matInput type="text" (blur)="hideSearch = !hideSearch" name="welcome" placeholder="{{lang.searchMails}}">
+        <mat-form-field floatLabel="never" style="width:100%;margin-top: -18px;margin-left:-5px;">
+            <input #searchInput="matInput" matInput type="text" (blur)="hideSearch = !hideSearch" name="welcome" title="{{lang.searchMails}}"  placeholder="{{lang.searchMails}}">
             <button mat-icon-button matSuffix *ngIf="!mobileMode" style="opacity:0.5;">
                 <mat-icon class="fa fa-search" style="font-size:22px;"></mat-icon>
             </button>
@@ -13,7 +13,7 @@
         <input #searchHome type="submit" name="submit" value="" style="display:none">
     </form>
 
-    <button (click)="hideSearch = !hideSearch" mat-icon-button *ngIf="!mobileMode && hideSearch" style="opacity:0.5;">
+    <button (click)="showSearchInput()" mat-icon-button *ngIf="!mobileMode && hideSearch" style="opacity:0.5;">
         <mat-icon class="fa fa-search" style="font-size:22px;"></mat-icon>
     </button>
 

src/frontend/app/header/header-right.component.ts

-import { Component, OnInit }    from '@angular/core';
+import { Component, OnInit, ViewChild }    from '@angular/core';
 import { HttpClient }           from '@angular/common/http';
 import { LANG }                 from '../translate.component';
 import { HeaderService }        from '../../service/header.service';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef, MatInput } from '@angular/material';
 import { IndexingGroupModalComponent } from '../menu/menu-shortcut.component';
 import { Router } from '@angular/router';
 
+declare function $j(selector: any): any;
 declare var angularGlobals: any;
 
 @Component({
@@ -23,6 +24,8 @@ export class HeaderRightComponent implements OnInit {
 
     hideSearch : boolean = true;
 
+    @ViewChild('searchInput') searchInput: MatInput;
+
     constructor(public http: HttpClient, private router: Router, public headerService: HeaderService, public dialog: MatDialog) {
         this.mobileMode = angularGlobals.mobileMode;
      }
@@ -39,4 +42,11 @@ export class HeaderRightComponent implements OnInit {
             location.href = shortcut.servicepage;
         }
     }
+
+    showSearchInput() {
+        this.hideSearch = !this.hideSearch;
+        setTimeout(() => {
+            this.searchInput.focus(); 
+        }, 200);
+    }
 }
\ No newline at end of file