D-Net

import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';

import {AbstractControl} from '@angular/forms';

import {MatAutocompleteTrigger} from '@angular/material/autocomplete';

@Component({

  selector: '[search-input]',

  styleUrls: ['search-input.component.css'],

  template: `

    <div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">

      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)" [class.focused]="showSearch">

        <form (ngSubmit)="search()">

          <input #input type="text" class="uk-width-1-1"

                 [class.uk-animation-slide-right-medium]="showSearch && !selected"

                 [class.uk-hidden@m]="!showSearch"

                 [placeholder]="placeholder"

                 (blur)="closeSearch()"

                 [formControl]="control"

                 [matAutocomplete]="auto">

          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">

            <mat-option *ngFor="let option of list | async" [value]="option">

              {{option}}

            </mat-option>

          </mat-autocomplete>

        </form>

        <div *ngIf="selected && !showSearch" class="uk-flex selected uk-padding-small uk-visible@m">

          <span class="uk-flex uk-flex-middle clickable" style="max-width: 100%" [class.uk-width-1-1]="bordered">

            <span class="uk-width-expand uk-text-truncate" (click)="toggle()">{{selected}}</span>

            <icon name="close" class="space" [ratio]="0.8" (click)="resetEmitter.emit()"></icon>

          </span>

        </div>

      </div>

      <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m"

              (mousedown)="$event.preventDefault()" (click)="toggle()"

              [attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">

        <span [ngClass]="colorClass" class="icon-bg">

          <icon class="uk-position-center" name="search"></icon>

        </span>

        <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>

      </button>

      <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"

              (mousedown)="$event.preventDefault()" (click)="search()"

              [attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">

        <span [ngClass]="colorClass" class="icon-bg">

          <icon class="uk-position-center" name="search"></icon>

        </span>

        <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>

      </button>

    </div>`

})

export class SearchInputComponent {

  @Input()

  showSearch: boolean = true;

  @Input()

  control: AbstractControl;

  @Input()

  placeholder: string;

  @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('input') input: ElementRef;

  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;

  @Output()

  searchEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();

  @Output()

  resetEmitter: EventEmitter<any> = new EventEmitter<any>();

  @Output()

  closeEmitter: EventEmitter<any> = new EventEmitter<any>();

  toggle() {

    this.showSearch = !this.showSearch;

    if (this.showSearch) {

      setTimeout(() => { // this will make the execution after the above boolean has changed

        this.input.nativeElement.focus();

      }, 0);

    }

  }

  closeSearch() {

    this.showSearch = false;

    this.closeEmitter.emit();

  }

  public search(emit = true) {

    this.trigger.closePanel();

    this.searchEmitter.emit(emit);

  }

  public reset() {

    this.control.setValue('');

    this.input.nativeElement.value = '';

    this.showSearch = true;

    setTimeout(() => {

      this.input.nativeElement.focus();

    }, 0);

  }

}