diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-input')
15 files changed, 1087 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-input/.bower.json b/catapult/third_party/polymer/components/iron-input/.bower.json new file mode 100644 index 00000000..403a62d4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/.bower.json @@ -0,0 +1,44 @@ +{ + "name": "iron-input", + "version": "1.0.11", + "description": "An input element with data binding", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "input" + ], + "main": "iron-input.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-input.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/iron-input", + "ignore": [], + "dependencies": { + "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0", + "polymer": "Polymer/polymer#^1.0.0" + }, + "devDependencies": { + "paper-styles": "polymerelements/paper-styles#^1.0.2", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "_release": "1.0.11", + "_resolution": { + "type": "version", + "tag": "v1.0.11", + "commit": "9b991e43576064227053ab73eeb351be60d82a40" + }, + "_source": "https://github.com/PolymerElements/iron-input.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/iron-input" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/iron-input/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/iron-input/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..b01fd73e --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/iron-input/CONTRIBUTING.md#filing-issues --> +### Description +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> + +### Expected outcome + +<!-- Example: The page stays the same color. --> + +### Actual outcome + +<!-- Example: The page turns pink. --> + +### Live Demo +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> + +### Steps to reproduce + +<!-- Example +1. Put a `paper-foo` element in the page. +2. Open the page in a web browser. +3. Click the `paper-foo` element. +--> + +### Browsers Affected +<!-- Check all that apply --> +- [ ] Chrome +- [ ] Firefox +- [ ] Safari 9 +- [ ] Safari 8 +- [ ] Safari 7 +- [ ] Edge +- [ ] IE 11 +- [ ] IE 10 diff --git a/catapult/third_party/polymer/components/iron-input/.gitignore b/catapult/third_party/polymer/components/iron-input/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/iron-input/.travis.yml b/catapult/third_party/polymer/components/iron-input/.travis.yml new file mode 100644 index 00000000..b29bddcd --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/.travis.yml @@ -0,0 +1,24 @@ +language: node_js +sudo: required +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +env: + global: + - secure: >- + NQunbnhwQFU/uRU1Dz8VIYXpG9cq4wEldllph4To1XJqEa21pG1Q9+a/M4+aOkW6iIPRgfI/bQ6mPWaRnE/KGrsusARqgYDytq42dJpSoLOiLYbVdRKIHI3t9cr1MiZKUxwz/vpOsKcMK8dW5RmR6zJ8k5roijNAmjFRlzfGOKY= + - secure: >- + Ge6m7GkHZdhv6Ru7uNEVS9jUQ15CsCa9ZBcBQncA/w8zEmDfM2tzcTUJ54piZ03mo9qnWOcV4IcJj78nXsyKcYZHiGpe63w5R5NWhO3uZ72C48SMPbWQxL0Kyt6PN4u7i5MNCMJ3+a+ttyet8H9qTzxAwOLVSFCUr3On1/B1APU= +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +script: + - xvfb-run wct + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' +dist: trusty diff --git a/catapult/third_party/polymer/components/iron-input/CONTRIBUTING.md b/catapult/third_party/polymer/components/iron-input/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/CONTRIBUTING.md @@ -0,0 +1,77 @@ +<!-- +This file is autogenerated based on +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md + +If you edit that file, it will get updated everywhere else. +If you edit this file, your changes will get overridden :) + +You can however override the jsbin link with one that's customized to this +specific element: + +jsbin=https://jsbin.com/cagaye/edit?html,output +--> + +# Polymer Elements +## Guide for Contributors + +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: + +### Filing Issues + +**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: + + 1. **Who will use the feature?** _“As someone filling out a form…”_ + 2. **When will they use the feature?** _“When I enter an invalid value…”_ + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ + +**If you are filing an issue to report a bug**, please provide: + + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: + + ```markdown + The `paper-foo` element causes the page to turn pink when clicked. + + ## Expected outcome + + The page stays the same color. + + ## Actual outcome + + The page turns pink. + + ## Steps to reproduce + + 1. Put a `paper-foo` element in the page. + 2. Open the page in a web browser. + 3. Click the `paper-foo` element. + ``` + + 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). + + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. + +### Submitting Pull Requests + +**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. + +When submitting pull requests, please provide: + + 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: + + ```markdown + (For a single issue) + Fixes #20 + + (For multiple issues) + Fixes #32, fixes #40 + ``` + + 2. **A succinct description of the design** used to fix any related issues. For example: + + ```markdown + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. + ``` + + 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. + +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! diff --git a/catapult/third_party/polymer/components/iron-input/README.md b/catapult/third_party/polymer/components/iron-input/README.md new file mode 100644 index 00000000..24563f47 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/README.md @@ -0,0 +1,59 @@ + +<!--- + +This README is automatically generated from the comments in these files: +iron-input.html + +Edit those files, and our readme bot will duplicate them over here! +Edit this file, and the bot will squash your changes :) + +The bot does some handling of markdown. Please file a bug if it does the wrong +thing! https://github.com/PolymerLabs/tedium/issues + +--> + +[](https://travis-ci.org/PolymerElements/iron-input) + +_[Demo and API docs](https://elements.polymer-project.org/elements/iron-input)_ + + +## <iron-input> + +`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior` +to `<input>`. + +### Two-way binding + +By default you can only get notified of changes to an `input`'s `value` due to user input: + +```html +<input value="{{myValue::input}}"> +``` + +`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used +for two-way data binding. `bind-value` will notify if it is changed either by user input or by script. + +```html +<input is="iron-input" bind-value="{{myValue}}"> +``` + +### Custom validators + +You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`. + +```html +<input is="iron-input" validator="my-custom-validator"> +``` + +### Stopping invalid input + +It may be desirable to only allow users to enter certain characters. You can use the +`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature +is separate from validation, and `allowed-pattern` does not affect how the input is validated. + +```html +<!-- only allow characters that match [0-9] --> +<input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> +``` + + diff --git a/catapult/third_party/polymer/components/iron-input/bower.json b/catapult/third_party/polymer/components/iron-input/bower.json new file mode 100644 index 00000000..8428fd13 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/bower.json @@ -0,0 +1,35 @@ +{ + "name": "iron-input", + "version": "1.0.11", + "description": "An input element with data binding", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "input" + ], + "main": "iron-input.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-input.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/iron-input", + "ignore": [], + "dependencies": { + "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0", + "polymer": "Polymer/polymer#^1.0.0" + }, + "devDependencies": { + "paper-styles": "polymerelements/paper-styles#^1.0.2", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + } +} diff --git a/catapult/third_party/polymer/components/iron-input/demo/index.html b/catapult/third_party/polymer/components/iron-input/demo/index.html new file mode 100644 index 00000000..59d37b2d --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/demo/index.html @@ -0,0 +1,87 @@ +<!doctype html> +<!-- +@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 +--> +<html> +<head> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <title>iron-input demo</title> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../iron-input.html"> + <link rel="import" href="../../paper-styles/color.html"> + <link rel="import" href="../../paper-styles/demo-pages.html"> + <link rel="import" href="../../paper-styles/typography.html"> + + <style is="custom-style"> + + .vertical-section { + @apply(--paper-font-body1); + + line-height: 40px; + } + + code { + color: var(--google-grey-700); + } + + input[is=iron-input] { + width: 100%; + box-sizing: border-box; + } + + input, button { + font-size: 20px; + padding: 0.2em; + } + + </style> +</head> +<body> + + <div class="vertical-section vertical-section-container centered"> + <template is="dom-bind"> + <p> + <input is="iron-input" bind-value="{{bindValue}}" value="{{value::input}}"> + <br> + bind to <code>bind-value</code>: <b>[[bindValue]]</b> + <br> + bind to <code>value::input</code>: <b>{{value}}</b> + </p> + + <p on-click="setValue"> + set bind-value to: <input> <button is="paper-button" value="bindValue">set</button> + <br> + set value to: <input> <button value="value">set</button> + </p> + </template> + <p>only allows these characters: + <code>!@#0123456789</code></p> + <input is="iron-input" allowed-pattern="[!@#0-9]" prevent-invalid-input> + + </div> + + <script> + var scope = document.querySelector('template[is=dom-bind]'); + + scope.setValue = function(event) { + if (!(event.target instanceof HTMLButtonElement)) { + return; + } + document.querySelector('input[is=iron-input]')[event.target.value] = event.target.previousElementSibling.value; + } + </script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-input/hero.svg b/catapult/third_party/polymer/components/iron-input/hero.svg new file mode 100755 index 00000000..e72ebd30 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/hero.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+ <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+ <rect x="49" y="53" width="2" height="18"/>
+ <path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
+ <g id="ic_x5F_add_x0D_">
+ </g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/catapult/third_party/polymer/components/iron-input/index.html b/catapult/third_party/polymer/components/iron-input/index.html new file mode 100644 index 00000000..ca0dac06 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/index.html @@ -0,0 +1,30 @@ +<!doctype html> +<!-- +@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 +--> +<html> +<head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + + <title>iron-input</title> + + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../polymer/polymer.html"> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page></iron-component-page> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-input/iron-input.html b/catapult/third_party/polymer/components/iron-input/iron-input.html new file mode 100644 index 00000000..ddb5277e --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/iron-input.html @@ -0,0 +1,311 @@ +<!-- +@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-a11y-announcer/iron-a11y-announcer.html"> +<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html"> + +<script> + +/* +`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior` +to `<input>`. + +### Two-way binding + +By default you can only get notified of changes to an `input`'s `value` due to user input: + + <input value="{{myValue::input}}"> + +`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used +for two-way data binding. `bind-value` will notify if it is changed either by user input or by script. + + <input is="iron-input" bind-value="{{myValue}}"> + +### Custom validators + +You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`. + + <input is="iron-input" validator="my-custom-validator"> + +### Stopping invalid input + +It may be desirable to only allow users to enter certain characters. You can use the +`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature +is separate from validation, and `allowed-pattern` does not affect how the input is validated. + + <!-- only allow characters that match [0-9] --> + <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> + +@hero hero.svg +@demo demo/index.html +*/ + + Polymer({ + + is: 'iron-input', + + extends: 'input', + + behaviors: [ + Polymer.IronValidatableBehavior + ], + + properties: { + + /** + * Use this property instead of `value` for two-way data binding. + */ + bindValue: { + observer: '_bindValueChanged', + type: String + }, + + /** + * Set to true to prevent the user from entering invalid input. If `allowedPattern` is set, + * any character typed by the user will be matched against that pattern, and rejected if it's not a match. + * Pasted input will have each character checked individually; if any character + * doesn't match `allowedPattern`, the entire pasted string will be rejected. + * If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`). + */ + preventInvalidInput: { + type: Boolean + }, + + /** + * Regular expression that list the characters allowed as input. + * This pattern represents the allowed characters for the field; as the user inputs text, + * each individual character will be checked against the pattern (rather than checking + * the entire value as a whole). The recommended format should be a list of allowed characters; + * for example, `[a-zA-Z0-9.+-!;:]` + */ + allowedPattern: { + type: String, + observer: "_allowedPatternChanged" + }, + + _previousValidInput: { + type: String, + value: '' + }, + + _patternAlreadyChecked: { + type: Boolean, + value: false + } + + }, + + listeners: { + 'input': '_onInput', + 'keypress': '_onKeypress' + }, + + registered: function() { + // Feature detect whether we need to patch dispatchEvent (i.e. on FF and IE). + if (!this._canDispatchEventOnDisabled()) { + this._origDispatchEvent = this.dispatchEvent; + this.dispatchEvent = this._dispatchEventFirefoxIE; + } + }, + + created: function() { + Polymer.IronA11yAnnouncer.requestAvailability(); + }, + + _canDispatchEventOnDisabled: function() { + var input = document.createElement('input'); + var canDispatch = false; + input.disabled = true; + + input.addEventListener('feature-check-dispatch-event', function() { + canDispatch = true; + }); + + try { + input.dispatchEvent(new Event('feature-check-dispatch-event')); + } catch(e) {} + + return canDispatch; + }, + + /** + * @this {Node} + * @param {!Event} event + * @return {boolean} + */ + _dispatchEventFirefoxIE: function(event) { + // Due to Firefox bug, events fired on disabled form controls can throw + // errors; furthermore, neither IE nor Firefox will actually dispatch + // events from disabled form controls; as such, we toggle disable around + // the dispatch to allow notifying properties to notify + // See issue #47 for details + var disabled = this.disabled; + this.disabled = false; + var defaultPrevented = this._origDispatchEvent(event); + this.disabled = disabled; + return defaultPrevented + }, + + get _patternRegExp() { + var pattern; + if (this.allowedPattern) { + pattern = new RegExp(this.allowedPattern); + } else { + switch (this.type) { + case 'number': + pattern = /[0-9.,e-]/; + break; + } + } + return pattern; + }, + + ready: function() { + this.bindValue = this.value; + }, + + /** + * @suppress {checkTypes} + */ + _bindValueChanged: function() { + if (this.value !== this.bindValue) { + this.value = !(this.bindValue || this.bindValue === 0 || this.bindValue === false) ? '' : this.bindValue; + } + // manually notify because we don't want to notify until after setting value + this.fire('bind-value-changed', {value: this.bindValue}); + }, + + _allowedPatternChanged: function() { + // Force to prevent invalid input when an `allowed-pattern` is set + this.preventInvalidInput = this.allowedPattern ? true : false; + }, + + _onInput: function() { + // Need to validate each of the characters pasted if they haven't + // been validated inside `_onKeypress` already. + if (this.preventInvalidInput && !this._patternAlreadyChecked) { + var valid = this._checkPatternValidity(); + if (!valid) { + this._announceInvalidCharacter('Invalid string of characters not entered.'); + this.value = this._previousValidInput; + } + } + + this.bindValue = this.value; + this._previousValidInput = this.value; + this._patternAlreadyChecked = false; + }, + + _isPrintable: function(event) { + // What a control/printable character is varies wildly based on the browser. + // - most control characters (arrows, backspace) do not send a `keypress` event + // in Chrome, but the *do* on Firefox + // - in Firefox, when they do send a `keypress` event, control chars have + // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) + // - printable characters always send a keypress event. + // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the keyCode + // always matches the charCode. + // None of this makes any sense. + + // For these keys, ASCII code == browser keycode. + var anyNonPrintable = + (event.keyCode == 8) || // backspace + (event.keyCode == 9) || // tab + (event.keyCode == 13) || // enter + (event.keyCode == 27); // escape + + // For these keys, make sure it's a browser keycode and not an ASCII code. + var mozNonPrintable = + (event.keyCode == 19) || // pause + (event.keyCode == 20) || // caps lock + (event.keyCode == 45) || // insert + (event.keyCode == 46) || // delete + (event.keyCode == 144) || // num lock + (event.keyCode == 145) || // scroll lock + (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, home, arrows + (event.keyCode > 111 && event.keyCode < 124); // fn keys + + return !anyNonPrintable && !(event.charCode == 0 && mozNonPrintable); + }, + + _onKeypress: function(event) { + if (!this.preventInvalidInput && this.type !== 'number') { + return; + } + var regexp = this._patternRegExp; + if (!regexp) { + return; + } + + // Handle special keys and backspace + if (event.metaKey || event.ctrlKey || event.altKey) + return; + + // Check the pattern either here or in `_onInput`, but not in both. + this._patternAlreadyChecked = true; + + var thisChar = String.fromCharCode(event.charCode); + if (this._isPrintable(event) && !regexp.test(thisChar)) { + event.preventDefault(); + this._announceInvalidCharacter('Invalid character ' + thisChar + ' not entered.'); + } + }, + + _checkPatternValidity: function() { + var regexp = this._patternRegExp; + if (!regexp) { + return true; + } + for (var i = 0; i < this.value.length; i++) { + if (!regexp.test(this.value[i])) { + return false; + } + } + return true; + }, + + /** + * Returns true if `value` is valid. The validator provided in `validator` will be used first, + * then any constraints. + * @return {boolean} True if the value is valid. + */ + validate: function() { + // First, check what the browser thinks. Some inputs (like type=number) + // behave weirdly and will set the value to "" if something invalid is + // entered, but will set the validity correctly. + var valid = this.checkValidity(); + + // Only do extra checking if the browser thought this was valid. + if (valid) { + // Empty, required input is invalid + if (this.required && this.value === '') { + valid = false; + } else if (this.hasValidator()) { + valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); + } + } + + this.invalid = !valid; + this.fire('iron-input-validate'); + return valid; + }, + + _announceInvalidCharacter: function(message) { + this.fire('iron-announce', { text: message }); + } + }); + + /* + The `iron-input-validate` event is fired whenever `validate()` is called. + @event iron-input-validate + */ + +</script> diff --git a/catapult/third_party/polymer/components/iron-input/test/disabled-input.html b/catapult/third_party/polymer/components/iron-input/test/disabled-input.html new file mode 100644 index 00000000..06503e59 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/test/disabled-input.html @@ -0,0 +1,32 @@ +<!-- +@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"> + +<dom-module id="disabled-input"> + <template> + <input is="iron-input" bind-value="{{myValue}}" invalid="{{myInvalid}}" disabled id="input"> + </template> +</dom-module> + +<script> + Polymer({ + is: 'disabled-input', + properties: { + myValue: { + value: 'foo' + }, + + myInvalid: { + value: false + } + } + }); +</script> diff --git a/catapult/third_party/polymer/components/iron-input/test/index.html b/catapult/third_party/polymer/components/iron-input/test/index.html new file mode 100644 index 00000000..0e3c37ca --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/test/index.html @@ -0,0 +1,24 @@ +<!DOCTYPE html><!-- +@license +Copyright (c) 2014 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 +--><html><head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + <title>iron-input tests</title> + <script src="../../web-component-tester/browser.js"></script> +</head> +<body> + <script> + WCT.loadSuites([ + 'iron-input.html', + 'iron-input.html?dom=shadow' + ]); + </script> + + +</body></html> diff --git a/catapult/third_party/polymer/components/iron-input/test/iron-input.html b/catapult/third_party/polymer/components/iron-input/test/iron-input.html new file mode 100644 index 00000000..fddf9ae9 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/test/iron-input.html @@ -0,0 +1,281 @@ +<!doctype html> +<!-- +@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 +--> +<html> +<head> + + <title>iron-input tests</title> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + <link rel="import" href="../iron-input.html"> + <link rel="import" href="letters-only.html"> + <link rel="import" href="disabled-input.html"> + +</head> +<body> + + <test-fixture id="basic"> + <template> + <input is="iron-input"> + </template> + </test-fixture> + + <test-fixture id="has-value"> + <template> + <input is="iron-input" value="foobar"> + </template> + </test-fixture> + + <test-fixture id="has-bind-value"> + <template> + <input is="iron-input" bind-value="foobar"> + </template> + </test-fixture> + + <test-fixture id="prevent-invalid-input"> + <template> + <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> + </template> + </test-fixture> + + <test-fixture id="prevent-invalid-input-with-pattern"> + <template> + <input is="iron-input" prevent-invalid-input pattern="[a-zA-Z]{3}[0-9]*"> + </template> + </test-fixture> + + <test-fixture id="prevent-invalid-input-has-value"> + <template> + <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" value="foobar"> + </template> + </test-fixture> + + <test-fixture id="prevent-invalid-input-has-bind-value"> + <template> + <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" bind-value="foobar"> + </template> + </test-fixture> + + <test-fixture id="automatically-prevent-invalid-input-if-allowed-pattern"> + <template> + <input is="iron-input" allowed-pattern="[0-9]"> + </template> + </test-fixture> + + <test-fixture id="no-validator"> + <template> + <input is="iron-input" pattern="[a-zA-Z]{3}[0-9]*"> + </template> + </test-fixture> + + <test-fixture id="has-validator"> + <template> + <letters-only></letters-only> + <input is="iron-input" validator="letters-only" pattern="[0-9]*"> + </template> + </test-fixture> + + <test-fixture id="native-and-custom-validator"> + <template> + <letters-only></letters-only> + <input is="iron-input" validator="letters-only" pattern="[a-c]*"> + </template> + </test-fixture> + + <template is="dom-bind" id="bind-to-object"> + <input is="iron-input" id="input" bind-value="{{foo}}"> + </template> + + <test-fixture id="disabled-input"> + <template> + <disabled-input></disabled-input> + </template> + </test-fixture> + + <script> + + suite('basic', function() { + + test('setting bindValue sets value', function() { + var input = fixture('basic'); + input.bindValue = 'foobar'; + assert.equal(input.value, input.bindValue, 'value equals to bindValue'); + }); + + test('changing the input triggers an event', function(done) { + var input = fixture('basic'); + + input.addEventListener('bind-value-changed', function(value) { + assert.equal(input.value, input.bindValue, 'value equals to bindValue'); + done(); + }); + + input.value = "foo"; + input._onInput(); + }); + + test('default value sets bindValue', function() { + var input = fixture('has-value'); + assert.equal(input.bindValue, input.value, 'bindValue equals value'); + }); + + test('default bindValue sets value', function() { + var input = fixture('has-bind-value'); + assert.equal(input.value, input.bindValue, 'value equals to bindValue'); + }); + + test('set bindValue to undefined', function() { + var scope = document.getElementById('bind-to-object'); + scope.foo = undefined; + assert.ok(!scope.$.input.bindValue, 'bindValue is falsy'); + assert.ok(!scope.$.input.value, 'value is falsy'); + }); + + test('can validate using a complex regex', function() { + var input = fixture('no-validator'); + input.value = '123'; + input.validate(); + assert.isTrue(input.invalid, 'input is invalid'); + input.value = 'foo'; + input.validate(); + assert.isFalse(input.invalid, 'input is valid'); + input.value = 'foo123'; + input.validate(); + assert.isFalse(input.invalid, 'input is valid'); + }); + + test('set bindValue to false', function() { + var scope = document.getElementById('bind-to-object'); + scope.foo = false; + assert.isFalse(scope.$.input.bindValue); + assert.equal(scope.$.input.value, 'false'); + }); + + test('validator used instead of constraints api if provided', function() { + var input = fixture('has-validator')[1]; + input.value = '123'; + input.validate(); + assert.isTrue(input.invalid, 'input is invalid'); + }); + + test('prevent invalid input works in _onInput', function() { + var input = fixture('prevent-invalid-input'); + input.value = '123'; + input._onInput(); + assert.equal(input.bindValue, '123'); + + input.value = '123foo'; + input._onInput(); + assert.equal(input.bindValue, '123'); + }); + + test('inputs can be validated', function() { + var input = fixture('prevent-invalid-input-with-pattern'); + input.value = '123'; + input._onInput(); + assert.equal(input.bindValue, '123'); + input.validate(); + assert.isTrue(input.invalid, 'input is invalid'); + + input.value = 'foo'; + input._onInput(); + assert.equal(input.bindValue, 'foo'); + input.validate(); + assert.isFalse(input.invalid, 'input is valid'); + + input.value = 'foo123'; + input._onInput(); + assert.equal(input.bindValue, 'foo123'); + input.validate(); + assert.isFalse(input.invalid, 'input is valid'); + }); + + test('prevent invalid input works automatically when allowed pattern is set', function() { + var input = fixture('automatically-prevent-invalid-input-if-allowed-pattern'); + input.value = '123'; + input._onInput(); + assert.equal(input.bindValue, '123'); + + input.value = '123foo'; + input._onInput(); + assert.equal(input.bindValue, '123'); + + input.allowedPattern = ''; + input.value = '#123foo BAR!'; + input._onInput(); + assert.equal(input.bindValue, '#123foo BAR!'); + + input.allowedPattern = '[a-zA-Z]'; + input.value = 'foo'; + input._onInput(); + input.value = 'bar123'; + input._onInput(); + assert.equal(input.bindValue, 'foo'); + }); + + test('disabled input doesn\'t throw on Firefox', function() { + var el = fixture('disabled-input'); + var input = el.$.input; + + assert.equal(input.bindValue, 'foo'); + + assert.isFalse(el.myInvalid); + assert.isTrue(input.disabled); + }); + + test('browser validation beats custom validation', function() { + var input = fixture('native-and-custom-validator')[1]; + // The input allows any letters, but the browser only allows one + // of [abc]. + input.value = 'aaaa'; + input.validate(); + assert.isFalse(input.invalid, 'input is valid'); + + // The validator allows this, but the browser doesn't. + input.value = 'zzz'; + input.validate(); + assert.isTrue(input.invalid, 'input is invalid'); + }); + }); + + suite('a11y', function() { + test('announces invalid characters when _onInput is called', function() { + var input = fixture('prevent-invalid-input'); + input.addEventListener('iron-announce', function(event) { + assert.equal(event.detail.text, 'Invalid string of characters not entered.'); + }); + input.value = 'foo'; + input._onInput(); + }); + + test('announces invalid characters on keypress', function() { + var input = fixture('prevent-invalid-input'); + input.addEventListener('iron-announce', function(event) { + assert.equal(event.detail.text, 'Invalid character a not entered.'); + }); + + // Simulate key press event. + var event = new CustomEvent('keypress', { + bubbles: true, + cancelable: true + }); + event.charCode = 97 /* a */; + input.dispatchEvent(event); + }); + }); + </script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-input/test/letters-only.html b/catapult/third_party/polymer/components/iron-input/test/letters-only.html new file mode 100644 index 00000000..bfc301c3 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-input/test/letters-only.html @@ -0,0 +1,30 @@ +<!-- +@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-validator-behavior/iron-validator-behavior.html"> + +<script> + + Polymer({ + + is: 'letters-only', + + behaviors: [ + Polymer.IronValidatorBehavior + ], + + validate: function(value) { + return !value || value.match(/^[a-zA-Z]*$/) !== null; + } + + }); + +</script> |
