mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
image in file list
This commit is contained in:
Mario Romano
57
react-app/bower_components/paper-dropdown-menu/.bower.json
vendored
Normal file
57
react-app/bower_components/paper-dropdown-menu/.bower.json
vendored
Normal file
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.1.3",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"dropdown",
|
||||
"select"
|
||||
],
|
||||
"main": "paper-dropdown-menu.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-dropdown-menu"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-dropdown-menu",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.1.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-input": "polymerelements/paper-input#^1.0.9",
|
||||
"paper-menu-button": "polymerelements/paper-menu-button#^1.0.0",
|
||||
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"paper-listbox": "polymerelements/paper-listbox#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"_release": "1.1.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.3",
|
||||
"commit": "1ca32e3eeb568f1ae356a205c1812744fdd65950"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-dropdown-menu.git",
|
||||
"_target": "~1.1.3",
|
||||
"_originalSource": "PolymerElements/paper-dropdown-menu",
|
||||
"_direct": true
|
||||
}
|
||||
1
react-app/bower_components/paper-dropdown-menu/.gitignore
vendored
Normal file
1
react-app/bower_components/paper-dropdown-menu/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
bower_components
|
||||
22
react-app/bower_components/paper-dropdown-menu/.travis.yml
vendored
Normal file
22
react-app/bower_components/paper-dropdown-menu/.travis.yml
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- bower install
|
||||
env:
|
||||
global:
|
||||
- secure: Uv6d6W9yI2Lbj7gYh73LCGHpwvvdE1sdqdElVsTN4LSYW4msyLweDD4/Irbk5Nw5bavxkXraYkN655p5VU1SBucTRFMYYtpTDA7xBT/HvXVP3+OgkrN+joVStHcRJXHJCoVtq+YalZ07Q0dltw/brtSUCHhZkcNMxHd/p0NGD1FBSgXC1oXv+MSLjPsSKujz8WuXbfnGXkW682rZhS8Mp5x4Y31AAuGl64gNypAYTdWZ9bKLjeAx4ZY1poiw4Bs1z+V9tO3EeD6YQb/CVpxOH+67FQ2cX0ybLXumNuJQFIzki+EzFwXxuKrJsD4gu8B4kJKVWuAS9wuWkNgGdjR2HVe3/5+nMe7RiLL/wD6yGvcD2ZjP8S0RrxbOeZ03IzadH1NT0FWGf0J55VQgt4XjN0j9bVTYMfX5Xyg5bQ/E1qPzHbyteMAw6LF4Wmh2PyWzKHfz1uPGiZP/3BOKj8EbGMKPBci2181kbotPDENMT/5lk24e944tr7hKWWatNxCmkeb+lJomAxGwDYt2+I4mrpHFz/r4w9qgNr3DelhHTkBw2lNKzGAL5I177IJvsvGnZaCpGuRDWfq2xLGg2aTa9J1iyvil8gQP4CVxffWbqpPxvOax3V5nfbnAUpyYWvCtVSpOV5ndZA9FlBIn/pOsXqIjdiOTmmeJwFoddpCcZ1Y=
|
||||
- secure: X0QrO1SQJs/ktfeJRfAzSTTAyLeMLu0NB5uj+hQCLPZ6QPacaOEaKmwx57CY2qsD9X34ijtXZHP8A3RWKXeQHt2H4CrQ/drWWzNjKMmaf42w8fzHNKkqlwsQV7Bh/g5qXnbzrkcsViOfDVkyPLIKumyG2NqZPrhjl8QDMGseiELB5oznBH/z8APY3lJVB1baT3Wxyzz7TdAYCpZGfdGjr/3bAx1qBNHJXeEMFJDYH4q2nKfqVhdNQx2VdB6nyxIoGKoDynPIGty2pVPOKrp6ctdJYFwtljbO1/AOh3uvkiZRB1dAwr8vE6xVBcUnpM8vseRhlipCSO6qcNTolF67DzlakjxNd8CUwnokJ1juxH9x4uUTAaUpaAHOFqL130Ogcqye6KJ4RavD9cs198dZE3Al9savUF8N2Q8Mpc04dc7AuMOglTTQqhIpLSdtFWsIptMUmhBS3hMgWfVAH7DEzR41SFwwXCN4ZvYC1ooCJK1+wL2po4kIHRaEHx+L6r+1+RKXQ+zBAG5VMtFtc0OoFtInTvyNqBcyHGkbxQaGdHN1FpBWo3wL5qcP37DtYbGe0iEtASk1w0MLlujQjHIY4smxVB/XmNRiOEkWHAtGxbBOu4NAHU5Qhxe22/w1fgPnO3YRoiNO4liJEYJNN1TpTYO3VolNq0IvdFKswj/p0vM=
|
||||
node_js: 4
|
||||
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"
|
||||
72
react-app/bower_components/paper-dropdown-menu/CONTRIBUTING.md
vendored
Normal file
72
react-app/bower_components/paper-dropdown-menu/CONTRIBUTING.md
vendored
Normal file
@@ -0,0 +1,72 @@
|
||||
|
||||
<!--
|
||||
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 :)
|
||||
-->
|
||||
# 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: [http://jsbin.com/cagaye](http://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 using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #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!
|
||||
68
react-app/bower_components/paper-dropdown-menu/README.md
vendored
Normal file
68
react-app/bower_components/paper-dropdown-menu/README.md
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
|
||||
<!---
|
||||
|
||||
This README is automatically generated from the comments in these files:
|
||||
paper-dropdown-menu.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-dropdown-menu)
|
||||
|
||||
_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-dropdown-menu)_
|
||||
|
||||
|
||||
##<paper-dropdown-menu>
|
||||
|
||||
Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
|
||||
|
||||
`paper-dropdown-menu` is similar to a native browser select element.
|
||||
`paper-dropdown-menu` works with selectable content. The currently selected
|
||||
item is displayed in the control. If no item is selected, the `label` is
|
||||
displayed instead.
|
||||
|
||||
The child element with the class `dropdown-content` will be used as the dropdown
|
||||
menu. It could be a `paper-menu` or element that triggers `iron-select` when
|
||||
selecting its children.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<paper-dropdown-menu label="Your favourite pastry">
|
||||
<paper-menu class="dropdown-content">
|
||||
<paper-item>Croissant</paper-item>
|
||||
<paper-item>Donut</paper-item>
|
||||
<paper-item>Financier</paper-item>
|
||||
<paper-item>Madeleine</paper-item>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
```
|
||||
|
||||
This example renders a dropdown menu with 4 options.
|
||||
|
||||
Similarly to using `iron-select`, `iron-deselect` events will cause the
|
||||
current selection of the `paper-dropdown-menu` to be cleared.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are also available for styling:
|
||||
|
||||
| Custom property | Description | Default |
|
||||
| --- | --- | --- |
|
||||
| `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}` |
|
||||
| `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}` |
|
||||
| `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}` |
|
||||
| `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}` |
|
||||
| `--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}` |
|
||||
| `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}` |
|
||||
|
||||
You can also use any of the `paper-input-container` and `paper-menu-button`
|
||||
style mixins and custom properties to style the internal input and menu button
|
||||
respectively.
|
||||
|
||||
|
||||
47
react-app/bower_components/paper-dropdown-menu/bower.json
vendored
Normal file
47
react-app/bower_components/paper-dropdown-menu/bower.json
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.1.3",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"dropdown",
|
||||
"select"
|
||||
],
|
||||
"main": "paper-dropdown-menu.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-dropdown-menu"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-dropdown-menu",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.1.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-input": "polymerelements/paper-input#^1.0.9",
|
||||
"paper-menu-button": "polymerelements/paper-menu-button#^1.0.0",
|
||||
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"paper-listbox": "polymerelements/paper-listbox#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
||||
217
react-app/bower_components/paper-dropdown-menu/demo/index.html
vendored
Normal file
217
react-app/bower_components/paper-dropdown-menu/demo/index.html
vendored
Normal file
@@ -0,0 +1,217 @@
|
||||
<!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.0, user-scalable=yes">
|
||||
|
||||
<title>paper-dropdown-menu 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="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../paper-listbox/paper-listbox.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../../paper-tabs/paper-tabs.html">
|
||||
<link rel="import" href="../paper-dropdown-menu.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
paper-tabs {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.vertical-section-container {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
paper-dropdown-menu {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>This is a plain paper-dropdown-menu</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-dropdown-menu label="Dinosaurs">
|
||||
<paper-listbox class="dropdown-content">
|
||||
<paper-item>allosaurus</paper-item>
|
||||
<paper-item>brontosaurus</paper-item>
|
||||
<paper-item>carcharodontosaurus</paper-item>
|
||||
<paper-item>diplodocus</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>You can pre-select a value using the <i>selected</i> attribute</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-dropdown-menu label="Dinosaurs">
|
||||
<paper-listbox class="dropdown-content" selected="1">
|
||||
<paper-item>allosaurus</paper-item>
|
||||
<paper-item>brontosaurus</paper-item>
|
||||
<paper-item>carcharodontosaurus</paper-item>
|
||||
<paper-item>diplodocus</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>You can change the direction in which the menu opens</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-dropdown-menu label="Upwards and to the left!" vertical-align="bottom" horizontal-align="left">
|
||||
<paper-listbox class="dropdown-content">
|
||||
<paper-item>allosaurus</paper-item>
|
||||
<paper-item>brontosaurus</paper-item>
|
||||
<paper-item>carcharodontosaurus</paper-item>
|
||||
<paper-item>diplodocus</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
|
||||
<h4>A paper-dropdown-menu can be disabled</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-dropdown-menu label="Disabled dinosaurs" disabled>
|
||||
<paper-listbox class="dropdown-content">
|
||||
<paper-item>allosaurus</paper-item>
|
||||
<paper-item>brontosaurus</paper-item>
|
||||
<paper-item>carcharodontosaurus</paper-item>
|
||||
<paper-item>diplodocus</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<!-- TODO(noms): enable this demo when the webcomponentsjs bug is fixed -->
|
||||
<!-- <h4>Here is an example of a long, scrolling menu, using a <i>dom-repeat</i></h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<template is="dom-bind" id="Demo">
|
||||
<paper-dropdown-menu label="Dinosaurs">
|
||||
<paper-listbox class="dropdown-content">
|
||||
<template is="dom-repeat" items='[[dinosaurs]]' as="dinosaur">
|
||||
<paper-item>[[dinosaur]]</paper-item>
|
||||
</template>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</template>
|
||||
</demo-snippet> -->
|
||||
|
||||
<h4>A paper-dropdown-menu can contain any kind of content, such as tabs</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-dropdown-menu label="Menu tabs!?">
|
||||
<paper-tabs class="dropdown-content">
|
||||
<paper-tab>cheddar</paper-tab>
|
||||
<paper-tab>stilton</paper-tab>
|
||||
<paper-tab>emmental</paper-tab>
|
||||
</paper-tabs>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>You can remove the ripple and the animations</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-dropdown-menu label="Dinosaurs" noink no-animations>
|
||||
<paper-listbox class="dropdown-content">
|
||||
<paper-item>allosaurus</paper-item>
|
||||
<paper-item>brontosaurus</paper-item>
|
||||
<paper-item>carcharodontosaurus</paper-item>
|
||||
<paper-item>diplodocus</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>You can style a paper-dropdown-menu using custom properties</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
paper-dropdown-menu.custom {
|
||||
--paper-input-container-label: {
|
||||
color: white;
|
||||
background-color: var(--paper-pink-500);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
};
|
||||
--paper-input-container-input: {
|
||||
color: var(--paper-indigo-500);
|
||||
font-style: normal;
|
||||
font-family: serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
/* no underline */
|
||||
--paper-input-container-underline: {
|
||||
display: none;
|
||||
};
|
||||
}
|
||||
</style>
|
||||
<paper-dropdown-menu class="custom" label="Custom" no-label-float>
|
||||
<paper-listbox class="dropdown-content">
|
||||
<paper-item>allosaurus</paper-item>
|
||||
<paper-item>brontosaurus</paper-item>
|
||||
<paper-item>carcharodontosaurus</paper-item>
|
||||
<paper-item>diplodocus</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('WebComponentsReady', function() {
|
||||
Demo.dinosaurs = [
|
||||
'allosaurus',
|
||||
'brontosaurus',
|
||||
'carcharodontosaurus',
|
||||
'diplodocus',
|
||||
'ekrixinatosaurus',
|
||||
'fukuiraptor',
|
||||
'gallimimus',
|
||||
'hadrosaurus',
|
||||
'iguanodon',
|
||||
'jainosaurus',
|
||||
'kritosaurus',
|
||||
'liaoceratops',
|
||||
'megalosaurus',
|
||||
'nemegtosaurus',
|
||||
'ornithomimus',
|
||||
'protoceratops',
|
||||
'quetecsaurus',
|
||||
'rajasaurus',
|
||||
'stegosaurus',
|
||||
'triceratops',
|
||||
'utahraptor',
|
||||
'vulcanodon',
|
||||
'wannanosaurus',
|
||||
'xenoceratops',
|
||||
'yandusaurus',
|
||||
'zephyrosaurus'
|
||||
];
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
24
react-app/bower_components/paper-dropdown-menu/index.html
vendored
Normal file
24
react-app/bower_components/paper-dropdown-menu/index.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<!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-dropdown-menu</title>
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
448
react-app/bower_components/paper-dropdown-menu/paper-dropdown-menu.html
vendored
Normal file
448
react-app/bower_components/paper-dropdown-menu/paper-dropdown-menu.html
vendored
Normal file
@@ -0,0 +1,448 @@
|
||||
<!--
|
||||
@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="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-input/paper-input.html">
|
||||
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-button-state.html">
|
||||
<link rel="import" href="../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
|
||||
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
|
||||
|
||||
<!--
|
||||
Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
|
||||
|
||||
`paper-dropdown-menu` is similar to a native browser select element.
|
||||
`paper-dropdown-menu` works with selectable content. The currently selected
|
||||
item is displayed in the control. If no item is selected, the `label` is
|
||||
displayed instead.
|
||||
|
||||
The child element with the class `dropdown-content` will be used as the dropdown
|
||||
menu. It could be a `paper-menu` or element that triggers `iron-select` when
|
||||
selecting its children.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-dropdown-menu label="Your favourite pastry">
|
||||
<paper-menu class="dropdown-content">
|
||||
<paper-item>Croissant</paper-item>
|
||||
<paper-item>Donut</paper-item>
|
||||
<paper-item>Financier</paper-item>
|
||||
<paper-item>Madeleine</paper-item>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
|
||||
This example renders a dropdown menu with 4 options.
|
||||
|
||||
Similarly to using `iron-select`, `iron-deselect` events will cause the
|
||||
current selection of the `paper-dropdown-menu` to be cleared.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are also available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
|
||||
`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
|
||||
`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
|
||||
`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
|
||||
`--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`
|
||||
`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
|
||||
|
||||
You can also use any of the `paper-input-container` and `paper-menu-button`
|
||||
style mixins and custom properties to style the internal input and menu button
|
||||
respectively.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-dropdown-menu
|
||||
@hero hero.svg
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-dropdown-menu">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
/* NOTE(cdata): Both values are needed, since some phones require the
|
||||
* value to be `transparent`.
|
||||
*/
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
--paper-input-container-input: {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
};
|
||||
|
||||
@apply(--paper-dropdown-menu);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
@apply(--paper-dropdown-menu-disabled);
|
||||
}
|
||||
|
||||
:host([noink]) paper-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([no-label-float]) paper-ripple {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
paper-ripple {
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
bottom: 8px;
|
||||
right: 0px;
|
||||
|
||||
@apply(--paper-dropdown-menu-ripple);
|
||||
}
|
||||
|
||||
paper-menu-button {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
@apply(--paper-dropdown-menu-button);
|
||||
}
|
||||
|
||||
paper-input {
|
||||
@apply(--paper-dropdown-menu-input);
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
color: var(--disabled-text-color);
|
||||
|
||||
@apply(--paper-dropdown-menu-icon);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- this div fulfills an a11y requirement for combobox, do not remove -->
|
||||
<div role="button"></div>
|
||||
<paper-menu-button
|
||||
id="menuButton"
|
||||
vertical-align="[[verticalAlign]]"
|
||||
horizontal-align="[[horizontalAlign]]"
|
||||
vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
|
||||
disabled="[[disabled]]"
|
||||
no-animations="[[noAnimations]]"
|
||||
on-iron-select="_onIronSelect"
|
||||
on-iron-deselect="_onIronDeselect"
|
||||
opened="{{opened}}">
|
||||
<div class="dropdown-trigger">
|
||||
<paper-ripple></paper-ripple>
|
||||
<!-- paper-input has type="text" for a11y, do not remove -->
|
||||
<paper-input
|
||||
type="text"
|
||||
invalid="[[invalid]]"
|
||||
readonly
|
||||
disabled="[[disabled]]"
|
||||
value="[[selectedItemLabel]]"
|
||||
placeholder="[[placeholder]]"
|
||||
error-message="[[errorMessage]]"
|
||||
always-float-label="[[alwaysFloatLabel]]"
|
||||
no-label-float="[[noLabelFloat]]"
|
||||
label="[[label]]">
|
||||
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
|
||||
</paper-input>
|
||||
</div>
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</paper-menu-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer({
|
||||
is: 'paper-dropdown-menu',
|
||||
|
||||
/**
|
||||
* Fired when the dropdown opens.
|
||||
*
|
||||
* @event paper-dropdown-open
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the dropdown closes.
|
||||
*
|
||||
* @event paper-dropdown-close
|
||||
*/
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronButtonState,
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronFormElementBehavior,
|
||||
Polymer.IronValidatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The derived "label" of the currently selected item. This value
|
||||
* is the `label` property on the selected item if set, or else the
|
||||
* trimmed text content of the selected item.
|
||||
*/
|
||||
selectedItemLabel: {
|
||||
type: String,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The last selected item. An item is selected if the dropdown menu has
|
||||
* a child with class `dropdown-content`, and that child triggers an
|
||||
* `iron-select` event with the selected `item` in the `detail`.
|
||||
*
|
||||
* @type {?Object}
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The value for this element that will be used when submitting in
|
||||
* a form. It is read only, and will always have the same value
|
||||
* as `selectedItemLabel`.
|
||||
*/
|
||||
value: {
|
||||
type: String,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The label for the dropdown.
|
||||
*/
|
||||
label: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The placeholder for the dropdown.
|
||||
*/
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The error message to display when invalid.
|
||||
*/
|
||||
errorMessage: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the dropdown is open. Otherwise, false.
|
||||
*/
|
||||
opened: {
|
||||
type: Boolean,
|
||||
notify: true,
|
||||
value: false,
|
||||
observer: '_openedChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable the floating label. Bind this to the
|
||||
* `<paper-input-container>`'s `noLabelFloat` property.
|
||||
*/
|
||||
noLabelFloat: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to always float the label. Bind this to the
|
||||
* `<paper-input-container>`'s `alwaysFloatLabel` property.
|
||||
*/
|
||||
alwaysFloatLabel: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
*/
|
||||
noAnimations: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the menu dropdown
|
||||
* horizontally relative to the dropdown trigger.
|
||||
*/
|
||||
horizontalAlign: {
|
||||
type: String,
|
||||
value: 'right'
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the menu dropdown
|
||||
* vertically relative to the dropdown trigger.
|
||||
*/
|
||||
verticalAlign: {
|
||||
type: String,
|
||||
value: 'top'
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'tap': '_onTap'
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'up down': 'open',
|
||||
'esc': 'close'
|
||||
},
|
||||
|
||||
hostAttributes: {
|
||||
role: 'combobox',
|
||||
'aria-autocomplete': 'none',
|
||||
'aria-haspopup': 'true'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_selectedItemChanged(selectedItem)'
|
||||
],
|
||||
|
||||
attached: function() {
|
||||
// NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
|
||||
// child will cause an `iron-select` event to fire while the element is
|
||||
// still in a `DocumentFragment`. This has the effect of causing
|
||||
// handlers not to fire. So, we double check this value on attached:
|
||||
var contentElement = this.contentElement;
|
||||
if (contentElement && contentElement.selectedItem) {
|
||||
this._setSelectedItem(contentElement.selectedItem);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The content element that is contained by the dropdown menu, if any.
|
||||
*/
|
||||
get contentElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the dropdown content.
|
||||
*/
|
||||
open: function() {
|
||||
this.$.menuButton.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the dropdown content.
|
||||
*/
|
||||
close: function() {
|
||||
this.$.menuButton.close();
|
||||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when `iron-select` is fired.
|
||||
*
|
||||
* @param {CustomEvent} event An `iron-select` event.
|
||||
*/
|
||||
_onIronSelect: function(event) {
|
||||
this._setSelectedItem(event.detail.item);
|
||||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when `iron-deselect` is fired.
|
||||
*
|
||||
* @param {CustomEvent} event An `iron-deselect` event.
|
||||
*/
|
||||
_onIronDeselect: function(event) {
|
||||
this._setSelectedItem(null);
|
||||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when the dropdown is tapped.
|
||||
*
|
||||
* @param {CustomEvent} event A tap event.
|
||||
*/
|
||||
_onTap: function(event) {
|
||||
if (Polymer.Gestures.findOriginalTarget(event) === this) {
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Compute the label for the dropdown given a selected item.
|
||||
*
|
||||
* @param {Element} selectedItem A selected Element item, with an
|
||||
* optional `label` property.
|
||||
*/
|
||||
_selectedItemChanged: function(selectedItem) {
|
||||
var value = '';
|
||||
if (!selectedItem) {
|
||||
value = '';
|
||||
} else {
|
||||
value = selectedItem.label || selectedItem.textContent.trim();
|
||||
}
|
||||
|
||||
this._setValue(value);
|
||||
this._setSelectedItemLabel(value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Compute the vertical offset of the menu based on the value of
|
||||
* `noLabelFloat`.
|
||||
*
|
||||
* @param {boolean} noLabelFloat True if the label should not float
|
||||
* above the input, otherwise false.
|
||||
*/
|
||||
_computeMenuVerticalOffset: function(noLabelFloat) {
|
||||
// NOTE(cdata): These numbers are somewhat magical because they are
|
||||
// derived from the metrics of elements internal to `paper-input`'s
|
||||
// template. The metrics will change depending on whether or not the
|
||||
// input has a floating label.
|
||||
return noLabelFloat ? -4 : 8;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns false if the element is required and does not have a selection,
|
||||
* and true otherwise.
|
||||
* @param {*=} _value Ignored.
|
||||
* @return {boolean} true if `required` is false, or if `required` is true
|
||||
* and the element has a valid selection.
|
||||
*/
|
||||
_getValidity: function(_value) {
|
||||
return this.disabled || !this.required || (this.required && !!this.value);
|
||||
},
|
||||
|
||||
_openedChanged: function() {
|
||||
var openState = this.opened ? 'true' : 'false';
|
||||
var e = this.contentElement;
|
||||
if (e) {
|
||||
e.setAttribute('aria-expanded', openState);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</dom-module>
|
||||
24
react-app/bower_components/paper-dropdown-menu/test/index.html
vendored
Normal file
24
react-app/bower_components/paper-dropdown-menu/test/index.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<!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-dropdown-menu tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'paper-dropdown-menu.html',
|
||||
'paper-dropdown-menu.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
181
react-app/bower_components/paper-dropdown-menu/test/paper-dropdown-menu.html
vendored
Normal file
181
react-app/bower_components/paper-dropdown-menu/test/paper-dropdown-menu.html
vendored
Normal file
@@ -0,0 +1,181 @@
|
||||
<!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">
|
||||
<title>paper-dropdown-menu basic tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-listbox/paper-listbox.html">
|
||||
<link rel="import" href="../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-dropdown-menu.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialDropdownMenu">
|
||||
<template>
|
||||
<paper-dropdown-menu no-animations>
|
||||
<paper-listbox class="dropdown-content">
|
||||
<paper-item>Foo</paper-item>
|
||||
<paper-item>Bar</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="PreselectedDropdownMenu">
|
||||
<template>
|
||||
<paper-dropdown-menu no-animations>
|
||||
<paper-listbox class="dropdown-content" selected="1">
|
||||
<paper-item>Foo</paper-item>
|
||||
<paper-item>Bar</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('<paper-dropdown-menu>', function() {
|
||||
var dropdownMenu;
|
||||
|
||||
setup(function() {
|
||||
dropdownMenu = fixture('TrivialDropdownMenu');
|
||||
content = Polymer.dom(dropdownMenu).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
test('opens when tapped', function(done) {
|
||||
var contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(contentRect.width).to.be.equal(0);
|
||||
expect(contentRect.height).to.be.equal(0);
|
||||
|
||||
MockInteractions.tap(dropdownMenu);
|
||||
expect(dropdownMenu.opened).to.be.equal(true);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(dropdownMenu.opened).to.be.equal(true);
|
||||
|
||||
expect(contentRect.width).to.be.greaterThan(0);
|
||||
expect(contentRect.height).to.be.greaterThan(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('closes when an item is activated', function(done) {
|
||||
MockInteractions.tap(dropdownMenu);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
var firstItem = Polymer.dom(content).querySelector('paper-item');
|
||||
|
||||
MockInteractions.tap(firstItem);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(dropdownMenu.opened).to.be.equal(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('sets selected item to the activated item', function(done) {
|
||||
MockInteractions.tap(dropdownMenu);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
var firstItem = Polymer.dom(content).querySelector('paper-item');
|
||||
|
||||
MockInteractions.tap(firstItem);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(dropdownMenu.selectedItem).to.be.equal(firstItem);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when a value is preselected', function() {
|
||||
setup(function() {
|
||||
dropdownMenu = fixture('PreselectedDropdownMenu');
|
||||
});
|
||||
|
||||
test('the input area shows the correct selection', function() {
|
||||
Polymer.dom.flush();
|
||||
var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
|
||||
expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
|
||||
});
|
||||
});
|
||||
|
||||
suite('deselecting', function() {
|
||||
var menu;
|
||||
|
||||
setup(function() {
|
||||
dropdownMenu = fixture('PreselectedDropdownMenu');
|
||||
menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
test('an `iron-deselect` event clears the current selection', function() {
|
||||
Polymer.dom.flush();
|
||||
menu.selected = null;
|
||||
expect(dropdownMenu.selectedItem).to.be.equal(null);
|
||||
});
|
||||
});
|
||||
|
||||
suite('validation', function() {
|
||||
test('a non required dropdown is valid regardless of its selection', function() {
|
||||
var dropdownMenu = fixture('TrivialDropdownMenu');
|
||||
menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content');
|
||||
|
||||
// no selection.
|
||||
expect(dropdownMenu.validate()).to.be.true;
|
||||
expect(dropdownMenu.invalid).to.be.false;
|
||||
expect(dropdownMenu.value).to.not.be.ok;
|
||||
|
||||
// some selection.
|
||||
menu.selected = 1;
|
||||
expect(dropdownMenu.validate()).to.be.true;
|
||||
expect(dropdownMenu.invalid).to.be.false;
|
||||
expect(dropdownMenu.value).to.be.equal('Bar');
|
||||
});
|
||||
|
||||
test('a required dropdown is invalid without a selection', function() {
|
||||
var dropdownMenu = fixture('TrivialDropdownMenu');
|
||||
dropdownMenu.required = true;
|
||||
|
||||
// no selection.
|
||||
expect(dropdownMenu.validate()).to.be.false;
|
||||
expect(dropdownMenu.invalid).to.be.true;
|
||||
expect(dropdownMenu.value).to.not.be.ok;
|
||||
});
|
||||
|
||||
test('a required dropdown is valid with a selection', function() {
|
||||
var dropdownMenu = fixture('PreselectedDropdownMenu');
|
||||
Polymer.dom.flush();
|
||||
|
||||
dropdownMenu.required = true;
|
||||
|
||||
expect(dropdownMenu.validate()).to.be.true;
|
||||
expect(dropdownMenu.invalid).to.be.false;
|
||||
expect(dropdownMenu.value).to.be.equal('Bar');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user