[[ label ]]
diff --git a/key-pad-key.js b/key-pad-key.js
index beeab4d..bf328ca 100644
--- a/key-pad-key.js
+++ b/key-pad-key.js
@@ -19,6 +19,10 @@ Polymer({
this.updateStyles();
},
+ _computeClassKeypadKey: function() {
+ return 'key-pad-key__keyNum key-pad-key__' + this.label;
+ },
+
_onTapKey: function(evt) {
this.fire('key-pad-key:key', this.key);
console.log('key-pad-key:key', this.key);
diff --git a/key-pad-styles.html b/key-pad-styles.html
index 9584f07..2fadb60 100644
--- a/key-pad-styles.html
+++ b/key-pad-styles.html
@@ -32,9 +32,21 @@
}
.key-pad__keyNums {
+ font-size: 16px;
@apply(--layout);
@apply(--layout-wrap);
+ @apply(--key-pad-nums);
}
+
+ .key-pad__keyNums > *:not(template) {
+ flex: 1 0 33.3%;
+ @apply(--layout);
+ @apply(--layout-center-justified);
+ }
+
+ .key-pad__keyNums >*:nth-child(10) {
+ flex-basis: 66.6%;
+ }
diff --git a/key-pad.html b/key-pad.html
index e881279..fac6d5d 100644
--- a/key-pad.html
+++ b/key-pad.html
@@ -20,8 +20,8 @@
-
-
+
+
diff --git a/key-pad.js b/key-pad.js
index a45e159..566c809 100644
--- a/key-pad.js
+++ b/key-pad.js
@@ -66,11 +66,6 @@ Polymer({
type: Boolean
},
- _keyLength: {
- type: Number,
- value: 0
- },
-
_keypadNums: {
type: Array
}
@@ -84,17 +79,10 @@ Polymer({
attached: function() {
var shuffle = !!this.shuffle ? false : true;
this.set('_keypadNums', this._getRandomNumbers(shuffle));
-
-
- },
-
- destroy: function() {
- this.unlisten(keys, 'key-pad-key:key');
},
reset: function() {
this._setModel('');
- this.set('_keyLength', 0);
},
_getInputLength: function() {
@@ -107,14 +95,19 @@ Polymer({
},
+ // Compute clases
+ _computeClassKeypadPoint: function(index) {
+ var idx = index + 1;
+ return 'key-pad__point key-pad__point--' + idx.toString();
+ },
+
////// EVENTS
_onKeypadKey: function(evt, detail) {
//TODO: Check characters
var keyValue = detail.toString();
- if (this._keyLength < this.maxLength) {
+ if (this.model.length < this.maxLength) {
this._setModel(this.model + keyValue);
- this._keyLength++;
}
},