paper-input-container.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">

<!--
`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character
counter, used to implement Material Design text fields.

For example:

    <paper-input-container>
      <label>Your name</label>
      <input is="iron-input">
    </paper-input-container>

### Listening for input changes

By default, it listens for changes on the `bind-value` attribute on its children nodes and perform
tasks such as auto-validating and label styling when the `bind-value` changes. You can configure
the attribute it listens to with the `attr-for-value` attribute.

### Using a custom input element

You can use a custom input element in a `<paper-input-container>`, for example to implement a
compound input field like a social security number input. The custom input element should have the
`paper-input-input` class, have a `notify:true` value property and optionally implements
`Polymer.IronValidatableBehavior` if it is validatble.

    <paper-input-container attr-for-value="ssn-value">
      <label>Social security number</label>
      <ssn-input class="paper-input-input"></ssn-input>
    </paper-input-container>

### Validation

If the `auto-validate` attribute is set, the input container will validate the input and update
the container styling when the input value changes.

### Add-ons

Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and
implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value
or validity changes, and may implement functionality such as error messages or character counters.
They appear at the bottom of the input.

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
`--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--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-label` | Mixin applied to the label | `{}`
`--paper-input-container-input` | Mixin applied to the input | `{}`

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">

  <style>

    :host {
      display: block;
      padding: 8px 0;

      @apply(--paper-input-container);
    }

    :host[inline] {
      display: inline-block;
    }

    :host([disabled]) {
      pointer-events: none;
      opacity: 0.33;
    }

    .floated-label-placeholder {
      @apply(--paper-font-caption);
    }

    .underline {
      position: relative;
    }

    .focused-line {
      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);
    }

    .is-highlighted .focused-line {
      -webkit-transform: none;
      transform: none;
      -webkit-transition: -webkit-transform 0.25s;
      transition: transform 0.25s;

      @apply(--paper-transition-easing);
    }

    .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;
      transition: transform 0.25s;

      @apply(--paper-transition-easing);
    }

    .unfocused-line {
      height: 1px;
      background: var(--paper-input-container-color, --secondary-text-color);
    }

    :host([disabled]) .unfocused-line {
      border-bottom: 1px dashed;
      border-color: var(--paper-input-container-color, --secondary-text-color);
      background: transparent;
    }

    .input-content {
      position: relative;
    }

    .input-content ::content label,
    .input-content ::content .paper-input-label {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      font: inherit;
      color: var(--paper-input-container-color, --secondary-text-color);

      @apply(--paper-font-subhead);
      @apply(--paper-input-container-label);
    }

    .input-content.label-is-floating ::content label,
    .input-content.label-is-floating ::content .paper-input-label {
      -webkit-transform: translate3d(0, -75%, 0) scale(0.75);
      transform: translate3d(0, -75%, 0) scale(0.75);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      -webkit-transition: -webkit-transform 0.25s;
      transition: transform 0.25s;

      @apply(--paper-transition-easing);
    }

    .input-content.label-is-highlighted ::content label,
    .input-content.label-is-highlighted ::content .paper-input-label {
      color: var(--paper-input-container-focus-color, --default-primary-color);
    }

    .input-content.is-invalid ::content label,
    .input-content.is-invalid ::content .paper-input-label {
      color: var(--paper-input-container-invalid-color, --google-red-500);
    }

    .input-content.label-is-hidden ::content label,
    .input-content.label-is-hidden ::content .paper-input-label {
      visibility: hidden;
    }

    .input-content ::content input,
    .input-content ::content textarea,
    .input-content ::content iron-autogrow-textarea,
    .input-content ::content .paper-input-input {
      position: relative; /* to make a stacking context */
      outline: none;
      box-shadow: none;
      padding: 0;
      width: 100%;
      background: transparent;
      border: none;
      color: var(--paper-input-container-input-color, --primary-text-color);

      @apply(--paper-font-subhead);
      @apply(--paper-input-container-input);
    }

    /* Firefox sets a min-width on the input, which can cause layout issues */
    .input-content ::content input {
      min-width: 0;
    }

    .input-content ::content textarea {
      resize: none;
    }

    .add-on-content.is-invalid ::content * {
      color: var(--paper-input-container-invalid-color, --google-red-500);
    }

    .add-on-content.is-highlighted ::content * {
      color: var(--paper-input-container-focus-color, --default-primary-color);
    }

  </style>

  <template>

    <template is="dom-if" if="[[!noLabelFloat]]">
      <div class="floated-label-placeholder">&nbsp;</div>
    </template>

    <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
      <content select=":not([add-on])"></content>
    </div>

    <div class$="[[_computeUnderlineClass(focused,invalid)]]">
      <div class="unfocused-line fit"></div>
      <div class="focused-line fit"></div>
    </div>

    <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
      <content id="addOnContent" select="[add-on]"></content>
    </div>

  </template>

</dom-module>

<script>
(function() {

  Polymer({

    is: 'paper-input-container',

    properties: {

      /**
       * Set to true to disable the floating label. The label disappears when the input value is
       * not null.
       */
      noLabelFloat: {
        type: Boolean,
        value: false
      },

      /**
       * Set to true to always float the floating label.
       */
      alwaysFloatLabel: {
        type: Boolean,
        value: false
      },

      /**
       * The attribute to listen for value changes on.
       */
      attrForValue: {
        type: String,
        value: 'bind-value'
      },

      /**
       * Set to true to auto-validate the input value when it changes.
       */
      autoValidate: {
        type: Boolean,
        value: false
      },

      /**
       * True if the input is invalid. This property is set automatically when the input value
       * changes if auto-validating, or when the `iron-input-valid` event is heard from a child.
       */
      invalid: {
        observer: '_invalidChanged',
        type: Boolean,
        value: false
      },

      /**
       * True if the input has focus.
       */
      focused: {
        readOnly: true,
        type: Boolean,
        value: false
      },

      _addons: {
        type: Array,
        value: function() {
          return [];
        }
      },

      _inputHasContent: {
        type: Boolean,
        value: false
      },

      _inputSelector: {
        type: String,
        value: 'input,textarea,.paper-input-input'
      },

      _boundOnFocus: {
        type: Function,
        value: function() {
          return this._onFocus.bind(this);
        }
      },

      _boundOnBlur: {
        type: Function,
        value: function() {
          return this._onBlur.bind(this);
        }
      },

      _boundOnInput: {
        type: Function,
        value: function() {
          this._onInput.bind(this)
        }
      },

      _boundValueChanged: {
        type: Function,
        value: function() {
          return this._onValueChanged.bind(this);
        }
      }

    },

    listeners: {
      'addon-attached': '_onAddonAttached',
      'iron-input-validate': '_onIronInputValidate'
    },

    get _valueChangedEvent() {
      return this.attrForValue + '-changed';
    },

    get _propertyForValue() {
      return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
    },

    get _inputElement() {
      return Polymer.dom(this).querySelector(this._inputSelector);
    },

    ready: function() {
      this.addEventListener('focus', this._boundOnFocus, true);
      this.addEventListener('blur', this._boundOnBlur, true);
      if (this.attrForValue) {
        this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
      } else {
        this.addEventListener('input', this._onInput);
      }
    },

    attached: function() {
      this._handleValue(this._inputElement);
    },

    _onAddonAttached: function(event) {
      this._addons.push(event.target);
      this._handleValue(this._inputElement);
    },

    _onFocus: function() {
      this._setFocused(true);
    },

    _onBlur: function() {
      this._setFocused(false);
    },

    _onInput: function(event) {
      this._handleValue(event.target);
    },

    _onValueChanged: function(event) {
      this._handleValue(event.target);
    },

    _handleValue: function(inputElement) {
      var value = inputElement[this._propertyForValue] || inputElement.value;

      if (this.autoValidate) {
        var valid;
        if (inputElement.validate) {
          valid = inputElement.validate(value);
        } else {
          valid = inputElement.checkValidity();
        }
        this.invalid = !valid;
      }

      // type="number" hack needed because this.value is empty until it's valid
      if (value || (inputElement.type === 'number' && !inputElement.checkValidity())) {
        this._inputHasContent = true;
      } else {
        this._inputHasContent = false;
      }

      this.updateAddons({
        inputElement: inputElement,
        value: value,
        invalid: this.invalid
      });
    },

    _onIronInputValidate: function(event) {
      this.invalid = this._inputElement.invalid;
    },

    _invalidChanged: function() {
      if (this._addons) {
        this.updateAddons({invalid: this.invalid});
      }
    },

    /**
     * Call this to update the state of add-ons.
     * @param {Object} state Add-on state.
     */
    updateAddons: function(state) {
      for (var addon, index = 0; addon = this._addons[index]; index++) {
        addon.update(state);
      }
    },

    _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
      var cls = 'input-content';
      if (!noLabelFloat) {
        if (alwaysFloatLabel || _inputHasContent) {
          cls += ' label-is-floating';
          if (invalid) {
            cls += ' is-invalid';
          } else if (focused) {
            cls += " label-is-highlighted";
          }
        }
      } else {
        if (_inputHasContent) {
          cls += ' label-is-hidden';
        }
      }
      return cls;
    },

    _computeUnderlineClass: function(focused, invalid) {
      var cls = 'underline';
      if (invalid) {
        cls += ' is-invalid';
      } else if (focused) {
        cls += ' is-highlighted'
      }
      return cls;
    },

    _computeAddOnContentClass: function(focused, invalid) {
      var cls = 'add-on-content';
      if (invalid) {
        cls += ' is-invalid';
      } else if (focused) {
        cls += ' is-highlighted'
      }
      return cls;
    }

  });

})();
</script>