diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-autogrow-textarea')
13 files changed, 1024 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/.bower.json b/catapult/third_party/polymer/components/iron-autogrow-textarea/.bower.json new file mode 100644 index 00000000..4d0f8b88 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/.bower.json @@ -0,0 +1,48 @@ +{ + "name": "iron-autogrow-textarea", + "version": "1.0.15", + "description": "A textarea element that automatically grows with input", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "input", + "textarea" + ], + "main": "iron-autogrow-textarea.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-autogrow-textarea.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/iron-autogrow-textarea", + "ignore": [], + "dependencies": { + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0", + "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "_release": "1.0.15", + "_resolution": { + "type": "version", + "tag": "v1.0.15", + "commit": "e75057555b347185f498d400127082fb1a812bda" + }, + "_source": "https://github.com/PolymerElements/iron-autogrow-textarea.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/iron-autogrow-textarea" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/iron-autogrow-textarea/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..0b70c29d --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/iron-autogrow-textarea/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-autogrow-textarea/.gitignore b/catapult/third_party/polymer/components/iron-autogrow-textarea/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/.travis.yml b/catapult/third_party/polymer/components/iron-autogrow-textarea/.travis.yml new file mode 100644 index 00000000..be2553d6 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/.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: >- + TqFz1Cdu4BtLCHYLFPES0q+6wPfCnj9bnTfven9LIU+gtek70FPDT3UlnviNwp5ob3o0sbLgsLWG5OkCsRHli+HCgPEVDazSrghfwaT9mL+h/DlM/PVB079VDdIKvZM6L7xEF0zPv7t26kljBRQcZJ81O3K7h1mNjeBj6sDXHzE= + - secure: >- + ihYM52Uu3H7FGU+x+f+hzMcWt00B7l6GZOtxzT1xYx4hb4E9/WwXYR5z9bqN+s5p10yf3FG64zbmMTuJeBvknDpSyBt/vKP+QBBZT0hxv05GifS38hiSoYT3HBxEpwhYdpjlsSJtIbKfYGR3xIXutRzRrRKSYigcrQNX83MGWFY= +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-autogrow-textarea/CONTRIBUTING.md b/catapult/third_party/polymer/components/iron-autogrow-textarea/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/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-autogrow-textarea/README.md b/catapult/third_party/polymer/components/iron-autogrow-textarea/README.md new file mode 100644 index 00000000..8a3363ca --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/README.md @@ -0,0 +1,41 @@ + +<!--- + +This README is automatically generated from the comments in these files: +iron-autogrow-textarea.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-autogrow-textarea) + +_[Demo and API docs](https://elements.polymer-project.org/elements/iron-autogrow-textarea)_ + + +##<iron-autogrow-textarea> + +`iron-autogrow-textarea` is an element containing a textarea that grows in height as more +lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will +never scroll. + +Example: + +```html +<iron-autogrow-textarea></iron-autogrow-textarea> +``` + +### Styling + +The following custom properties and mixins are available for styling: + +| Custom property | Description | Default | +| --- | --- | --- | +| `--iron-autogrow-textarea` | Mixin applied to the textarea | `{}` | +| `--iron-autogrow-textarea-placeholder` | Mixin applied to the textarea placeholder | `{}` | + + diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/bower.json b/catapult/third_party/polymer/components/iron-autogrow-textarea/bower.json new file mode 100644 index 00000000..3abdfa30 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/bower.json @@ -0,0 +1,39 @@ +{ + "name": "iron-autogrow-textarea", + "version": "1.0.15", + "description": "A textarea element that automatically grows with input", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "input", + "textarea" + ], + "main": "iron-autogrow-textarea.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-autogrow-textarea.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/iron-autogrow-textarea", + "ignore": [], + "dependencies": { + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0", + "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + } +} diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/demo/index.html b/catapult/third_party/polymer/components/iron-autogrow-textarea/demo/index.html new file mode 100644 index 00000000..525d90a4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/demo/index.html @@ -0,0 +1,111 @@ +<!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-autogrow-textarea demo</title> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../iron-autogrow-textarea.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + iron-autogrow-textarea { + display: block; + width: 200px; + margin: 5px 0; + } + + textarea { + width: 200px; + } + + .vertical-section { + box-sizing: border-box; + width: 400px; + margin: 0; + } + </style> + </head> + <body unresolved> + <div class="vertical-section-container centered"> + <h3>An iron-autogrow-textarea grows automatically as more text is entered</h3> + <demo-snippet class="centered-demo"> + <template> + <iron-autogrow-textarea></iron-autogrow-textarea> + </template> + </demo-snippet> + + <h3>The maximum height can be controlled either through the <i>max-rows</i> + property, or through a fixed max height</h3> + <demo-snippet class="centered-demo"> + <template> + <iron-autogrow-textarea max-rows="4" placeholder="scrolls after 4 rows"></iron-autogrow-textarea> + <iron-autogrow-textarea style="max-height: 50px;" placeholder="scrolls after 50px"></iron-autogrow-textarea> + </template> + </demo-snippet> + + <h3>The initial height can also be controlled using the <i>rows</i> property, + or through a fixed height</h3> + <demo-snippet class="centered-demo"> + <template> + <iron-autogrow-textarea rows="4" placeholder="start with 4 rows"></iron-autogrow-textarea> + <iron-autogrow-textarea style="height: 50px;"></iron-autogrow-textarea> + </template> + </demo-snippet> + + <h3>Example of updating the value imperatively</h3> + <!-- TODO: replace this with a demo-snippet when https://github.com/webcomponents/webcomponentsjs/issues/362 + is fixed --> + <div class="example"> + <template is="dom-bind"> + <div class="vertical-section"> + <iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea> + <br> + <code>bind-value</code>: <span>[[bindValue]]</span> + <p on-click="setValue"> + Imperatively changing <code>bind-value</code> will also update + <code>textarea.value</code>:<br> + <textarea></textarea> + <button value="bindValue">set</button> + <br><br> + + Imperatively updating <code>textarea.value</code> will update + the display, but not update <code>bind-value</code>:<br> + <textarea></textarea> + <button value="value">set</button> + </p> + </div> + </template> + </div> + </div> + <script> + var scope = document.querySelector('template[is=dom-bind]'); + + scope.setValue = function(event) { + if (!(event.target instanceof HTMLButtonElement)) { + return; + } + var inputValue = event.target.previousElementSibling.value; + if (event.target.value == "bindValue") { + document.querySelector('#a1').bindValue = inputValue; + } else { + document.querySelector('#a1').textarea.value = inputValue; + } + } + </script> + </body> +</html> diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/hero.svg b/catapult/third_party/polymer/components/iron-autogrow-textarea/hero.svg new file mode 100755 index 00000000..ef7e97e7 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/hero.svg @@ -0,0 +1,33 @@ +<?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">
+ <path d="M140,47c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+ c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+ c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+ s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+ c1.3,1.9,2.5,3.6,4.5,3.6V47z"/>
+ <path d="M140,65c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+ c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+ c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+ s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+ c1.3,1.9,2.5,3.6,4.5,3.6V65z"/>
+ <path d="M140,83c-3,0-4.7-2.4-6.2-4.4c-1.3-1.9-2.4-3.6-4.7-3.6c-2.3,0-3.4,1.7-4.7,3.6c-1.5,2.1-3.1,4.4-6.4,4.4
+ c-3.3,0-4.9-2.4-6.4-4.4c-1.3-1.9-2.5-3.6-4.8-3.6c-2.3,0-3.4,1.7-4.8,3.6c-1.5,2.1-3.1,4.4-6.4,4.4s-5.2-2.4-6.7-4.4
+ c-1.3-1.9-2-3.6-5-3.6v-2c4,0,5.2,2.4,6.7,4.4c1.3,1.9,2.6,3.6,4.9,3.6c2.3,0,3.5-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.5-4.4
+ s5,2.4,6.4,4.4c1.3,1.9,2.5,3.6,4.8,3.6c2.3,0,3.4-1.7,4.8-3.6c1.5-2.1,3.1-4.4,6.4-4.4c3.3,0,4.7,2.4,6.2,4.4
+ c1.3,1.9,2.5,3.6,4.5,3.6V83z"/>
+ <g id="ic_x5F_add_x0D_">
+ </g>
+ <path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/index.html b/catapult/third_party/polymer/components/iron-autogrow-textarea/index.html new file mode 100644 index 00000000..3be2964f --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/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-autogrow-textarea</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-autogrow-textarea/iron-autogrow-textarea.html b/catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html new file mode 100644 index 00000000..b70d6ae5 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html @@ -0,0 +1,373 @@ +<!-- +@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-behaviors/iron-control-state.html"> +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html"> +<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html"> + +<!-- +`iron-autogrow-textarea` is an element containing a textarea that grows in height as more +lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will +never scroll. + +Example: + + <iron-autogrow-textarea></iron-autogrow-textarea> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}` +`--iron-autogrow-textarea-placeholder` | Mixin applied to the textarea placeholder | `{}` + +@group Iron Elements +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="iron-autogrow-textarea"> + <template> + <style> + :host { + display: inline-block; + position: relative; + width: 400px; + border: 1px solid; + padding: 2px; + -moz-appearance: textarea; + -webkit-appearance: textarea; + overflow: hidden; + } + + .mirror-text { + visibility: hidden; + word-wrap: break-word; + } + + .fit { + @apply(--layout-fit); + } + + textarea { + position: relative; + outline: none; + border: none; + resize: none; + background: inherit; + color: inherit; + /* see comments in template */ + width: 100%; + height: 100%; + font-size: inherit; + font-family: inherit; + line-height: inherit; + text-align: inherit; + @apply(--iron-autogrow-textarea); + } + + ::content textarea:invalid { + box-shadow: none; + } + + textarea::-webkit-input-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + + textarea:-moz-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + + textarea::-moz-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + + textarea:-ms-input-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + </style> + + <!-- the mirror sizes the input/textarea so it grows with typing --> + <!-- use   instead of to allow this element to be used in XHTML --> + <div id="mirror" class="mirror-text" aria-hidden="true"> </div> + + <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff --> + <div class="textarea-container fit"> + <textarea id="textarea" + name$="[[name]]" + autocomplete$="[[autocomplete]]" + autofocus$="[[autofocus]]" + inputmode$="[[inputmode]]" + placeholder$="[[placeholder]]" + readonly$="[[readonly]]" + required$="[[required]]" + disabled$="[[disabled]]" + rows$="[[rows]]" + minlength$="[[minlength]]" + maxlength$="[[maxlength]]"></textarea> + </div> + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'iron-autogrow-textarea', + + behaviors: [ + Polymer.IronFormElementBehavior, + Polymer.IronValidatableBehavior, + Polymer.IronControlState + ], + + properties: { + + /** + * Use this property instead of `value` for two-way data binding. + * This property will be deprecated in the future. Use `value` instead. + * @type {string|number} + */ + bindValue: { + observer: '_bindValueChanged', + type: String + }, + + /** + * The initial number of rows. + * + * @attribute rows + * @type number + * @default 1 + */ + rows: { + type: Number, + value: 1, + observer: '_updateCached' + }, + + /** + * The maximum number of rows this element can grow to until it + * scrolls. 0 means no maximum. + * + * @attribute maxRows + * @type number + * @default 0 + */ + maxRows: { + type: Number, + value: 0, + observer: '_updateCached' + }, + + /** + * Bound to the textarea's `autocomplete` attribute. + */ + autocomplete: { + type: String, + value: 'off' + }, + + /** + * Bound to the textarea's `autofocus` attribute. + */ + autofocus: { + type: Boolean, + value: false + }, + + /** + * Bound to the textarea's `inputmode` attribute. + */ + inputmode: { + type: String + }, + + /** + * Bound to the textarea's `placeholder` attribute. + */ + placeholder: { + type: String + }, + + /** + * Bound to the textarea's `readonly` attribute. + */ + readonly: { + type: String + }, + + /** + * Set to true to mark the textarea as required. + */ + required: { + type: Boolean + }, + + /** + * The minimum length of the input value. + */ + minlength: { + type: Number + }, + + /** + * The maximum length of the input value. + */ + maxlength: { + type: Number + } + + }, + + listeners: { + 'input': '_onInput' + }, + + observers: [ + '_onValueChanged(value)' + ], + + /** + * Returns the underlying textarea. + * @type HTMLTextAreaElement + */ + get textarea() { + return this.$.textarea; + }, + + /** + * Returns textarea's selection start. + * @type Number + */ + get selectionStart() { + return this.$.textarea.selectionStart; + }, + + /** + * Returns textarea's selection end. + * @type Number + */ + get selectionEnd() { + return this.$.textarea.selectionEnd; + }, + + /** + * Sets the textarea's selection start. + */ + set selectionStart(value) { + this.$.textarea.selectionStart = value; + }, + + /** + * Sets the textarea's selection end. + */ + set selectionEnd(value) { + this.$.textarea.selectionEnd = value; + }, + + attached: function() { + /* iOS has an arbitrary left margin of 3px that isn't present + * in any other browser, and means that the paper-textarea's cursor + * overlaps the label. + * See https://github.com/PolymerElements/paper-input/issues/468. + */ + var IS_IOS = navigator.userAgent.match(/iP(?:[oa]d|hone)/); + if (IS_IOS) { + this.$.textarea.style.marginLeft = '-3px'; + } + }, + + /** + * Returns true if `value` is valid. The validator provided in `validator` + * will be used first, if it exists; otherwise, the `textarea`'s validity + * is used. + * @return {boolean} True if the value is valid. + */ + validate: function() { + // Empty, non-required input is valid. + if (!this.required && this.value == '') { + this.invalid = false; + return true; + } + + var valid; + if (this.hasValidator()) { + valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); + } else { + valid = this.$.textarea.validity.valid; + this.invalid = !valid; + } + this.fire('iron-input-validate'); + return valid; + }, + + _bindValueChanged: function() { + var textarea = this.textarea; + if (!textarea) { + return; + } + + // If the bindValue changed manually, then we need to also update + // the underlying textarea's value. Otherwise this change was probably + // generated from the _onInput handler, and the two values are already + // the same. + if (textarea.value !== this.bindValue) { + textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue; + } + + this.value = this.bindValue; + this.$.mirror.innerHTML = this._valueForMirror(); + // manually notify because we don't want to notify until after setting value + this.fire('bind-value-changed', {value: this.bindValue}); + }, + + _onInput: function(event) { + this.bindValue = event.path ? event.path[0].value : event.target.value; + }, + + _constrain: function(tokens) { + var _tokens; + tokens = tokens || ['']; + // Enforce the min and max heights for a multiline input to avoid measurement + if (this.maxRows > 0 && tokens.length > this.maxRows) { + _tokens = tokens.slice(0, this.maxRows); + } else { + _tokens = tokens.slice(0); + } + while (this.rows > 0 && _tokens.length < this.rows) { + _tokens.push(''); + } + // Use   instead of to allow this element to be used in XHTML. + return _tokens.join('<br/>') + ' '; + }, + + _valueForMirror: function() { + var input = this.textarea; + if (!input) { + return; + } + this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : ['']; + return this._constrain(this.tokens); + }, + + _updateCached: function() { + this.$.mirror.innerHTML = this._constrain(this.tokens); + }, + + _onValueChanged: function() { + this.bindValue = this.value; + } + }); +</script> diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/test/basic.html b/catapult/third_party/polymer/components/iron-autogrow-textarea/test/basic.html new file mode 100644 index 00000000..51f3abab --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/test/basic.html @@ -0,0 +1,190 @@ +<!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-autogrow-textarea 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> + <script src="../../iron-test-helpers/mock-interactions.js"></script> + <link rel="import" href="../iron-autogrow-textarea.html"> + + </head> + <body> + + <test-fixture id="basic"> + <template> + <iron-autogrow-textarea></iron-autogrow-textarea> + </template> + </test-fixture> + + <test-fixture id="has-bindValue"> + <template> + <iron-autogrow-textarea bind-value="foobar"></iron-autogrow-textarea> + </template> + </test-fixture> + + <test-fixture id="has-value"> + <template> + <iron-autogrow-textarea value="foobar"></iron-autogrow-textarea> + </template> + </test-fixture> + + <test-fixture id="rows"> + <template> + <iron-autogrow-textarea rows="3"></iron-autogrow-textarea> + </template> + </test-fixture> + + <script> + + suite('basic', function() { + + test('setting bindValue sets textarea value', function() { + var autogrow = fixture('basic'); + var textarea = autogrow.textarea; + + autogrow.bindValue = 'batman'; + assert.equal(textarea.value, autogrow.bindValue, 'textarea value equals to bindValue'); + }); + + test('can set an initial bindValue', function() { + var autogrow = fixture('has-bindValue'); + assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); + assert.equal(autogrow.value, 'foobar', 'value equals to initial bindValue'); + }); + + test('can set an initial value', function() { + var autogrow = fixture('has-value'); + assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); + assert.equal(autogrow.bindValue, 'foobar', 'textarea bindValue equals to initial value'); + }); + + test('can update the value', function() { + var autogrow = fixture('has-bindValue'); + assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); + autogrow.value = 'batman'; + assert.equal(autogrow.textarea.value, 'batman', 'textarea value is updated'); + assert.equal(autogrow.bindValue, 'batman', 'bindValue is updated'); + assert.equal(autogrow.value, 'batman', 'value is updated'); + }); + + test('can update the bindValue', function() { + var autogrow = fixture('has-bindValue'); + assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); + autogrow.bindValue = 'batman'; + assert.equal(autogrow.textarea.value, 'batman', 'textarea value is updated'); + assert.equal(autogrow.bindValue, 'batman', 'bindValue is updated'); + assert.equal(autogrow.value, 'batman', 'value is updated'); + }); + + test('can set an initial number of rows', function() { + var autogrow = fixture("rows"); + assert.equal(autogrow.textarea.rows, 3, 'textarea has rows=3'); + }); + + test('adding rows grows the textarea', function() { + var autogrow = fixture('basic'); + var initialHeight = autogrow.offsetHeight; + + autogrow.bindValue = 'batman\nand\nrobin'; + var finalHeight = autogrow.offsetHeight + assert.isTrue(finalHeight > initialHeight); + }); + + test('removing rows shrinks the textarea', function() { + var autogrow = fixture('basic'); + autogrow.bindValue = 'batman\nand\nrobin'; + var initialHeight = autogrow.offsetHeight; + + autogrow.bindValue = 'batman'; + var finalHeight = autogrow.offsetHeight + assert.isTrue(finalHeight < initialHeight); + }); + + test('an undefined bindValue is the empty string', function() { + var autogrow = fixture('basic'); + var initialHeight = autogrow.offsetHeight; + + autogrow.bindValue = 'batman\nand\nrobin'; + var finalHeight = autogrow.offsetHeight; + assert.isTrue(finalHeight > initialHeight); + + autogrow.bindValue = undefined; + assert.equal(autogrow.offsetHeight, initialHeight); + assert.equal(autogrow.textarea.value, ''); + }); + + test('textarea selection works', function() { + var autogrow = fixture('basic'); + var textarea = autogrow.textarea; + autogrow.bindValue = 'batman\nand\nrobin'; + + autogrow.selectionStart = 3; + autogrow.selectionEnd = 5; + + assert.equal(textarea.selectionStart, 3); + assert.equal(textarea.selectionEnd, 5); + }); + }); + + suite('focus/blur events', function() { + var input; + + setup(function() { + input = fixture('basic'); + }); + + test('focus/blur events fired on host element', function(done) { + var nFocusEvents = 0; + var nBlurEvents = 0; + input.addEventListener('focus', function() { + nFocusEvents += 1; + // setTimeout to wait for potentially more, erroneous events + setTimeout(function() { + assert.equal(nFocusEvents, 1, 'one focus event fired'); + MockInteractions.blur(input.textarea); + }); + }); + input.addEventListener('blur', function() { + nBlurEvents += 1; + // setTimeout to wait for potentially more, erroneous events + setTimeout(function() { + assert.equal(nBlurEvents, 1, 'one blur event fired'); + done(); + }); + }); + MockInteractions.focus(input.textarea); + }); + + }); + + suite('validation', function() { + test('a required textarea with no text is invalid', function() { + var input = fixture('basic'); + input.required = true; + assert.isFalse(input.validate()); + + input.bindValue = 'batman'; + assert.isTrue(input.validate()); + }); + }); + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/test/index.html b/catapult/third_party/polymer/components/iron-autogrow-textarea/test/index.html new file mode 100644 index 00000000..c4c52159 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/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-autogrow-textarea tests</title> + <script src="../../web-component-tester/browser.js"></script> + </head> + <body> + <script> + WCT.loadSuites([ + 'basic.html', + 'basic.html?dom=shadow' + ]); + </script> + + +</body></html> |
