feat: vaadin-integer-field base setup

README.md

@@ -25,6 +25,7 @@
     <link rel="import" href="vaadin-text-area.html">
     <link rel="import" href="vaadin-email-field.html">
     <link rel="import" href="vaadin-number-field.html">
+    <link rel="import" href="vaadin-integer-field.html">
     <next-code-block></next-code-block>
   </template>
 </custom-element-demo>
@@ -35,7 +36,8 @@
 <vaadin-password-field label="Password"></vaadin-password-field>
 <vaadin-text-area label="Description"></vaadin-text-area>
 <vaadin-email-field label="Email"></vaadin-email-field>
-<vaadin-number-field label="Count" has-controls></vaadin-number-field>
+<vaadin-number-field label="Price"></vaadin-number-field>
+<vaadin-integer-field label="Count" has-controls></vaadin-integer-field>
 ```
 
 [<img src="https://raw.githubusercontent.com/vaadin/vaadin-text-field/master/screenshot.png" width="710" alt="Screenshot of vaadin-text-field">](https://vaadin.com/components/vaadin-text-field)
@@ -65,6 +67,7 @@ Once installed, import the components you need in your application:
 <link rel="import" href="bower_components/vaadin-text-field/vaadin-password-field.html">
 <link rel="import" href="bower_components/vaadin-text-field/vaadin-email-field.html">
 <link rel="import" href="bower_components/vaadin-text-field/vaadin-number-field.html">
+<link rel="import" href="bower_components/vaadin-text-field/vaadin-integer-field.html">
 ```
 ### Polymer 3 and ES Modules Compatible Version
 
@@ -82,6 +85,7 @@ import '@vaadin/vaadin-text-field/vaadin-text-area.js';
 import '@vaadin/vaadin-text-field/vaadin-password-field.js';
 import '@vaadin/vaadin-text-field/vaadin-email-field.js';
 import '@vaadin/vaadin-text-field/vaadin-number-field.js';
+import '@vaadin/vaadin-text-field/vaadin-integer-field.js';
 ```
 
 ## Getting started
@@ -99,6 +103,7 @@ To use the Material theme, import the correspondent file from the `theme/materia
   `theme/lumo/vaadin-password-field.html`
   `theme/lumo/vaadin-email-field.html`
   `theme/lumo/vaadin-number-field.html`
+  `theme/lumo/vaadin-integer-field.html`
 
 - The components with the Material theme:
 
@@ -107,18 +112,21 @@ To use the Material theme, import the correspondent file from the `theme/materia
   `theme/material/vaadin-password-field.html`
   `theme/material/vaadin-email-field.html`
   `theme/material/vaadin-number-field.html`
+  `theme/material/vaadin-integer-field.html`
 
 - Aliases for `theme/lumo/vaadin-text-field.html`
   `theme/lumo/vaadin-text-area.html`
   `theme/lumo/vaadin-password-field.html`
   `theme/lumo/vaadin-email-field.html`
-  `theme/lumo/vaadin-number-field.html`:
+  `theme/lumo/vaadin-number-field.html`
+  `theme/lumo/vaadin-integer-field.html`:
 
   `vaadin-text-field.html`
   `vaadin-text-area.html`
   `vaadin-password-field.html`
   `vaadin-email-field.html`
   `vaadin-number-field`
+  `vaadin-integer-field`
 
 
 ## Running demos and tests in a browser

bower.json

@@ -11,13 +11,15 @@
     "vaadin-number-field.html",
     "vaadin-text-area.html",
     "vaadin-email-field.html",
+    "vaadin-integer-field.html",
     "theme/lumo/vaadin-placeholder-styles.html",
     "theme/material/vaadin-placeholder-styles.html",
     "theme/material/vaadin-password-field.html",
     "theme/material/vaadin-number-field.html",
     "theme/material/vaadin-text-area.html",
     "theme/material/vaadin-text-field.html",
-    "theme/material/vaadin-email-field.html"
+    "theme/material/vaadin-email-field.html",
+    "theme/material/vaadin-integer-field.html"
   ],
   "keywords": [
     "Vaadin",

demo/index.html

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

demo/number-field-demos.html

@@ -37,6 +37,14 @@ <h3>Number field with step</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Integer field</h3>
+    <p>Integer field prevents the user from entering decimals.</p>
+    <vaadin-demo-snippet id="integer-field-demos">
+      <template preserve-content>
+        <vaadin-integer-field min="0" max="10" has-controls></vaadin-integer-field>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class NumberFieldDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {

src/vaadin-integer-field.html

@@ -0,0 +1,51 @@
+<!--
+@license
+Copyright (c) 2019 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-number-field.html">
+
+<dom-module id="vaadin-integer-field-template">
+
+  <script>
+    (function() {
+
+      /**
+      * `<vaadin-integer-field>` is a Web Component for integer field control in forms.
+      *
+      * ```html
+      * <vaadin-integer-field label="Number">
+      * </vaadin-integer-field>
+      * ```
+      *
+      * @memberof Vaadin
+      * @extends Vaadin.NumberFieldElement
+      * @demo demo/index.html
+      */
+      class IntegerFieldElement extends Vaadin.NumberFieldElement {
+        static get is() {
+          return 'vaadin-integer-field';
+        }
+
+        static get version() {
+          return '2.4.11';
+        }
+
+        ready() {
+          super.ready();
+        }
+      }
+
+      window.customElements.define(IntegerFieldElement.is, IntegerFieldElement);
+
+      /**
+       * @namespace Vaadin
+       */
+      window.Vaadin = window.Vaadin || {};
+      Vaadin.IntegerFieldElement = IntegerFieldElement;
+    })();
+  </script>
+</dom-module>

src/vaadin-number-field.html

@@ -66,7 +66,7 @@
       let memoizedTemplate;
 
       /**
-      * `<vaadin-number-field>` is a Polymer 2 element for number field control in forms.
+      * `<vaadin-number-field>` is a Web Component for number field control in forms.
       *
       * ```html
       * <vaadin-number-field label="Number">

test/integer-field.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-integer-field tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../vaadin-integer-field.html">
+  <link rel="import" href="../../iron-form/iron-form.html">
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-integer-field></vaadin-integer-field>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('integer-field', () => {
+    });
+  </script>
+</body>
+</html>

test/test-suites.js

@@ -6,5 +6,6 @@ window.VaadinTextFieldSuites = [
   'validation.html',
   'accessibility.html',
   'custom-input.html',
-  'email-field.html'
+  'email-field.html',
+  'integer-field.html'
 ];

theme/lumo/vaadin-integer-field.html

@@ -0,0 +1,2 @@
+<link rel="import" href="vaadin-number-field.html">
+<link rel="import" href="../../src/vaadin-integer-field.html">

theme/material/vaadin-integer-field.html

@@ -0,0 +1,2 @@
+<link rel="import" href="vaadin-number-field.html">
+<link rel="import" href="../../src/vaadin-integer-field.html">

vaadin-directory-description.md

@@ -14,4 +14,6 @@
 <vaadin-password-field label="Password"></vaadin-password-field>
 <vaadin-text-area label="Description"></vaadin-text-area>
 <vaadin-email-field label="Email"></vaadin-email-field>
+<vaadin-number-field label="Price"></vaadin-number-field>
+<vaadin-integer-field label="Count" has-controls></vaadin-integer-field>
 ```

vaadin-integer-field.html

@@ -0,0 +1 @@
+<link rel="import" href="theme/lumo/vaadin-integer-field.html">