1 import { Subject } from 'rxjs'
2 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
3 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
4 import { ActivatedRoute, Router } from '@angular/router'
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`
16 @Input() iconTitle = $localize`Search`
17 @Input() alwaysShow = true
19 @Output() searchChanged = new EventEmitter<string>()
20 @Output() inputDisplayChanged = new EventEmitter<boolean>()
25 private searchSubject = new Subject<string>()
28 private router: Router,
29 private route: ActivatedRoute
36 distinctUntilChanged()
38 .subscribe(value => this.searchChanged.emit(value))
40 this.searchSubject.next(this.value)
42 if (this.isInputShown()) this.showInput(false)
46 if (this.alwaysShow) return true
48 return this.inputShown
52 if (!this.isInputShown()) {
60 showInput (focus = true) {
61 this.inputShown = true
62 this.inputDisplayChanged.emit(this.inputShown)
65 setTimeout(() => this.input.nativeElement.focus())
70 this.inputShown = false
72 if (this.isInputShown() === false) {
73 this.inputDisplayChanged.emit(this.inputShown)
78 if (this.value) return
84 this.router.navigate([ './search' ], { relativeTo: this.route })
86 this.searchSubject.next(this.value)