| OLD | NEW |
| 1 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> | 1 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> |
| 2 <link rel="import" href="chrome://resources/polymer/polymer/layout.html"> | 2 <link rel="import" href="chrome://resources/polymer/polymer/layout.html"> |
| 3 <link rel="import" href="chrome://resources/polymer/paper-input/paper-input-deco
rator.html"> | |
| 4 | 3 |
| 5 <!-- | 4 <!-- |
| 6 A simple input form with a button. Being used for typing email or password. | 5 A simple input form with a button. Being used for typing email or password. |
| 6 User should put one or more <gaia-input>s inside. |
| 7 | 7 |
| 8 Example: | 8 Example: |
| 9 <gaia-input-form id="emailInput" inputType="email" | 9 <gaia-input-form buttonText="Submit"> |
| 10 <gaia-input label="Email" type="email"></gaia-input> |
| 11 <gaia-input label="Password" type="password"></gaia-input> |
| 12 <gaia-input label="OTP"></gaia-input> |
| 10 </gaia-input-form> | 13 </gaia-input-form> |
| 11 | 14 |
| 12 Attributes: | 15 Attributes: |
| 13 'inputType' - type of the input (e.g. email, password). | |
| 14 'inputLabel' - label displayed on the input. (e.g. Enter you email). | |
| 15 'errorMsg' - error message which should be displayed when input is | |
| 16 incorrect. | |
| 17 'buttonText' - text on the button. | 16 'buttonText' - text on the button. |
| 18 'emailDomain' - autocomplete domain for the inputType="email". | |
| 19 | 17 |
| 20 Events: | 18 Events: |
| 21 'buttonclick' - fired on button click. | 19 'submit' - fired on button click or "Enter" press inside input field. |
| 22 | 20 |
| 23 Methods: | 21 Methods: |
| 24 'focus' - focuses input field. | 22 'focus' - focuses input field. |
| 25 'setValid' - accept boolean argument |isValid|. Set validity state on | |
| 26 the form. | |
| 27 'checkValidity' - returns current validity state of the input form. Calls | |
| 28 setValid at the end. | |
| 29 --> | 23 --> |
| 30 <polymer-element name="gaia-input-form" vertical start-justified layout | 24 <polymer-element name="gaia-input-form" vertical start-justified layout |
| 31 attributes="inputType errorMsg inputLabel buttonText emailDomain"> | 25 attributes="buttonText" |
| 26 on-keydown="{{onKeyDown}}"> |
| 32 <template> | 27 <template> |
| 33 <link rel="stylesheet" href="gaia_input_form.css"> | 28 <link rel="stylesheet" href="gaia_input_form.css"> |
| 34 <paper-input-decorator id="paperInputDecorator" error="{{errorMsg}}" | 29 <content id="inputs" select="gaia-input"></content> |
| 35 label="{{inputLabel}}" on-tap="{{onTap}}" | |
| 36 floatingLabel autoValidate> | |
| 37 <div id="inputContainer" horizontal layout> | |
| 38 <input id="inputForm" is="core-input" on-keydown="{{onKeyDown}}" | |
| 39 value="{{inputValue}}" required type="{{inputType}}" flex> | |
| 40 <span id="emailDomain" hidden?="{{!emailDomain}}">{{emailDomain}}</span> | |
| 41 </div> | |
| 42 </paper-input-decorator> | |
| 43 <div horizontal justified layout center reverse> | 30 <div horizontal justified layout center reverse> |
| 44 <gaia-raised-on-focus-button id="button" class="blue-button" | 31 <gaia-raised-on-focus-button id="button" class="blue-button" |
| 45 on-tap="{{onButtonClicked}}" self-end> | 32 on-tap="{{onButtonClicked}}" self-end> |
| 46 {{buttonText}} | 33 {{buttonText}} |
| 47 </gaia-raised-on-focus-button> | 34 </gaia-raised-on-focus-button> |
| 48 <content> </content> | 35 <content> </content> |
| 49 </div> | 36 </div> |
| 50 </template> | 37 </template> |
| 51 </polymer-element> | 38 </polymer-element> |
| OLD | NEW |