Convert to Polymer 3, add events type definitions

.eslintrc.json

@@ -1,19 +1,15 @@
 {
-  "extends": ["vaadin"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
   "env": {
     "browser": true,
-    "node": true,
     "es6": true
   },
-  "plugins": [
-    "html"
-  ],
-  "globals": {
-    "vaadin": false,
-    "CustomElements": false,
-    "HTMLImports": false,
-    "Polymer": false,
-    "WeakMap": false,
-    "Vaadin": false
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2018
   }
 }

ISSUE_TEMPLATE.md → .github/ISSUE_TEMPLATE.md

@@ -8,7 +8,7 @@
 <!-- Example: Overlay stays hidden. -->
 
 ### Live Demo
-<!-- The template, click "Remix This" to edit it: https://glitch.com/edit/#!/desert-duckling -->
+<!-- The template, click "Remix This" to edit it: https://glitch.com/edit/#!/vaadin-date-picker-issue -->
 
 ### Steps to reproduce
 <!-- Example
@@ -23,6 +23,5 @@
 - [ ] Firefox
 - [ ] Safari
 - [ ] Edge
-- [ ] IE 11
 - [ ] iOS Safari
 - [ ] Android Chrome

.github/workflows/sauce.yml

@@ -0,0 +1,40 @@
+name: sauce
+
+on: [push]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: SauceLabs tests
+      env:
+        SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+        SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+      run: npm run test:sauce
+
+  visual-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Visual tests
+      env:
+        SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+        SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+      run: npm run test:visual

.github/workflows/tests.yml

@@ -0,0 +1,43 @@
+name: tests
+
+on: [pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Check version
+      run: npm run check-version
+
+    - name: Lint JavaScript
+      run: npm run lint:js
+
+    - name: Lint CSS
+      run: npm run lint:css
+
+    - name: Lint typings
+      run: npm run lint:types
+
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Unit tests
+      run: npm test

.hermione.conf.js

@@ -0,0 +1,21 @@
+module.exports = {
+  browsers: {
+    chrome: {
+      baseUrl: 'http://localhost:8080/test/visual/',
+      screenshotsDir: () => 'test/visual/screens/vaadin-date-picker',
+      desiredCapabilities: {
+        browserName: 'chrome',
+        version: '85.0',
+        platform: 'Windows 10'
+      }
+    }
+  },
+  plugins: {
+    'hermione-esm': {
+      port: 8080
+    },
+    'hermione-sauce': {
+      verbose: false
+    }
+  }
+};

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none"
+}

README.md

@@ -1,5 +1,4 @@
 [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-date-picker)](https://www.npmjs.com/package/@vaadin/vaadin-date-picker)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-date-picker)](https://github.com/vaadin/vaadin-date-picker/releases)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-date-picker)
 [![Build Status](https://travis-ci.org/vaadin/vaadin-date-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-date-picker)
 [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-date-picker/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-date-picker?branch=master)
@@ -16,17 +15,6 @@
 
 [<vaadin-date-picker>](https://vaadin.com/components/vaadin-date-picker) is a Web Component providing a date selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
 
-<!--
-```
-<custom-element-demo height="550">
-  <template>
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="vaadin-date-picker.html">
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
-```
--->
 ```html
 <vaadin-date-picker label="Label" placeholder="Placeholder">
 </vaadin-date-picker>
@@ -36,28 +24,6 @@
 
 ## Installation
 
-The Vaadin components are distributed as Bower and npm packages.
-Please note that the version range is the same, as the API has not changed.
-You should not mix Bower and npm versions in the same application, though.
-
-Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
-are only published on npm, not pushed to GitHub repositories.
-
-### Polymer 2 and HTML Imports Compatible Version
-
-Install `vaadin-date-picker`:
-
-```sh
-bower i vaadin/vaadin-date-picker --save
-```
-
-Once installed, import it in your application:
-
-```html
-<link rel="import" href="bower_components/vaadin-date-picker/vaadin-date-picker.html">
-```
-### Polymer 3 and ES Modules Compatible Version
-
 Install `vaadin-date-picker`:
 
 ```sh
@@ -80,45 +46,49 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-date-picker.html`  
-  `theme/lumo/vaadin-date-picker-light.html`
+  `theme/lumo/vaadin-date-picker.js`
+  `theme/lumo/vaadin-date-picker-light.js`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-date-picker.html`  
-  `theme/material/vaadin-date-picker-light.html`
+  `theme/material/vaadin-date-picker.js`
+  `theme/material/vaadin-date-picker-light.js`
 
-- Alias for `theme/lumo/vaadin-date-picker.html`  
-  `theme/lumo/vaadin-date-picker-light.html`:
+- Alias for `theme/lumo/vaadin-date-picker.js`
+  `theme/lumo/vaadin-date-picker-light.js`:
 
-  `vaadin-date-picker.html`  
-  `vaadin-date-picker-light.html`
+  `vaadin-date-picker.js`
+  `vaadin-date-picker-light.js`
 
 
-## Running demos and tests in a browser
+## Running APi docs and tests in a browser
 
 1. Fork the `vaadin-date-picker` repository and clone it locally.
 
-1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
+1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
 
-1. When in the `vaadin-date-picker` directory, run `npm install` and then `bower install` to install dependencies.
+1. Make sure you have [npm](https://www.npmjs.com/) installed.
 
-1. Run `npm start`, browser will automatically open the component API documentation.
+1. When in the `vaadin-date-picker` directory, run `npm install` to install dependencies.
 
-1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
+1. Run `npm start`, browser will automatically open the component API documentation.
 
-  - http://127.0.0.1:3000/components/vaadin-date-picker/demo
-  - http://127.0.0.1:3000/components/vaadin-date-picker/test
+1. You can also open visual tests, for example:
 
+  - http://127.0.0.1:3000/test/visual/default.html
 
 ## Running tests from the command line
 
-1. When in the `vaadin-date-picker` directory, run `polymer test`
+1. When in the `vaadin-date-picker` directory, run `npm test`
+
+## Debugging tests in the browser
+
+1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
 
 
 ## Following the coding style
 
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
+We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
 
 
 ## Big Thanks