-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
217 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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><vaadin-email-field></code> element has all the same features as the <code><vaadin-text-field></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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <link rel="import" href="vaadin-text-field.html"> | ||
| <link rel="import" href="../../src/vaadin-email-field.html"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <link rel="import" href="vaadin-text-field.html"> | ||
| <link rel="import" href="../../src/vaadin-email-field.html"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <link rel="import" href="theme/lumo/vaadin-email-field.html"> |