Home | History | Annotate | Download | only in demo 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject 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