feat!: convert to Polymer 3, add events type definitions (#234)

Co-authored-by: Tomi Virkki <virkki@vaadin.com>

.eslintrc.json

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

.github/ISSUE_TEMPLATE.md

@@ -1,40 +1,34 @@
 ### Description
-<!-- Example: Error thrown when calling `appendChild` on Vaadin element -->
+<!-- Example: The `vaadin-select` element does not open when the input is clicked. -->
 
 #### Live Demo
 <!-- Click "Remix This" and edit -- must be logged in to persist! -->
-https://glitch.com/edit/#!/rhetorical-oil
+https://glitch.com/edit/#!/vaadin-select-renderer
 <!-- ...or provide your own repro URL -->
 
 #### Steps to Reproduce
-<!--
-Example:
-
-1. Create `vaadin-select`
-2. Append `vaadin-select` to document.body
-3. Create `div`.
-4. Append `div` to `vaadin-select`
+<!-- Example
+1. Put a `vaadin-select` element in the page.
+3. Click the `vaadin-select` element.
 -->
 
-
 #### Expected Results
-<!-- Example: No error is throw -->
+<!-- Example: Overlay should appear when `vaadin-select` is clicked. -->
 
 #### Actual Results
-<!-- Example: Error is thrown -->
+<!-- Example: Overlay stays hidden. -->
 
 ### Browsers Affected
 <!-- Check all that apply -->
 - [ ] Chrome
 - [ ] Firefox
+- [ ] Safari
 - [ ] Edge
-- [ ] Safari 9
-- [ ] Safari 8
-- [ ] IE 11
+- [ ] iOS Safari
+- [ ] Android Chrome
 
-### Versions
+### Version
 <!--
-`bower ls` or `npm ls` will show the version of webcomponents.js or webcomponents-lite.js
+`$ npm ls | grep @vaadin` will show the version of the components.
 -->
 - vaadin-select: vX.X.X
-- webcomponents: vX.X.X

.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-select',
+      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"
+}