| Index: bower_components/paper-input/paper-input.html
|
| diff --git a/bower_components/paper-input/paper-input.html b/bower_components/paper-input/paper-input.html
|
| deleted file mode 100644
|
| index 2245fe84ecac53b8d82992c38130269485c79c7c..0000000000000000000000000000000000000000
|
| --- a/bower_components/paper-input/paper-input.html
|
| +++ /dev/null
|
| @@ -1,361 +0,0 @@
|
| -<!--
|
| -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-input` is a single- or multi-line text field where user can enter input.
|
| -It can optionally have a label.
|
| -
|
| -Example:
|
| -
|
| - <paper-input label="Your Name"></paper-input>
|
| - <paper-input multiline label="Enter multiple lines here"></paper-input>
|
| -
|
| -Theming
|
| ---------
|
| -
|
| -Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme
|
| -the focused and invalid states.
|
| -
|
| -To add custom styling to only some elements, use these selectors:
|
| -
|
| - html /deep/ paper-input[focused] .floated-label {
|
| - /* floating label color when the input has focus */
|
| - color: green;
|
| - }
|
| -
|
| - html /deep/ paper-input .focused-underline,
|
| - html /deep/ paper-input .cursor {
|
| - /* line and cursor color when the input has focus */
|
| - background-color: green;
|
| - }
|
| -
|
| - html /deep/ paper-input.invalid[focused] .floated-label,
|
| - html /deep/ paper-input[focused] .error-text,
|
| - html /deep/ paper-input[focused] .error-icon {
|
| - /* error text, icon, and floating label color when input is invalid */
|
| - color: salmon;
|
| - }
|
| -
|
| - html /deep/ paper-input.invalid .focused-underline,
|
| - html /deep/ paper-input.invalid .cursor {
|
| - /* line and cursor color when the input is invalid */
|
| - background-color: salmon;
|
| - }
|
| -
|
| -@group Paper Elements
|
| -@element paper-input
|
| -@extends core-input
|
| -@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">
|
| -
|
| -:host([focused]) .floated-label {
|
| - color: {{g.paperInput.focusedColor}};
|
| -}
|
| -
|
| -.focused-underline,
|
| -.cursor {
|
| - background-color: {{g.paperInput.focusedColor}};
|
| -}
|
| -
|
| -
|
| -:host(.invalid[focused]) .floated-label,
|
| -:host([focused]) .error-text,
|
| -:host([focused]) .error-icon {
|
| - color: {{g.paperInput.invalidColor}};
|
| -}
|
| -
|
| -:host(.invalid) .focused-underline,
|
| -:host(.invalid) .cursor {
|
| - background-color: {{g.paperInput.invalidColor}};
|
| -}
|
| -
|
| -</core-style>
|
| -
|
| -<polymer-element name="paper-input" extends="core-input" layout vertical attributes="label floatingLabel maxRows error" on-transitionEnd="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}">
|
| -
|
| - <template>
|
| -
|
| - <!--
|
| - Input tests:
|
| -
|
| - - set value to integer 0
|
| - - various html5 input types
|
| - - sizing:
|
| - - single-line: size with CSS
|
| - - single-line: can fit to container
|
| - - multi-line: size with CSS
|
| - - multi-line: size with rows
|
| - - multi-line: can fit to container
|
| - - multi-line: grows with typing
|
| - - multi-line: max rows
|
| - - multi-line: max rows, scrolls after
|
| - -->
|
| -
|
| - <link href="paper-input.css" rel="stylesheet">
|
| - <core-style ref="paper-input"></core-style>
|
| -
|
| - <div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" invisible?="{{!inputValue && !(type === 'number' && !validity.valid) || labelAnimated}}">
|
| - <!-- needed for floating label animation measurement -->
|
| - <span id="floatedLabelText" class="label-text">{{label}}</span>
|
| - </div>
|
| -
|
| - <!-- <div class="input-body" flex auto relative on-down="{{downAction}}" on-up="{{upAction}}"> -->
|
| - <div class="input-body" flex auto relative>
|
| -
|
| - <!-- the mirror sizes the input/textarea so it grows with typing -->
|
| - <div id="mirror" class="mirror-text" invisible aria-hidden="true"></div>
|
| -
|
| - <div class="label" fit aria-hidden="true">
|
| - <!-- needed for floating label animation measurement -->
|
| - <span id="labelText" class="label-text" invisible?="{{inputValue || !inputValue && type === 'number' && !validity.valid}}" animated?=
|
| - "{{labelAnimated}}">{{label}}</span>
|
| - </div>
|
| -
|
| - <div class="cursor" invisible?="{{!cursorAnimated}}" animated?="{{cursorAnimated}}"></div>
|
| -
|
| - <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
|
| - <div class="input-container" on-down="{{downAction}}" on-up="{{upAction}}">
|
| - <shadow></shadow>
|
| - </div>
|
| -
|
| - </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 layout horizontal center hidden?="{{!invalid}}">
|
| - <div class="error-text" flex auto role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
|
| - <core-icon class="error-icon" icon="warning"></core-icon>
|
| - </div>
|
| -
|
| - </template>
|
| -
|
| - <script>
|
| -
|
| - (function() {
|
| -
|
| - var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
|
| - paperInput.focusedColor = '#4059a9';
|
| - paperInput.invalidColor = '#d34336';
|
| -
|
| - 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,
|
| -
|
| - /**
|
| - * (multiline only) If set to a non-zero value, the height of this
|
| - * text input will grow with the value changes until it is maxRows
|
| - * rows tall. If the maximum size does not fit the value, the text
|
| - * input will scroll internally.
|
| - *
|
| - * @attribute maxRows
|
| - * @type number
|
| - * @default 0
|
| - */
|
| - maxRows: 0,
|
| -
|
| - /**
|
| - * 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}
|
| -
|
| - },
|
| -
|
| - get inputValueForMirror() {
|
| - var tokens = this.inputValue ? String(this.inputValue).replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : [''];
|
| -
|
| - // Enforce the min and max heights for a multiline input here to
|
| - // avoid measurement
|
| - if (this.multiline) {
|
| - if (this.maxRows && tokens.length > this.maxRows) {
|
| - tokens = tokens.slice(0, this.maxRows);
|
| - }
|
| - while (this.rows && tokens.length < this.rows) {
|
| - tokens.push('');
|
| - }
|
| - }
|
| -
|
| - return tokens.join('<br>') + ' ';
|
| - },
|
| -
|
| - get inputHasValue() {
|
| - // if type = number, the input value is the empty string until a valid number
|
| - // is entered so we must do some hacks here
|
| - return this.inputValue || (this.type === 'number' && !this.validity.valid);
|
| - },
|
| -
|
| - syncInputValueToMirror: function() {
|
| - this.$.mirror.innerHTML = this.inputValueForMirror;
|
| - },
|
| -
|
| - ready: function() {
|
| - this.syncInputValueToMirror();
|
| - },
|
| -
|
| - 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;
|
| - }
|
| -
|
| - 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;
|
| - }
|
| -
|
| - this.labelAnimated = true;
|
| - // Handle interrupted animation
|
| - this.async(function() {
|
| - this.transitionEndAction();
|
| - }, null, 250);
|
| -
|
| - if (this.inputHasValue) {
|
| - this.$.labelText.style.webkitTransform = this.$.labelText.cachedTransform;
|
| - this.$.labelText.style.transform = this.$.labelText.cachedTransform;
|
| - } else {
|
| - // 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 = '';
|
| - }
|
| - },
|
| -
|
| - inputValueChanged: function(old) {
|
| - this.super();
|
| -
|
| - this.syncInputValueToMirror();
|
| - if (old && !this.inputValue || !old && this.inputValue) {
|
| - this.animateFloatingLabel();
|
| - }
|
| - },
|
| -
|
| - placeholderChanged: function() {
|
| - this.label = this.placeholder;
|
| - },
|
| -
|
| - inputFocusAction: function() {
|
| - this.super(arguments);
|
| - this.focused = true;
|
| - },
|
| -
|
| - inputBlurAction: function(e) {
|
| - this.super(arguments);
|
| - this.focused = false;
|
| - },
|
| -
|
| - downAction: function(e) {
|
| - if (this.disabled) {
|
| - return;
|
| - }
|
| -
|
| - if (this.focused) {
|
| - return;
|
| - }
|
| -
|
| - // 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;
|
| -
|
| - // Cursor animation only runs if the input is empty
|
| - if (!this.inputHasValue) {
|
| - this.cursorAnimated = true;
|
| - }
|
| - // Handle interrupted animation
|
| - this.async(function() {
|
| - this.transitionEndAction();
|
| - }, null, 250);
|
| - },
|
| -
|
| - keydownAction: function() {
|
| - this.super();
|
| -
|
| - // more type = number hacks. see core-input for more info
|
| - if (this.type === 'number') {
|
| - var valid = !this.inputValue && this.validity.valid;
|
| - this.async(function() {
|
| - if (valid !== (!this.inputValue && this.validity.valid)) {
|
| - this.animateFloatingLabel();
|
| - }
|
| - });
|
| - }
|
| - },
|
| -
|
| - transitionEndAction: function() {
|
| - this.underlineAnimated = false;
|
| - this.cursorAnimated = false;
|
| - this.labelAnimated = false;
|
| - }
|
| -
|
| - });
|
| -
|
| - }());
|
| -
|
| - </script>
|
| -
|
| -</polymer-element>
|
|
|