br-cel-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-cel-validator.html">

<!--
`br-cel-input`

@demo demo/index.html 
-->

<dom-module id="br-cel-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-cel-validator></br-cel-validator>

      <input is="iron-input" id="input"
          aria-labelledby$="[[_ariaLabelledBy]]"
          aria-describedby$="[[_ariaDescribedBy]]"
          required$="[[required]]"
          validator="br-cel-validator"
          type="text"
          allowed-pattern="[0-9\(\)\s-]"
          prevent-invalid-input
          maxlength="15"
          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-cel-input',

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

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

      observers: [
        '_computeValue(value)'
      ],

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

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

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

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

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

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

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

        // Remove trailing numbers
        if (value.length > 15) {
          value = value.substr(0,15);
        }
        
        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 (!previousCharASpaceOrDashOrParentheses && (value.charAt(start - 1) === ' ' || value.charAt(start - 1) === '-' || value.charAt(start - 1) === '(' || value.charAt(start - 1) === ')')) {
          this.$.input.selectionStart = value.length;
          this.$.input.selectionEnd = value.length;
        }
      }
    });
  </script>
</dom-module>