Merge b4e0324 into 9b3c906

demo/demos.json

@@ -51,6 +51,16 @@
         "image": ""
       }
     },
+    {
+      "name": "Number Field",
+      "url": "text-field-number-demos",
+      "src": "text-field-number-demos.html",
+      "meta": {
+        "title": "Vaadin Number Field Examples",
+        "description": "",
+        "image": ""
+      }
+    },
     {
       "name": "Text Area",
       "url": "text-area-demos",

demo/index.html

@@ -16,6 +16,7 @@
   <link rel="import" href="../vaadin-text-field.html">
   <link rel="import" href="../vaadin-password-field.html">
   <link rel="import" href="../vaadin-text-area.html">
+  <link rel="import" href="../vaadin-number-field.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">
 

demo/text-field-number-demos.html

@@ -0,0 +1,49 @@
+<dom-module id="text-field-number-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <p>The <code>&lt;vaadin-number-field&gt;</code> element has all the same features as the <code>&lt;vaadin-text-field&gt;</code> element plus the additional features listed on this page.</p>
+
+
+    <h3>Basic number field</h3>
+    <vaadin-demo-snippet id="text-field-number-demos-basic">
+      <template preserve-content>
+        <vaadin-number-field></vaadin-number-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Number field with controls</h3>
+    <vaadin-demo-snippet id="text-field-number-demos-with-controls">
+      <template preserve-content>
+        <vaadin-number-field has-controls></vaadin-number-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Number field with value limits</h3>
+    <vaadin-demo-snippet id="text-field-number-demos-with-limits">
+      <template preserve-content>
+        <vaadin-number-field value="1" min="1" max="10" has-controls></vaadin-number-field>
+      </template>
+    </vaadin-demo-snippet>
+
+    <h3>Number field with step</h3>
+    <vaadin-demo-snippet id="text-field-number-demos-with-step">
+      <template preserve-content>
+        <vaadin-number-field step="0.2" min="0" max="10" has-controls></vaadin-number-field>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class TextFieldNumberDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
+      static get is() {
+        return 'text-field-number-demos';
+      }
+    }
+    customElements.define(TextFieldNumberDemos.is, TextFieldNumberDemos);
+  </script>
+</dom-module>

src/vaadin-number-field.html

@@ -0,0 +1,211 @@
+<!--
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+-->
+
+<link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../polymer/lib/elements/custom-style.html">
+<link rel="import" href="vaadin-text-field.html">
+
+<dom-module id="vaadin-number-field-template">
+  <template>
+    <style>
+      :host([readonly]) {
+        pointer-events: none;
+      }
+
+      [part="decrease-button"]::before {
+        content: "−";
+      }
+
+      [part="increase-button"]::before {
+        content: "+";
+      }
+
+      /* Hide the native arrow icons */
+      [part="value"]::-webkit-outer-spin-button,
+      [part="value"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      [part="value"] {
+        -moz-appearance: textfield;
+      }
+    </style>
+
+    <div
+      disabled$="[[!_allowed(-1, value, min, max)]]"
+      part="decrease-button"
+      on-click="_decreaseValue"
+      hidden$="[[!hasControls]]">
+    </div>
+
+    <div
+      disabled$="[[!_allowed(1, value, min, max)]]"
+      part="increase-button"
+      on-click="_increaseValue"
+      hidden$="[[!hasControls]]">
+    </div>
+  </template>
+
+  <script>
+    (function() {
+      let memoizedTemplate;
+
+      /**
+      * `<vaadin-number-field>` is a Polymer 2 element for number field control in forms.
+      *
+      * ```html
+      * <vaadin-number-field label="Number">
+      * </vaadin-number-field>
+      * ```
+      *
+      * @memberof Vaadin
+      * @extends Vaadin.TextFieldElement
+      * @demo demo/index.html
+      */
+      class NumberFieldElement extends Vaadin.TextFieldElement {
+        static get is() {
+          return 'vaadin-number-field';
+        }
+
+        static get properties() {
+          return {
+            /**
+            * Set to true to display value increase/decrease controls.
+            */
+            hasControls: {
+              type: Boolean,
+              value: false,
+              reflectToAttribue: true
+            },
+
+            /**
+            * The minimum value of the field.
+            */
+            min: {
+              type: Number,
+              reflectToAttribue: true,
+              observer: '_minChanged'
+            },
+
+            /**
+             * The maximum value of the field.
+             */
+            max: {
+              type: Number,
+              reflectToAttribue: true,
+              observer: '_maxChanged'
+            },
+
+            /**
+             * Specifies the allowed number intervals of the field.
+             */
+            step: {
+              reflectToAttribue: true,
+              observer: '_stepChanged',
+              value: 1
+            }
+
+          };
+        }
+
+        ready() {
+          super.ready();
+          this.focusElement.type = 'number';
+          this.focusElement.addEventListener('change', this.__onInputChange.bind(this));
+        }
+
+        static get template() {
+          if (!memoizedTemplate) {
+            // Clone the superclass template
+            memoizedTemplate = super.template.cloneNode(true);
+
+            // Retrieve this element's dom-module template
+            const thisTemplate = Polymer.DomModule.import(this.is + '-template', 'template');
+            const decreaseButton = thisTemplate.content.querySelector('[part="decrease-button"]');
+            const increaseButton = thisTemplate.content.querySelector('[part="increase-button"]');
+            const styles = thisTemplate.content.querySelector('style');
+
+            // Add the buttons and styles to the text-field template
+            const inputField = memoizedTemplate.content.querySelector('[part="input-field"]');
+            const prefixSlot = memoizedTemplate.content.querySelector('[name="prefix"]');
+            inputField.insertBefore(decreaseButton, prefixSlot);
+            inputField.appendChild(increaseButton);
+            memoizedTemplate.content.appendChild(styles);
+
+            return memoizedTemplate;
+          }
+        }
+
+        _decreaseValue() {
+          this._allowed(-1) && this.__add(-1);
+        }
+
+        _increaseValue() {
+          this._allowed(1) && this.__add(1);
+        }
+
+        __add(sign) {
+          const incr = sign * (this.step || 1);
+          // Behave like native number input adjusting to the next exact multiple of step.
+          this.value = (incr + (incr * Math.floor((parseFloat(this.value || 0) / incr).toFixed(1)))).toFixed(this.__decimals);
+          this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
+          this.focusElement.focus();
+        }
+
+        _allowed(sign, value, min, max) {
+          const incr = sign * (this.step || 1);
+          return !this.disabled && (incr < 0
+            ? this.min == null || this.value > this.min
+            : this.max == null || this.value < this.max);
+        }
+
+        _minChanged() {
+          this.focusElement.min = this.min;
+        }
+
+        _maxChanged() {
+          this.focusElement.max = this.max;
+        }
+
+        _valueChanged(newVal, oldVal) {
+          // native input does not accept certain values, and also converts
+          // from number to string, so we need synchronize value
+          this.value = this.focusElement.value;
+          super._valueChanged(this.value, oldVal);
+        }
+
+        __onInputChange() {
+          this.checkValidity() && this.__adjustDecimals();
+        }
+
+        __adjustDecimals() {
+          // when step is not an integer, adjust decimals.
+          this.focusElement.value && (this.value = parseFloat(this.focusElement.value).toFixed(this.__decimals));
+        }
+
+        _stepChanged(step) {
+          this.focusElement.step = step;
+          // Compute number of dedimals to display in input
+          this.__decimals = String(step).replace(/^\d*\.?(.*)?$/, '$1').length;
+          this.__adjustDecimals();
+        }
+
+        checkValidity() {
+          return this.focusElement.checkValidity();
+        }
+      }
+
+      window.customElements.define(NumberFieldElement.is, NumberFieldElement);
+
+      /**
+       * @namespace Vaadin
+       */
+      window.Vaadin = window.Vaadin || {};
+      Vaadin.NumberFieldElement = NumberFieldElement;
+    })();
+  </script>
+</dom-module>