├── .github ├── CODEOWNERS └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── README.md ├── bower.json ├── demo ├── index.html ├── ssn-input.js └── ssn-validator.js ├── formatconfig.json ├── manifest.json ├── package-lock.json ├── package.json ├── paper-input-addon-behavior.js ├── paper-input-behavior.js ├── paper-input-char-counter.js ├── paper-input-container.js ├── paper-input-error.js ├── paper-input.js ├── paper-textarea.js ├── test ├── index.html ├── letters-only.js ├── paper-input-char-counter.html ├── paper-input-container.html ├── paper-input-error.html ├── paper-input.html └── paper-textarea.html └── wct.conf.json /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @e111077 2 | /.travis.yml @azakus 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Description 3 | 4 | 5 | ### Expected outcome 6 | 7 | 8 | 9 | ### Actual outcome 10 | 11 | 12 | 13 | ### Live Demo 14 | 15 | 16 | ### Steps to reproduce 17 | 18 | 23 | 24 | ### Browsers Affected 25 | 26 | - [ ] Chrome 27 | - [ ] Firefox 28 | - [ ] Safari 9 29 | - [ ] Safari 8 30 | - [ ] Safari 7 31 | - [ ] Edge 32 | - [ ] IE 11 33 | - [ ] IE 10 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components* 2 | bower-*.json 3 | node_modules 4 | *.d.ts 5 | *.tgz 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.tgz 2 | .github 3 | .travis.yml 4 | formatconfig.json 5 | gen-tsd.json 6 | test/ 7 | wct.conf.json 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: 'false' 3 | before_script: 4 | - npm install -g polymer-cli 5 | - git checkout package-lock.json 6 | - >- 7 | npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m 8 | Project is not formatted. Please run "npm run format".' && false) 9 | env: 10 | global: 11 | - secure: >- 12 | PlKMLY9ofkSDxO7t1V0MUTiUiyyhrI6AOWVneAxpGrvyU1WDd9nCbh+e8wRvLw+4BHYNlrLUTemrnbquh7cyOV2a5ZKSAmXqkaA/4ISWIy+XD2AgLpoDl9ptl+VOSmxND4aTD5ErnueXLUMUI96v50Kj4jDYuTZsy/2q38861tk= 13 | - secure: >- 14 | aV25bA3RceITQ0MOQAh20XDibw067hY5N9BmIHiNi0WN6pEmxicr0535EVZyFHmhvJL2VMCPcVr+YNaRAySCeXTDQ6Mn7uMQ7KfllIoqPEdLjlF3mTW+fhz8pOgrwUDza6FS2tVS7jXscE8CTKfU6rjOxIEnUNBn33UdMyXWotk= 15 | node_js: node 16 | addons: 17 | firefox: latest 18 | chrome: stable 19 | script: 20 | - xvfb-run polymer test --module-resolution=node --npm --local chrome 21 | - xvfb-run polymer test --module-resolution=node --npm --local firefox 22 | - >- 23 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test 24 | --module-resolution=node --npm -s 'default'; fi 25 | dist: trusty 26 | cache: 27 | directories: 28 | - node_modules 29 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | # Polymer Elements 15 | ## Guide for Contributors 16 | 17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: 18 | 19 | ### Filing Issues 20 | 21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: 22 | 23 | 1. **Who will use the feature?** _“As someone filling out a form…”_ 24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_ 25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ 26 | 27 | **If you are filing an issue to report a bug**, please provide: 28 | 29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: 30 | 31 | ```markdown 32 | The `paper-foo` element causes the page to turn pink when clicked. 33 | 34 | ## Expected outcome 35 | 36 | The page stays the same color. 37 | 38 | ## Actual outcome 39 | 40 | The page turns pink. 41 | 42 | ## Steps to reproduce 43 | 44 | 1. Put a `paper-foo` element in the page. 45 | 2. Open the page in a web browser. 46 | 3. Click the `paper-foo` element. 47 | ``` 48 | 49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). 50 | 51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 52 | 53 | ### Submitting Pull Requests 54 | 55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. 56 | 57 | When submitting pull requests, please provide: 58 | 59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: 60 | 61 | ```markdown 62 | (For a single issue) 63 | Fixes #20 64 | 65 | (For multiple issues) 66 | Fixes #32, fixes #40 67 | ``` 68 | 69 | 2. **A succinct description of the design** used to fix any related issues. For example: 70 | 71 | ```markdown 72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. 73 | ``` 74 | 75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. 76 | 77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-input.svg)](https://www.npmjs.com/package/@polymer/paper-input) 2 | [![Build status](https://travis-ci.org/PolymerElements/paper-input.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-input) 3 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-input) 4 | 5 | ## <paper-input> 6 | `` is a single-line text field with Material Design styling. 7 | 8 | See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-input), 9 | [Demo](https://www.webcomponents.org/element/@polymer/paper-input/demo/demo/index.html). 10 | 11 | ## Usage 12 | 13 | ### Installation 14 | ``` 15 | npm install --save @polymer/paper-input 16 | ``` 17 | 18 | ### In an html file 19 | ```html 20 | 21 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | ``` 31 | ### In a Polymer 3 element 32 | ```js 33 | import {PolymerElement, html} from '@polymer/polymer'; 34 | import '@polymer/paper-input/paper-input.js'; 35 | 36 | class SampleElement extends PolymerElement { 37 | static get template() { 38 | return html` 39 | 40 | `; 41 | } 42 | } 43 | customElements.define('sample-element', SampleElement); 44 | ``` 45 | 46 | ## Contributing 47 | If you want to send a PR to this element, here are 48 | the instructions for running the tests and demo locally: 49 | 50 | ### Installation 51 | ```sh 52 | git clone https://github.com/PolymerElements/paper-input 53 | cd paper-input 54 | npm install 55 | npm install -g polymer-cli 56 | ``` 57 | 58 | ### Running the demo locally 59 | ```sh 60 | polymer serve --npm 61 | open http://127.0.0.1:/demo/ 62 | ``` 63 | 64 | ### Running the tests 65 | ```sh 66 | polymer test --npm 67 | ``` 68 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "paper-input", 3 | "license": "http://polymer.github.io/LICENSE.txt" 4 | } 5 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | paper-input demo 18 | 19 | 20 | 21 | 80 | 81 | 82 |
83 |

Inputs can have different types, and be disabled

84 | 85 | 92 | 93 | 94 |

Inputs can have character counters

95 | 96 | 100 | 101 | 102 |

The label can have different floating states

103 | 104 | 110 | 111 | 112 |

Inputs can validate automatically or on demand, and can have custom error messages

113 | 114 | 128 | 129 | 130 |

Inputs can have prefixes and suffixes

131 | 132 | 149 | 150 | 151 |

Inputs can have custom logic

152 | 153 | 160 | 161 | 162 |

You can use paper-input-container directly if you want more control 163 | over the input (for example, if you want to use this in a native form, etc.)

164 | 165 | 180 | 181 | 182 |

Inputs can be completely restyled

183 | 184 | 239 | 240 |
241 | 242 | 243 | -------------------------------------------------------------------------------- /demo/ssn-input.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | import '@polymer/iron-input/iron-input.js'; 13 | import '@polymer/iron-flex-layout/iron-flex-layout.js'; 14 | import './ssn-validator.js'; 15 | 16 | import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js'; 17 | import {DomModule} from '@polymer/polymer/lib/elements/dom-module.js'; 18 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 19 | import {html} from '@polymer/polymer/lib/utils/html-tag.js'; 20 | import {PolymerElement} from '@polymer/polymer/polymer-element.js'; 21 | 22 | Polymer({ 23 | is: 'ssn-input', 24 | _template: html` 25 | 47 | 48 | 49 |
50 | 51 | 52 | 53 | - 54 | 55 | 56 | 57 | - 58 | 59 | 60 | 61 |
62 | `, 63 | behaviors: [IronValidatableBehavior], 64 | 65 | properties: { 66 | value: {notify: true, type: String}, 67 | 68 | _ssn1: {type: String, value: ''}, 69 | 70 | _ssn2: {type: String, value: ''}, 71 | 72 | _ssn3: {type: String, value: ''}, 73 | 74 | validator: {type: String, value: 'ssn-validator'} 75 | }, 76 | 77 | observers: ['_computeValue(_ssn1,_ssn2,_ssn3)'], 78 | 79 | _computeValue: function(ssn1, ssn2, ssn3) { 80 | this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim(); 81 | } 82 | }); 83 | -------------------------------------------------------------------------------- /demo/ssn-validator.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {IronValidatorBehavior} from '@polymer/iron-validator-behavior/iron-validator-behavior.js'; 14 | import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js'; 15 | Polymer({ 16 | is: 'ssn-validator', 17 | 18 | behaviors: [IronValidatorBehavior], 19 | 20 | validate: function(value) { 21 | // this regex validates incomplete ssn's (by design) 22 | return !value || value.match(/^[0-9]{0,3}-[0-9]{0,2}-[0-9]{0,4}$/); 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /formatconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "style": { 3 | "ReflowComments": false 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "paper-input.html": { 4 | "convertedUrl": "paper-input.js", 5 | "exports": {} 6 | }, 7 | "paper-input-behavior.html": { 8 | "convertedUrl": "paper-input-behavior.js", 9 | "exports": { 10 | "Polymer.PaperInputHelper": "PaperInputHelper", 11 | "Polymer.PaperInputBehaviorImpl": "PaperInputBehaviorImpl", 12 | "Polymer.PaperInputBehavior": "PaperInputBehavior" 13 | } 14 | }, 15 | "paper-input-char-counter.html": { 16 | "convertedUrl": "paper-input-char-counter.js", 17 | "exports": {} 18 | }, 19 | "paper-input-addon-behavior.html": { 20 | "convertedUrl": "paper-input-addon-behavior.js", 21 | "exports": { 22 | "Polymer.PaperInputAddonBehavior": "PaperInputAddonBehavior" 23 | } 24 | }, 25 | "paper-input-container.html": { 26 | "convertedUrl": "paper-input-container.js", 27 | "exports": {} 28 | }, 29 | "paper-input-error.html": { 30 | "convertedUrl": "paper-input-error.js", 31 | "exports": {} 32 | }, 33 | "paper-textarea.html": { 34 | "convertedUrl": "paper-textarea.js", 35 | "exports": {} 36 | }, 37 | "all-imports.html": { 38 | "convertedUrl": "all-imports.html", 39 | "exports": {} 40 | }, 41 | "index.html": { 42 | "convertedUrl": "index.html", 43 | "exports": {} 44 | }, 45 | "demo/index.html": { 46 | "convertedUrl": "demo/index.html", 47 | "exports": {} 48 | }, 49 | "demo/ssn-input.html": { 50 | "convertedUrl": "demo/ssn-input.js", 51 | "exports": {} 52 | }, 53 | "demo/ssn-validator.html": { 54 | "convertedUrl": "demo/ssn-validator.js", 55 | "exports": {} 56 | }, 57 | "test/index.html": { 58 | "convertedUrl": "test/index.html", 59 | "exports": {} 60 | }, 61 | "test/paper-input-char-counter.html": { 62 | "convertedUrl": "test/paper-input-char-counter.html", 63 | "exports": {} 64 | }, 65 | "test/paper-input-container.html": { 66 | "convertedUrl": "test/paper-input-container.html", 67 | "exports": {} 68 | }, 69 | "test/letters-only.html": { 70 | "convertedUrl": "test/letters-only.js", 71 | "exports": {} 72 | }, 73 | "test/paper-input-error.html": { 74 | "convertedUrl": "test/paper-input-error.html", 75 | "exports": {} 76 | }, 77 | "test/paper-input.html": { 78 | "convertedUrl": "test/paper-input.html", 79 | "exports": {} 80 | }, 81 | "test/paper-textarea.html": { 82 | "convertedUrl": "test/paper-textarea.html", 83 | "exports": {} 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Material design text fields", 3 | "keywords": [ 4 | "web-components", 5 | "polymer", 6 | "input" 7 | ], 8 | "repository": { 9 | "type": "git", 10 | "url": "git://github.com/PolymerElements/paper-input.git" 11 | }, 12 | "homepage": "https://github.com/PolymerElements/paper-input", 13 | "name": "@polymer/paper-input", 14 | "license": "BSD-3-Clause", 15 | "devDependencies": { 16 | "webmat": "^0.2.0", 17 | "@polymer/iron-demo-helpers": "^3.0.1", 18 | "@polymer/iron-flex-layout": "^3.0.0-pre.26", 19 | "@polymer/iron-icon": "^3.0.0-pre.26", 20 | "@polymer/iron-icons": "^3.0.0-pre.26", 21 | "@polymer/iron-test-helpers": "^3.0.0-pre.26", 22 | "@polymer/iron-validator-behavior": "^3.0.0-pre.26", 23 | "@polymer/paper-icon-button": "^3.0.0-pre.26", 24 | "@polymer/test-fixture": "^4.0.1", 25 | "wct-browser-legacy": "^1.0.1", 26 | "@webcomponents/webcomponentsjs": "^2.0.0", 27 | "@polymer/gen-typescript-declarations": "^1.5.1" 28 | }, 29 | "scripts": { 30 | "format": "webmat", 31 | "generate-types": "gen-typescript-declarations --deleteExisting --outDir . --verify", 32 | "prepare": "npm run generate-types" 33 | }, 34 | "version": "3.2.1", 35 | "author": "The Polymer Authors", 36 | "dependencies": { 37 | "@polymer/polymer": "^3.0.0", 38 | "@polymer/iron-autogrow-textarea": "^3.0.0-pre.26", 39 | "@polymer/iron-behaviors": "^3.0.0-pre.26", 40 | "@polymer/iron-input": "^3.0.0-pre.26", 41 | "@polymer/paper-styles": "^3.0.0-pre.26", 42 | "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", 43 | "@polymer/iron-form-element-behavior": "^3.0.0-pre.26" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /paper-input-addon-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | /** 14 | * Use `Polymer.PaperInputAddonBehavior` to implement an add-on for 15 | * ``. A add-on appears below the input, and may display 16 | * information based on the input value and validity such as a character counter 17 | * or an error message. 18 | * @polymerBehavior 19 | */ 20 | export const PaperInputAddonBehavior = { 21 | attached: function() { 22 | this.fire('addon-attached'); 23 | }, 24 | 25 | /** 26 | * The function called by `` when the input value or 27 | * validity changes. 28 | * @param {{ 29 | * invalid: boolean, 30 | * inputElement: (Element|undefined), 31 | * value: (string|undefined) 32 | * }} state - 33 | * inputElement: The input element. 34 | * value: The input value. 35 | * invalid: True if the input value is invalid. 36 | */ 37 | update: function(state) {} 38 | 39 | }; 40 | -------------------------------------------------------------------------------- /paper-input-behavior.js: -------------------------------------------------------------------------------- 1 | /** 2 | @license 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 | This code may only be used under the BSD style license found at 5 | http://polymer.github.io/LICENSE.txt The complete set of authors may be found at 6 | http://polymer.github.io/AUTHORS.txt The complete set of contributors may be 7 | found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as 8 | part of the polymer project is also subject to an additional IP rights grant 9 | found at http://polymer.github.io/PATENTS.txt 10 | */ 11 | import '@polymer/polymer/polymer-legacy.js'; 12 | 13 | import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js'; 14 | import {IronControlState} from '@polymer/iron-behaviors/iron-control-state.js'; 15 | import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js'; 16 | import {PolymerElement} from '@polymer/polymer/polymer-element.js'; 17 | 18 | // Generate unique, monotonically increasing IDs for labels (needed by 19 | // aria-labelledby) and add-ons. 20 | export const PaperInputHelper = {}; 21 | 22 | PaperInputHelper.NextLabelID = 1; 23 | PaperInputHelper.NextAddonID = 1; 24 | PaperInputHelper.NextInputID = 1; 25 | 26 | /** 27 | * Use `PaperInputBehavior` to implement inputs with ``. 28 | * This behavior is implemented by ``. It exposes a number of 29 | * properties from `` and `` and 30 | * they should be bound in your template. 31 | * 32 | * The input element can be accessed by the `inputElement` property if you need 33 | * to access properties or methods that are not exposed. 34 | * @polymerBehavior PaperInputBehavior 35 | */ 36 | export const PaperInputBehaviorImpl = { 37 | 38 | properties: { 39 | /** 40 | * Fired when the input changes due to user interaction. 41 | * 42 | * @event change 43 | */ 44 | 45 | /** 46 | * The label for this input. If you're using PaperInputBehavior to 47 | * implement your own paper-input-like element, bind this to 48 | * `