<!--
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.

@group Paper Elements
@element paper-input
@extends core-input
@homepage github.io
-->
<link href="../polymer/polymer.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">

#label.focused,
#floatedLabel.focused {
  color: {{g.paperInput.focusedColor}};
}

#underlineHighlight.focused,
#caretInner {
  background-color: {{g.paperInput.focusedColor}};
}

#error,
:host(.invalid) #label.focused,
:host(.invalid) #floatedLabel.focused {
  color: {{g.paperInput.invalidColor}};
}
:host(.invalid) #underlineHighlight.focused,
:host(.invalid) #caretInner {
  background-color: {{g.paperInput.invalidColor}};
}

</core-style>

<polymer-element name="paper-input" extends="core-input" attributes="label floatingLabel maxRows error" on-down="{{downAction}}" on-up="{{upAction}}" assetpath="">

  <template>

    <link href="paper-input.css" rel="stylesheet">

    <core-style ref="paper-input"></core-style>

    <div id="floatedLabel" class="hidden" hidden?="{{!floatingLabel}}"><span id="floatedLabelSpan">{{label}}</span></div>

    <div id="container" on-transitionend="{{transitionEndAction}}" on-webkittransitionend="{{transitionEndAction}}">

      <div id="label"><span id="labelSpan">{{label}}</span></div>

      <div id="inputContainer">

        <div id="inputClone">
          <span id="inputCloneSpan" aria-hidden="true">&#xA0;</span>
        </div>

        <template if="{{multiline}}">
          <div id="minInputHeight"></div>
          <div id="maxInputHeight"></div>
        </template>

        <shadow></shadow>

      </div>

      <div id="underlineContainer">
        <div id="underline"></div>
        <div id="underlineHighlight" class="focusedColor"></div>
      </div>

      <div id="caret">
        <div id="caretInner" class="focusedColor"></div>
      </div>

    </div>

    <div id="errorContainer">
      <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
      <div id="errorIcon"></div>
    </div>

  </template>

  

</polymer-element>
<script src="paper-input-extracted.js"></script>