1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
13<link rel="import" href="../iron-input/iron-input.html">
14<link rel="import" href="paper-input-behavior.html">
15<link rel="import" href="paper-input-char-counter.html">
16<link rel="import" href="paper-input-container.html">
17<link rel="import" href="paper-input-error.html">
18
19<!--
20Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
21
22`<paper-input>` is a single-line text field with Material Design styling.
23
24    <paper-input label="Input label"></paper-input>
25
26It may include an optional error message or character counter.
27
28    <paper-input error-message="Invalid input!" label="Input label"></paper-input>
29    <paper-input char-counter label="Input label"></paper-input>
30
31It can also include custom prefix or suffix elements, which are displayed
32before or after the text input itself. In order for an element to be
33considered as a prefix, it must have the `prefix` attribute (and similarly
34for `suffix`).
35
36    <paper-input label="total">
37      <div prefix>$</div>
38      <paper-icon-button suffix icon="clear"></paper-icon-button>
39    </paper-input>
40
41A `paper-input` can use the native `type=search` or `type=file` features.
42However, since we can't control the native styling of the input (search icon,
43file button, date placeholder, etc.), in these cases the label will be
44automatically floated. The `placeholder` attribute can still be used for
45additional informational text.
46
47    <paper-input label="search!" type="search"
48        placeholder="search for cats" autosave="test" results="5">
49    </paper-input>
50
51See `Polymer.PaperInputBehavior` for more API docs.
52
53### Focus
54
55To focus a paper-input, you can call the native `focus()` method as long as the
56paper input has a tab index.
57
58### Styling
59
60See `Polymer.PaperInputContainer` for a list of custom properties used to
61style this element.
62
63
64@group Paper Elements
65@element paper-input
66@hero hero.svg
67@demo demo/index.html
68-->
69
70<dom-module id="paper-input">
71  <template>
72    <style>
73      :host {
74        display: block;
75      }
76
77      :host([focused]) {
78        outline: none;
79      }
80
81      :host([hidden]) {
82        display: none !important;
83      }
84
85      input::-webkit-outer-spin-button,
86      input::-webkit-inner-spin-button {
87        @apply(--paper-input-container-input-webkit-spinner);
88      }
89
90      input::-webkit-clear-button {
91        @apply(--paper-input-container-input-webkit-clear);
92      }
93
94      input::-webkit-input-placeholder {
95        color: var(--paper-input-container-color, --secondary-text-color);
96      }
97
98      input:-moz-placeholder {
99        color: var(--paper-input-container-color, --secondary-text-color);
100      }
101
102      input::-moz-placeholder {
103        color: var(--paper-input-container-color, --secondary-text-color);
104      }
105
106      input::-ms-clear {
107        @apply(--paper-input-container-ms-clear);
108      }
109
110      input:-ms-input-placeholder {
111        color: var(--paper-input-container-color, --secondary-text-color);
112      }
113
114      label {
115        pointer-events: none;
116      }
117    </style>
118
119    <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
120
121      <content select="[prefix]"></content>
122
123      <label hidden$="[[!label]]" aria-hidden="true" for="input">[[label]]</label>
124
125      <input is="iron-input" id="input"
126        aria-labelledby$="[[_ariaLabelledBy]]"
127        aria-describedby$="[[_ariaDescribedBy]]"
128        disabled$="[[disabled]]"
129        title$="[[title]]"
130        bind-value="{{value}}"
131        invalid="{{invalid}}"
132        prevent-invalid-input="[[preventInvalidInput]]"
133        allowed-pattern="[[allowedPattern]]"
134        validator="[[validator]]"
135        type$="[[type]]"
136        pattern$="[[pattern]]"
137        required$="[[required]]"
138        autocomplete$="[[autocomplete]]"
139        autofocus$="[[autofocus]]"
140        inputmode$="[[inputmode]]"
141        minlength$="[[minlength]]"
142        maxlength$="[[maxlength]]"
143        min$="[[min]]"
144        max$="[[max]]"
145        step$="[[step]]"
146        name$="[[name]]"
147        placeholder$="[[placeholder]]"
148        readonly$="[[readonly]]"
149        list$="[[list]]"
150        size$="[[size]]"
151        autocapitalize$="[[autocapitalize]]"
152        autocorrect$="[[autocorrect]]"
153        on-change="_onChange"
154        tabindex$="[[tabindex]]"
155        autosave$="[[autosave]]"
156        results$="[[results]]"
157        accept$="[[accept]]"
158        multiple$="[[multiple]]">
159
160      <content select="[suffix]"></content>
161
162      <template is="dom-if" if="[[errorMessage]]">
163        <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
164      </template>
165
166      <template is="dom-if" if="[[charCounter]]">
167        <paper-input-char-counter></paper-input-char-counter>
168      </template>
169
170    </paper-input-container>
171  </template>
172</dom-module>
173
174<script>
175  Polymer({
176    is: 'paper-input',
177
178    behaviors: [
179      Polymer.IronFormElementBehavior,
180      Polymer.PaperInputBehavior
181    ]
182  });
183</script>
184