chrome/browser/resources/chromeos/login/gaia_input.html

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