br-cep-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input-behavior.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-input/paper-input-error.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="br-cep-validator.html">

<!--
`br-cep-input`

@demo demo/index.html 
-->

<dom-module id="br-cep-input">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <paper-input-container id="container"
        auto-validate="[[autoValidate]]"
        attr-for-value="bind-value"
        disabled$="[[disabled]]"
        no-label-float="[[noLabelFloat]]"
        always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
        invalid="[[invalid]]">

      <label hidden$="[[!label]]">[[label]]</label>

      <br-cep-validator></br-cep-validator>

      <input is="iron-input" id="input"
          aria-labelledby$="[[_ariaLabelledBy]]"
          aria-describedby$="[[_ariaDescribedBy]]"
          required$="[[required]]"
          validator="br-cep-validator"
          type="text"
          allowed-pattern="[0-9\-]"
          prevent-invalid-input
          maxlength="14"
          bind-value="{{value}}"
          name$="[[name]]"
          disabled$="[[disabled]]"
          invalid="{{invalid}}"
          autofocus$="[[autofocus]]"
          inputmode$="[[inputmode]]"
          placeholder$="[[placeholder]]"
          readonly$="[[readonly]]"
          size$="[[size]]">

      <template is="dom-if" if="[[errorMessage]]">
        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
      </template>

    </paper-input-container>
  </template>

  <script>
    Polymer({

      is: 'br-cep-input',

      behaviors: [
        Polymer.PaperInputBehavior,
        Polymer.IronFormElementBehavior
      ],      

      properties: {
        label: {
          type: String,
          value: "CEP"
        }
      },

      observers: [
        '_computeValue(value)'
      ],

      _computeValue: function(value) {
        value = String(value);

        var start = this.$.input.selectionStart;
        var previousCharADash = value.charAt(start - 1) === '-';

        // Remove any already-applied formatting.
        value = value.replace(/-/g, '');

          // Add a dash after the 5th character
        if (value.length > 5) {
          value = value.substr(0,5) + '-' + value.substr(5)
        }

        // Remove trailing numbers
        if (value.length > 9) {
          value = value.substr(0,9);
        }
        
        this.updateValueAndPreserveCaret(value.trim());

        // If the character right before the selection is a newly inserted
        // dot or dash, we need to advance the selection to maintain the caret position.
        if (!previousCharADash && value.charAt(start - 1) === '-') {
          this.$.input.selectionStart = start + 1;
          this.$.input.selectionEnd = start + 1;
        }
      }
    });
  </script>
</dom-module>