import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
HostListener,
Input,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {AbstractControl} from '@angular/forms';
import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
import {InputComponent} from "../input/input.component";
@Component({
selector: '[search-input]',
template: `
`
})
export class SearchInputComponent implements OnInit {
@Input() disabled: boolean = false;
@Input() searchInputClass: string = 'inner';
@Input() searchControl: AbstractControl;
@Input() value: string;
@Input() placeholder: string;
@Input() expandable: boolean = false;
@Output() searchEmitter: EventEmitter = new EventEmitter();
@ViewChild('searchInput') searchInput: ElementRef;
@ViewChild('input') input: InputComponent;
public expanded: boolean = true;
constructor(private cdr: ChangeDetectorRef) {
}
@HostListener('document:click', ['$event'])
click(event) {
if(event.isTrusted && this.expandable && !this.disabled) {
this.expand(this.searchInput && this.searchInput.nativeElement.contains(event.target));
}
}
ngOnInit() {
this.expanded = !this.expandable;
}
expand(value: boolean) {
this.expanded = value;
this.cdr.detectChanges();
if(this.expanded) {
this.input.focus(true);
}
}
public search(event) {
if(!this.disabled) {
if (this.expandable) {
this.expand(!this.expanded);
event.stopPropagation();
}
this.searchEmitter.emit();
}
}
public reset() {
this.searchControl.setValue('');
}
get hidden(): boolean {
return !this.expanded && !this.searchControl.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 = new EventEmitter();
@Output()
closeEmitter: EventEmitter = new EventEmitter();
/** @deprecated*/
closeSearch() {
}
}