diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-listbox')
13 files changed, 634 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-listbox/.bower.json b/catapult/third_party/polymer/components/paper-listbox/.bower.json new file mode 100644 index 00000000..8c86d3a7 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/.bower.json @@ -0,0 +1,44 @@ +{ + "name": "paper-listbox", + "version": "1.1.3", + "description": "Implements an accessible material design listbox", + "authors": "The Polymer Authors", + "keywords": [ + "web-components", + "polymer", + "listbox" + ], + "main": "paper-listbox.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-listbox" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-listbox", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", + "iron-collapse": "PolymerElements/iron-collapse#^1.0.0", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "paper-item": "PolymerElements/paper-item#^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.1.3", + "_resolution": { + "type": "version", + "tag": "v1.1.3", + "commit": "09a9bc25e8f5324c273fc9afbfe8c9b7071d7d8e" + }, + "_source": "https://github.com/polymerelements/paper-listbox.git", + "_target": "^1.1.2", + "_originalSource": "polymerelements/paper-listbox" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/paper-listbox/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/paper-listbox/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..f059c9e6 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/paper-listbox/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/paper-listbox/.gitignore b/catapult/third_party/polymer/components/paper-listbox/.gitignore new file mode 100644 index 00000000..fbe05fc9 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/catapult/third_party/polymer/components/paper-listbox/.travis.yml b/catapult/third_party/polymer/components/paper-listbox/.travis.yml new file mode 100644 index 00000000..d8202477 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/.travis.yml @@ -0,0 +1,22 @@ +language: node_js +sudo: required +before_script: +- npm install -g bower polymer-cli@next +- polymer install --variants +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable + sauce_connect: true +script: +- xvfb-run polymer test +- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; fi +dist: trusty +env: + global: + - secure: VOiCB6KJPLtfy4TKcsYrjA8gIbveySmK2umUnWIfMiKohgOHpJ6wHMD7cZ9qMxJCHQHDOXkreMhpGKJXnflL0XGOyZt+GyV8xIJ/nqQKu71gI4UCbMki3qzu9WheLJEHSgPpfDN19mKKfsHehsOVJl6q3cac1jZGDoH1uyp015zNAecj18wfnPPOc6NDoFQkYOJu9zAEMQaE9xxTInWXaOC4xjRr+UZrDZ7cMgvmgG8g5vrs4ihVBav5mrF6rrzxqD9CwERDV2tcQMhUfId/kt68X1QkruMpsoqEY/eHy0tD/pBKSNTYYwPUwtNEb+CF7kyi5TkH/UsDW/RHBNc6DmWqdrcipXyOfkWBYV457J24IFhphD31EHUycyu0C/T6UH88P+Hi6Z5QN0xZAbkQM7GEy2ihPWyR0osWsHkplZXfonbL8OfmSametEOeYs/1Lai5dw9kMpLiPt94XzqkDDG63h9WQlsb/eIBi9102rNg9j/DETbUTH1o5JEUO9305Oob0pZKX/3+TBPLXV18AnWzPgEZ6MWD8kJQdCIbKcrfudWlcEP33+5yGNJUkEwYJqcL5bbV2a65fK34X3dU15ZuJy71JkR4ztmqJ1z5sZO+auyqb0SosOf4mb8gpZAQaeIpJPW+golnqFl0dAr9LzomeGiVBYU2M0uTV829IUA= + - secure: Chwm3UcQTWbuxtQhBdF68R7Mokpka2FfhSCOVSTrub9ovu6CnzlEa4GBMQOwbrml3gX2ueV0zviqngoVaLpKzyIfd9DDHfx/aY4U6Nmbc0TMqz70JlnKMzdPMcoBtStrdm4X5niBuD55y3Ibmy/IBfpNT0QR8ARr/NMf29dnin7vUGlk/wXwjIdfnG8vvBiHn9QFBLPggeHbQwwILw7eoo6xcjDVWxQKN0C0oXYs8oDhN4C3hz8rdJr4cuFo9ue2NHDOSfKTWI6tnl3XgUBxqMN8elsQfx7E6BtvBmivyaYs3pm/D+3x/eOZuCT+1KtF93BVFwxw22tmEco40w4ewT89a78PXOIXzaADUqMUEiHZPshp71eLi13G7R7IiMT89xaji8qUY6SBwuHOEnz8BFzYTOUFYicfiifqn7sFlUJcI6KeNivYwEOu6LybARdLz0B/pygCZRy5d7csisLjK7Ik45VQdRRoGwr+29eRjz+nxYFBvdwxZO4McTU+4QL9+KgCqkogq1SGHya3j5h0IDu71QrluL7Gn/KK+9Udsmc57sdJ7wsk36xEmxu23PDEFYhTBedo5P58gAfM7ziNytm6hAhMCNhvCNOPRngz2Hk4Oijae7TTVS+4NIs7oDdGVY6O9gizWmnpIiE2o9Eo/BvorveEZZfzFQkGwZrbiWc= diff --git a/catapult/third_party/polymer/components/paper-listbox/CONTRIBUTING.md b/catapult/third_party/polymer/components/paper-listbox/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/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/paper-listbox/README.md b/catapult/third_party/polymer/components/paper-listbox/README.md new file mode 100644 index 00000000..247e1bad --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/README.md @@ -0,0 +1,70 @@ + +<!--- + +This README is automatically generated from the comments in these files: +paper-listbox.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/paper-listbox) + +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-listbox)_ + + +##<paper-listbox> + +Material design: [Menus](https://www.google.com/design/spec/components/menus.html) + +`<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item +is highlighted, and the selected item has bolded text. + +```html +<paper-listbox> + <paper-item>Item 1</paper-item> + <paper-item>Item 2</paper-item> +</paper-listbox> +``` + +An initial selection can be specified with the `selected` attribute. + +```html +<paper-listbox selected="0"> + <paper-item>Item 1</paper-item> + <paper-item>Item 2</paper-item> +</paper-listbox> +``` + +Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected, +and multiple item can be selected. + +```html +<paper-listbox multi> + <paper-item>Item 1</paper-item> + <paper-item>Item 2</paper-item> +</paper-listbox> +``` + +### Styling + +The following custom properties and mixins are available for styling: + +| Custom property | Description | Default | +| --- | --- | --- | +| `--paper-listbox-background-color` | Menu background color | `--primary-background-color` | +| `--paper-listbox-color` | Menu foreground color | `--primary-text-color` | +| `--paper-listbox` | Mixin applied to the listbox | `{}` | + +### Accessibility + +`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have +`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and +down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter +of a listbox item will also focus it. + + diff --git a/catapult/third_party/polymer/components/paper-listbox/bower.json b/catapult/third_party/polymer/components/paper-listbox/bower.json new file mode 100644 index 00000000..6a8be17b --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/bower.json @@ -0,0 +1,35 @@ +{ + "name": "paper-listbox", + "version": "1.1.3", + "description": "Implements an accessible material design listbox", + "authors": "The Polymer Authors", + "keywords": [ + "web-components", + "polymer", + "listbox" + ], + "main": "paper-listbox.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-listbox" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-listbox", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", + "iron-collapse": "PolymerElements/iron-collapse#^1.0.0", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "paper-item": "PolymerElements/paper-item#^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/paper-listbox/demo/index.html b/catapult/third_party/polymer/components/paper-listbox/demo/index.html new file mode 100644 index 00000000..c79e63e7 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/demo/index.html @@ -0,0 +1,93 @@ +<!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>paper-listbox demo</title> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../../paper-item/paper-item.html"> + <link rel="import" href="../../iron-collapse/iron-collapse.html"> + <link rel="import" href="../paper-listbox.html"> + <link rel="import" href="../../paper-styles/demo-pages.html"> + + <style is="custom-style"> + .horizontal-section { + padding: 0 !important; + } + + .avatar { + display: inline-block; + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; + background: #ccc; + } + + paper-item { + --paper-item: { + cursor: pointer; + }; + } + + .sublist { + padding-left: 20px; + padding-right: 20px; + + } + </style> +</head> +<body unresolved> + <div class="horizontal-section-container"> + <div> + <h4>Standard</h4> + <div class="horizontal-section"> + <paper-listbox> + <paper-item>Inbox</paper-item> + <paper-item>Starred</paper-item> + <paper-item>Sent mail</paper-item> + <paper-item>Drafts</paper-item> + </paper-listbox> + </div> + </div> + + <div> + <h4>Pre-selected</h4> + <div class="horizontal-section"> + <paper-listbox selected="0"> + <paper-item>Inbox</paper-item> + <paper-item disabled>Starred</paper-item> + <paper-item>Sent mail</paper-item> + <paper-item>Drafts</paper-item> + </paper-listbox> + </div> + </div> + + <div> + <h4>Multi-select</h4> + <div class="horizontal-section"> + <paper-listbox multi> + <paper-item>Bold</paper-item> + <paper-item>Italic</paper-item> + <paper-item>Underline</paper-item> + <paper-item>Strikethrough</paper-item> + </paper-listbox> + </div> + </div> + </div> +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-listbox/hero.svg b/catapult/third_party/polymer/components/paper-listbox/hero.svg new file mode 100755 index 00000000..eaa0fb55 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/hero.svg @@ -0,0 +1,35 @@ +<?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">
+ <g>
+ <circle cx="86.5" cy="39" r="4"/>
+ <path d="M138,44c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
+ c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,37.3,100,36,98,36v-2
+ c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
+ c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V44z"/>
+ <circle cx="86.5" cy="63" r="4"/>
+ <path d="M138,68c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
+ c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,61.3,100,60,98,60v-2
+ c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
+ c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V68z"/>
+ <circle cx="86.5" cy="88" r="4"/>
+ <path d="M138,93c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
+ c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,86.3,100,85,98,85v-2
+ c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
+ c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V93z"/>
+ <path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
+ </g>
+ <g id="ic_x5F_add_x0D_">
+ </g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/catapult/third_party/polymer/components/paper-listbox/index.html b/catapult/third_party/polymer/components/paper-listbox/index.html new file mode 100644 index 00000000..b9dad4bd --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/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>paper-listbox</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/paper-listbox/paper-listbox.html b/catapult/third_party/polymer/components/paper-listbox/paper-listbox.html new file mode 100644 index 00000000..15d6cf0e --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/paper-listbox.html @@ -0,0 +1,96 @@ +<!-- +@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-menu-behavior/iron-menu-behavior.html"> +<link rel="import" href="../paper-styles/default-theme.html"> + +<!-- +Material design: [Menus](https://www.google.com/design/spec/components/menus.html) + +`<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item +is highlighted, and the selected item has bolded text. + + <paper-listbox> + <paper-item>Item 1</paper-item> + <paper-item>Item 2</paper-item> + </paper-listbox> + +An initial selection can be specified with the `selected` attribute. + + <paper-listbox selected="0"> + <paper-item>Item 1</paper-item> + <paper-item>Item 2</paper-item> + </paper-listbox> + +Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected, +and multiple item can be selected. + + <paper-listbox multi> + <paper-item>Item 1</paper-item> + <paper-item>Item 2</paper-item> + </paper-listbox> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-listbox-background-color` | Menu background color | `--primary-background-color` +`--paper-listbox-color` | Menu foreground color | `--primary-text-color` +`--paper-listbox` | Mixin applied to the listbox | `{}` + +### Accessibility + +`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have +`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and +down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter +of a listbox item will also focus it. + +@group Paper Elements +@element paper-listbox +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="paper-listbox"> + <template> + <style> + :host { + display: block; + padding: 8px 0; + + background: var(--paper-listbox-background-color, --primary-background-color); + color: var(--paper-listbox-color, --primary-text-color); + + @apply(--paper-listbox); + } + </style> + + <content></content> + </template> + + <script> + (function() { + Polymer({ + is: 'paper-listbox', + + behaviors: [ + Polymer.IronMenuBehavior + ], + + hostAttributes: { + role: 'listbox' + } + }); + })(); + </script> +</dom-module> diff --git a/catapult/third_party/polymer/components/paper-listbox/test/index.html b/catapult/third_party/polymer/components/paper-listbox/test/index.html new file mode 100644 index 00000000..59a5e2b1 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/test/index.html @@ -0,0 +1,34 @@ +<!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>paper-listbox 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="../../web-component-tester/browser.js"></script> + + </head> + <body> + + <script> + + WCT.loadSuites([ + 'paper-listbox.html' + ]); + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-listbox/test/paper-listbox.html b/catapult/third_party/polymer/components/paper-listbox/test/paper-listbox.html new file mode 100644 index 00000000..58a4fa39 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-listbox/test/paper-listbox.html @@ -0,0 +1,64 @@ +<!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>paper-listbox 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="../paper-listbox.html"> + + </head> + <body> + + <test-fixture id="basic"> + <template> + <paper-listbox selected="0"> + <div role="option">item 1</div> + <div role="option">item 2</div> + <div role="option">item 3</div> + </paper-listbox> + </template> + </test-fixture> + + <script> + + suite('<paper-listbox>', function() { + var listbox; + + setup(function() { + listbox = fixture('basic'); + }); + + test('selected item has an appropriate className', function(done) { + Polymer.Base.async(function() { + assert(listbox.selectedItem.classList.contains('iron-selected')); + done(); + }, 1); + }); + + test('has listbox aria role', function() { + assert(listbox.getAttribute('role') === 'listbox'); + }); + + a11ySuite('basic'); + }); + + </script> + + </body> +</html> |
