ui/webui/resources/cr_elements/cr_input/cr_input.js

   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 /**
   6  * @fileoverview
   7  * 'cr-input' is a single-line text field for user input. It is a convenience
   8  * element composed of a 'paper-input-decorator' and a 'input is="core-input"'.
   9  *
  10  * Example:
  11  *
  12  *    <cr-input></cr-input>
  13  *
  14  * @group Chrome Elements
  15  * @element cr-input
  16  */
  17 Polymer('cr-input', {
  18   publish: {
  19     /**
  20      * The label for this input. It normally appears as grey text inside
  21      * the text input and disappears once the user enters text.
  22      *
  23      * @attribute label
  24      * @type string
  25      * @default ''
  26      */
  27     label: '',
  28
  29     /**
  30      * If true, the label will "float" above the text input once the
  31      * user enters text instead of disappearing.
  32      *
  33      * @attribute floatingLabel
  34      * @type boolean
  35      * @default true
  36      */
  37     floatingLabel: true,
  38
  39     /**
  40      * Set to true to style the element as disabled.
  41      *
  42      * @attribute disabled
  43      * @type boolean
  44      * @default false
  45      */
  46     disabled: {value: false, reflect: true},
  47
  48     /**
  49      * Set to true to mark the input as required.
  50      *
  51      * @attribute required
  52      * @type boolean
  53      * @default false
  54      */
  55     required: {value: false, reflect: true},
  56
  57     /**
  58      * The current value of the input.
  59      *
  60      * @attribute value
  61      * @type string
  62      * @default ''
  63      */
  64     value: '',
  65
  66     /**
  67      * The validation pattern for the input.
  68      *
  69      * @attribute pattern
  70      * @type string
  71      * @default ''
  72      */
  73     pattern: '',
  74
  75     /**
  76      * The type of the input (password, date, etc.).
  77      *
  78      * @attribute type
  79      * @type string
  80      * @default 'text'
  81      */
  82     type: 'text',
  83
  84     /**
  85      * The message to display if the input value fails validation. If this
  86      * is unset or the empty string, a default message is displayed depending
  87      * on the type of validation error.
  88      *
  89      * @attribute error
  90      * @type string
  91      * @default ''
  92      */
  93     error: '',
  94
  95     /**
  96      * The most recently committed value of the input.
  97      *
  98      * @attribute committedValue
  99      * @type string
 100      * @default ''
 101      */
 102     committedValue: ''
 103   },
 104
 105   /**
 106    * Focuses the 'input' element.
 107    */
 108   focus: function() {
 109     this.$.input.focus();
 110   },
 111
 112   valueChanged: function() {
 113     this.$.decorator.updateLabelVisibility(this.value);
 114   },
 115
 116   patternChanged: function() {
 117     if (this.pattern)
 118       this.$.input.pattern = this.pattern;
 119     else
 120       this.$.input.removeAttribute('pattern');
 121   },
 122
 123   /** @override */
 124   ready: function() {
 125     this.$.events.forward(this.$.input, ['change']);
 126     this.patternChanged();
 127   },
 128 });