feat(text-input): added clearInput attribute with styling, but it still needs some JS stuff

references #586

ionic/components/text-input/test/form-inputs/main.html

@@ -7,22 +7,22 @@
   <form [ngFormModel]="loginForm" #mf="ngForm" novalidate>
 
     <ion-list>
-      <ion-input floating-label>
+      <ion-input floating-label clearInput>
         <ion-label>Email</ion-label>
         <input [(ngModel)]="login.email" ngControl="email" type="email" required>
       </ion-input>
 
-      <ion-input floating-label>
+      <ion-input floating-label clearInput>
         <ion-label>Username</ion-label>
         <input [(ngModel)]="login.username" ngControl="username" type="text">
       </ion-input>
 
-      <ion-input floating-label>
+      <ion-input floating-label clearInput>
         <ion-label>Password</ion-label>
         <input [(ngModel)]="login.password" ngControl="password" type="password" required>
       </ion-input>
 
-      <ion-input floating-label>
+      <ion-input floating-label clearInput>
         <ion-label>Comments</ion-label>
         <textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</textarea>
       </ion-input>
@@ -43,15 +43,15 @@
 
   <form (ngSubmit)="submit($event, user)" #lf="ngForm">
     <ion-list>
-      <ion-input floating-label>
+      <ion-input floating-label clearInput>
         <ion-label>Username</ion-label>
         <input type="text" [(ngModel)]="user.username" ngControl="username" required>
       </ion-input>
-      <ion-input floating-label>
+      <ion-input floating-label clearInput>
         <ion-label>Password</ion-label>
         <input type="password" [(ngModel)]="user.password" ngControl="password" required>
       </ion-input>
-      <div padding-left padding-right>
+      <div padding-left padding-right clearInput>
         <button block type="submit">Login</button>
       </div>
       <div padding-left>
@@ -63,4 +63,26 @@
     </ion-list>
   </form>
 
+  <ion-list>
+    <ion-input clearInput>
+      <ion-label>Email</ion-label>
+      <input type="email" required>
+    </ion-input>
+
+    <ion-input clearInput>
+      <ion-label>Username</ion-label>
+      <input type="text">
+    </ion-input>
+
+    <ion-input clearInput>
+      <ion-label>Password</ion-label>
+      <input type="password" required>
+    </ion-input>
+
+    <ion-input clearInput>
+      <ion-label>Comments</ion-label>
+      <textarea required>Comment value</textarea>
+    </ion-input>
+  </ion-list>
+
 </ion-content>

ionic/components/text-input/text-input.ios.scss

@@ -4,7 +4,12 @@
 // iOS Text Input
 // --------------------------------------------------
 
-$text-input-ios-background-color:    $list-ios-background-color !default;
+$text-input-ios-background-color:          $list-ios-background-color !default;
+
+$text-input-ios-input-clear-icon-width:    30px !default;
+$text-input-ios-input-clear-icon-color:    rgba(0, 0, 0, 0.5) !default;
+$text-input-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+$text-input-ios-input-clear-icon-size:     18px !default;
 
 
 // Default Input
@@ -34,3 +39,23 @@ $text-input-ios-background-color:    $list-ios-background-color !default;
   margin-top: 8px;
   margin-bottom: 8px;
 }
+
+// Clear Input Icon
+// --------------------------------------------------
+
+ion-input[clearInput] {
+  position: relative;
+
+  .text-input {
+    padding-right: $text-input-ios-input-clear-icon-width;
+  }
+}
+
+.text-input-clear-icon {
+  width: $text-input-ios-input-clear-icon-width;
+
+  @include svg-background-image($text-input-ios-input-clear-icon-svg);
+  background-size: $text-input-ios-input-clear-icon-size;
+  right: ($item-ios-padding-right / 2);
+  bottom: 0;  
+}

ionic/components/text-input/text-input.md.scss

@@ -9,6 +9,12 @@ $text-input-md-highlight-color:             map-get($colors-md, primary) !defaul
 $text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !default;
 $text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
 
+$text-input-md-input-clear-icon-width:      30px !default;
+$text-input-md-input-clear-icon-color:      #5B5B5B !default;
+$text-input-md-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-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;
+$text-input-md-input-clear-icon-size:       22px !default;
+
+
 
 // Default Input
 // --------------------------------------------------
@@ -65,3 +71,24 @@ ion-input.ng-invalid.ng-touched:after {
   margin-top: 8px;
   margin-bottom: 8px;
 }
+
+
+// Clear Input Icon
+// --------------------------------------------------
+
+ion-input[clearInput] {
+  position: relative;
+
+  .text-input {
+    padding-right: $text-input-md-input-clear-icon-width;
+  }
+}
+
+.text-input-clear-icon {
+  width: $text-input-md-input-clear-icon-width;
+
+  @include svg-background-image($text-input-md-input-clear-icon-svg);
+  background-size: $text-input-md-input-clear-icon-size;
+  right: ($item-md-padding-right / 2);
+  bottom: 2px;
+}

ionic/components/text-input/text-input.scss

@@ -61,3 +61,15 @@ input,
 textarea {
   @include placeholder();
 }
+
+// Clear Input Icon
+// --------------------------------------------------
+
+.text-input-clear-icon {
+  margin: 0;
+  padding: 0;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+}

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

@@ -1,24 +1,30 @@
-import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer} from 'angular2/core';
+import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {NavController} from '../nav/nav-controller';
 import {Config} from '../../config/config';
 import {Form} from '../../util/form';
-import {Label} from './label';
+import {Label} from '../label/label';
 import {IonicApp} from '../app/app';
 import {Content} from '../content/content';
 import * as dom  from '../../util/dom';
 import {Platform} from '../../platform/platform';
+import {Button} from '../button/button';
 
 
 /**
  * @name Input
  * @module ionic
  * @description
- * `ionInput` is a generic wrapper for both inputs and textareas. You can give `ion-input` to tell it how to handle a chile `ion-label` component
+ *
- * @property [fixed-labels] - a persistant label that sits next the the input
+ * `ion-input` is a generic wrapper for both inputs and textareas. You can give `ion-input` attributes to tell it how to handle a child `ion-label` component.
- * @property [floating-labels] - a label that will float about the input if the input is empty of looses focus
+ *
- * @property [stacked-labels] - A stacked label will always appear on top of the input
+ * @property [fixed-label] - a persistant label that sits next the the input
+ * @property [floating-label] - a label that will float about the input if the input is empty of looses focus
+ * @property [stacked-label] - A stacked label will always appear on top of the input
+ * @property [inset] - The input will be inset
+ * @property [clearInput] - A clear icon will appear in the input which clears it
+ *
  * @usage
  * ```html
  *  <ion-input>
@@ -26,7 +32,7 @@ import {Platform} from '../../platform/platform';
  *    <input type="text" value="">
  *  </ion-input>
  *
- *  <ion-input>
+ *  <ion-input clearInput>
  *    <input type="text" placeholder="Username">
  *  </ion-input>
  *
@@ -61,10 +67,15 @@ import {Platform} from '../../platform/platform';
     '<div class="item-inner">' +
       '<ng-content></ng-content>' +
       '<input [type]="type" aria-hidden="true" scroll-assist *ngIf="scrollAssist">' +
+      '<button clear *ngIf="clearInput" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
     '</div>',
-  directives: [NgIf, forwardRef(() => InputScrollAssist)]
+  directives: [NgIf, forwardRef(() => InputScrollAssist), Button]
 })
 export class TextInput {
+  /**
+   * @private
+   */
+  @Input() clearInput: any;
 
   constructor(
     form: Form,
@@ -109,6 +120,13 @@ export class TextInput {
      this.input && this.input.elementRef.nativeElement.classList.contains(className);
    }
 
+   /**
+    * @private
+    */
+   clearTextInput() {
+     console.log("Should clear input");
+   }
+
   /**
    * @private
    */
@@ -130,6 +148,17 @@ export class TextInput {
     this.label = label;
   }
 
+  /**
+   * @private
+   * On Initialization check for attributes
+   */
+  ngOnInit() {
+    let clearInput = this.clearInput;
+    if (typeof clearInput === 'string') {
+      this.clearInput = (clearInput === '' || clearInput === 'true');
+    }
+  }
+
   /**
    * @private
    */