refactor(searchbar): added android cancel icon as a button that calls the cancelAction

This needs to be cleaned up more and made easier to override by the
user, but it’s a step in the right direction. Added the focused class
for when the user is inside of the input since Android doesn’t use
left-align. References #247

ionic/components/searchbar/modes/ios.scss

@@ -30,6 +30,21 @@ ion-searchbar {
   min-height: $searchbar-ios-min-height;
 }
 
+.searchbar-search-icon {
+  width: $searchbar-ios-input-search-icon-size + 1;
+  height: $searchbar-ios-input-search-icon-size + 1;
+
+  @include svg-background-image($searchbar-ios-input-search-icon-svg);
+  background-size: $searchbar-ios-input-search-icon-size;
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 10px;
+  top: 9px;
+
+  @include calc(margin-left, "50% - 60px");
+  transition: $searchbar-ios-input-transition;
+}
+
 .searchbar-input {
   height: $searchbar-ios-input-height;
   padding: 0 28px;
@@ -40,15 +55,9 @@ ion-searchbar {
   border-radius: 5px;
   color: $searchbar-ios-input-text-color;
   background-color: $searchbar-ios-input-background-color;
+  background-position: 8px center;
 
-  @include svg-background-image($searchbar-ios-input-search-icon-svg);
-  background-size: $searchbar-ios-input-search-icon-size;
-  background-repeat: no-repeat;
-  background-position: calc(50% - 40px);
-
-  &::placeholder {
-    color: $searchbar-ios-input-placeholder-color;
-  }
+  @include placeholder($searchbar-ios-input-placeholder-color);
 
   @include calc(padding-left, "50% - 28px");
   transition: $searchbar-ios-input-transition;
@@ -114,6 +123,10 @@ ion-searchbar.left-align {
 
 }
 
+.searchbar-cancel-icon {
+  display: none;
+}
+
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 

ionic/components/searchbar/modes/md.scss

@@ -20,11 +20,6 @@ $searchbar-md-input-close-icon-color:   #5B5B5B !default;
 $searchbar-md-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-close-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
 $searchbar-md-input-close-icon-size:    22px !default;
 
-$searchbar-md-input-cancel-icon-color:   #5B5B5B !default;
-$searchbar-md-input-cancel-icon-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-cancel-icon-color + "' d='M427,234.625H167.296l119.702-119.702L256,85L85,256l171,171l29.922-29.924L167.296,277.375H427V234.625z'/></svg>" !default;
-$searchbar-md-input-cancel-icon-size:    22px !default;
-
-
 ion-searchbar {
   padding: $searchbar-md-padding;
   background: $searchbar-md-background-color;
@@ -34,6 +29,42 @@ ion-searchbar {
   padding: 3px;
 }
 
+.searchbar-search-icon,
+.searchbar-cancel-icon {
+  width: $searchbar-md-input-search-icon-size + 1;
+  height: $searchbar-md-input-search-icon-size + 1;
+
+  background-size: $searchbar-md-input-search-icon-size;
+  background-repeat: no-repeat;
+  position: absolute;
+}
+
+.searchbar-search-icon {
+  top: 11px;
+  left: 16px;
+  @include svg-background-image($searchbar-md-input-search-icon-svg);
+}
+
+.searchbar-cancel-icon {
+  display: none;
+  height: 100%;
+  margin: 0;
+  top: 0;
+  left: 10px;
+}
+
+.focused {
+
+  .searchbar-search-icon {
+    display: none;
+  }
+
+  .searchbar-cancel-icon {
+    display: inline-flex;
+  }
+
+}
+
 .searchbar-input {
   padding: 6px 55px;
 
@@ -46,15 +77,9 @@ ion-searchbar {
   border-radius: $searchbar-md-input-border-radius;
   color: $searchbar-md-input-text-color;
   background-color: $searchbar-md-input-background-color;
+  background-position: 8px center;
 
-  @include svg-background-image($searchbar-md-input-search-icon-svg);
-  background-size: $searchbar-md-input-search-icon-size;
-  background-repeat: no-repeat;
-  background-position: 16px center;
-
-  &::placeholder {
-    color: $searchbar-md-input-placeholder-color;
-  }
+  @include placeholder($searchbar-md-input-placeholder-color);
 }
 
 .searchbar-close-icon {
@@ -71,13 +96,6 @@ ion-searchbar {
   top: 0;
 }
 
-.left-align .searchbar-input {
-  @include svg-background-image($searchbar-md-input-cancel-icon-svg);
-  background-size: $searchbar-md-input-cancel-icon-size;
-  background-repeat: no-repeat;
-  background-position: 16px center;
-}
-
 .searchbar-cancel {
   display: none;
 }

ionic/components/searchbar/searchbar.ts

@@ -3,6 +3,7 @@ import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} f
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
+import {Icon} from '../icon/icon';
 
 /**
  * @name Search Bar
@@ -21,21 +22,25 @@ import {ConfigComponent} from '../../config/decorators';
     'cancelText': 'Cancel',
     'placeholder': 'Search',
     'cancelAction': function(event, query) {
-      // The cancel button now works on its own to blur the input
       console.log('Default Cancel');
+      this.element = this.elementRef.nativeElement.querySelector('input');
+      this.element.blur();
     }
   },
   host: {
    '[class.left-align]': 'shouldLeftAlign',
+   '[class.focused]': 'isFocused',
   }
   template:
     '<div class="searchbar-input-container">' +
+      '<button (click)="cancelAction($event, query)" clear dark class="searchbar-cancel-icon"><icon arrow-back></icon></button>' +
+      '<div class="searchbar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
       '<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
     '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass]
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon]
 })
 
 export class SearchBar extends Ion {