Implement focus

money-input.html

@@ -56,8 +56,13 @@
             allowed-pattern="[0-9\.\,\-]"
             disabled$="[[disabled]]"
             readonly$="[[readonly]]"
-            placeholder$="[[placeholder]]">
+            placeholder$="[[placeholder]]"
+            focused="{{focused}}"
+            type="tel"
+            step="any"
+    >
       <div prefix class="prefix">[[currency]]</div>
+      <content select="[suffix]"></content>
     </paper-input>
   </template>
 
@@ -134,13 +139,15 @@
         /** Max value accepted by field */
         maxValue: {
           type: Number,
-          value: 1000000
+          value: 1000000,
+          observer: 'maxValueChanged'
         },
 
         /** Min value accepted by field */
         minValue: {
           type: Number,
-          value: 0
+          value: 0,
+          observer: 'minValueChanged'
         },
 
         /** Decimal precision -> Use "0" for integer amount */
@@ -177,6 +184,12 @@
         placeholder: {
           type: String,
           value: ''
+        },
+
+        /** Boolean value indicating whether the paper-input is focused **/
+        focused: {
+          type: Boolean,
+          reflectToAttribute: true
         }
       },
 
@@ -217,7 +230,7 @@
       },
 
       _valueChange: function() {
-        if (this._formattedValue != this.value) {
+        if (this._formattedValue !== this.value) {
           if(!isNaN(parseFloat(this.value)) && isFinite(this.value)) {
             var signal = this._getSignal('' + this.value);
             if((''+this.value).length >= this.precision) {
@@ -311,11 +324,11 @@
 
         if(n > this.maxValue){
           this.$.input.invalid = true;
-          this.$.input.errorMessage = this.maxValueErrorMessage + ' ' + this.maxValue;
+          this.$.input.errorMessage = this.maxValueErrorMessage + ' $' + this._parse(this._removeUI(this.maxValue.toString()));
           return false;
         } else if(n < this.minValue){
           this.$.input.invalid = true;
-          this.$.input.errorMessage = this.minValueErrorMessage + ' ' + this.minValue;
+          this.$.input.errorMessage = this.minValueErrorMessage + ' $' + this._parse(this._removeUI(this.minValue.toString()));
           return false;
         } else {
           this.$.input.invalid = false;
@@ -324,9 +337,25 @@
         }
       },
 
+      maxValueChanged: function () {
+        if (this.$.input.invalid || !this._validate(this.$.input.value)) {
+          this.validate();
+        }
+      },
+
+      minValueChanged: function () {
+        if (this.$.input.invalid || !this._validate(this.$.input.value)) {
+          this.validate();
+        }
+      },
+
       /** Return validation based on required, max and min configs */
       validate: function(){
         return this.$.input.validate() && this._validate(this.$.input.value);
+      },
+
+      focus: function () {
+        return this.$.input.focus();
       }
     });