refactor(searchbar): fixing event emitters, outputs and inputs, removing ngControl requirement from Searchbar

ionic/components/searchbar/searchbar.ts

@@ -1,5 +1,4 @@
-import {ElementRef, Renderer, Component, Directive} from 'angular2/core';
+import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter} from 'angular2/core';
-import {Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional} from 'angular2/core';
 import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -25,14 +24,7 @@ export class SearchbarInput {
     this.onChange(ev.target.value);
   }
 
-  constructor(
+  constructor(ngControl: NgControl) {
-    @Optional ngControl: NgControl,
-    elementRef: ElementRef,
-    renderer: Renderer
-  ) {
-    this.renderer = renderer;
-    this.elementRef = elementRef;
-
     if (!ngControl) return;
 
     this.ngControl = ngControl;
@@ -77,7 +69,7 @@ export class SearchbarInput {
  *
  * @usage
  * ```html
- * <ion-searchbar [(ngModel)]="defaultSearch" (cancel)="onCancelSearchbar(ev, value)"></ion-searchbar>
+ * <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)"></ion-searchbar>
  * ```
  *
  * @property {string} [cancelButtonText=Cancel] - Sets the cancel button text to the value passed in
@@ -86,6 +78,7 @@ export class SearchbarInput {
  *
  * @property {Any} [input] - Expression to evaluate when the Searchbar input has changed
  * @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked.
+ * @property {Any} [clear] - Expression to evaluate when the clear input button is clicked.
  *
  * @see {@link /docs/v2/components#search Search Component Docs}
  */
@@ -93,23 +86,27 @@ export class SearchbarInput {
   selector: 'ion-searchbar',
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelSearchbar($event, query)" (mousedown)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel">' +
+      '<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' +
         '<icon arrow-back></icon>' +
       '</button>' +
       '<div class="searchbar-search-icon"></div>' +
-      '<input [value]="query" (blur)="inputBlurred($event)" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
+      '<input (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
       '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
     '</div>' +
-    '<button clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+    '<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
 })
 export class Searchbar extends Ion {
-  @Input cancelButtonText: string;
+  @ViewChild(SearchbarInput) searchbarInput;
-  @Input hideCancelButton: any;
-  @Input placeholder: string;
 
-  // @Output input: EventEmitter<any> = new EventEmitter();
+  @Input() cancelButtonText: string;
-  @Output cancel: EventEmitter<any> = new EventEmitter();
+  @Input() hideCancelButton: any;
+  @Input() placeholder: string;
+  @Input() ngModel: any;
+
+  @Output() input: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() cancel: EventEmitter<Searchbar> = new EventEmitter();
+  @Output() clear: EventEmitter<Searchbar> = new EventEmitter();
 
   @HostBinding('class.searchbar-focused') isFocused;
 
@@ -118,30 +115,19 @@ export class Searchbar extends Ion {
    * @private
    * Check if the Searchbar has a value and left align if so
    */
-  private shouldLeftAlign() {
+  private get shouldLeftAlign() {
-    return this.searchbarInput && this.searchbarInput.value && this.searchbarInput.value.trim() != '';
+    return this.value && this.value.trim() != '';
-  }
+  };
 
-  @ViewChild(SearchbarInput) searchbarInput;
+  value: string = '';
-
-  query: string = '';
   blurInput = true;
 
   constructor(
     elementRef: ElementRef,
     config: Config,
-    ngControl: NgControl,
-    renderer: Renderer
   ) {
     super(elementRef, config);
-    this.renderer = renderer;
     this.elementRef = elementRef;
-
-    // If there is no control then we shouldn't do anything
-    if (!ngControl) return;
-
-    this.ngControl = ngControl;
-    this.ngControl.valueAccessor = this;
   }
 
   /**
@@ -156,6 +142,9 @@ export class Searchbar extends Ion {
 
     this.cancelButtonText = this.cancelButtonText || 'Cancel';
     this.placeholder = this.placeholder || 'Search';
+
+    if (this.ngModel) this.value = this.ngModel;
+    console.log(this.value);
   }
 
   /**
@@ -187,9 +176,9 @@ export class Searchbar extends Ion {
    * Clears the input field and triggers the control change.
    */
   clearInput() {
-    this.searchbarInput.writeValue('');
+    this.value = '';
-    this.searchbarInput.onChange('');
     this.blurInput = false;
+    this.clear.emit(this);
   }
 
   /**
@@ -198,19 +187,9 @@ export class Searchbar extends Ion {
    * the clearInput function doesn't want the input to blur
    * then calls the custom cancel function if the user passed one in.
    */
-  cancelSearchbar(ev, value) {
+  cancelSearchbar() {
     this.clearInput();
     this.blurInput = true;
-    console.log("should cancel");
+    this.cancel.emit(this);
-    this.cancel.next();
-  }
-
-    /**
-    * @private
-    * Updates the value of query
-    */
-   updateQuery(value) {
-     this.query = value;
-     this.input.emit();
   }
 }

ionic/components/searchbar/test/floating/index.ts

@@ -18,15 +18,15 @@ class E2EApp {
 
   }
 
-  onCancelSearchbar(ev) {
+  onClearSearchbar(searchbar) {
-    console.log("Clicked cancel action with", ev);
+    // console.log("Clicked clear input on", searchbar.value);
   }
 
-  triggerInput(ev) {
+  onCancelSearchbar(searchbar) {
-    // The defaultSearch doesn't get updated before this function is called
+    console.log("Clicked cancel button with", searchbar.value);
-    // so we have to wrap it in a timeout
+  }
-    setTimeout(() => {
+
-      console.log("Triggered input", ev);
+  triggerInput(searchbar) {
-    });
+    // console.log("Triggered input", searchbar.value);
   }
 }

ionic/components/searchbar/test/floating/main.html

@@ -1,17 +1,17 @@
 <ion-content>
   <h5 padding-left> Search - Default </h5>
-  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
       Default Search: <b>{{ defaultSearch }}</b>
   </p>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-searchbar [(ngModel)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customPlaceholder" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Hide Cancel Button </h5>
-  <ion-searchbar [(ngModel)]="defaultCancel" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultCancel" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar [(ngModel)]="customCancel" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancel" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 </ion-content>

ionic/components/text-input/text-input.ts

@@ -489,10 +489,8 @@ export class TextInputElement {
   }
 
   ngOnInit() {
-    if (this.ngModel) console.log("Value", this.ngModel);
     if (this.ngModel) this.value = this.ngModel;
     this.wrapper && this.wrapper.hasValue(this.value);
-    console.log(this.value);
   }
 
   focusChange(changed) {