131 lines
3.5 KiB
TypeScript
131 lines
3.5 KiB
TypeScript
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: `
|
|
<div *ngIf="searchControl || value" class="uk-flex uk-flex-right uk-width-1-1">
|
|
<div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<div class="uk-width-expand">
|
|
<div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
|
|
[disabled]="disabled" [formInput]="searchControl"></div>
|
|
</div>
|
|
<div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
|
|
<a class="uk-link-text" (click)="reset()">
|
|
<icon name="close" [flex]="true"></icon>
|
|
</a>
|
|
</div>
|
|
<div class="uk-width-auto">
|
|
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
|
|
<icon name="search" [flex]="true" ratio="1.3"></icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
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<void> = new EventEmitter<void>();
|
|
@ViewChild('searchInput') searchInput: ElementRef;
|
|
@ViewChild('input') input: InputComponent;
|
|
public expanded: boolean = true;
|
|
|
|
constructor(private cdr: ChangeDetectorRef) {
|
|
}
|
|
|
|
@HostListener('window:keydown', ['$event'])
|
|
keyEvent(event: KeyboardEvent) {
|
|
if(this.input.focused) {
|
|
if(event.code === 'Enter') {
|
|
event.preventDefault();
|
|
this.search(event);
|
|
}
|
|
}
|
|
}
|
|
|
|
@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<any> = new EventEmitter<any>();
|
|
@Output()
|
|
closeEmitter: EventEmitter<any> = new EventEmitter<any>();
|
|
|
|
/** @deprecated*/
|
|
closeSearch() {
|
|
|
|
}
|
|
}
|