added tests with paper-slider
This commit is contained in:
DadaMonad
25
bower_components/paper-input/.bower.json
vendored
Normal file
25
bower_components/paper-input/.bower.json
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "paper-input",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0",
|
||||
"core-icon": "Polymer/core-icon#^0.5.0",
|
||||
"core-icons": "Polymer/core-icons#^0.5.0",
|
||||
"core-input": "Polymer/core-input#^0.5.0",
|
||||
"core-style": "Polymer/core-style#^0.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-component-tester": "Polymer/web-component-tester#^1.0.0"
|
||||
},
|
||||
"version": "0.5.2",
|
||||
"homepage": "https://github.com/Polymer/paper-input",
|
||||
"_release": "0.5.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.2",
|
||||
"commit": "8739c6e94d7c35c5c5e9509986c5f90c5f177ce4"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/paper-input.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/paper-input"
|
||||
}
|
||||
1
bower_components/paper-input/.gitignore
vendored
Normal file
1
bower_components/paper-input/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
vulcanized.html
|
||||
4
bower_components/paper-input/README.md
vendored
Normal file
4
bower_components/paper-input/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
paper-input
|
||||
===================
|
||||
|
||||
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-input) for more information.
|
||||
15
bower_components/paper-input/bower.json
vendored
Normal file
15
bower_components/paper-input/bower.json
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "paper-input",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0",
|
||||
"core-icon": "Polymer/core-icon#^0.5.0",
|
||||
"core-icons": "Polymer/core-icons#^0.5.0",
|
||||
"core-input": "Polymer/core-input#^0.5.0",
|
||||
"core-style": "Polymer/core-style#^0.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-component-tester": "Polymer/web-component-tester#^1.0.0"
|
||||
},
|
||||
"version": "0.5.2"
|
||||
}
|
||||
190
bower_components/paper-input/demo.html
vendored
Normal file
190
bower_components/paper-input/demo.html
vendored
Normal file
@@ -0,0 +1,190 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<title>paper-input</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link href="../font-roboto/roboto.html" rel="import">
|
||||
<link href="paper-autogrow-textarea.html" rel="import">
|
||||
<link href="paper-input-decorator.html" rel="import">
|
||||
<link href="paper-input.html" rel="import">
|
||||
|
||||
<style shim-shadowdom>
|
||||
|
||||
body {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
section > div {
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
paper-input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
paper-input-decorator {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
paper-input.narrow {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.custom /deep/ ::-webkit-input-placeholder {
|
||||
color: #f4b400;
|
||||
}
|
||||
|
||||
.custom /deep/ ::-moz-placeholder {
|
||||
color: #f4b400;
|
||||
}
|
||||
|
||||
.custom /deep/ :-ms-input-placeholder {
|
||||
color: #f4b400;
|
||||
}
|
||||
|
||||
.custom /deep/ .label-text,
|
||||
.custom /deep/ .error {
|
||||
color: #f4b400;
|
||||
}
|
||||
|
||||
.custom /deep/ .unfocused-underline {
|
||||
background-color: #f4b400;
|
||||
}
|
||||
|
||||
.custom[focused] /deep/ .floated-label .label-text {
|
||||
color: #0f9d58;
|
||||
}
|
||||
|
||||
.custom /deep/ .focused-underline {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
|
||||
.custom.invalid /deep/ .floated-label .label-text,
|
||||
.custom /deep/ .error {
|
||||
color: #f06292;
|
||||
}
|
||||
|
||||
.custom.invalid /deep/ .focused-underline {
|
||||
background-color: #f06292;
|
||||
}
|
||||
|
||||
.custom {
|
||||
color: #1a237e;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<section>
|
||||
|
||||
<div>Standalone</div>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input label="label"></paper-input>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input label="floating label" floatingLabel></paper-input>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div>Decorator</div>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator label="with core-input">
|
||||
<input is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator label="with core-input + floatingLabel" floatingLabel>
|
||||
<input is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator label="with autogrowing text area">
|
||||
<paper-autogrow-textarea>
|
||||
<textarea></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator label="with autogrowing text area + floatingLabel" floatingLabel>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="validate">
|
||||
|
||||
<div>Validation</div>
|
||||
|
||||
<button onclick="validateAll()">click me to validate all</button>
|
||||
|
||||
<paper-input-decorator label="required" floatingLabel error="input is required!">
|
||||
<input is="core-input" required>
|
||||
</paper-input-decorator>
|
||||
|
||||
<script>
|
||||
function validateAll() {
|
||||
var $d = document.getElementById('validate').querySelectorAll('paper-input-decorator');
|
||||
Array.prototype.forEach.call($d, function(d) {
|
||||
d.isInvalid = !d.querySelector('input').validity.valid;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div>Custom styling</div>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input class="custom" label="paper-input"></paper-input>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator class="custom" label="decorator">
|
||||
<input is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
bower_components/paper-input/index.html
vendored
Normal file
22
bower_components/paper-input/index.html
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
<!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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="../core-component-page/core-component-page.html">
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-component-page sources='["paper-input.html","paper-input-decorator.html","../core-input/core-input.html"]'></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
bower_components/paper-input/metadata.html
vendored
Normal file
20
bower_components/paper-input/metadata.html
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<x-meta id="paper-input" label="Input" group="Paper" isEditor>
|
||||
|
||||
<template>
|
||||
<paper-input label="Type something..."></paper-input>
|
||||
</template>
|
||||
|
||||
<template id="imports">
|
||||
<link rel="import" href="paper-input.html">
|
||||
</template>
|
||||
|
||||
</x-meta>
|
||||
161
bower_components/paper-input/paper-autogrow-textarea.html
vendored
Normal file
161
bower_components/paper-input/paper-autogrow-textarea.html
vendored
Normal file
@@ -0,0 +1,161 @@
|
||||
<!--
|
||||
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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<!--
|
||||
`paper-autogrow-textarea` is an element containing a textarea that grows in height as more
|
||||
lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
|
||||
never scroll.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-autogrow-textarea id="a1">
|
||||
<textarea id="t1"></textarea>
|
||||
<paper-autogrow-textarea>
|
||||
|
||||
Because the `textarea`'s `value` property is not observable, if you set the `value` imperatively
|
||||
you must call `update` to notify this element the value has changed.
|
||||
|
||||
Example:
|
||||
|
||||
/* using example HTML above */
|
||||
t1.value = 'some\ntext';
|
||||
a1.update();
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-autogrow-textarea
|
||||
@status unstable
|
||||
-->
|
||||
|
||||
<link href="../polymer/polymer.html" rel="import">
|
||||
|
||||
<polymer-element name="paper-autogrow-textarea" on-input="{{inputAction}}">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.mirror-text {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
::content textarea {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
/* see comments in template */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::content textarea:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- the mirror sizes the input/textarea so it grows with typing -->
|
||||
<div id="mirror" class="mirror-text" aria-hidden="true"> </div>
|
||||
|
||||
<!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
|
||||
<div class="textarea-container" fit>
|
||||
<content></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
publish: {
|
||||
|
||||
/**
|
||||
* The textarea that should auto grow.
|
||||
*
|
||||
* @attribute target
|
||||
* @type HTMLTextAreaElement
|
||||
* @default null
|
||||
*/
|
||||
target: null,
|
||||
|
||||
/**
|
||||
* The initial number of rows.
|
||||
*
|
||||
* @attribute rows
|
||||
* @type number
|
||||
* @default 1
|
||||
*/
|
||||
rows: 1,
|
||||
|
||||
/**
|
||||
* The maximum number of rows this element can grow to until it
|
||||
* scrolls. 0 means no maximum.
|
||||
*
|
||||
* @attribute maxRows
|
||||
* @type number
|
||||
* @default 0
|
||||
*/
|
||||
maxRows: 0
|
||||
},
|
||||
|
||||
tokens: null,
|
||||
|
||||
observe: {
|
||||
rows: 'updateCached',
|
||||
maxRows: 'updateCached'
|
||||
},
|
||||
|
||||
constrain: function(tokens) {
|
||||
var _tokens;
|
||||
tokens = tokens || [''];
|
||||
// Enforce the min and max heights for a multiline input to avoid measurement
|
||||
if (this.maxRows > 0 && tokens.length > this.maxRows) {
|
||||
_tokens = tokens.slice(0, this.maxRows);
|
||||
} else {
|
||||
_tokens = tokens.slice(0);
|
||||
}
|
||||
while (this.rows > 0 && _tokens.length < this.rows) {
|
||||
_tokens.push('');
|
||||
}
|
||||
return _tokens.join('<br>') + ' ';
|
||||
},
|
||||
|
||||
valueForMirror: function(input) {
|
||||
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : [''];
|
||||
return this.constrain(this.tokens);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sizes this element to fit the input value. This function is automatically called
|
||||
* when the user types in new input, but you must call this function if the value
|
||||
* is updated imperatively.
|
||||
*
|
||||
* @method update
|
||||
* @param Element The input
|
||||
*/
|
||||
update: function(input) {
|
||||
this.$.mirror.innerHTML = this.valueForMirror(input);
|
||||
},
|
||||
|
||||
updateCached: function() {
|
||||
this.$.mirror.innerHTML = this.constrain(this.tokens);
|
||||
},
|
||||
|
||||
inputAction: function(e) {
|
||||
this.update(e.target);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
132
bower_components/paper-input/paper-input-decorator.css
vendored
Normal file
132
bower_components/paper-input/paper-input-decorator.css
vendored
Normal file
@@ -0,0 +1,132 @@
|
||||
/*
|
||||
* @license
|
||||
* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
text-align: inherit;
|
||||
padding: 0.75em 0;
|
||||
}
|
||||
|
||||
polyfill-next-selector {
|
||||
content: '.input-body > :not(.label)';
|
||||
}
|
||||
::content > *,
|
||||
::content > input[is="core-input"] {
|
||||
padding: 0;
|
||||
margin: 0.5em 0 0.25em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
polyfill-next-selector {
|
||||
content: 'input, textarea';
|
||||
}
|
||||
::content input,
|
||||
::content input[is=core-input],
|
||||
::content textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector {
|
||||
content: ':invalid';
|
||||
}
|
||||
::content input:invalid,
|
||||
::content textarea:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector {
|
||||
content: 'textarea';
|
||||
}
|
||||
::content textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
[invisible] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
[animated] {
|
||||
visibility: visible !important;
|
||||
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.floated-label {
|
||||
font-size: 0.75em;
|
||||
background: transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mirror-text {
|
||||
padding: 0.5em 0 0.25em;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:host([multiline]) .mirror-text {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0.5em 0 0.25em;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.underline {
|
||||
height: 0px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:host([disabled]) .underline {
|
||||
border-bottom: 1px dashed #757575;
|
||||
}
|
||||
|
||||
.unfocused-underline {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.focused-underline {
|
||||
height: 2px;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.focused-underline[invisible] {
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
transform: scale3d(0,1,1);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 0.75em;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
489
bower_components/paper-input/paper-input-decorator.html
vendored
Normal file
489
bower_components/paper-input/paper-input-decorator.html
vendored
Normal file
@@ -0,0 +1,489 @@
|
||||
<!--
|
||||
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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html">Text fields</a>
|
||||
|
||||
`paper-input-decorator` adds Material Design input field styling and animations to an element.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-input-decorator label="Your Name">
|
||||
<input is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<paper-input-decorator floatingLabel label="Your address">
|
||||
<textarea></textarea>
|
||||
</paper-input-decorator>
|
||||
|
||||
Theming
|
||||
-------
|
||||
|
||||
`paper-input-decorator` uses `core-style` for global theming. The following options are available:
|
||||
|
||||
- `CoreStyle.g.paperInput.labelColor` - The inline label, floating label, error message and error icon color when the input does not have focus.
|
||||
- `CoreStyle.g.paperInput.focusedColor` - The floating label and the underline color when the input has focus.
|
||||
- `CoreStyle.g.paperInput.invalidColor` - The error message, the error icon, the floating label and the underline's color when the input is invalid and has focus.
|
||||
|
||||
To add custom styling to only some elements, use these selectors:
|
||||
|
||||
paper-input-decorator /deep/ .label-text,
|
||||
paper-input-decorator /deep/ .error {
|
||||
/* inline label, floating label, error message and error icon color when the input is unfocused */
|
||||
color: green;
|
||||
}
|
||||
|
||||
paper-input-decorator /deep/ ::-webkit-input-placeholder {
|
||||
/* platform specific rules for placeholder text */
|
||||
color: green;
|
||||
}
|
||||
paper-input-decorator /deep/ ::-moz-placeholder {
|
||||
color: green;
|
||||
}
|
||||
paper-input-decorator /deep/ :-ms-input-placeholder {
|
||||
color: green;
|
||||
}
|
||||
|
||||
paper-input-decorator /deep/ .unfocused-underline {
|
||||
/* line color when the input is unfocused */
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
paper-input-decorator[focused] /deep/ .floating-label .label-text {
|
||||
/* floating label color when the input is focused */
|
||||
color: orange;
|
||||
}
|
||||
|
||||
paper-input-decorator /deep/ .focused-underline {
|
||||
/* line color when the input is focused */
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
paper-input-decorator.invalid[focused] /deep/ .floated-label .label-text,
|
||||
paper-input-decorator[focused] /deep/ .error {
|
||||
/* floating label, error message nad error icon color when the input is invalid and focused */
|
||||
color: salmon;
|
||||
}
|
||||
|
||||
paper-input-decorator.invalid /deep/ .focused-underline {
|
||||
/* line and color when the input is invalid and focused */
|
||||
background-color: salmon;
|
||||
}
|
||||
|
||||
Form submission
|
||||
---------------
|
||||
|
||||
You can use inputs decorated with this element in a `form` as usual.
|
||||
|
||||
Validation
|
||||
----------
|
||||
|
||||
Because you provide the `input` element to `paper-input-decorator`, you can use any validation library
|
||||
or the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">HTML5 Constraints Validation API</a>
|
||||
to implement validation. Set the `isInvalid` attribute when the input is validated, and provide an
|
||||
error message in the `error` attribute.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-input-decorator id="paper1" error="Value must start with a number!">
|
||||
<input id="input1" is="core-input" pattern="^[0-9].*">
|
||||
</paper-input-decorator>
|
||||
<button onclick="validate()"></button>
|
||||
<script>
|
||||
function validate() {
|
||||
var decorator = document.getElementById('paper1');
|
||||
var input = document.getElementById('input1');
|
||||
decorator.isInvalid = !input.validity.valid;
|
||||
}
|
||||
</script>
|
||||
|
||||
Example to validate as the user types:
|
||||
|
||||
<template is="auto-binding">
|
||||
<paper-input-decorator id="paper2" error="Value must start with a number!" isInvalid="{{!$.input2.validity.valid}}">
|
||||
<input id="input2" is="core-input" pattern="^[0-9].*">
|
||||
</paper-input-decorator>
|
||||
</template>
|
||||
|
||||
Accessibility
|
||||
-------------
|
||||
|
||||
`paper-input-decorator` will automatically set the `aria-label` attribute on the nested input
|
||||
to the value of `label`. Do not set the `placeholder` attribute on the nested input, as it will
|
||||
conflict with this element.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-input-decorator
|
||||
@homepage github.io
|
||||
-->
|
||||
<link href="../polymer/polymer.html" rel="import">
|
||||
<link href="../core-icon/core-icon.html" rel="import">
|
||||
<link href="../core-icons/core-icons.html" rel="import">
|
||||
<link href="../core-input/core-input.html" rel="import">
|
||||
<link href="../core-style/core-style.html" rel="import">
|
||||
|
||||
<core-style id="paper-input-decorator">
|
||||
|
||||
.label-text,
|
||||
.error {
|
||||
color: {{g.paperInput.labelColor}};
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: {{g.paperInput.labelColor}};
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: {{g.paperInput.labelColor}};
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: {{g.paperInput.labelColor}};
|
||||
}
|
||||
|
||||
.unfocused-underline {
|
||||
background-color: {{g.paperInput.labelColor}};
|
||||
}
|
||||
|
||||
:host([focused]) .floated-label .label-text {
|
||||
color: {{g.paperInput.focusedColor}};
|
||||
}
|
||||
|
||||
.focused-underline {
|
||||
background-color: {{g.paperInput.focusedColor}};
|
||||
}
|
||||
|
||||
:host(.invalid) .floated-label .label-text,
|
||||
.error {
|
||||
color: {{g.paperInput.invalidColor}};
|
||||
}
|
||||
|
||||
:host(.invalid) .unfocused-underline,
|
||||
:host(.invalid) .focused-underline {
|
||||
background-color: {{g.paperInput.invalidColor}};
|
||||
}
|
||||
|
||||
</core-style>
|
||||
|
||||
<polymer-element name="paper-input-decorator" layout vertical
|
||||
on-transitionEnd="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}"
|
||||
on-input="{{inputAction}}"
|
||||
on-down="{{downAction}}">
|
||||
|
||||
<template>
|
||||
|
||||
<link href="paper-input-decorator.css" rel="stylesheet">
|
||||
<core-style ref="paper-input-decorator"></core-style>
|
||||
|
||||
<div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" invisible?="{{!floatingLabelVisible || labelAnimated}}">
|
||||
<!-- needed for floating label animation measurement -->
|
||||
<span id="floatedLabelText" class="label-text">{{label}}</span>
|
||||
</div>
|
||||
|
||||
<div class="input-body" flex auto relative>
|
||||
|
||||
<div class="label" fit invisible aria-hidden="true">
|
||||
<!-- needed for floating label animation measurement -->
|
||||
<span id="labelText" class="label-text" invisible?="{{!_labelVisible}}" animated?="{{labelAnimated}}">{{label}}</span>
|
||||
</div>
|
||||
|
||||
<content></content>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="underline" class="underline" relative>
|
||||
<div class="unfocused-underline" fit invisible?="{{disabled}}"></div>
|
||||
<div id="focusedUnderline" class="focused-underline" fit invisible?="{{!focused}}" animated?="{{underlineAnimated}}"></div>
|
||||
</div>
|
||||
|
||||
<div class="error" layout horizontal center hidden?="{{!isInvalid}}">
|
||||
<div class="error-text" flex auto role="alert" aria-hidden="{{!isInvalid}}">{{error}}</div>
|
||||
<core-icon class="error-icon" icon="warning"></core-icon>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
|
||||
|
||||
paperInput.labelColor = '#757575';
|
||||
paperInput.focusedColor = '#4059a9';
|
||||
paperInput.invalidColor = '#d34336';
|
||||
|
||||
Polymer({
|
||||
|
||||
publish: {
|
||||
|
||||
/**
|
||||
* The label for this input. It normally appears as grey text inside
|
||||
* the text input and disappears once the user enters text.
|
||||
*
|
||||
* @attribute label
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
label: '',
|
||||
|
||||
/**
|
||||
* If true, the label will "float" above the text input once the
|
||||
* user enters text instead of disappearing.
|
||||
*
|
||||
* @attribute floatingLabel
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
floatingLabel: false,
|
||||
|
||||
/**
|
||||
* Set to true to style the element as disabled.
|
||||
*
|
||||
* @attribute disabled
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
disabled: {value: false, reflect: true},
|
||||
|
||||
/**
|
||||
* Use this property to override the automatic label visibility.
|
||||
* If this property is set to `true` or `false`, the label visibility
|
||||
* will respect this value instead of be based on whether there is
|
||||
* a non-null value in the input.
|
||||
*
|
||||
* @attribute labelVisible
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
labelVisible: null,
|
||||
|
||||
/**
|
||||
* Set this property to true to show the error message.
|
||||
*
|
||||
* @attribute isInvalid
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
isInvalid: false,
|
||||
|
||||
/**
|
||||
* The message to display if the input value fails validation. If this
|
||||
* is unset or the empty string, a default message is displayed depending
|
||||
* on the type of validation error.
|
||||
*
|
||||
* @attribute error
|
||||
* @type string
|
||||
*/
|
||||
error: '',
|
||||
|
||||
focused: {value: false, reflect: true}
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
floatingLabelVisible: 'floatingLabel && !_labelVisible',
|
||||
_labelVisible: '(labelVisible === true || labelVisible === false) ? labelVisible : _autoLabelVisible'
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Delegate focus/blur events
|
||||
Polymer.addEventListener(this, 'focus', this.focusAction.bind(this), true);
|
||||
Polymer.addEventListener(this, 'blur', this.blurAction.bind(this), true);
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this.input = this.querySelector('input,textarea');
|
||||
|
||||
this.mo = new MutationObserver(function() {
|
||||
this.input = this.querySelector('input,textarea');
|
||||
}.bind(this));
|
||||
this.mo.observe(this, {childList: true});
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
this.mo.disconnect();
|
||||
this.mo = null;
|
||||
},
|
||||
|
||||
prepareLabelTransform: function() {
|
||||
var toRect = this.$.floatedLabelText.getBoundingClientRect();
|
||||
var fromRect = this.$.labelText.getBoundingClientRect();
|
||||
if (toRect.width !== 0) {
|
||||
var sy = toRect.height / fromRect.height;
|
||||
this.$.labelText.cachedTransform =
|
||||
'scale3d(' + (toRect.width / fromRect.width) + ',' + sy + ',1) ' +
|
||||
'translate3d(0,' + (toRect.top - fromRect.top) / sy + 'px,0)';
|
||||
}
|
||||
},
|
||||
|
||||
animateFloatingLabel: function() {
|
||||
if (!this.floatingLabel || this.labelAnimated) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.$.labelText.cachedTransform) {
|
||||
this.prepareLabelTransform();
|
||||
}
|
||||
|
||||
// If there's still no cached transform, the input is invisible so don't
|
||||
// do the animation.
|
||||
if (!this.$.labelText.cachedTransform) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.labelAnimated = true;
|
||||
// Handle interrupted animation
|
||||
this.async(function() {
|
||||
this.transitionEndAction();
|
||||
}, null, 250);
|
||||
|
||||
if (this._labelVisible) {
|
||||
// Handle if the label started out floating
|
||||
if (!this.$.labelText.style.webkitTransform && !this.$.labelText.style.transform) {
|
||||
this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
|
||||
this.$.labelText.style.transform = this.$.labelText.cachedTransform;
|
||||
this.$.labelText.offsetTop;
|
||||
}
|
||||
this.$.labelText.style.webkitTransform = '';
|
||||
this.$.labelText.style.transform = '';
|
||||
} else {
|
||||
this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
|
||||
this.$.labelText.style.transform = this.$.labelText.cachedTransform;
|
||||
this.input.placeholder = '';
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
_labelVisibleChanged: function(old) {
|
||||
// do not do the animation on first render
|
||||
if (old !== undefined) {
|
||||
if (!this.animateFloatingLabel()) {
|
||||
this.updateInputLabel(this.input, this.label);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
labelVisibleChanged: function() {
|
||||
if (this.labelVisible === 'true') {
|
||||
this.labelVisible = true;
|
||||
} else if (this.labelVisible === 'false') {
|
||||
this.labelVisible = false;
|
||||
}
|
||||
},
|
||||
|
||||
labelChanged: function() {
|
||||
if (this.input) {
|
||||
this.updateInputLabel(this.input, this.label);
|
||||
}
|
||||
},
|
||||
|
||||
isInvalidChanged: function() {
|
||||
this.classList.toggle('invalid', this.isInvalid);
|
||||
},
|
||||
|
||||
focusedChanged: function() {
|
||||
this.updateLabelVisibility(this.input && this.input.value);
|
||||
},
|
||||
|
||||
inputChanged: function(old) {
|
||||
if (this.input) {
|
||||
this.updateLabelVisibility(this.input.value);
|
||||
this.updateInputLabel(this.input, this.label);
|
||||
}
|
||||
if (old) {
|
||||
this.updateInputLabel(old, '');
|
||||
}
|
||||
},
|
||||
|
||||
focusAction: function() {
|
||||
this.focused = true;
|
||||
},
|
||||
|
||||
blurAction: function(e) {
|
||||
this.focused = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the label visibility based on a value. This is handled automatically
|
||||
* if the user is typing, but if you imperatively set the input value you need
|
||||
* to call this function.
|
||||
*
|
||||
* @method updateLabelVisibility
|
||||
* @param {string} value
|
||||
*/
|
||||
updateLabelVisibility: function(value) {
|
||||
var v = (value !== null && value !== undefined) ? String(value) : value;
|
||||
this._autoLabelVisible = (!this.focused && !v) || (!this.floatingLabel && !v);
|
||||
},
|
||||
|
||||
updateInputLabel: function(input, label) {
|
||||
if (this._labelVisible) {
|
||||
this.input.placeholder = this.label;
|
||||
} else {
|
||||
this.input.placeholder = '';
|
||||
}
|
||||
if (label) {
|
||||
input.setAttribute('aria-label', label);
|
||||
} else {
|
||||
input.removeAttribute('aria-label');
|
||||
}
|
||||
},
|
||||
|
||||
inputAction: function(e) {
|
||||
this.updateLabelVisibility(e.target.value);
|
||||
},
|
||||
|
||||
downAction: function(e) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.focused) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.input) {
|
||||
this.input.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
// The underline spills from the tap location
|
||||
var rect = this.$.underline.getBoundingClientRect();
|
||||
var right = e.x - rect.left;
|
||||
this.$.focusedUnderline.style.mozTransformOrigin = right + 'px';
|
||||
this.$.focusedUnderline.style.webkitTransformOrigin = right + 'px ';
|
||||
this.$.focusedUnderline.style.transformOriginX = right + 'px';
|
||||
|
||||
// Animations only run when the user interacts with the input
|
||||
this.underlineAnimated = true;
|
||||
|
||||
// Handle interrupted animation
|
||||
this.async(function() {
|
||||
this.transitionEndAction();
|
||||
}, null, 250);
|
||||
},
|
||||
|
||||
transitionEndAction: function() {
|
||||
this.underlineAnimated = false;
|
||||
this.labelAnimated = false;
|
||||
if (this._labelVisible) {
|
||||
this.input.placeholder = this.label;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
138
bower_components/paper-input/paper-input.html
vendored
Normal file
138
bower_components/paper-input/paper-input.html
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field">Single line text field</a>
|
||||
|
||||
`paper-input` is a single-line text field for user input. It is a convenience element composed of
|
||||
a `paper-input-decorator` and a `input is="core-input"`.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-input label="Your Name"></paper-input>
|
||||
|
||||
If you need more control over the `input` element, use `paper-input-decorator`.
|
||||
|
||||
Theming
|
||||
-------
|
||||
|
||||
`paper-input` can be styled similarly to `paper-input-decorator`.
|
||||
|
||||
Form submission
|
||||
---------------
|
||||
|
||||
Unlike inputs using `paper-input-decorator` directly, `paper-input` does not work out of
|
||||
the box with the native `form` element. This is because the native `form` is not aware of
|
||||
shadow DOM and does not treat `paper-input` as a form element.
|
||||
|
||||
Use `paper-input-decorator` directly, or see
|
||||
<a href="https://github.com/garstasio/ajax-form">`ajax-form`</a> for a possible solution
|
||||
to submitting a `paper-input`.
|
||||
|
||||
Validation
|
||||
----------
|
||||
|
||||
Use `paper-input-decorator` if you would like to implement validation.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-input
|
||||
@homepage github.io
|
||||
-->
|
||||
<link href="../polymer/polymer.html" rel="import">
|
||||
<link href="../core-input/core-input.html" rel="import">
|
||||
|
||||
<link href="paper-input-decorator.html" rel="import">
|
||||
|
||||
<polymer-element name="paper-input">
|
||||
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-input-decorator id="decorator" label="{{label}}" floatingLabel="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}">
|
||||
<input is="core-input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}">
|
||||
</paper-input-decorator>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer('paper-input', {
|
||||
|
||||
publish: {
|
||||
/**
|
||||
* The label for this input. It normally appears as grey text inside
|
||||
* the text input and disappears once the user enters text.
|
||||
*
|
||||
* @attribute label
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
label: '',
|
||||
|
||||
/**
|
||||
* If true, the label will "float" above the text input once the
|
||||
* user enters text instead of disappearing.
|
||||
*
|
||||
* @attribute floatingLabel
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
floatingLabel: false,
|
||||
|
||||
/**
|
||||
* Set to true to style the element as disabled.
|
||||
*
|
||||
* @attribute disabled
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
disabled: {value: false, reflect: true},
|
||||
|
||||
/**
|
||||
* The current value of the input.
|
||||
*
|
||||
* @attribute value
|
||||
* @type String
|
||||
* @default ''
|
||||
*/
|
||||
value: '',
|
||||
|
||||
/**
|
||||
* The most recently committed value of the input.
|
||||
*
|
||||
* @attribute committedValue
|
||||
* @type String
|
||||
* @default ''
|
||||
*/
|
||||
committedValue: ''
|
||||
|
||||
},
|
||||
|
||||
valueChanged: function() {
|
||||
this.$.decorator.updateLabelVisibility(this.value);
|
||||
},
|
||||
|
||||
changeAction: function(e) {
|
||||
if (!window.ShadowDOMPolyfill) {
|
||||
// re-fire event that does not bubble across shadow roots
|
||||
this.fire('change', null, this);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
51
bower_components/paper-input/test/a11y.html
vendored
Normal file
51
bower_components/paper-input/test/a11y.html
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
<meta charset="UTF-8">
|
||||
<title>paper-input a11y tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link href="../../core-input/core-input.html" rel="import">
|
||||
|
||||
<link href="../paper-input-decorator.html" rel="import">
|
||||
<link href="../paper-autogrow-textarea.html" rel="import">
|
||||
|
||||
<style>
|
||||
paper-input-decorator {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<paper-input-decorator id="decorator1" label="input">
|
||||
<input id="input1" is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<script>
|
||||
|
||||
var d1 = document.getElementById('decorator1');
|
||||
var i1 = document.getElementById('input1');
|
||||
|
||||
test('aria-label set on input', function() {
|
||||
assert.strictEqual(i1.getAttribute('aria-label'), d1.label);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
bower_components/paper-input/test/autogrow.html
vendored
Normal file
132
bower_components/paper-input/test/autogrow.html
vendored
Normal file
@@ -0,0 +1,132 @@
|
||||
<!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>
|
||||
<meta charset="UTF-8">
|
||||
<title>paper-autogrow-textarea</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link href="../paper-autogrow-textarea.html" rel="import">
|
||||
|
||||
<style>
|
||||
paper-autogrow-textarea {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<paper-autogrow-textarea id="autogrow1">
|
||||
<textarea id="textarea1"></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
|
||||
<paper-autogrow-textarea id="autogrow2" rows="2" maxRows="4">
|
||||
<textarea id="textarea2"></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
|
||||
<script>
|
||||
|
||||
var a1 = document.getElementById('autogrow1');
|
||||
var t1 = document.getElementById('textarea1');
|
||||
|
||||
function dispatchInputEvent(target) {
|
||||
var e = new Event('input', {
|
||||
bubbles: true
|
||||
});
|
||||
target.dispatchEvent(e);
|
||||
};
|
||||
|
||||
function between(val, val1, val2) {
|
||||
return assert.ok(val > val1 && val < val2);
|
||||
}
|
||||
|
||||
suite('basic', function() {
|
||||
|
||||
teardown(function(done) {
|
||||
t1.value = '';
|
||||
dispatchInputEvent(t1);
|
||||
a1.rows = 1;
|
||||
a1.maxRows = 0;
|
||||
|
||||
flush(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('empty input has height', function() {
|
||||
assert.ok(a1.offsetHeight > 0);
|
||||
});
|
||||
|
||||
test('accepts number input', function() {
|
||||
t1.value = 1;
|
||||
dispatchInputEvent(t1);
|
||||
// make sure we didn't crash
|
||||
});
|
||||
|
||||
test('grows with more rows of input', function(done) {
|
||||
t1.value = 'foo\nbar';
|
||||
dispatchInputEvent(t1);
|
||||
|
||||
var h1 = a1.offsetHeight;
|
||||
|
||||
t1.value = 'foo\nbar\nbaz';
|
||||
dispatchInputEvent(t1);
|
||||
|
||||
flush(function() {
|
||||
var h2 = a1.offsetHeight;
|
||||
assert.ok(h2 > h1);
|
||||
assert.deepEqual(a1.getBoundingClientRect(), t1.getBoundingClientRect());
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('honors the rows attribute', function(done) {
|
||||
var h1 = a1.offsetHeight;
|
||||
a1.rows = 2;
|
||||
|
||||
flush(function() {
|
||||
var h2 = a1.offsetHeight;
|
||||
between(h2, h1, 3 * h1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('honors the maxRows attribute', function(done) {
|
||||
var h1 = a1.offsetHeight;
|
||||
a1.maxRows = 2;
|
||||
|
||||
t1.value = 'foo\nbar\nbaz\nzot';
|
||||
dispatchInputEvent(t1);
|
||||
|
||||
flush(function() {
|
||||
var h2 = a1.offsetHeight;
|
||||
assert.ok(h2 < 3 * h1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('mirror text is visibility:hidden', function() {
|
||||
assert.equal(getComputedStyle(a1.$.mirror).visibility, 'hidden');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
bower_components/paper-input/test/decorator.html
vendored
Normal file
150
bower_components/paper-input/test/decorator.html
vendored
Normal file
@@ -0,0 +1,150 @@
|
||||
<!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>
|
||||
<meta charset="UTF-8">
|
||||
<title>paper-input-decorator tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../polymer-gestures/test/js/fake.js"></script>
|
||||
|
||||
<link href="../../core-input/core-input.html" rel="import">
|
||||
|
||||
<link href="../paper-input-decorator.html" rel="import">
|
||||
<link href="../paper-autogrow-textarea.html" rel="import">
|
||||
|
||||
<style>
|
||||
paper-input-decorator {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<paper-input-decorator id="decorator1" label="input">
|
||||
<input id="input1" is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator id="decorator2" label="input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator id="decorator3" label="input" floatingLabel>
|
||||
<input id="input3" is="core-input">
|
||||
</paper-input-decorator>
|
||||
|
||||
<paper-input-decorator id="decorator4" label="input" floatingLabel isInvalid error="error message">
|
||||
<input id="input4" is="core-input" value="something">
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<paper-input-decorator id="decorator5" label="input" labelVisible="false">
|
||||
<input>
|
||||
</paper-input-decorator>
|
||||
|
||||
<br>
|
||||
|
||||
<script>
|
||||
|
||||
var fake = new Fake();
|
||||
|
||||
var d1 = document.getElementById('decorator1');
|
||||
var i1 = document.getElementById('input1');
|
||||
var d2 = document.getElementById('decorator2');
|
||||
var d3 = document.getElementById('decorator3');
|
||||
var i3 = document.getElementById('input3');
|
||||
var d4 = document.getElementById('decorator4');
|
||||
var i4 = document.getElementById('input4');
|
||||
var d5 = document.getElementById('decorator5');
|
||||
|
||||
function reset(d, i) {
|
||||
d.labelVisible = null;
|
||||
i.value = null;
|
||||
d.updateLabelVisibility(i.value);
|
||||
}
|
||||
|
||||
suite('basic', function() {
|
||||
|
||||
teardown(function() {
|
||||
reset(d1, i1);
|
||||
reset(d3, i3);
|
||||
});
|
||||
|
||||
test('label is invisible if value is not null', function() {
|
||||
assert.ok(d1._labelVisible);
|
||||
i1.value = 'foobar';
|
||||
d1.updateLabelVisibility(i1.value);
|
||||
assert.ok(!d1._labelVisible);
|
||||
});
|
||||
|
||||
test('label is invisible if floating label and focused', function(done) {
|
||||
assert.ok(d3._labelVisible);
|
||||
d3.focusAction();
|
||||
flush(function() {
|
||||
assert.ok(!d3._labelVisible);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('label is invisible if value = 0', function() {
|
||||
assert.ok(d1._labelVisible);
|
||||
i1.value = 0;
|
||||
d1.updateLabelVisibility(i1.value);
|
||||
assert.ok(!d1._labelVisible);
|
||||
});
|
||||
|
||||
test('labelVisible overrides label visibility', function() {
|
||||
d1.labelVisible = false;
|
||||
assert.ok(!i1.value);
|
||||
assert.ok(!d1._labelVisible);
|
||||
});
|
||||
|
||||
test('labelVisible works in an attribute', function() {
|
||||
assert.ok(!d5._labelVisible);
|
||||
});
|
||||
|
||||
test('can create inputs lazily', function() {
|
||||
var input = document.createElement('input');
|
||||
input.value = 'foobar';
|
||||
d2.appendChild(input);
|
||||
assert.ok(!d2._labelVisible);
|
||||
});
|
||||
|
||||
test('tapping on floating label focuses input', function(done) {
|
||||
i3.value = 'foobar';
|
||||
flush(function() {
|
||||
assert.ok(!d3._labelVisible);
|
||||
fake.downOnNode(d1.shadowRoot.querySelector('.floated-label'));
|
||||
flush(function() {
|
||||
assert.strictEqual(window.ShadowDOMPolyfill ? wrap(document.activeElement) : document.activeElement, i1);
|
||||
done();
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
test('floating label and the error message are the same color', function() {
|
||||
var s1 = getComputedStyle(d4.$.floatedLabelText);
|
||||
var s2 = getComputedStyle(d4.shadowRoot.querySelector('.error-text'));
|
||||
assert.strictEqual(s1.color, s2.color);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
bower_components/paper-input/test/index.html
vendored
Normal file
26
bower_components/paper-input/test/index.html
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
<!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>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>Tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'a11y.html',
|
||||
'autogrow.html',
|
||||
'decorator.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user