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-mobile" [ngClass]="colorClass">

      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">

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

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

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

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

                 [class.uk-hidden]="selected"

                 [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" class="uk-flex uk-flex-left selected">

          <span class="uk-flex uk-flex-middle">

            <span>{{selected}}</span>

            <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">

              <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path

                  fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>

                <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>

              </svg>

            </span>

          </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()">

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

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

        </span>

        <span class="uk-text-uppercase overlay">search</span>

      </button>

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

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

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

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

        </span>

        <span class="uk-text-uppercase overlay">search</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;

  @ViewChild('input') input: ElementRef;

  @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;

  @Output()

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

  @Output()

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

  toggle() {

    if(!this.selected) {

      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;

  }

  public search(emit = true) {

    this.trigger.closePanel();

    this.searchEmitter.emit(emit);

  }

  public reset() {

    this.showSearch = true;

    setTimeout(() => {

      this.input.nativeElement.focus();

    }, 0);

  }

}