openaire-library/sharedComponents/search-input/search-input.component.ts

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";
import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";

@Component({
  selector: '[search-input]',
  template: `
    <div *ngIf="initialized" class="uk-flex uk-flex-right uk-width-1-1">
      <div #searchInput click-outside-or-esc (clickOutside)="click($event)" class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
        <div class="uk-flex uk-flex-middle">
          <div class="uk-width-expand">
            <div #input  [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null"
                 [placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
                 [disabled]="disabled" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
          </div>
          <div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto">
            <button class="uk-close uk-icon" (click)="reset()">
              <icon name="close" [flex]="true"></icon>
            </button>
          </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;
  @Output() valueChange = new EventEmitter<string>();
  @Input() options: 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;
  public initialized: boolean = false;
  
  constructor(private cdr: ChangeDetectorRef) {
  }
  
  @HostListener('window:keydown.enter', ['$event'])
  enter(event: KeyboardEvent) {
    if(this.input.focused) {
      event.preventDefault();
      this.search(event);
    }
  }
  
  click(event: ClickEvent) {
    if(this.expandable && !this.disabled) {
      this.expand(!event.clicked);
    }
  }
  
  ngOnInit() {
    this.expanded = !this.expandable;
    this.initialized = true;
  }
  
  expand(value: boolean) {
    this.expanded = value;
    this.cdr.detectChanges();
    if(this.expanded) {
      this.input.focus(true);
    }
  }
  
  public search(event) {
    if(!this.disabled) {
      this.searchEmitter.emit();
      if(this.expandable) {
        this.expand(!this.expanded);
      }
      event.stopPropagation();
    }
  }
  
  public reset() {
    if(this.searchControl){
      this.searchControl.setValue('');
    } else {
      this.valueChange.emit('');
    }
  }
  
  get hidden(): boolean {
    return !this.expanded && (!this.searchControl?.value && !this.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() {

  }
}