• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<link rel="import" href="../../polymer/polymer.html">
11<link rel="import" href="../../iron-input/iron-input.html">
12<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
13<link rel="import" href="ssn-validator.html">
14
15<dom-module id="ssn-input">
16  <template>
17
18    <style>
19      :host {
20        display: inline-block;
21      }
22
23      :host([hidden]) {
24        display: none !important;
25      }
26
27      input[is="iron-input"] {
28        font: inherit;
29        outline: none;
30        box-shadow: none;
31        border: none;
32        width: auto;
33        text-align: center;
34      }
35
36      .container {
37        @apply(--layout-horizontal);
38      }
39    </style>
40
41    <ssn-validator></ssn-validator>
42
43    <div class="container">
44
45      <input is="iron-input" maxlength="3" bind-value="{{_ssn1}}" size="3" aria-label="First 3 digits of social security number">
46      -
47      <input is="iron-input" maxlength="2" bind-value="{{_ssn2}}" size="2" aria-label="Middle 2 digits of social security number">
48      -
49      <input is="iron-input" maxlength="4" bind-value="{{_ssn3}}" size="4" aria-label="Last 4 digits of social security number">
50
51    </div>
52
53  </template>
54</dom-module>
55
56<script>
57  Polymer({
58    is: 'ssn-input',
59
60    behaviors: [
61      Polymer.IronValidatableBehavior
62    ],
63
64    properties: {
65      value: {
66        notify: true,
67        type: String
68      },
69
70      _ssn1: {
71        type: String
72      },
73
74      _ssn2: {
75        type: String
76      },
77
78      _ssn3: {
79        type: String
80      },
81
82      validator: {
83        type: String,
84        value: 'ssn-validator'
85      }
86    },
87
88    observers: [
89      '_computeValue(_ssn1,_ssn2,_ssn3)'
90    ],
91
92    _computeValue: function(ssn1, ssn2, ssn3) {
93      this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
94    }
95  });
96</script>
97