Finish search-input component

sharedComponents/advanced-search-input/advanced-search-input.component.ts

@@ -13,7 +13,7 @@ import {InputComponent} from "../input/input.component";
 @Component({
   selector: 'advanced-search-input',
   template: `
-    <div class="search-input" [ngClass]="inputClass">
+    <div class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
       <div class="uk-grid uk-flex-middle" uk-grid>
         <div class="uk-width-expand">
           <div class="uk-grid uk-grid-collapse inputs" uk-grid>
@@ -21,8 +21,8 @@ import {InputComponent} from "../input/input.component";
           </div>
         </div>
         <div class="uk-width-auto">
-          <div class="uk-margin-medium-right search" [class.disabled]="disabled" (click)="searchEmitter.emit()">
-            <icon name="search" [flex]="true"></icon>
+          <div class="search-icon" [class.disabled]="disabled" (click)="searchEmitter.emit()">
+            <icon name="search" [flex]="true" ratio="1.3"></icon>
           </div>
         </div>
       </div>
@@ -32,7 +32,8 @@ import {InputComponent} from "../input/input.component";
 export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy {
   @ContentChildren(InputComponent) inputs: QueryList<InputComponent>;
   @Input() disabled: boolean = false;
-  @Input() inputClass: string = 'inner'
+  @Input() searchInputClass: string = 'inner'
+  @Input() smallVertical: boolean = false;
   @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
   
   constructor() {
@@ -40,7 +41,7 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
   
   ngAfterContentInit() {
     this.inputs.forEach(input => {
-      input.inputClass = 'advanced';
+      input.inputClass = 'advanced-search';
     });
   }
   

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

@@ -1,59 +1,97 @@
-import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+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 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 #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>
-      <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>`
+    </div>
+  `
 })
-export class SearchInputComponent {
+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('document:click', ['$event'])
+  click(event) {
+    if(event.isTrusted && this.expandable) {
+      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.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()
-  placeholder: string;
-  @Input()
   loading: boolean = false;
   @Input()
   selected: any;
@@ -65,40 +103,14 @@ export class SearchInputComponent {
   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);
-    }
-  }
-  
+  /** @deprecated*/
   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);
+
   }
 }