feat(searchbar): add searchbar component

packages/core/src/components/searchbar/searchbar.ios.scss

@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals.ios";
+@import "./searchbar";
 
 // iOS Searchbar
 // --------------------------------------------------
@@ -120,7 +121,7 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-ios .searchbar-clear-icon {
+.searchbar-ios ion-button.searchbar-clear-icon {
   @include position(0, 0, null, null);
   @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
   @include background-position(center);
@@ -139,7 +140,6 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // -----------------------------------------
 
 .searchbar-ios .searchbar-ios-cancel {
-  @include padding(0, 0, 0, 8px);
   @include margin-horizontal(0, null);
 
   display: none;
@@ -151,6 +151,12 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
   cursor: pointer;
 }
 
+.searchbar-ios button.searchbar-ios-cancel {
+  @include padding(0, 0, 0, 8px);
+  @include margin(0);
+}
+
+
 // Searchbar Left Aligned (iOS only)
 // -----------------------------------------
 

packages/core/src/components/searchbar/searchbar.md.scss

@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals.md";
+@import "./searchbar";
 
 // Material Design Searchbar
 // --------------------------------------------------
@@ -140,7 +141,7 @@ $searchbar-md-input-clear-icon-size:     22px !default;
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-md .searchbar-clear-icon {
+.searchbar-md ion-button.searchbar-clear-icon {
   @include position(0, 13px, null, null);
   @include svg-background-image($searchbar-md-input-clear-icon-svg);
   @include padding(0);
@@ -155,7 +156,7 @@ $searchbar-md-input-clear-icon-size:     22px !default;
   background-size: $searchbar-md-input-clear-icon-size;
 }
 
-.searchbar-md .searchbar-clear-icon.activated {
+.searchbar-md ion-button.searchbar-clear-icon.activated {
   background-color: transparent;
 }
 

packages/core/src/components/searchbar/searchbar.scss

@@ -1,6 +1,6 @@
 @import "../../themes/ionic.globals";
 
-// Search Bar
+// Searchbar
 // --------------------------------------------------
 
 ion-searchbar {
@@ -48,4 +48,3 @@ ion-searchbar {
 .searchbar-has-value.searchbar-has-focus .searchbar-clear-icon {
   display: block;
 }
-

packages/core/src/components/searchbar/searchbar.tsx

@@ -0,0 +1,379 @@
+import { Component, h, Ionic, Prop, PropDidChange, State } from '@stencil/core';
+import { VNodeData } from '../../utils/interfaces';
+
+/**
+ * @name Searchbar
+ * @module ionic
+ * @description
+ * Manages the display of a Searchbar which can be used to search or filter items.
+ *
+ * @usage
+ * ```html
+ * <ion-searchbar
+ *   [(ngModel)]="myInput"
+ *   [showCancelButton]="shouldShowCancel"
+ *   (ionInput)="onInput($event)"
+ *   (ionCancel)="onCancel($event)">
+ * </ion-searchbar>
+ * ```
+ *
+ * @demo /docs/demos/src/searchbar/
+ * @see {@link /docs/components#searchbar Searchbar Component Docs}
+ */
+@Component({
+  tag: 'ion-searchbar',
+  styleUrls: {
+    ios: 'searchbar.ios.scss',
+    md: 'searchbar.md.scss',
+    wp: 'searchbar.wp.scss'
+  },
+  host: {
+    theme: 'searchbar'
+  }
+})
+export class Searchbar {
+  $el: HTMLElement;
+
+  _isCancelVisible: boolean = false;
+  _shouldBlur: boolean = true;
+  _shouldAlignLeft: boolean = true;
+
+  @Prop() mode: string;
+  @Prop() color: string;
+
+  @State() activated: boolean = false;
+
+  @State() focused: boolean = false;
+
+
+//   /**
+//    * @output {event} Emitted when the Searchbar input has changed, including when it's cleared.
+//    */
+//   @Output() ionInput: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
+
+//   /**
+//    * @output {event} Emitted when the cancel button is clicked.
+//    */
+//   @Output() ionCancel: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
+
+//   /**
+//    * @output {event} Emitted when the clear input button is clicked.
+//    */
+//   @Output() ionClear: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
+
+
+  /**
+   * @input {boolean} If true, enable searchbar animation. Default `false`.
+   */
+  @Prop({ state: true }) animated: boolean = false;
+
+  /**
+   * @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
+   */
+  @Prop({ state: true }) autocomplete: string = 'off';
+
+  /**
+   * @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
+   */
+  @Prop({ state: true }) autocorrect: string = 'off';
+
+  /**
+   * @input {string} Set the the cancel button text. Default: `"Cancel"`.
+   */
+  @Prop({ state: true }) cancelButtonText: string = 'Cancel';
+
+
+//   _inputDebouncer: TimeoutDebouncer = new TimeoutDebouncer(0);
+
+//   /**
+//    * @input {number} How long, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
+//    */
+//   @Input()
+//   get debounce(): number {
+//     return this._debouncer.wait;
+//   }
+//   set debounce(val: number) {
+//     this._debouncer.wait = val;
+//     this._inputDebouncer.wait = val;
+//   }
+
+  /**
+   * @input {number} Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
+   */
+  @Prop({ state: true }) debounce: number = 250;
+
+  /**
+   * @input {string} Set the input's placeholder. Default `"Search"`.
+   */
+  @Prop({ state: true }) placeholder: string = 'Search';
+
+  /**
+   * @input {boolean} If true, show the cancel button. Default `false`.
+   */
+  @Prop({ state: true }) showCancelButton: boolean = false;
+
+  /**
+   * @input {boolean} If true, enable spellcheck on the input. Default `false`.
+   */
+  @Prop({ state: true }) spellcheck: boolean = false;
+
+  /**
+   * @input {string} Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
+   */
+  @Prop({ state: true }) type: string = 'search';
+
+  /**
+   * @input {string} Set the value of the searchbar.
+   */
+  @Prop({ state: true }) value: string;
+
+
+  ionViewDidLoad() {
+    this.positionElements();
+  }
+
+  /**
+   * @hidden
+   * Clears the input field and triggers the control change.
+   */
+  clearInput(ev: UIEvent) {
+    Ionic.emit(this, 'ionClear', { detail: { event: ev } });
+
+    // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+    // wait for 4 frames
+    setTimeout(() => {
+      let value = this.value;
+      if (value !== undefined && value !== '') {
+        this.value = '';
+        Ionic.emit(this, 'ionInput', { detail: { event: ev } });
+      }
+    }, 16 * 4);
+    this._shouldBlur = false;
+  }
+
+  /**
+   * @hidden
+   * Clears the input field and tells the input to blur since
+   * the clearInput function doesn't want the input to blur
+   * then calls the custom cancel function if the user passed one in.
+   */
+  cancelSearchbar(ev: UIEvent) {
+    Ionic.emit(this, 'ionCancel', { detail: { event: ev } });
+
+    this.clearInput(ev);
+    this._shouldBlur = true;
+    this.activated = false;
+  }
+
+  /**
+   * @hidden
+   * Update the Searchbar input value when the input changes
+   */
+  inputChanged(ev: any) {
+    this.value = ev.target.value;
+    // this._inputDebouncer.debounce(() => {
+    //   this.ionInput.emit(ev);
+    // });
+  }
+
+  /**
+   * @hidden
+   */
+  inputUpdated() {
+    // const inputEle = this.$el.querySelector('.searchbar-input') as HTMLInputElement;
+
+    // It is important not to re-assign the value if it is the same, because,
+    // otherwise, the caret is moved to the end of the input
+    // if (inputEle && inputEle.value !== this.value) {
+    //   // inputEle.value = this.value;
+    //   this.value = inputEle.value;
+    // }
+
+    this.positionElements();
+  }
+
+  /**
+   * @hidden
+   * Sets the Searchbar to not focused and checks if it should align left
+   * based on whether there is a value in the searchbar or not.
+   */
+  inputBlurred() {
+    const inputEle = this.$el.querySelector('.searchbar-input') as HTMLElement;
+
+    // _shouldBlur determines if it should blur
+    // if we are clearing the input we still want to stay focused in the input
+    if (this._shouldBlur === false) {
+      inputEle.focus();
+      this._shouldBlur = true;
+      Ionic.emit(this, 'ionBlur', { detail: { this: this } });
+      this.inputUpdated();
+      return;
+    }
+
+    this.focused = false;
+    this.positionElements();
+  }
+
+  /**
+   * @hidden
+   * Sets the Searchbar to focused and active on input focus.
+   */
+  inputFocused() {
+    this.activated = true;
+
+    this.focused = true;
+    Ionic.emit(this, 'ionFocus', { detail: { this: this } });
+    this.inputUpdated();
+
+    this.positionElements();
+  }
+
+  /**
+   * @hidden
+   * Positions the input search icon, placeholder, and the cancel button
+   * based on the input value and if it is focused. (ios only)
+   */
+  positionElements() {
+    const prevAlignLeft = this._shouldAlignLeft;
+    const _shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true);
+    this._shouldAlignLeft = _shouldAlignLeft;
+
+    if (this.mode !== 'ios') {
+      return;
+    }
+
+    if (prevAlignLeft !== _shouldAlignLeft) {
+      this.positionPlaceholder();
+    }
+
+    if (this.animated) {
+      this.positionCancelButton();
+    }
+  }
+
+  /**
+   * @hidden
+   * Positions the input placeholder
+   */
+  positionPlaceholder() {
+    const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+    const inputEle = this.$el.querySelector('.searchbar-input') as HTMLElement;
+    const iconEle = this.$el.querySelector('.searchbar-search-icon') as HTMLElement;
+
+    if (this._shouldAlignLeft) {
+      inputEle.removeAttribute('style');
+      iconEle.removeAttribute('style');
+
+    } else {
+      // Create a dummy span to get the placeholder width
+      var tempSpan = document.createElement('span');
+      tempSpan.innerHTML = this.placeholder;
+      document.body.appendChild(tempSpan);
+
+      // Get the width of the span then remove it
+      var textWidth = tempSpan.offsetWidth;
+      document.body.removeChild(tempSpan);
+
+      // Calculate the input padding
+      var inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
+
+      // Calculate the icon margin
+      var iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
+
+      // Set the input padding start and icon margin start
+      if (isRTL) {
+        inputEle.style.paddingRight = inputLeft;
+        iconEle.style.marginRight = iconLeft;
+      } else {
+        inputEle.style.paddingLeft = inputLeft;
+        iconEle.style.marginLeft = iconLeft;
+      }
+    }
+  }
+
+  /**
+   * @hidden
+   * Show the iOS Cancel button on focus, hide it offscreen otherwise
+   */
+  positionCancelButton() {
+    const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+    const cancelButton = this.$el.querySelector('.searchbar-ios-cancel') as HTMLElement;
+    const shouldShowCancel = this.focused;
+
+    if (shouldShowCancel !== this._isCancelVisible) {
+      var cancelStyle = cancelButton.style;
+      this._isCancelVisible = shouldShowCancel;
+      if (shouldShowCancel) {
+        if (isRTL) {
+          cancelStyle.marginLeft = '0';
+        } else {
+          cancelStyle.marginRight = '0';
+        }
+      } else {
+        var offset = cancelButton.offsetWidth;
+        if (offset > 0) {
+          if (isRTL) {
+            cancelStyle.marginLeft = -offset + 'px';
+          } else {
+            cancelStyle.marginRight = -offset + 'px';
+          }
+        }
+      }
+    }
+  }
+
+  hostData(): VNodeData {
+    return {
+      class: {
+        'searchbar-active': this.activated,
+        'searchbar-animated': this.animated,
+        'searchbar-has-value': (this.value !== undefined && this.value !== ''),
+        'searchbar-show-cancel': this.showCancelButton,
+        'searchbar-left-aligned': this._shouldAlignLeft,
+        'searchbar-has-focus': this.focused
+      }
+    };
+  }
+
+  render() {
+    return [
+      <div class='searchbar-input-container'>
+        <ion-button
+          mode="md"
+          onclick={this.cancelSearchbar.bind(this)}
+          onmousedown={this.cancelSearchbar.bind(this)}
+          clear
+          color="dark"
+          class="searchbar-md-cancel">
+            <ion-icon name="md-arrow-back"></ion-icon>
+        </ion-button>
+        <div class="searchbar-search-icon"></div>
+        <input
+          class="searchbar-input"
+          oninput={this.inputChanged.bind(this)}
+          onblur={this.inputBlurred.bind(this)}
+          onfocus={this.inputFocused.bind(this)}
+          placeholder={this.placeholder}
+          type={this.type}
+          value={this.value}
+          autocomplete={this.autocomplete}
+          autocorrect={this.autocorrect}
+          spellcheck={this.spellcheck}/>
+        <ion-button
+          clear
+          class="searchbar-clear-icon"
+          onclick={this.clearInput.bind(this)}
+          onmousedown={this.clearInput.bind(this)}>
+        </ion-button>
+      </div>,
+      <ion-button
+        tabindex={this.activated ? 1 : -1}
+        clear
+        onclick={this.cancelSearchbar.bind(this)}
+        onmousedown={this.cancelSearchbar.bind(this)}
+        class="searchbar-ios-cancel">
+          {this.cancelButtonText}
+      </ion-button>
+    ];
+  }
+}

packages/core/src/components/searchbar/searchbar.wp.scss

@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals.wp";
+@import "./searchbar";
 
 // Windows Searchbar
 // --------------------------------------------------
@@ -139,7 +140,7 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-wp .searchbar-clear-icon {
+.searchbar-wp ion-button.searchbar-clear-icon {
   @include position(0, $searchbar-wp-input-padding-horizontal, null, null);
   @include svg-background-image($searchbar-wp-input-clear-icon-svg);
   @include padding(0);
@@ -154,7 +155,7 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
   background-size: $searchbar-wp-input-clear-icon-size;
 }
 
-.searchbar-wp .searchbar-clear-icon.activated {
+.searchbar-wp ion-button.searchbar-clear-icon.activated {
   background-color: transparent;
 }
 

packages/core/stencil.config.js

@@ -11,6 +11,7 @@ exports.config = {
     { components: ['ion-loading', 'ion-loading-controller'] },
     { components: ['ion-menu'], priority: 'low' },
     { components: ['ion-modal', 'ion-modal-controller'] },
+    { components: ['ion-searchbar'] },
     { components: ['ion-segment', 'ion-segment-button'] },
     { components: ['ion-slides', 'ion-slide'] },
     { components: ['ion-spinner'] },