1 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2 import { ActivatedRoute, Router } from '@angular/router'
3 import { Subject } from 'rxjs'
4 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
7 selector: 'simple-search-input',
8 templateUrl: './simple-search-input.component.html',
9 styleUrls: [ './simple-search-input.component.scss' ]
11 export class SimpleSearchInputComponent implements OnInit {
12 @ViewChild('ref') input: ElementRef
14 @Input() name = 'search'
15 @Input() placeholder = $localize`Search`
17 @Output() searchChanged = new EventEmitter<string>()
22 private searchSubject = new Subject<string>()
25 private router: Router,
26 private route: ActivatedRoute
33 distinctUntilChanged()
35 .subscribe(value => this.searchChanged.emit(value))
37 this.searchSubject.next(this.value)
42 setTimeout(() => this.input.nativeElement.focus())
46 if (this.value !== '') return
51 this.router.navigate(['./search'], { relativeTo: this.route })
52 this.searchSubject.next(this.value)