merge from dev
This commit is contained in:
Luke Pulverenti
parent
1c8f02ce0f
commit
33b01d778c
911 changed files with 34157 additions and 57125 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.0.15",
|
||||
"version": "1.1.3",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -32,23 +32,25 @@
|
|||
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-input": "PolymerElements/iron-input#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.15",
|
||||
"_release": "1.1.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.15",
|
||||
"commit": "34d19454e0ea13b1a809add8c87fba128fbc9940"
|
||||
"tag": "v1.1.3",
|
||||
"commit": "f070288446f9e78fbe16b032ddb429a8e8015ee7"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-input.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
22
dashboard-ui/bower_components/paper-input/.travis.yml
vendored
Normal file
22
dashboard-ui/bower_components/paper-input/.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: TcDqx+YdNCa/DRQjdKt9dgYCPgXtPl2EZ7Nnv6bRvbcmUjW2eSr7Zwb+e0fO8wgwms/RqFaVx+u5jo7D1lnC4Ybcg1HKiMOvCyzY36MjF9oB/VKSEUC+p4tMVQfw1IZ/RmK3dD+WEWaoT/EKmNfctz7v5kR+yk2lZo44D9I7rrc=
|
||||
- secure: nh65tvhnhOrK05qKvDJKMV7Jm9yiCoG1wFkP3ZnqOHix9Ny+KmcTa41Bl6NXQdvYaMTFtzS7lMZX5cqIziyKyGWHVN30LzGMHJNz12fhcMi3nJ84trhQGcu/9qR9yDv16q9ouGlcz1VxnDOHaRAHnIKjLIbhN3aJtMtZBbnWihA=
|
||||
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
dashboard-ui/bower_components/paper-input/CONTRIBUTING.md
vendored
Normal file
72
dashboard-ui/bower_components/paper-input/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!
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.0.15",
|
||||
"version": "1.1.3",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -32,16 +32,18 @@
|
|||
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-input": "PolymerElements/iron-input#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
<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">
|
||||
|
|
@ -19,113 +18,130 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../paper-input.html">
|
||||
<link rel="import" href="../paper-input-container.html">
|
||||
<link rel="import" href="../paper-input-error.html">
|
||||
<link rel="import" href="../paper-input-char-counter.html">
|
||||
<link rel="import" href="../paper-textarea.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-input-container.html">
|
||||
<link rel="import" href="../paper-input-error.html">
|
||||
<link rel="import" href="../paper-input.html">
|
||||
<link rel="import" href="../paper-textarea.html">
|
||||
<link rel="import" href="ssn-input.html">
|
||||
|
||||
<link rel="stylesheet" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
padding: 40px;
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
paper-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
paper-input.short {
|
||||
width: 200px;
|
||||
demo-snippet.horizontal {
|
||||
--demo-snippet-demo: {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
@apply(--layout-wrap);
|
||||
}
|
||||
}
|
||||
demo-snippet.horizontal paper-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
#inputForValidation {
|
||||
display: inline-block;
|
||||
width: calc(100% - 75px);
|
||||
}
|
||||
|
||||
.vertical-section-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
paper-icon-button {
|
||||
color: var(--paper-red-300);
|
||||
--paper-icon-button-ink-color: var(--paper-red-a100);
|
||||
--iron-icon-width: 15px;
|
||||
--iron-icon-height: 15px;
|
||||
width: 23px; /* 15px + 2*4px for padding */
|
||||
height: 23px;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
iron-icon {
|
||||
padding-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
<div class="vertical-section-container centered">
|
||||
<h3>Inputs can have different types, and be disabled</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-input label="text input"></paper-input>
|
||||
<paper-textarea label="autoresizing textarea input"></paper-textarea>
|
||||
<paper-input label="password input" type="password"></paper-input>
|
||||
<paper-input label="disabled input" disabled></paper-input>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<div class="vertical center-justified layout">
|
||||
<h4>Text input</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input label="label"></paper-input>
|
||||
<h3>Inputs can have character counters</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-input label="simple character counter" char-counter></paper-input>
|
||||
<paper-input label="input with at most 10 characters" char-counter maxlength="10"></paper-input>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<paper-input label="search" type="search" placeholder="type='search' should use placeholders instead of labels" autosave="test" results="5"></paper-input>
|
||||
<h3>The label can have different floating states</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-input label="this label floats after typing"></paper-input>
|
||||
<paper-input label="this label is always floating" always-float-label></paper-input>
|
||||
<paper-input label="this label never floats" no-label-float></paper-input>
|
||||
<paper-input label="this label is always floating" always-float-label placeholder="placeholder text"></paper-input>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<paper-input label="password" type="password"></paper-input>
|
||||
<h3>Inputs can validate automatically or on demand, and can have custom error messages</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
|
||||
<paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
|
||||
<paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
|
||||
<paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
|
||||
<button onclick="validate()">Validate!</button>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<paper-input no-label-float label="label (no-label-float)"></paper-input>
|
||||
<h3>Inputs can have prefixes and suffixes</h3>
|
||||
<demo-snippet class="horizontal">
|
||||
<template>
|
||||
<paper-input class="short" label="total" type="number">
|
||||
<div prefix>$</div>
|
||||
</paper-input>
|
||||
<paper-input class="short" label="username" id="inputWithButton">
|
||||
<iron-icon icon="mail" prefix></iron-icon>
|
||||
<div suffix>@email.com</div>
|
||||
<paper-icon-button suffix onclick="clearInput()"
|
||||
icon="clear" alt="clear" title="clear">
|
||||
</paper-icon-button>
|
||||
</paper-input>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<paper-input label="disabled" disabled></paper-input>
|
||||
</div>
|
||||
|
||||
<h4>Text area</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-textarea label="textarea label"></paper-textarea>
|
||||
</div>
|
||||
|
||||
<h4>Validation</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input label="input validates on blur (required, auto-validate)" required auto-validate error-message="needs some text!"></paper-input>
|
||||
|
||||
<paper-input label="only type letters (auto-validate)" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
|
||||
|
||||
<paper-input id="inputForValidation" required label="only type letters (no auto validate)" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
|
||||
<br>
|
||||
<button onclick="validate()">Validate!</button>
|
||||
</div>
|
||||
|
||||
<h4>Character counter</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input label="label" char-counter></paper-input>
|
||||
|
||||
<paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
|
||||
|
||||
<paper-textarea label="textarea" char-counter></paper-textarea>
|
||||
|
||||
<paper-textarea label="textarea with maxlength" char-counter maxlength="10"></paper-textarea>
|
||||
|
||||
<paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"></paper-textarea>
|
||||
</div>
|
||||
|
||||
<h4>Prefixes and Suffixes</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input class="short" label="total" type="number">
|
||||
<div prefix>$</div>
|
||||
</paper-input>
|
||||
|
||||
<paper-input class="short" label="username">
|
||||
<div suffix>@email.com</div>
|
||||
</paper-input>
|
||||
|
||||
<paper-input class="short" label="icons and buttons" id="inputWithButton">
|
||||
<iron-icon icon="search" prefix></iron-icon>
|
||||
<paper-icon-button suffix onclick="clearInput()"
|
||||
icon="clear" alt="clear" title="clear" tabindex="0">
|
||||
</paper-icon-button>
|
||||
</paper-input>
|
||||
</div>
|
||||
|
||||
<h4>Complex inputs</h4>
|
||||
<div class="vertical-section">
|
||||
<template is="dom-bind">
|
||||
<h3>Inputs can have custom logic</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-input-container always-float-label auto-validate attr-for-value="value">
|
||||
<label>Social Security Number</label>
|
||||
<ssn-input class="paper-input-input"></ssn-input>
|
||||
<paper-input-error>SSN invalid!</paper-input-error>
|
||||
</paper-input-container>
|
||||
</template>
|
||||
</div>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function validate() {
|
||||
document.getElementById('inputForValidation').validate();
|
||||
|
|
|
|||
|
|
@ -7,11 +7,12 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
|
|||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
|
||||
* behavior is implemented by `<paper-input>`. It exposes a number of properties from
|
||||
|
|
@ -23,7 +24,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
* @polymerBehavior Polymer.PaperInputBehavior
|
||||
*/
|
||||
Polymer.PaperInputBehaviorImpl = {
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Fired when the input changes due to user interaction.
|
||||
|
|
@ -32,7 +32,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
*/
|
||||
|
||||
/**
|
||||
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
|
||||
* The label for this input. Bind this to `<label>`'s content and `hidden` property, e.g.
|
||||
* `<label hidden$="[[!label]]">[[label]]</label>` in your `template`
|
||||
*/
|
||||
label: {
|
||||
type: String
|
||||
|
|
@ -91,7 +92,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* The datalist of the input (if any). This should match the id of an existing <datalist>. Bind this
|
||||
* The datalist of the input (if any). This should match the id of an existing `<datalist>`. Bind this
|
||||
* to the `<input is="iron-input">`'s `list` property.
|
||||
*/
|
||||
list: {
|
||||
|
|
@ -287,27 +288,55 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `results` property, , used with type=search.
|
||||
* Bind this to the `<input is="iron-input">`'s `results` property, used with type=search.
|
||||
*/
|
||||
results: {
|
||||
type: Number
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `accept` property, used with type=file.
|
||||
*/
|
||||
accept: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `multiple` property, used with type=file.
|
||||
*/
|
||||
multiple: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
_ariaDescribedBy: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
|
||||
_ariaLabelledBy: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'addon-attached': '_onAddonAttached'
|
||||
'addon-attached': '_onAddonAttached',
|
||||
'focus': '_onFocus'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_focusedControlStateChanged(focused)'
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'shift+tab:keydown': '_onShiftTabDown'
|
||||
},
|
||||
|
||||
hostAttributes: {
|
||||
tabindex: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a reference to the input element.
|
||||
*/
|
||||
|
|
@ -315,6 +344,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
return this.$.input;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a reference to the focusable element.
|
||||
*/
|
||||
get _focusableElement() {
|
||||
return this.inputElement;
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._updateAriaLabelledBy();
|
||||
},
|
||||
|
|
@ -348,6 +384,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
return this.inputElement.validate();
|
||||
},
|
||||
|
||||
/**
|
||||
* Forward focus to inputElement
|
||||
*/
|
||||
_onFocus: function() {
|
||||
if (!this._shiftTabPressed) {
|
||||
this._focusableElement.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler that is called when a shift+tab keypress is detected by the menu.
|
||||
*
|
||||
* @param {CustomEvent} event A key combination event.
|
||||
*/
|
||||
_onShiftTabDown: function(event) {
|
||||
var oldTabIndex = this.getAttribute('tabindex');
|
||||
this._shiftTabPressed = true;
|
||||
this.setAttribute('tabindex', '-1');
|
||||
this.async(function() {
|
||||
this.setAttribute('tabindex', oldTabIndex);
|
||||
this._shiftTabPressed = false;
|
||||
}, 1);
|
||||
},
|
||||
|
||||
/**
|
||||
* If `autoValidate` is true, then validates the element.
|
||||
*/
|
||||
|
|
@ -428,10 +488,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/** @polymerBehavior */
|
||||
Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
|
||||
|
||||
Polymer.PaperInputBehavior = [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.PaperInputBehaviorImpl
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="paper-input-addon-behavior.html">
|
||||
|
||||
<!--
|
||||
|
|
@ -29,9 +29,9 @@ Custom property | Description | Default
|
|||
----------------|-------------|----------
|
||||
`--paper-input-char-counter` | Mixin applied to the element | `{}`
|
||||
-->
|
||||
|
||||
<dom-module id="paper-input-char-counter">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
|
@ -40,10 +40,13 @@ Custom property | Description | Default
|
|||
@apply(--paper-font-caption);
|
||||
@apply(--paper-input-char-counter);
|
||||
}
|
||||
|
||||
:host-context([dir="rtl"]) {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span>[[_charCounterStr]]</span>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
|
||||
<!--
|
||||
`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
|
||||
|
|
@ -75,22 +78,23 @@ Custom property | Description | Default
|
|||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
|
||||
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
|
||||
`--paper-input-container` | Mixin applied to the container | `{}`
|
||||
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
|
||||
`--paper-input-container-label` | Mixin applied to the label | `{}`
|
||||
`--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}`
|
||||
`--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}`
|
||||
`--paper-input-container-input` | Mixin applied to the input | `{}`
|
||||
`--paper-input-container-input-disabled` | Mixin applied to the input when it's disabled | `{}`
|
||||
`--paper-input-container-prefix` | Mixin applied to the input prefix | `{}`
|
||||
`--paper-input-container-suffix` | Mixin applied to the input suffix | `{}`
|
||||
`--paper-input-container-underline` | Mixin applied to the underline | `{}`
|
||||
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
|
||||
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
|
||||
`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
|
||||
`--paper-input-prefix` | Mixin applied to the input prefix | `{}`
|
||||
`--paper-input-suffix` | Mixin applied to the input suffix | `{}`
|
||||
|
||||
This element is `display:block` by default, but you can set the `inline` attribute to make it
|
||||
`display:inline-block`.
|
||||
-->
|
||||
|
||||
<dom-module id="paper-input-container">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
|
|
@ -119,15 +123,15 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.focused-line {
|
||||
height: 2px;
|
||||
@apply(--layout-fit);
|
||||
|
||||
background: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
height: 2px;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
transform: scale3d(0,1,1);
|
||||
|
||||
background: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
|
||||
@apply(--paper-input-container-underline-focus);
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +146,6 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
.underline.is-invalid .focused-line {
|
||||
background: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
|
|
@ -152,6 +155,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.unfocused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
height: 1px;
|
||||
background: var(--paper-input-container-color, --secondary-text-color);
|
||||
|
||||
|
|
@ -172,9 +177,10 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.input-content {
|
||||
position: relative;
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end);
|
||||
@apply(--layout-center);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-content ::content label,
|
||||
|
|
@ -186,6 +192,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
font: inherit;
|
||||
color: var(--paper-input-container-color, --secondary-text-color);
|
||||
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-label);
|
||||
}
|
||||
|
|
@ -194,12 +201,27 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.input-content.label-is-floating ::content .paper-input-label {
|
||||
-webkit-transform: translateY(-75%) scale(0.75);
|
||||
transform: translateY(-75%) scale(0.75);
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
transition: transform 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
||||
original space now available */
|
||||
width: 133%;
|
||||
|
||||
@apply(--paper-transition-easing);
|
||||
@apply(--paper-input-container-label-floating);
|
||||
}
|
||||
|
||||
:host-context([dir="rtl"]) .input-content.label-is-floating ::content label,
|
||||
:host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label {
|
||||
/* TODO(noms): Figure out why leaving the width at 133% before the animation
|
||||
* actually makes
|
||||
* it wider on the right side, not left side, as you would expect in RTL */
|
||||
width: 100%;
|
||||
-webkit-transform-origin: right top;
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
.input-content.label-is-highlighted ::content label,
|
||||
|
|
@ -232,6 +254,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
border: none;
|
||||
color: var(--paper-input-container-input-color, --primary-text-color);
|
||||
-webkit-appearance: none;
|
||||
text-align: inherit;
|
||||
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-input);
|
||||
|
|
@ -256,6 +279,10 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
resize: none;
|
||||
}
|
||||
|
||||
.add-on-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add-on-content.is-invalid ::content * {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
}
|
||||
|
|
@ -271,21 +298,22 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
||||
<content select="[prefix]" id="prefix"></content>
|
||||
<div class="label-and-input-container">
|
||||
|
||||
<div class="label-and-input-container" id="labelAndInputContainer">
|
||||
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
||||
</div>
|
||||
|
||||
<content select="[suffix]"></content>
|
||||
</div>
|
||||
|
||||
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
||||
<div class="unfocused-line fit"></div>
|
||||
<div class="focused-line fit"></div>
|
||||
<div class="unfocused-line"></div>
|
||||
<div class="focused-line"></div>
|
||||
</div>
|
||||
|
||||
<div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
||||
<content id="addOnContent" select="[add-on]"></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
@ -525,21 +553,19 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
if (alwaysFloatLabel || _inputHasContent) {
|
||||
cls += ' label-is-floating';
|
||||
// If the label is floating, ignore any offsets that may have been
|
||||
// applied from a prefix element.
|
||||
this.$.labelAndInputContainer.style.position = 'static';
|
||||
|
||||
if (invalid) {
|
||||
cls += ' is-invalid';
|
||||
} else if (focused) {
|
||||
cls += " label-is-highlighted";
|
||||
}
|
||||
// The label might have a horizontal offset if a prefix element exists
|
||||
// which needs to be undone when displayed as a floating label.
|
||||
if (Polymer.dom(this.$.prefix).getDistributedNodes().length > 0 &&
|
||||
label && label.offsetParent) {
|
||||
label.style.left = -label.offsetParent.offsetLeft + 'px';
|
||||
}
|
||||
} else {
|
||||
// When the label is not floating, it should overlap the input element.
|
||||
if (label) {
|
||||
label.style.left = 0;
|
||||
this.$.labelAndInputContainer.style.position = 'relative';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="paper-input-addon-behavior.html">
|
||||
|
||||
<!--
|
||||
|
|
@ -30,9 +31,9 @@ Custom property | Description | Default
|
|||
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
|
||||
`--paper-input-error` | Mixin applied to the error | `{}`
|
||||
-->
|
||||
|
||||
<dom-module id="paper-input-error">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
|
@ -43,6 +44,8 @@ Custom property | Description | Default
|
|||
@apply(--paper-font-caption);
|
||||
@apply(--paper-input-error);
|
||||
position: absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
}
|
||||
|
||||
:host([invalid]) {
|
||||
|
|
@ -51,7 +54,6 @@ Custom property | Description | Default
|
|||
</style>
|
||||
|
||||
<content></content>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,15 +7,18 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
|
|||
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-input/iron-input.html">
|
||||
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
|
||||
<link rel="import" href="../iron-input/iron-input.html">
|
||||
<link rel="import" href="paper-input-behavior.html">
|
||||
<link rel="import" href="paper-input-char-counter.html">
|
||||
<link rel="import" href="paper-input-container.html">
|
||||
<link rel="import" href="paper-input-error.html">
|
||||
<link rel="import" href="paper-input-char-counter.html">
|
||||
|
||||
<!--
|
||||
Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
|
||||
|
||||
`<paper-input>` is a single-line text field with Material Design styling.
|
||||
|
||||
<paper-input label="Input label"></paper-input>
|
||||
|
|
@ -35,9 +38,10 @@ for `suffix`).
|
|||
<paper-icon-button suffix icon="clear"></paper-icon-button>
|
||||
</paper-input>
|
||||
|
||||
A `paper-input` can use the native `type=search` features. However, since
|
||||
we can't control the native styling of the input, it's recommended to use
|
||||
a placeholder text, or `always-float-label`, as to not overlap the native search icon.
|
||||
A `paper-input` can use the native `type=search` or `type=file` features.
|
||||
However, since we can't control the native styling of the input, in these cases
|
||||
it's recommended to use a placeholder text, or `always-float-label`,
|
||||
as to not overlap the native UI (search icon, file button, etc.).
|
||||
|
||||
<paper-input label="search!" type="search"
|
||||
placeholder="search for cats" autosave="test" results="5">
|
||||
|
|
@ -45,11 +49,17 @@ a placeholder text, or `always-float-label`, as to not overlap the native search
|
|||
|
||||
See `Polymer.PaperInputBehavior` for more API docs.
|
||||
|
||||
### Focus
|
||||
|
||||
To focus a paper-input, you can call the native `focus()` method as long as the
|
||||
paper input has a tab index.
|
||||
|
||||
### Styling
|
||||
|
||||
See `Polymer.PaperInputContainer` for a list of custom properties used to
|
||||
style this element.
|
||||
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-input
|
||||
@hero hero.svg
|
||||
|
|
@ -58,7 +68,6 @@ style this element.
|
|||
|
||||
<dom-module id="paper-input">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
|
|
@ -115,8 +124,11 @@ style this element.
|
|||
autocapitalize$="[[autocapitalize]]"
|
||||
autocorrect$="[[autocorrect]]"
|
||||
on-change="_onChange"
|
||||
autosave$="[[autosave]]",
|
||||
results$="[[results]]">
|
||||
tabindex$="[[tabindex]]"
|
||||
autosave$="[[autosave]]"
|
||||
results$="[[results]]"
|
||||
accept$="[[accept]]"
|
||||
multiple$="[[multiple]]">
|
||||
|
||||
<content select="[suffix]"></content>
|
||||
|
||||
|
|
@ -129,7 +141,6 @@ style this element.
|
|||
</template>
|
||||
|
||||
</paper-input-container>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
@ -139,8 +150,7 @@ style this element.
|
|||
|
||||
behaviors: [
|
||||
Polymer.IronFormElementBehavior,
|
||||
Polymer.PaperInputBehavior,
|
||||
Polymer.IronControlState
|
||||
Polymer.PaperInputBehavior
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,13 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
|
|||
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-autogrow-textarea/iron-autogrow-textarea.html">
|
||||
<link rel="import" href="paper-input-behavior.html">
|
||||
<link rel="import" href="paper-input-char-counter.html">
|
||||
<link rel="import" href="paper-input-container.html">
|
||||
<link rel="import" href="paper-input-error.html">
|
||||
<link rel="import" href="paper-input-char-counter.html">
|
||||
|
||||
<!--
|
||||
`<paper-textarea>` is a multi-line text field with Material Design styling.
|
||||
|
|
@ -45,6 +46,7 @@ style this element.
|
|||
|
||||
<iron-autogrow-textarea id="input" class="paper-input-input"
|
||||
bind-value="{{value}}"
|
||||
disabled$="[[disabled]]"
|
||||
autocomplete$="[[autocomplete]]"
|
||||
autofocus$="[[autofocus]]"
|
||||
inputmode$="[[inputmode]]"
|
||||
|
|
@ -67,7 +69,6 @@ style this element.
|
|||
</template>
|
||||
|
||||
</paper-input-container>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
@ -122,6 +123,10 @@ style this element.
|
|||
|
||||
_ariaDescribedByChanged: function(ariaDescribedBy) {
|
||||
this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
|
||||
}
|
||||
},
|
||||
|
||||
get _focusableElement() {
|
||||
return this.$.input.textarea;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
<!DOCTYPE html><!--
|
||||
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>
|
||||
--><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-input tests</title>
|
||||
|
|
@ -21,8 +18,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
'paper-textarea.html',
|
||||
'paper-input-container.html',
|
||||
'paper-input-error.html',
|
||||
'paper-input-char-counter.html'
|
||||
'paper-input-char-counter.html',
|
||||
'paper-input.html?dom=shadow',
|
||||
'paper-textarea.html?dom=shadow',
|
||||
'paper-input-container.html?dom=shadow',
|
||||
'paper-input-error.html?dom=shadow',
|
||||
'paper-input-char-counter.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<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/test-helpers.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="../paper-input-container.html">
|
||||
<link rel="import" href="../paper-input-char-counter.html">
|
||||
|
|
|
|||
|
|
@ -14,16 +14,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<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">
|
||||
<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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="../paper-input-container.html">
|
||||
<link rel="import" href="letters-only.html">
|
||||
|
|
@ -40,6 +37,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="prefix">
|
||||
<template>
|
||||
<paper-input-container>
|
||||
<div prefix>$</div>
|
||||
<label id="l">label</label>
|
||||
<input is="iron-input" id="i">
|
||||
</paper-input-container>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="prefix-has-value">
|
||||
<template>
|
||||
<paper-input-container>
|
||||
<div prefix>$</div>
|
||||
<label id="l">label</label>
|
||||
<input is="iron-input" id="i" value="foo">
|
||||
</paper-input-container>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="has-value">
|
||||
<template>
|
||||
<paper-input-container>
|
||||
|
|
@ -119,9 +136,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
|
||||
});
|
||||
|
||||
test('label is floated if value is initialized to not null', function() {
|
||||
test('label is floated if value is initialized to not null', function(done) {
|
||||
var container = fixture('has-value');
|
||||
assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
|
||||
requestAnimationFrame(function() {
|
||||
assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('label is invisible if no-label-float and value is initialized to not null', function() {
|
||||
|
|
@ -132,7 +152,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
test('label is floated if always-float-label is true', function() {
|
||||
var container = fixture('always-float');
|
||||
assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
|
||||
})
|
||||
});
|
||||
|
||||
test('label is floated correctly with a prefix', function(done) {
|
||||
var container = fixture('prefix');
|
||||
var label = Polymer.dom(container).querySelector('#l');
|
||||
var input = Polymer.dom(container).querySelector('#i');
|
||||
|
||||
// Label is initially visible.
|
||||
assert.equal(getComputedStyle(label).visibility, 'visible', 'label has visibility:visible');
|
||||
|
||||
// After entering text, the label floats, and it is not indented.
|
||||
input.bindValue = 'foobar';
|
||||
requestAnimationFrame(function() {
|
||||
assert.notEqual(getTransform(label), 'none', 'label has transform');
|
||||
assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('label is floated correctly with a prefix and prefilled value', function(done) {
|
||||
var container = fixture('prefix-has-value');
|
||||
var label = Polymer.dom(container).querySelector('#l');
|
||||
|
||||
// The label floats, and it is not indented.
|
||||
requestAnimationFrame(function() {
|
||||
assert.notEqual(getTransform(label), 'none', 'label has transform');
|
||||
assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -14,14 +14,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<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">
|
||||
<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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="../paper-input-container.html">
|
||||
<link rel="import" href="../paper-input-error.html">
|
||||
|
|
|
|||
|
|
@ -14,17 +14,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<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">
|
||||
<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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<script src="../../iron-test-helpers/test-helpers.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-input.html">
|
||||
<link rel="import" href="letters-only.html">
|
||||
|
||||
|
|
@ -37,6 +34,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="has-tabindex">
|
||||
<template>
|
||||
<paper-input tabindex="0"></paper-input>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="label">
|
||||
<template>
|
||||
<paper-input label="foo"></paper-input>
|
||||
|
|
@ -211,7 +214,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
});
|
||||
|
||||
|
||||
suite('validation', function() {
|
||||
|
||||
test('invalid attribute updated after calling validate()', function() {
|
||||
|
|
@ -255,6 +257,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
|
||||
});
|
||||
|
||||
test('focus an input with tabindex', function(done) {
|
||||
var input = fixture('has-tabindex');
|
||||
flush(function() {
|
||||
MockInteractions.focus(input);
|
||||
flush(function() {
|
||||
assert.equal(input.shadowRoot ? input.shadowRoot.activeElement :
|
||||
document.activeElement, input._focusableElement);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,19 +14,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<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">
|
||||
<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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<script src="../../iron-test-helpers/test-helpers.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-textarea.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -36,6 +32,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="has-tabindex">
|
||||
<template>
|
||||
<paper-textarea tabindex="0"></paper-textarea>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="label">
|
||||
<template>
|
||||
<paper-textarea label="foo"></paper-textarea>
|
||||
|
|
@ -128,7 +130,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
var inputContent = Polymer.dom(container.root).querySelector('.input-content');
|
||||
assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('focus/blur events', function() {
|
||||
|
|
@ -155,6 +156,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.isTrue(nBlurEvents >= 1, 'blur event fired')
|
||||
});
|
||||
|
||||
test('focus a textarea with tabindex', function(done) {
|
||||
var input = fixture('has-tabindex');
|
||||
flush(function() {
|
||||
assert.notEqual(document.activeElement, input._focusableElement);
|
||||
MockInteractions.focus(input);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement);
|
||||
done();
|
||||
}, 1);
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
suite('a11y', function() {
|
||||
|
|
@ -186,7 +198,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue