| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <link rel="import" href="../polymer/polymer.html"> |
| <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html"> |
| <link rel="import" href="../iron-input/iron-input.html"> |
| <link rel="import" href="paper-input-behavior.html"> |
| <link rel="import" href="paper-input-char-counter.html"> |
| <link rel="import" href="paper-input-container.html"> |
| <link rel="import" href="paper-input-error.html"> |
| |
| <!-- |
| Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html) |
| |
| `<paper-input>` is a single-line text field with Material Design styling. |
| |
| <paper-input label="Input label"></paper-input> |
| |
| It may include an optional error message or character counter. |
| |
| <paper-input error-message="Invalid input!" label="Input label"></paper-input> |
| <paper-input char-counter label="Input label"></paper-input> |
| |
| It can also include custom prefix or suffix elements, which are displayed |
| before or after the text input itself. In order for an element to be |
| considered as a prefix, it must have the `prefix` attribute (and similarly |
| for `suffix`). |
| |
| <paper-input label="total"> |
| <div prefix>$</div> |
| <paper-icon-button suffix icon="clear"></paper-icon-button> |
| </paper-input> |
| |
| A `paper-input` can use the native `type=search` or `type=file` features. |
| However, since we can't control the native styling of the input (search icon, |
| file button, date placeholder, etc.), in these cases the label will be |
| automatically floated. The `placeholder` attribute can still be used for |
| additional informational text. |
| |
| <paper-input label="search!" type="search" |
| placeholder="search for cats" autosave="test" results="5"> |
| </paper-input> |
| |
| See `Polymer.PaperInputBehavior` for more API docs. |
| |
| ### Focus |
| |
| To focus a paper-input, you can call the native `focus()` method as long as the |
| paper input has a tab index. |
| |
| ### Styling |
| |
| See `Polymer.PaperInputContainer` for a list of custom properties used to |
| style this element. |
| |
| |
| @group Paper Elements |
| @element paper-input |
| @hero hero.svg |
| @demo demo/index.html |
| --> |
| |
| <dom-module id="paper-input"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| } |
| |
| :host([focused]) { |
| outline: none; |
| } |
| |
| :host([hidden]) { |
| display: none !important; |
| } |
| |
| input::-webkit-outer-spin-button, |
| input::-webkit-inner-spin-button { |
| @apply(--paper-input-container-input-webkit-spinner); |
| } |
| |
| input::-webkit-clear-button { |
| @apply(--paper-input-container-input-webkit-clear); |
| } |
| |
| input::-webkit-input-placeholder { |
| color: var(--paper-input-container-color, --secondary-text-color); |
| } |
| |
| input:-moz-placeholder { |
| color: var(--paper-input-container-color, --secondary-text-color); |
| } |
| |
| input::-moz-placeholder { |
| color: var(--paper-input-container-color, --secondary-text-color); |
| } |
| |
| input::-ms-clear { |
| @apply(--paper-input-container-ms-clear); |
| } |
| |
| input:-ms-input-placeholder { |
| color: var(--paper-input-container-color, --secondary-text-color); |
| } |
| |
| label { |
| pointer-events: none; |
| } |
| </style> |
| |
| <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> |
| |
| <content select="[prefix]"></content> |
| |
| <label hidden$="[[!label]]" aria-hidden="true" for="input">[[label]]</label> |
| |
| <input is="iron-input" id="input" |
| aria-labelledby$="[[_ariaLabelledBy]]" |
| aria-describedby$="[[_ariaDescribedBy]]" |
| disabled$="[[disabled]]" |
| title$="[[title]]" |
| bind-value="{{value}}" |
| invalid="{{invalid}}" |
| prevent-invalid-input="[[preventInvalidInput]]" |
| allowed-pattern="[[allowedPattern]]" |
| validator="[[validator]]" |
| type$="[[type]]" |
| pattern$="[[pattern]]" |
| required$="[[required]]" |
| autocomplete$="[[autocomplete]]" |
| autofocus$="[[autofocus]]" |
| inputmode$="[[inputmode]]" |
| minlength$="[[minlength]]" |
| maxlength$="[[maxlength]]" |
| min$="[[min]]" |
| max$="[[max]]" |
| step$="[[step]]" |
| name$="[[name]]" |
| placeholder$="[[placeholder]]" |
| readonly$="[[readonly]]" |
| list$="[[list]]" |
| size$="[[size]]" |
| autocapitalize$="[[autocapitalize]]" |
| autocorrect$="[[autocorrect]]" |
| on-change="_onChange" |
| tabindex$="[[tabindex]]" |
| autosave$="[[autosave]]" |
| results$="[[results]]" |
| accept$="[[accept]]" |
| multiple$="[[multiple]]"> |
| |
| <content select="[suffix]"></content> |
| |
| <template is="dom-if" if="[[errorMessage]]"> |
| <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error> |
| </template> |
| |
| <template is="dom-if" if="[[charCounter]]"> |
| <paper-input-char-counter></paper-input-char-counter> |
| </template> |
| |
| </paper-input-container> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: 'paper-input', |
| |
| behaviors: [ |
| Polymer.IronFormElementBehavior, |
| Polymer.PaperInputBehavior |
| ] |
| }); |
| </script> |