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() { } }