refactor(searchbar): changed Cancel button to show by default

Renamed some searchbar input properties. Fixed the cancel button
showing when it wasn’t focused.

ionic/components/searchbar/searchbar.ios.scss

@@ -121,6 +121,12 @@ ion-searchbar {
   .searchbar-input {
     padding-left: 30px;
   }
+}
+
+// Searchbar Focused
+// -----------------------------------------
+
+.searchbar-focused {
   .searchbar-ios-cancel {
     transform: translateX(0);
     flex: 0 0 auto;
@@ -129,7 +135,6 @@ ion-searchbar {
   }
 }
 
-
 // Searchbar in Toolbar
 // -----------------------------------------
 
@@ -148,7 +153,7 @@ ion-searchbar {
     }
   }
 
-  .searchbar-left-aligned .searchbar-ios-cancel {
+  .searchbar-focused .searchbar-ios-cancel {
     padding-left: 8px;
   }
 

ionic/components/searchbar/searchbar.ts

@@ -19,43 +19,38 @@ import {Button} from '../button/button';
  * ```
  *
  * @property [placeholder] - sets input placeholder to value passed in
- * @property [show-cancel] - shows the cancel button based on boolean value passed in
- * @property [cancel-text] - sets the cancel button text to the value passed in
+ * @property [hide-cancel-button] - hides the cancel button
+ * @property [cancel-button-text] - sets the cancel button text to the value passed in
  * @property [cancel-action] - the function that gets called by clicking the cancel button
  * @see {@link /docs/v2/components#search Search Component Docs}
  */
 @ConfigComponent({
   selector: 'ion-searchbar',
+  inputs: [
+    'cancelAction',
+    'hideCancelButton',
+    'cancelButtonText'
+  ],
   defaultInputs: {
-    'showCancel': false,
-    'cancelText': 'Cancel',
     'placeholder': 'Search'
   },
-  inputs: ['cancelAction'],
   host: {
    '[class.searchbar-left-aligned]': 'shouldLeftAlign',
    '[class.searchbar-focused]': 'isFocused',
   },
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
+      '<button (click)="cancelSearchbar($event, ngControl.value)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
       '<div class="searchbar-search-icon"></div>' +
-      '<input [(value)]="query"' +
-      'class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
-      '<button clear *ng-if="query" class="searchbar-clear-icon" (click)="clearInput()"></button>' +
+      '<input [value]="ngControl.value" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
+      '<button clear *ng-if="ngControl.value" class="searchbar-clear-icon" (click)="clearInput()"></button>' +
     '</div>' +
-    '<button clear *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
+    '<button clear (click)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText || "Cancel"}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)]
 })
 export class Searchbar extends Ion {
   @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput;
 
-  /**
-   * @private
-   * This holds the searchbar input value used for querying
-   */
-  query: string;
-
   constructor(
     elementRef: ElementRef,
     config: Config,
@@ -71,17 +66,31 @@ export class Searchbar extends Ion {
 
     this.ngControl = ngControl;
     this.ngControl.valueAccessor = this;
+
+    this.ngControl.value = this.ngControl.value || '';
+  }
+
+  /**
+   * @private
+   * On Initialization check for hideCancelButton
+   */
+  ngOnInit() {
+    let hideCancelButton = this.hideCancelButton;
+    if (typeof hideCancelButton === 'string') {
+      this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
+    }
+    console.log(this.cancelButtonText);
+    console.log(this.hideCancelButton);
   }
 
   /**
    * @private
    * After the view has initialized check if the searchbar has a value
-   * and then store that value in query
    */
   ngAfterViewInit() {
+    console.log("testing");
     // If the user passes in a value to the model we should left align
-    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
-    this.query = this.searchbarInput.value || '';
+    this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
   }
 
   /**
@@ -110,7 +119,6 @@ export class Searchbar extends Ion {
   clearInput() {
     this.searchbarInput.writeValue('');
     this.searchbarInput.onChange('');
-    this.query = '';
   }
 
   /**
@@ -118,12 +126,12 @@ export class Searchbar extends Ion {
    * Blurs the input field, clears the input field and removes the left align
    * then calls the custom cancel function if the user passed one in.
    */
-  cancelSearchbar(event, query) {
+  cancelSearchbar(event, value) {
     this.searchbarInput.elementRef.nativeElement.blur();
     this.clearInput();
     this.shouldLeftAlign = false;
 
-    this.cancelAction && this.cancelAction(event, query);
+    this.cancelAction && this.cancelAction(event, value);
   }
 }
 
@@ -136,12 +144,6 @@ export class Searchbar extends Ion {
   }
 })
 export class SearchbarInput {
-  /**
-   * @private
-   * This holds the searchbar input value used for querying
-   */
-  query: string;
-
   constructor(
     @Host() searchbar: Searchbar,
     elementRef: ElementRef,

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

@@ -9,14 +9,14 @@
   <h5 padding-left> Search - Custom Placeholder </h5>
   <ion-searchbar [(ng-model)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
 
-  <h5 padding-left> Search - Default Cancel Button </h5>
-  <ion-searchbar [(ng-model)]="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <h5 padding-left> Search - Hide Cancel Button </h5>
+  <ion-searchbar [(ng-model)]="defaultCancel" hide-cancel-button class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar [(ng-model)]="customCancel" cancel-button-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Action</h5>
-  <ion-searchbar [(ng-model)]="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ng-model)]="customCancelAction" cancel-button-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
 
   <div *ng-if="clickedCustomAction">
     Clicked custom action with input = {{customCancelAction}}