From f16ebdecc6de550d72a7339c7032ec31322cf7fd Mon Sep 17 00:00:00 2001
From: Sami Suo-Heikki <suoheikki.sami@gmail.com>
Date: Sat, 15 Dec 2018 13:11:43 +0200
Subject: [PATCH] Add <vaadin-email-field> component

---
 README.md                              | 24 ++++---
 bower.json                             |  4 +-
 demo/demos.json                        | 10 +++
 demo/email-field-demos.html            | 27 ++++++++
 demo/index.html                        |  1 +
 src/vaadin-email-field.html            | 67 ++++++++++++++++++++
 test/email-field.html                  | 86 ++++++++++++++++++++++++++
 test/test-suites.js                    |  3 +-
 theme/lumo/vaadin-email-field.html     |  2 +
 theme/material/vaadin-email-field.html |  2 +
 vaadin-directory-description.md        |  1 +
 vaadin-email-field.html                |  1 +
 12 files changed, 217 insertions(+), 11 deletions(-)
 create mode 100644 demo/email-field-demos.html
 create mode 100644 src/vaadin-email-field.html
 create mode 100644 test/email-field.html
 create mode 100644 theme/lumo/vaadin-email-field.html
 create mode 100644 theme/material/vaadin-email-field.html
 create mode 100644 vaadin-email-field.html

diff --git a/README.md b/README.md
index 258b7ccf..ff931b8e 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,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-email-field.html">
     <next-code-block></next-code-block>
   </template>
 </custom-element-demo>
@@ -32,6 +33,7 @@
 <vaadin-text-field label="Username"></vaadin-text-field>
 <vaadin-password-field label="Password"></vaadin-password-field>
 <vaadin-text-area label="Description"></vaadin-text-area>
+<vaadin-email-field label="Email"></vaadin-email-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)
@@ -82,23 +84,27 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-text-field.html`  
-  `theme/lumo/vaadin-text-area.html`  
+  `theme/lumo/vaadin-text-field.html`
+  `theme/lumo/vaadin-text-area.html`
   `theme/lumo/vaadin-password-field.html`
+  `theme/lumo/vaadin-email-field.html`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-text-field.html`  
-  `theme/material/vaadin-text-area.html`  
+  `theme/material/vaadin-text-field.html`
+  `theme/material/vaadin-text-area.html`
   `theme/material/vaadin-password-field.html`
+  `theme/material/vaadin-email-field.html`
 
-- Aliases for `theme/lumo/vaadin-text-field.html`  
-  `theme/lumo/vaadin-text-area.html`  
-  `theme/lumo/vaadin-password-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`:
 
-  `vaadin-text-field.html`  
-  `vaadin-text-area.html`  
+  `vaadin-text-field.html`
+  `vaadin-text-area.html`
   `vaadin-password-field.html`
+  `vaadin-email-field.html`
 
 
 ## Running demos and tests in browser
diff --git a/bower.json b/bower.json
index c978620d..4fb4184f 100644
--- a/bower.json
+++ b/bower.json
@@ -9,9 +9,11 @@
     "vaadin-text-field.html",
     "vaadin-password-field.html",
     "vaadin-text-area.html",
+    "vaadin-email-field.html",
     "theme/material/vaadin-password-field.html",
     "theme/material/vaadin-text-area.html",
-    "theme/material/vaadin-text-field.html"
+    "theme/material/vaadin-text-field.html",
+    "theme/material/vaadin-email.field.html"
   ],
   "keywords": [
     "Vaadin",
diff --git a/demo/demos.json b/demo/demos.json
index cf452cfd..1fa81b16 100644
--- a/demo/demos.json
+++ b/demo/demos.json
@@ -51,6 +51,16 @@
         "image": ""
       }
     },
+    {
+      "name": "Email Field",
+      "url": "email-field-demos",
+      "src": "email-field-demos.html",
+      "meta": {
+        "title": "Vaadin Email Field Examples",
+        "description": "",
+        "image": ""
+      }
+    },
     {
       "name": "Text Area",
       "url": "text-area-demos",
diff --git a/demo/email-field-demos.html b/demo/email-field-demos.html
new file mode 100644
index 00000000..116af3d4
--- /dev/null
+++ b/demo/email-field-demos.html
@@ -0,0 +1,27 @@
+<dom-module id="email-field-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <p>The <code>&lt;vaadin-email-field&gt;</code> element has all the same features as the <code>&lt;vaadin-text-field&gt;</code> element plus the predefined pattern specified in <a href="https://www.w3.org/TR/2012/WD-html-markup-20120320/input.email.html">W3C</a>.</p>
+
+    <h3>Email Field</h3>
+    <vaadin-demo-snippet id="email-field-demos-basic-email-field">
+      <template preserve-content>
+        <vaadin-email-field label="Email" error-message="Please enter a valid email address"></vaadin-email-field>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class EmailFieldDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
+      static get is() {
+        return 'email-field-demos';
+      }
+    }
+    customElements.define(EmailFieldDemos.is, EmailFieldDemos);
+  </script>
+</dom-module>
diff --git a/demo/index.html b/demo/index.html
index a296cc7d..1da0eddb 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,6 +15,7 @@
 
   <link rel="import" href="../vaadin-text-field.html">
   <link rel="import" href="../vaadin-password-field.html">
+  <link rel="import" href="../vaadin-email-field.html">
   <link rel="import" href="../vaadin-text-area.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">
diff --git a/src/vaadin-email-field.html b/src/vaadin-email-field.html
new file mode 100644
index 00000000..a5edee50
--- /dev/null
+++ b/src/vaadin-email-field.html
@@ -0,0 +1,67 @@
+<!--
+@license
+Copyright (c) 2018 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">
+
+<script>
+  (function() {
+    let memoizedTemplate;
+
+    /**
+     * `<vaadin-email-field>` is a Web Component for email field control in forms.
+     *
+     * ```html
+     * <vaadin-email-field label="Email">
+     * </vaadin-email-field>
+     * ```
+     *
+     * ### Styling
+     *
+     * See vaadin-text-field.html for the styling documentation
+     *
+     * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+     *
+     * @memberof Vaadin
+     * @extends Vaadin.TextFieldElement
+     * @demo demo/index.html
+     */
+    class EmailFieldElement extends Vaadin.TextFieldElement {
+      static get is() {
+        return 'vaadin-email-field';
+      }
+
+      static get version() {
+        return '2.3.0-alpha3';
+      }
+
+      static get template() {
+        if (!memoizedTemplate) {
+          // Clone the superclass template
+          memoizedTemplate = super.template.cloneNode(true);
+        }
+
+        return memoizedTemplate;
+      }
+
+      ready() {
+        super.ready();
+        this.focusElement.type = 'email';
+        this.focusElement.autocapitalize = 'off';
+        this.pattern = '^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$';
+      }
+    }
+
+    customElements.define(EmailFieldElement.is, EmailFieldElement);
+
+    /**
+     * @namespace Vaadin
+     */
+    window.Vaadin = window.Vaadin || {};
+    Vaadin.EmailFieldElement = EmailFieldElement;
+  })();
+</script>
diff --git a/test/email-field.html b/test/email-field.html
new file mode 100644
index 00000000..2fb099f7
--- /dev/null
+++ b/test/email-field.html
@@ -0,0 +1,86 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-email-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-email-field.html">
+
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-email-field></vaadin-email-field>
+    </template>
+  </test-fixture>
+
+  <script>
+    const validAddresses = [
+      'email@example.com',
+      'firstname.lastname@example.com',
+      'email@subdomain.example.com',
+      'firstname+lastname@example.com',
+      'email@123.123.123.123',
+      '1234567890@example.com',
+      'email@example-one.com',
+      '_______@example.com',
+      'email@example.name',
+      'email@example.museum',
+      'email@example.co.jp',
+      'firstname-lastname@example.com',
+      'email@example'
+    ];
+
+    const invalidAdresses = [
+      'plainaddress',
+      '#@%^%#$@#$@#.com',
+      '@example.com',
+      'Joe Smith <email@example.com>',
+      'email.example.com',
+      'email@example@example.com',
+      'あいうえお@example.com',
+      'email@example.com (Joe Smith)',
+      'email@-example.com',
+      'email@example..com'
+    ];
+
+    describe(`email-field`, () => {
+      let emailField, input;
+
+      beforeEach(() => {
+        emailField = fixture('default');
+        input = emailField.focusElement;
+      });
+
+      it('should have [type=email]', () => {
+        expect(input.type).to.equal('email');
+      });
+
+      describe(`validation`, () => {
+        describe('valid email addresses', () => {
+          validAddresses.map(address => {
+            it(address, () => {
+              emailField.value = address;
+              emailField.validate();
+              expect(emailField.invalid).to.be.false;
+            });
+          });
+        });
+
+        describe('invalid email addresses', () => {
+          invalidAdresses.map(address => {
+            it(address, () => {
+              emailField.value = address;
+              emailField.validate();
+              expect(emailField.invalid).to.be.true;
+            });
+          });
+        });
+      });
+    });
+  </script>
+</body>
diff --git a/test/test-suites.js b/test/test-suites.js
index 7cad4ce1..e471cdbc 100644
--- a/test/test-suites.js
+++ b/test/test-suites.js
@@ -4,5 +4,6 @@ window.VaadinTextFieldSuites = [
   'password-field.html',
   'validation.html',
   'accessibility.html',
-  'custom-input.html'
+  'custom-input.html',
+  'email-field.html'
 ];
diff --git a/theme/lumo/vaadin-email-field.html b/theme/lumo/vaadin-email-field.html
new file mode 100644
index 00000000..7d697516
--- /dev/null
+++ b/theme/lumo/vaadin-email-field.html
@@ -0,0 +1,2 @@
+<link rel="import" href="vaadin-text-field.html">
+<link rel="import" href="../../src/vaadin-email-field.html">
diff --git a/theme/material/vaadin-email-field.html b/theme/material/vaadin-email-field.html
new file mode 100644
index 00000000..7d697516
--- /dev/null
+++ b/theme/material/vaadin-email-field.html
@@ -0,0 +1,2 @@
+<link rel="import" href="vaadin-text-field.html">
+<link rel="import" href="../../src/vaadin-email-field.html">
diff --git a/vaadin-directory-description.md b/vaadin-directory-description.md
index 8e8c29e6..a4c705a4 100644
--- a/vaadin-directory-description.md
+++ b/vaadin-directory-description.md
@@ -13,4 +13,5 @@
 <vaadin-text-field label="Username"></vaadin-text-field>
 <vaadin-password-field label="Password"></vaadin-password-field>
 <vaadin-text-area label="Description"></vaadin-text-area>
+<vaadin-email-field label="Email"></vaadin-email-field>
 ```
diff --git a/vaadin-email-field.html b/vaadin-email-field.html
new file mode 100644
index 00000000..2117761c
--- /dev/null
+++ b/vaadin-email-field.html
@@ -0,0 +1 @@
+<link rel="import" href="theme/lumo/vaadin-email-field.html">