Home | History | Annotate | Download | only in paper-input 
      1 <!--
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
      4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
      5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
      6 Code distributed by Google as part of the polymer project is also
      7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
      8 -->
      9 
     10 <!--
     11 `paper-input` is a single- or multi-line text field where user can enter input.
     12 It can optionally have a label.
     13 
     14 Example:
     15 
     16     <paper-input label="Your Name"></paper-input>
     17     <paper-input multiline label="Enter multiple lines here"></paper-input>
     18 
     19 Theming
     20 --------
     21 
     22 Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme
     23 the focused and invalid states.
     24 
     25 @group Paper Elements
     26 @element paper-input
     27 @extends core-input
     28 @homepage github.io
     29 -->
     30 <link href="../polymer/polymer.html" rel="import">
     31 <link href="../core-input/core-input.html" rel="import">
     32 <link href="../core-style/core-style.html" rel="import">
     33 
     34 <core-style id="paper-input">
     35 
     36 #label.focused,
     37 #floatedLabel.focused {
     38   color: {{g.paperInput.focusedColor}};
     39 }
     40 
     41 #underlineHighlight.focused,
     42 #caretInner {
     43   background-color: {{g.paperInput.focusedColor}};
     44 }
     45 
     46 #error,
     47 :host(.invalid) #label.focused,
     48 :host(.invalid) #floatedLabel.focused {
     49   color: {{g.paperInput.invalidColor}};
     50 }
     51 :host(.invalid) #underlineHighlight.focused,
     52 :host(.invalid) #caretInner {
     53   background-color: {{g.paperInput.invalidColor}};
     54 }
     55 
     56 </core-style>
     57 
     58 <polymer-element name="paper-input" extends="core-input" attributes="label floatingLabel maxRows error" on-down="{{downAction}}" on-up="{{upAction}}" assetpath="">
     59 
     60   <template>
     61 
     62     <link href="paper-input.css" rel="stylesheet">
     63 
     64     <core-style ref="paper-input"></core-style>
     65 
     66     <div id="floatedLabel" class="hidden" hidden?="{{!floatingLabel}}"><span id="floatedLabelSpan">{{label}}</span></div>
     67 
     68     <div id="container" on-transitionend="{{transitionEndAction}}" on-webkittransitionend="{{transitionEndAction}}">
     69 
     70       <div id="label"><span id="labelSpan">{{label}}</span></div>
     71 
     72       <div id="inputContainer">
     73 
     74         <div id="inputClone">
     75           <span id="inputCloneSpan" aria-hidden="true">&#xA0;</span>
     76         </div>
     77 
     78         <template if="{{multiline}}">
     79           <div id="minInputHeight"></div>
     80           <div id="maxInputHeight"></div>
     81         </template>
     82 
     83         <shadow></shadow>
     84 
     85       </div>
     86 
     87       <div id="underlineContainer">
     88         <div id="underline"></div>
     89         <div id="underlineHighlight" class="focusedColor"></div>
     90       </div>
     91 
     92       <div id="caret">
     93         <div id="caretInner" class="focusedColor"></div>
     94       </div>
     95 
     96     </div>
     97 
     98     <div id="errorContainer">
     99       <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
    100       <div id="errorIcon"></div>
    101     </div>
    102 
    103   </template>
    104 
    105   
    106 
    107 </polymer-element>
    108 <script src="paper-input-extracted.js"></script>