OLD | NEW |
1 <link rel="import" href="chrome://resources/polymer/core-input/core-input.html"> | 1 <!-- Copyright 2015 The Chromium Authors. All rights reserved. |
2 <link rel="import" href="chrome://resources/polymer/paper-input/paper-input-deco
rator.html"> | 2 Use of this source code is governed by a BSD-style license that can be |
3 <link rel="import" href="chrome://resources/polymer/polymer/layout.html"> | 3 found in the LICENSE file. --> |
4 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> | 4 |
| 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe
s/iron-flex-layout.html"> |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.h
tml"> |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input
-container.html"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input
-error.html"> |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 10 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
5 | 11 |
6 <!-- | 12 <!-- |
7 Material desing input field, that supports different input types and email | 13 Material desing input field, that supports different input types and email |
8 validation and matches GAIA's visual style. | 14 validation and matches GAIA's visual style. |
9 | 15 |
10 Examples: | 16 Examples: |
11 <gaia-input value="Simple text input" required></gaia-input> | 17 <gaia-input value="Simple text input" required></gaia-input> |
12 <gaia-input type="email" domain="example.com"></gaia-input> | 18 <gaia-input type="email" domain="example.com"></gaia-input> |
13 | 19 |
14 Attributes: | 20 Attributes: |
15 'label' - same as <paper-input>'s 'label'. | 21 'label' - same as <paper-input>'s 'label'. |
16 'value' - same as <input>'s 'value'. | 22 'value' - same as <input>'s 'value'. |
17 'type' - same as <input>'s 'type'. | 23 'type' - same as <input>'s 'type'. |
18 'domain' - optional attribute for email input. The domain is displayed in | 24 'domain' - optional attribute for email input. The domain is displayed in |
19 the end of input field, if user is not provided any. | 25 the end of input field, if user is not provided any. |
20 'error' - error message displayed in case if 'isInvalid' is true. | 26 'error' - error message displayed in case if 'isInvalid' is true. |
21 'isInvalid' - whether input data is invalid. Note: it is not changed | 27 'isInvalid' - whether input data is invalid. Note: it is not changed |
22 automatically. Can be changed manually or with checkValidity() | 28 automatically. Can be changed manually or with checkValidity() |
23 method. | 29 method. |
24 'required' - whether empty field is invalid. | 30 'required' - whether empty field is invalid. |
25 | 31 |
26 Methods: | 32 Methods: |
27 'focus' - focuses input field. | 33 'focus' - focuses input field. |
28 'checkValidity' - returns current validity state of the input form. Updates | 34 'checkValidity' - returns current validity state of the input form. Updates |
29 'isInvalid' at the end. | 35 'isInvalid' at the end. |
30 --> | 36 --> |
31 <polymer-element name="gaia-input" attributes="label value type domain required | 37 <dom-module name="gaia-input"> |
32 error isInvalid"> | 38 <link rel="stylesheet" href="gaia_input.css"> |
| 39 |
33 <template> | 40 <template> |
34 <link rel="stylesheet" href="gaia_input.css"> | 41 <paper-input-container id="decorator" on-tap="onTap" |
35 <paper-input-decorator id="decorator" error="{{error}}" label="{{label}}" | 42 invalid="[[isInvalid]]" disabled$="[[disabled]]"> |
36 on-tap="{{onTap}}" isInvalid="{{isInvalid}}" floatingLabel autoValidate> | 43 <label><span>[[label]]</span></label> |
37 <div id="container" horizontal layout> | 44 <div id="container" class="horizontal layout"> |
38 <input id="input" is="core-input" on-keydown="{{onKeyDown}}" | 45 <input id="input" is="iron-input" on-keydown="onKeyDown" |
39 value="{{value}}" required?="{{required}}" flex> | 46 bind-value="{{value}}" invalid="[[isInvalid]]" |
40 <span id="domainLabel">{{domain}}</span> | 47 required$="[[required]]" disabled$="[[disabled]]" class="flex"> |
| 48 <span id="domainLabel">[[domain]]</span> |
41 </div> | 49 </div> |
42 </paper-input-decorator> | 50 <template is="dom-if" if="[[error]]"> |
| 51 <paper-input-error>[[error]]</paper-input-error> |
| 52 </template> |
| 53 </paper-input-container> |
43 </template> | 54 </template> |
44 </polymer-element> | 55 </dom-module> |
45 | 56 |
OLD | NEW |